Possible to override a style just for Desktop output?
Moderators: Alexander Halser, Tim Green
-
- Posts: 151
- Joined: Thu Dec 24, 2009 8:41 pm
- Contact:
Possible to override a style just for Desktop output?
I have a couple paragraph styles (for large titles) which look fine on smartphone output, but I would like to display them at a narrower paragraph width in desktop output, because they sprawl across the entire width of the WebHelp document.
I see the styles in hmprojectstyles.css, but where/how can I override those styles (for instance, I could apply a 'max-width' setting in pixels or rems which would apply to all three kinds of responsive viewing, to limit the width when viewed on a desktop).
Or is there a better approach? I don't see any way to do that with tables without also modifying the .CSS for a table style.
I see the styles in hmprojectstyles.css, but where/how can I override those styles (for instance, I could apply a 'max-width' setting in pixels or rems which would apply to all three kinds of responsive viewing, to limit the width when viewed on a desktop).
Or is there a better approach? I don't see any way to do that with tables without also modifying the .CSS for a table style.
- Tim Green
- Site Admin
- Posts: 23184
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Possible to override a style just for Desktop output?
Hi Mark,
This isn't possible directly in the project stylesheet because Help & Manual itself doesn't have the ability to distinguish between these devices in its stiles. However, the device stylesheets are loaded after the project stylesheet. This means that if you add your own modifications to the appropriate device stylesheets it will change that style only on that device type. So if you add the modified attributes for the style you want to change to hmwebhelp_main_desktop.css, Then that style will only be changed in desktop browsers, because only that stylesheet is used when a desktop browser is encountered.
You need to look for the styles you want to change in hmprojectstyles.css and then add the changes to the desktop stylesheet. Note that there are two sets of rules for each style, one for the paragraph attributes and one for the text attributes. You only need to use the attributes that you want to change in the versions of the rules you add to the desktop style sheet.
This isn't possible directly in the project stylesheet because Help & Manual itself doesn't have the ability to distinguish between these devices in its stiles. However, the device stylesheets are loaded after the project stylesheet. This means that if you add your own modifications to the appropriate device stylesheets it will change that style only on that device type. So if you add the modified attributes for the style you want to change to hmwebhelp_main_desktop.css, Then that style will only be changed in desktop browsers, because only that stylesheet is used when a desktop browser is encountered.
You need to look for the styles you want to change in hmprojectstyles.css and then add the changes to the desktop stylesheet. Note that there are two sets of rules for each style, one for the paragraph attributes and one for the text attributes. You only need to use the attributes that you want to change in the versions of the rules you add to the desktop style sheet.
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
- Martin Wynne
- Posts: 2656
- Joined: Mon May 12, 2003 3:21 pm
- Location: West of the Severn, UK
Re: Possible to override a style just for Desktop output?
Hi Mark,Mark Wilsdorf wrote:I have a couple paragraph styles (for large titles) which look fine on smartphone output, but I would like to display them at a narrower paragraph width in desktop output, because they sprawl across the entire width of the WebHelp document.
I see the styles in hmprojectstyles.css, but where/how can I override those styles (for instance, I could apply a 'max-width' setting in pixels or rems which would apply to all three kinds of responsive viewing, to limit the width when viewed on a desktop).
Using the PP Toolbox, you can change the styles for the desktop only in the hmwebhelp_main_desktop.css , which is listed in the Baggage Files.
For example, if you have a style called topstuff, you could add to the file something like:
div.p_topstuff { max-width:50% !important; }
or
p.p_topstuff { max-width:50% !important; }
To change the font colour, you might want:
span.f_topstuff { color:#ff0000 !important; }
Have a look in the desktop page source to see exactly what you need to change.
The !important setting makes sure this setting overrides your original style setting.
edit: beaten to it by Tim.
regards,
Martin.
-
- Posts: 151
- Joined: Thu Dec 24, 2009 8:41 pm
- Contact:
Re: Possible to override a style just for Desktop output?
I have beaten my head against this for a couple hours, and cannot find a way to set a max-width for a paragraph of centered text and get HTML that is centered.
The style instruction below, added to hmwebhelp_main_desktop.css does properly set the max-width for the paragraph in question. That is, the paragraph is constrained to 60% of the page width.
But then the paragraph is not centered! In the resulting HTML I get:
Now if I remove style="margin: 1.1549rem 0px 0px 0px;" from the output HTML shown above, and refresh the browser page, the text does get displayed properly centered and width constrained (works the same in Firefox, Chrome, and IE).
I've tried inserting <div> tags before/after the paragraph, in the paragraph, and a lot of other things. None was worked.
Any ideas? I really don't want to specify an absolute width, and when I did, as follows, I still got flush-left text, not centered.
Here is the HTML that resulted:
As before, removing the style="line-height: 1.20; margin: 0px 0px 0px 0px;" specification from the <p> tag gave me centered text.
The style instruction below, added to hmwebhelp_main_desktop.css does properly set the max-width for the paragraph in question. That is, the paragraph is constrained to 60% of the page width.
Code: Select all
.p_BookTitle {
max-width: 60%;
}
Code: Select all
<p class="p_BookTitle" style="margin: 1.1549rem 0px 0px 0px;"><span class="f_BookTitle">Using QuickBooks from Anywhere:</span></p>
I've tried inserting <div> tags before/after the paragraph, in the paragraph, and a lot of other things. None was worked.
Any ideas? I really don't want to specify an absolute width, and when I did, as follows, I still got flush-left text, not centered.
Code: Select all
.p_BookTitle {
width: 400px;
margin-left: auto;
margin-right: auto;
}
Code: Select all
<p class="p_BookTitle" style="line-height: 1.20; margin: 0px 0px 0px 0px;"><span class="f_BookTitle">Using QuickBooks from Anywhere:</span></p>
- Martin Wynne
- Posts: 2656
- Joined: Mon May 12, 2003 3:21 pm
- Location: West of the Severn, UK
Re: Possible to override a style just for Desktop output?
Hi Mark,
Try:
The !important setting prevents other later settings overriding it.
You could also try
regards,
Martin.
Try:
Code: Select all
p.p_BookTitle { max-width: 60%; margin:0px 0px 0px 0px !important; }
You could also try
Code: Select all
p.p_BookTitle { text-align:center; margin:0px 0px 0px 0px !important; }
Martin.
-
- Posts: 151
- Joined: Thu Dec 24, 2009 8:41 pm
- Contact:
Re: Possible to override a style just for Desktop output?
Thanks Martin, but the result of both of those is the same as above...the extra Style="..." attribute in the <p> tag seems to override all else.
I suppose this simply relates to how H&M generates the output HTML; not likely I can affect it via .CSS.
I suppose this simply relates to how H&M generates the output HTML; not likely I can affect it via .CSS.
- Martin Wynne
- Posts: 2656
- Joined: Mon May 12, 2003 3:21 pm
- Location: West of the Severn, UK
Re: Possible to override a style just for Desktop output?
Hi Mark,Mark Wilsdorf wrote:Thanks Martin, but the result of both of those is the same as above...the extra Style="..." attribute in the <p> tag seems to override all else.
I suppose this simply relates to how H&M generates the output HTML; not likely I can affect it via .CSS.
Are you sure you got the !important syntax right? -- no semi-colon after 0px
What are your actual BookTitle style settings in H&M? It may be better to set what you want for the desktop, and modify it for phone and tablet.
If all else fails, you can write some javascript to modify the style after the page has loaded.
Martin.
-
- Posts: 151
- Joined: Thu Dec 24, 2009 8:41 pm
- Contact:
Re: Possible to override a style just for Desktop output?
Thanks bunches Martin...
Your comment about the !Important syntax caused me to think more about the margin settings. I ended up trying a combination I had not tried since moving the text out of a full-width table:
.p_BookTitle {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
(And I didn't end up needing !important)...it works great.
I had also considered what you mentioned about leaving the desktop formatting alone and going for changes in the smartphone & tablet output. Glad I won't have to now; this will be cleaner in terms of page development, I think.
By the way, I have a test page which will be up (briefly) here if you want to see: http://www.goflagship.com/hm/index.html
...the main title and subtitle are limited to 70% of the available width between margins.
Thanks again for your (and Tim's) help.
Your comment about the !Important syntax caused me to think more about the margin settings. I ended up trying a combination I had not tried since moving the text out of a full-width table:
.p_BookTitle {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
(And I didn't end up needing !important)...it works great.
I had also considered what you mentioned about leaving the desktop formatting alone and going for changes in the smartphone & tablet output. Glad I won't have to now; this will be cleaner in terms of page development, I think.
By the way, I have a test page which will be up (briefly) here if you want to see: http://www.goflagship.com/hm/index.html
...the main title and subtitle are limited to 70% of the available width between margins.
Thanks again for your (and Tim's) help.