Possible to override a style just for Desktop output?

This forum is for discussions on the Help & Manual Premium Pack and the Premium Pack Toolbox configuration utility introduced with Premium Pack 3

Moderators: Alexander Halser, Tim Green

Post Reply
Mark Wilsdorf
Posts: 151
Joined: Thu Dec 24, 2009 8:41 pm
Contact:

Possible to override a style just for Desktop output?

Unread post by Mark Wilsdorf »

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.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Possible to override a style just for Desktop output?

Unread post by Tim Green »

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.
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.
User avatar
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?

Unread post by Martin Wynne »

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).
Hi Mark,

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.
Mark Wilsdorf
Posts: 151
Joined: Thu Dec 24, 2009 8:41 pm
Contact:

Re: Possible to override a style just for Desktop output?

Unread post by Mark Wilsdorf »

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.

Code: Select all

.p_BookTitle {
  max-width: 60%;
}
But then the paragraph is not centered! In the resulting HTML I get:

Code: Select all

<p class="p_BookTitle" style="margin: 1.1549rem 0px 0px 0px;"><span class="f_BookTitle">Using QuickBooks from Anywhere:</span></p>
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.

Code: Select all

.p_BookTitle {
  width: 400px;
  margin-left: auto; 
  margin-right: auto;
}
Here is the HTML that resulted:

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>
As before, removing the style="line-height: 1.20; margin: 0px 0px 0px 0px;" specification from the <p> tag gave me centered text.
User avatar
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?

Unread post by Martin Wynne »

Hi Mark,

Try:

Code: Select all

p.p_BookTitle { max-width: 60%; margin:0px 0px 0px 0px !important; }
The !important setting prevents other later settings overriding it.

You could also try

Code: Select all

p.p_BookTitle { text-align:center; margin:0px 0px 0px 0px !important; }
regards,

Martin.
Mark Wilsdorf
Posts: 151
Joined: Thu Dec 24, 2009 8:41 pm
Contact:

Re: Possible to override a style just for Desktop output?

Unread post by Mark Wilsdorf »

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.
User avatar
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?

Unread post by Martin Wynne »

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.
Hi Mark,

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.
Mark Wilsdorf
Posts: 151
Joined: Thu Dec 24, 2009 8:41 pm
Contact:

Re: Possible to override a style just for Desktop output?

Unread post by Mark Wilsdorf »

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.
Post Reply