Adjust Tab Layout

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
User avatar
DNH
Posts: 25
Joined: Mon Oct 11, 2010 8:41 am
Location: Hsintien, Taiwan (新店市台灣)

Adjust Tab Layout

Unread post by DNH »

Hello,
I have the Premium 4.4 update installed and am trying to update Minimalist_Standard_WebHelp.hmskin.

I'd like to adjust the layout of the entire navigation area, starting with the tabs.
original.jpg
I'd like to move the tabs left to align with the left edge, and then add another non active tab (for lack of a better term) so that it extends to the right edge.
updated.jpg
I believe I am in the right area of the HTML in the skin file:

<nav id="navpane_tabs">
<ul id="topictabs" class="tabs">
<li id="contentstab" class="hmtabs current" title="<%TABTEXT_TOCTABTIP%>"><a id="contentstablink" title="<%TABTEXT_TOCTAB%>" href="<%HREF_CONTENT_PAGE%>"><svg class="tocicon" viewBox="0 0 30 32"><use xlink:href="#th-list"></use></svg></a></li><IF_INDEX_PAGE>
<li id="indextab" class="hmtabs" title="<%TABTEXT_INDEXTABTIP%>"><a id="indextablink" title="<%TABTEXT_INDEXTAB%>" href="<%HREF_INDEX_PAGE%>"><svg class="tocicon" viewBox="0 0 30 32"><use xlink:href="#key-inv"></use></svg></a></li></IF_INDEX_PAGE><IF_SEARCH_PAGE>
<li id="searchtab" class="hmtabs" title="<%TABTEXT_SEARCHTABTIP%>"><a id="searchtablink" title="<%TABTEXT_SEARCHTAB%>" href="<%HREF_SEARCH_PAGE%>"><svg class="tocicon" viewBox="0 0 30 32"><use xlink:href="#search"></use></svg></a></li></IF_SEARCH_PAGE>
</ul>

Or is this done in </div><!-- navwrapper --> ?

I eventually will want to remove the space between the nav area and content area, but am sure (I hope) can figure that out later.

Let me know if you can assist
Dave
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23157
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Adjust Tab Layout

Unread post by Tim Green »

Hi Dave,
I'd like to adjust the layout of the entire navigation area, starting with the tabs.
The only thing you can reasonably achieve here is to move the tab block to the left margin. To do this, edit the hmwebhelp_main_desktop.css and hmwebhelp_main_tablet.css files. Locate this block of code:

Code: Select all

ul.tabs {
	display: inline-block;
	list-style:none;
	margin-left: 10px;
	white-space: nowrap;
	font-size: 1.5rem;
	}
Then just change the margin-left value from 10px to 0.

Your dummy tab idea isn't reasonably possible in this layout because of the dynamic nature of everything. You could add one, but since the minimum width of the navigation pane is calculated on the basis of the tab block width, your navigation pane will just regrow automatically to be wider than the tab block width. It would be possible to change that by recoding, but that would really be a lot of work and testing and would cut you off from future updates to the skin.
I eventually will want to remove the space between the nav area and content area, but am sure (I hope) can figure that out later.
That would require major reprogramming and re-coding on several levels, because it would screw up the handling of the resizing of the TOC and topic panes in relation to each other. There is an invisible grab area between the two panes, and its size and stacking levels and many other factors are all intimately connected to how the scripts work and how the resizing and animation is handled.

I'm currently working on a completely new base layout for a new set of skins to be included in the next major update, and among other things it has no space between the navigation and topic panes. It also eliminates the tabs completely, along with the keyword index, which is really redundant now. Getting the new splitter between the panes working cleanly in all browsers was several full days' work. Here's an early alpha screenshot (the entire main page header is still just a placeholder and will change completely):

2022-03-02_09-00-33.png
You do not have the required permissions to view the files attached to this post.
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: Adjust Tab Layout

Unread post by DNH »

Hi Tim,
Oh my...it is like you were reading my mind. That is almost the exact layout we want, and were thinking of dropping the Index from our help as well. The new search field is also exactly what I wanted!

Two questions:

1. It looks like the help content is in a table with three columns (two grey ones on either side). Am I right to assume that could be "easily" removed, i.e. just one column.

2. Is there an estimated time frame for the release of these new skins? I showed to my manager, and she was impressed and agreed it was closer to what we are looking for.

Dave
Tim Frost
Posts: 319
Joined: Mon Nov 22, 2004 11:45 pm

Re: Adjust Tab Layout

Unread post by Tim Frost »

I am interested to know why you think that the keyword index is redundant. We spend a lot of time on getting indexing right, and almost all of our keywords have a second index level which makes it immediately clear which instance of the keyword is the one that the user needs to select. This relevance cannot be possibly be achieved by opening a display of a long scrolling search list showing all occurrences of a word, showing only a few words of surrounding context. In addition many of the keywords we use name a concept, not necessarily a word that can be found in the corresponding topic.

