Page margins (white space) in Webhelp output with PP skins

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
User avatar
Ed Hawco
Posts: 165
Joined: Thu Nov 07, 2013 5:50 pm
Location: Montreal
Contact:

Page margins (white space) in Webhelp output with PP skins

Unread post by Ed Hawco »

Hello. I'm using the PP v3 skins, primarily for webhelp. I'd like to see more white space (left and right margins) on the page, as I think it helps the page look cleaner and easier to read. The skins and their CSS files are pretty complex, so I'm guessing it can't be done easily. For example, I found the div#hmpagebody item in the hmwebhelp_main_desktop.css file, but "margin" is set to "0" and flagged with "!important!" so I'm guessing that's a no-fly zone.

Am I missing something? Is there a relatively easy and safe way to increase margins? See images below for examples of actual and (faked) preferred.

Image

Image
e
d
============================================
Ed Hawco
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Page margins (white space) in Webhelp output with PP ski

Unread post by Tim Green »

Hi Ed,

Nobody's asked about this before and I never expected it to come up so there's no config variable for it. It's quite easy to change, however. Edit the hmwebhelp_main_desktop.css and hmwebhelp_main_tablet.css files and look for the div#hmpagebody_scroller definition. The left and right margins are the second and fourth padding: values. These must be in rems, so don't change that, and also don't change the top and bottom padding values as that might interfere with some dimension calculations.

The standard desktop version looks like this:

Code: Select all

div#hmpagebody_scroller {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	padding: 0.313rem 0.5rem 0.313rem 0.5rem;
	overflow-y: scroll;
	overflow-x: auto;
}
Don't try to add additional margins in the phone version. That uses a different layout and needs all the space it can get. :)
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: Page margins (white space) in Webhelp output with PP ski

Unread post by Martin Wynne »

Hi Ed,

Don't forget also that you can add left and right indentations in your style paragraph settings. Which gives you a bit more control because you can extend to the full page width in places if you need to.

cheers,

Martin.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Page margins (white space) in Webhelp output with PP ski

Unread post by Tim Green »

Martin Wynne wrote:Don't forget also that you can add left and right indentations in your style paragraph settings. Which gives you a bit more control because you can extend to the full page width in places if you need to.
Note, however, that while doing this for individual paragraphs and passages is OK, doing it for everything on the page to achieve "margins" is generally a bad idea. It will almost always conflict with your layout in some output format other than the one you are considering when you create the indents. The basic principle of Help+Manual is that you DON'T edit margins inside the topic editor, because every output format can and usually will require different margins. Topic content created in Help+Manual is fluid and is poured into the margins defined in the individual output skins and templates when you publish. :)
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
Ed Hawco
Posts: 165
Joined: Thu Nov 07, 2013 5:50 pm
Location: Montreal
Contact:

Re: Page margins (white space) in Webhelp output with PP ski

Unread post by Ed Hawco »

Thanks, that worked well (modifying the padding in the hmwebhelp_main_desktop.css and hmwebhelp_main_tablet.css files).
e
d
============================================
Ed Hawco
Rainer Oehry
Posts: 102
Joined: Sun Dec 10, 2017 12:47 pm

Re: Page margins (white space) in Webhelp output with PP ski

Unread post by Rainer Oehry »

Hi Tim,

PMFJI:

I am experimenting a little with a more "integrated" design, meaning no borders around the menu on the left side and the content on the right.
  • Is it possible to modify the size of the vertical margin between the menu and the content?
  • Can I get rid of the borders around the two frames, or can I modify their appearance (modifying their width, or setting their color to the color of the background …)?
I haven’t found the answers in the PP help. If I missed them, could you please just point me to the relevant topic?

Thank you.
Regards,

Rainer
Head of Technical Writing & Knowledge Management
TIG Technische Informationssysteme GmbH, Rankweil, Austria
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Page margins (white space) in Webhelp output with PP ski

Unread post by Tim Green »

Hi Rainer,
Is it possible to modify the size of the vertical margin between the menu and the content?
Not for any practical purposes. That is a highly active zone that controls dragging and opening and closing of the navigation pane and the topic area and all its internal dimensions participate in the animations. Theoretically
it would be possible, but not without hours of adjustment and testing. Better to leave it alone.
Can I get rid of the borders around the two frames, or can I modify their appearance (modifying their width, or setting their color to the color of the background …)?
Yes, if you're careful. You will need to do separate editing for the Desktop, Tablet and Phone versions, because different CSS files are loaded depending on device type. The corresponding files in the baggage are hmwebhelp_main_xxx.css, where the xxx is either "desktop", "tablet" or "phone". The section with those borders is under the heading /* Navigation Panes */.

