Trying to Adjust Margin/Padding in Topic Pane

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

Moderators: Alexander Halser, Tim Green

Post Reply
User avatar
DNH
Posts: 25
Joined: Mon Oct 11, 2010 8:41 am
Location: Hsintien, Taiwan (新店市台灣)

Trying to Adjust Margin/Padding in Topic Pane

Unread post by DNH »

Hello,

I am editing the Modern_Standard_WebHelp.hmskin 4.4 skin. My PM would like the help topic content to have more space on the margins, i.e. to the right of the TOC and right side of the WebHelp window.

I found the code below in hmwebhelp_main_desktop.css, and almost got what I wanted by adjusting the "margin: 0" tag. But then there is a problem when the scrollbars show (yes I found where to make them auto appear only).

/* Topic Pane */
div#topicbox {
position: absolute;
background-color: transparent;
top: <%CALC(%HEADERBOX_TOP% + %HEADERBOX_HEIGHT%)%>rem;
right: 0; bottom: 0;
left: <%CALC(%NAVWIDTH% + 0.300)%>rem;
border: none;<IF_VAR[TOPICBORDER=true]>
border-left: thin solid <%GENERAL_BORDERCOLOR%>;</IF_VAR[TOPICBORDER=true]><IF_VAR[TOPICBORDER=false]>
border-left: thin solid transparent;</IF_VAR[TOPICBORDER=false]>
padding: 0; margin: 0;
z-index: 1;
}

Was hoping that adjusting the "padding" tag would be what I needed, as it seems to be (https://www.w3schools.com/css/css_padding.asp). But when I update as below, nothing changes in the formatting.

padding: 0px 35px 0px 10px; margin: 0;

Nothing changes at all if I do this as well:

padding: 50px

Please let me know if you have any suggestions.
Dave
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Trying to Adjust Margin/Padding in Topic Pane

Unread post by Tim Green »

Hi Dave,

You're focusing on items that are too "far away" from the actual topic content. The real content container is the div hmpagebody_scroller . You just need to adjust the padding for that to change the space around the actual topic content, and doing that then won't interfere with the rest of the layout.

Note also that there are three CSS files for each component, for the phone, tablet and desktop modes, which are loaded on demand based on the user's device type. So you will need to edit the settings in hmwebhelp_main_desktop.css, hmwebhelp_main_tablet.css and hmdesktop_main_phone.css if you want to adjust for all three device categories.
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
DNH
Posts: 25
Joined: Mon Oct 11, 2010 8:41 am
Location: Hsintien, Taiwan (新店市台灣)

Re: Trying to Adjust Margin/Padding in Topic Pane

Unread post by DNH »

Hi Tim,

As usual, thanks so much for the help. I really try and figure these tiny changes myself, but don't always have success.

I figured out how to increase the padding in the topic pane, and updated as:

div#hmpagebody_scroller {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;<IF_VAR[TOPICBORDER=true]>
padding: <%TOPIC_TOPMARGIN%>rem 50px 0px 10px;</IF_VAR[TOPICBORDER=true]><IF_VAR[TOPICBORDER=false]>
padding: <%TOPIC_TOPMARGIN%>rem 50px 0px 10px;</IF_VAR[TOPICBORDER=false]>
overflow-y: auto;
overflow-x: auto;
}

I now need to align the header, which I was hoping was one of the items under /* Header Area */, possibly this one:

h1.page_header {
font-family: <%HEADERTITLE_FONT_DESK%>;
color: <%HEADERTITLE_COLOR_DESK%>;
text-align: center;
font-size: <%HEADERTITLE_SIZE_DESK%>rem;
padding: 0.2rem 0.5rem;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

But no change to the header's padding, as you can see below.
headeroff.jpg
Any more help would be appreciated.
Dave
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Trying to Adjust Margin/Padding in Topic Pane

Unread post by Tim Green »

Hi Dave,

The h1.page_header rule is for the main header at the top of the page, not for the topic title. That is formatted by the p.topictitle rule.

The best way to locate things like this is to use Chrome or Edge or Firefox, then select the element you want to learn about, right-click and select "Inspect". That will give you a live view of the DOM (document object model, the current representation of the page in memory) and all the CSS that is responsible for each element. You can also make live changes to see what effect they have before you actually do any editing on the source.
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
DNH
Posts: 25
Joined: Mon Oct 11, 2010 8:41 am
Location: Hsintien, Taiwan (新店市台灣)

Re: Trying to Adjust Margin/Padding in Topic Pane

Unread post by DNH »

Hi Tim,

I realized after all this that updating the styles in the help project file was the easier way to go. I am happy that I went through all this to find the option to hide the scrollbar until they are needed in the skin file. :)

Thanks again for all the help. I finally got full approval for the updated layout.

Hopefully no more updates until we get a hold of your new skin templates in the next version: viewtopic.php?p=71086#p71086 :P

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

Re: Trying to Adjust Margin/Padding in Topic Pane

Unread post by Tim Green »

DNH wrote: Thu May 05, 2022 8:11 am I am happy that I went through all this to find the option to hide the scrollbar until they are needed in the skin file. :)
I would strongly recommend that you don't do that. The problem with only showing the scrollbar when it's needed in the main topic page is that it makes the entire layout jump when it appears, and that looks terrible. 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.
Post Reply