I like the clean design of the new skins, but we will not be able to use them if they make it hard to access the index. The search box is something we try to educate customers not to use, simply because it is so poor at finding the relevant topic. That it is ever needed is an indicator of an inadequate index.
User avatar
Tim Green
Site Admin
Posts: 23157
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Adjust Tab Layout

Unread post by Tim Green »

DNH wrote: Wed Mar 02, 2022 9:44 am Hi Tim,
Oh my...it is like you were reading my mind. That is almost the exact layout we want, and were thinking of dropping the Index from our help as well. The new search field is also exactly what I wanted!

Wait till you see the new search in action: Clicking in the Search field switches the TOC pane to search, then there is a simple Back button to return to the TOC without clearing the Search results. 8)
1. It looks like the help content is in a table with three columns (two grey ones on either side). Am I right to assume that could be "easily" removed, i.e. just one column.
That's not three columns: The search can be set to have a maximum width. The grey on either side is just the background of the page when you expand beyond that. Both the background and the width will be configurable, of course.
2. Is there an estimated time frame for the release of these new skins? I showed to my manager, and she was impressed and agreed it was closer to what we are looking for.
It will be a little while, because it would be at the same time as the next major release of Help+Manual itself, and I can't comment on when that will be at the moment (but it will be this year). For the time being, I recommend using either the V4 Modern Flexible or V4 Modern Standard skins. The one you have chosen is V3 and not as advanced. :)
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
Tim Green
Site Admin
Posts: 23157
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Adjust Tab Layout

Unread post by Tim Green »

Tim Frost wrote: Wed Mar 02, 2022 10:25 am I am interested to know why you think that the keyword index is redundant. We spend a lot of time on getting indexing right, and almost all of our keywords have a second index level which makes it immediately clear which instance of the keyword is the one that the user needs to select.
Well basically, because it is redundant. Users don't really care how much time you spend getting the index right. They still don't use it. That being said, there will still be plenty of tabbed skins that support indexes, but this kind of layout wouldn't be able to, because it would require the re-introduction of tabs.
I like the clean design of the new skins, but we will not be able to use them if they make it hard to access the index. The search box is something we try to educate customers not to use, simply because it is so poor at finding the relevant topic. That it is ever needed is an indicator of an inadequate index.
I appreciate the sentiments, and you're right about how difficult it is to create a good index. Most authors don't want to spend any time at all on it and constantly write in asking for an "automated" index, which we would never provide because it would be useless by definition. The fact remains that people just don't use the index, no matter how good it is. You can thank Google for that.

There is an outside chance we might add some kind of option for accessing the index from the Search pane, once it is visible. I'll have to think about that -- but only if it is not too abjectly horrible. 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.
User avatar
DNH
Posts: 25
Joined: Mon Oct 11, 2010 8:41 am
Location: Hsintien, Taiwan (新店市台灣)

Re: Adjust Tab Layout

Unread post by DNH »

For the time being, I recommend using either the V4 Modern Flexible or V4 Modern Standard skins. The one you have chosen is V3 and not as advanced. :)
Hi Tim,

Thanks for the information. I look forward to the new release, because the layout is closer to what we are looking for.

In the meantime, I am playing with the format of the V4 Modern Standard skin. I see that I can enlarge the the nav tab icons in the toolbox. After doing this, I also need to adjust the height of the nav tabs, but I can't find this setting. Thought it might be NAVTABS_POS_DESK, but this does nothing. Is it possible to increase the tab height to match the icon size?
ChangeHeightNavTabs.jpg
Dave

P.S. In reference to the Index discussion, looking at our Google Analytics data, only about 7% of all users use the index, so we have decided to phase it out and have users focus more on searching. That is why that new layout seems ideal.
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23157
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Adjust Tab Layout

Unread post by Tim Green »

Hi Dave,

The size settings for the icons are just for fine tuning. That layout is not designed for giant icons like that and what you are doing here is really not an improvement. If you are determined you can find the settings you need in the TOC, Index & Search Tabs variables group. NAVTABS_POS_DESK adjusts the position of the tabs above the navigation pane, NAVTABS_TOPOFFSET_DESK adjusts the position in relation to the TOC pane. You can also find the font size settings in the same group.

TBH, I have no idea whether or not you can achieve what you want here, because the layout is not designed for this kind of extreme intervention, just for fine tuning. 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.
User avatar
DNH
Posts: 25
Joined: Mon Oct 11, 2010 8:41 am
Location: Hsintien, Taiwan (新店市台灣)

Re: Adjust Tab Layout

Unread post by DNH »

Thanks! As I said, I am just playing around with the formatting right now. I am thinking of using different icons maybe, so it would look different. But thanks for the helpful info, as usual!

Dave
Post Reply