If you want to remove borders set their border color to "transparent" instead of their width to 0. That avoids conflict with the animations. I advise against changing border widths, as that may cause problems.
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.
Rainer Oehry
Posts: 102
Joined: Sun Dec 10, 2017 12:47 pm

Re: Page margins (white space) in Webhelp output with PP ski

Unread post by Rainer Oehry »

Thank you so much, Tim.

I will try to carefully follow your suggestions :)
Regards,

Rainer
Head of Technical Writing & Knowledge Management
TIG Technische Informationssysteme GmbH, Rankweil, Austria
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Page margins (white space) in Webhelp output with PP ski

Unread post by Tim Green »

Hi Rainer,

You're welcome. In the next major version I'm adding a lot more editable color variables so that you don't need to go into the code. In addition to this Toolbox will have variable type filtering, so that you can only edit color variables, or only layout setting variables and so on. And you will be able to group color variables of the same color, so that changing one changes all of them at the same time. This is more flexible than preset groups, allowing you to choose whether a set of elements should all be the same color or not, as you can choose which elements should be in which groups. Some elements will also support optionally defining rgba background colors with transparency. Finally, there will also be a color picker that automatically shows the current "color scheme" in the skin -- i.e. a sorted group of all the currently used colors. 8)
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.
Rainer Oehry
Posts: 102
Joined: Sun Dec 10, 2017 12:47 pm

Re: Page margins (white space) in Webhelp output with PP ski

Unread post by Rainer Oehry »

Tim,

please let me add one more general question:

We need to provide some content over the web only. There will be definitely no need for other formats like PDF, so this powerful multi-output option of H&M will not be a criterion. And the content will be totally static.

It would be nice, though, if we were more flexible regarding the look of the final result in the browser. Someone suggested not using H&M at all for this, but using a web design software like Sitebuilder instead, others suggested using wordpress, mainly because of the huge amount of themes/design options that are readily available for such platforms. But they don’t have the flexibility and the powerful functions of H&M like Master/Child-projects, repositories, snippets, build conditions etc. that I am used to from H&M, and it would be more difficult to share content between the new system and the existing H&M content for the other publication channels.

It is probably a silly question, because if this was possible there would be no need for you to put that much effort into creating your own H&M themes for Web publishing, but I’ll ask anyway: is it possible—with a reasonable effort of course—to "adapt" existing "themes" (collections of HTML/CSS/JS templates) to the necessities of H&M, so that they can be used to publish H&M content for the Web?
Regards,

Rainer
Head of Technical Writing & Knowledge Management
TIG Technische Informationssysteme GmbH, Rankweil, Austria
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Page margins (white space) in Webhelp output with PP ski

Unread post by Tim Green »

Rainer Oehry wrote:It is probably a silly question, because if this was possible there would be no need for you to put that much effort into creating your own H&M themes for Web publishing, but I’ll ask anyway: is it possible—with a reasonable effort of course—to "adapt" existing "themes" (collections of HTML/CSS/JS templates) to the necessities of H&M, so that they can be used to publish H&M content for the Web?
Unfortunately not, because the structure of WebHelp has very special requirements and is quite different from WordPress (which is PHP-based) and also from any normal web page. The problem with WebHelp is that a single page has to accommodate a huge amount of data and still provide acceptable performance.

The TOC and keyword index can each contain thousands of entries, for example. A normal page would reload those every time you change a topic, which would make the pages pretty much unusable. So WebHelp has to use special structures so that only the content the user wants to change gets reloaded when they move to a different topic. This is particularly efficient in V3 skins -- that is why topics load so fast there.

However, there is no WebHelp "standard", just as there is no standard for any other content management systems. There are lots of WordPress templates because WordPress has become a standard of its own, but you can only use WordPress templates for it. You couldn't use a Joomla or Drupal or SquareSpace template for WordPress, for example -- that would be like trying to "use" Mandarin Chinese for communicating in Iceland because Mandarin and Icelandic are both languages... :?
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.
Post Reply