2 TOC questions - WebHelp (Visual emphasis & expand all)

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

Moderators: Alexander Halser, Tim Green

Post Reply
Dave Gehman
Posts: 575
Joined: Sat Sep 23, 2017 9:05 pm

2 TOC questions - WebHelp (Visual emphasis & expand all)

Unread post by Dave Gehman »

First:
Is there a way to decorate the table of contents in WebHelp? By "decorate," I mean: offer a visual way to grasp the hierarchy of the TOC - immediately see what's a main topic, what are sub-topics. (I realize lower-level topics are indented, but I'd like more).

Possibly: (a) make top-level topic fonts larger & bolder; or (b) set top-level topics in a color different from the lower-level topics; or (c) include a sprite or icon in the top-levels? Yes, I know the selected topic is reversed on a white background, but I'd like more.

Right now, the only way is to look at the [+] or [-] along the left-most column.

Second:
Is there a way for viewers to expand all topics in the TOC?

Objective: We're trying to make a sort of 3-in-1 WebHelp mini-site, where the TOC gives viewers a clear picture of where they are - and what topics are available among all the 2nd-level topics.

In the following, the 3 top-level chapters are
1. [Software title] UI and Concepts
2. A specific self-training module
3. Software syntax / keyword reference / code snippets

Below, the viewer has expanded the tree under the self-help section - I'd like the viewer to also see the subordinate topics under [Software] title & UI -- and maybe even those in the Reference section. (Why? Imagine that the viewer has reached a stuck-point in the self-training that has to do with the UI. I'd like the viewer to be able to see the UI-related topics under the first main topic around the UI and concepts, so that the viewer could jump right to the relevant UI-related topic):
Image
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: 2 TOC questions - WebHelp (Visual emphasis & expand all)

Unread post by Martin Wynne »

Hi Dave,

Yes, you can change the CSS for the TOC in the TOC template. Each level can be in a different colour, font, coloured background, etc. Under Configuration > Publishing Options > Webhelp > Table of Contents.

Yes, under Configuration > Publishing Options > Webhelp > Navigation tick On load, expand... > All entries.

Probably in the skin, if using one.

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

Re: 2 TOC questions - WebHelp (Visual emphasis & expand all)

Unread post by Tim Green »

Dave Gehman wrote:Is there a way to decorate the table of contents in WebHelp? By "decorate," I mean: offer a visual way to grasp the hierarchy of the TOC - immediately see what's a main topic, what are sub-topics. (I realize lower-level topics are indented, but I'd like more).

Not with normal configuration options, but you can do anything you like with the CSS.
Possibly: (a) make top-level topic fonts larger & bolder; or (b) set top-level topics in a color different from the lower-level topics; or (c) include a sprite or icon in the top-levels? Yes, I know the selected topic is reversed on a white background, but I'd like more.
Just edit the CSS for the topic levels between the two /* TOC LIST CSS */ comments in the three hmwebhelp_toc_xxx.css files in the bagagge, where the xxx stands for the desktop, tablet and phone versions. There are separate definitions for each of 7 levels.

On the sprites question: You can't change that as the icons used on each level are generated by Help+Manual when the raw code for the TOC is published and you can't edit that. At the moment the CSS is set up for the three SVG icons used. If you switch to using the icons listed in the TOC in Help+Manual you will need to adjust the CSS for them, and they will be PNG icons, not SVG. You can make the switch in Toolbox in the HTML Options section by changing the Default TOC Icons setting from 0 to 1.

You can then select alternative icons for the TOC by right-clicking on a TOC entry in Help & Manual and selecting "Change Icon". The icons you select there will be used as shown in WebHelp (if your project or skin has not set custom icons for WebHelp). In CHM the standard icons used by the Microsoft CHM viewer cannot be changed, and the equivalent CHM viewer icons will be used. Microsoft originally promised that custom icons would be supported, but that promise was made when the CHM system was released with Windows 98 and nothing has come of it yet...

You can't actually replace the icons in the selection list but you can replace them with your own icons in your WebHelp output by adding alternative icons with the correct names to your Baggage in your project or skin. (Note again that your custom icons cannot used in CHM output because the Microsoft CHM viewer only supports its own standard set of icons and nothing else.)

First check that the custom icons option for WebHelp is switched OFF, otherwise you will only get the three custom icons defined there for closed book, open book and topic. If you are editing the skin in Help+Manual instead of Toobox the setting is in Project Explorer > Configuration> Publishing Options > WebHelp > Navigation.

To replace the icons you simply need to know that the icons displayed in the selection list are numbered from top to bottom and left to right, and that the icon files are called "ciconx.png", where x is the number of the icon. So to replace icon no. 7 you would use a file called "cicon7.png".

To replace the icons simply create your own icon files and call them cicon1.png, cicon2.png, cicon3.png and so on, and add these files to the Baggage Files section of your project or your .hmskin file. These files will then overwrite the ones generated by Help & Manual when you publish your WebHelp, thus replacing them.
Is there a way for viewers to expand all topics in the TOC?
No, and that is by design in the V3 skins. The HTML for the visible TOC is generated on the fly from a compressed JSON source when they are displayed. The non-visible parts of the TOC do not actually exist in the DOM, and when you close a chapter they are deleted. This makes it possible to manage much larger TOCs efficiently on mobile devices (and generally) so long as you have multiple top-level chapters in your WebHelp.

We may add an option to do this differently in a later version but at the moment it is not possible. It would also be necessary to only support this on desktop browsers, because by definition it would send browsers on many mobile devices to their knees at the moment.
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.
Dave Gehman
Posts: 575
Joined: Sat Sep 23, 2017 9:05 pm

Re: 2 TOC questions - WebHelp (Visual emphasis & expand all)

Unread post by Dave Gehman »

Whoa. I take it the answer to each is "well, yes and no."

Interesting to see the engineering behind the TOC. I was unaware of all the ramifications. Thanks to both of you for the quick and comprehensive reply.

The sprite/icon bit looks very promising and I'll be experimenting - on a copy of the V3 skin, of course.

RE: expand all. It would be nice to have this feature, but I see the difficulties in making it happen. And I have to admit that I was thinking of desktop, forgetting the mobile side of deployment - a major lapse.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: 2 TOC questions - WebHelp (Visual emphasis & expand all)

Unread post by Tim Green »

Dave Gehman wrote:Interesting to see the engineering behind the TOC. I was unaware of all the ramifications.
The same principles are also used when browsing topics: Every single topic HTML page actually contains the entire layout, including the iFrame containers for the TOC, index and search. No matter which topic the user starts on, that becomes their "host" page. When they browse within the WebHelp, no new HTML pages are opened. Instead, the content <div> on the page is replaced on the fly with an exact copy of the content from a JSON file. This is much, much faster than having to load an entire HTML file with all its components -- around 15-100ms versus up to a couple of seconds for regular HTML.
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