Formatting WebHelp TOC possible?

[Dave Gehman]

Other than ALL CAPS / all lowercase, are there ways to format the WebHelp TOC?

We'd like to add a background color or change the color of specific listings, if possible. Or include an icon the listings of certain topics.

[Tim Green]

Hi Dave,

You can't set colors or formatting for individual topic entries in the TOC. Those are formatted per level. However, you can set custom icons for individual topics in the TOC in your project in Help+Manual (right-click context menu). Then in the skin you go to Configuration > Publishing Options > Navigation and set the Icons in Table of Contents setting to the default icons shown at design time. However, if you do that in a V3 skin the icons will look fuzzy because they are now bitmap icons that are being resized, instead of scalable SVG icons. You can fix that as follows:

Edit the hmwebhelp_toc_desktop.css file in the baggage and locate this definition:

Code: Select all

ul#toc li > span {
   display: block;
   padding: 0.143rem 0.143rem 0.143rem 1.786rem;
   background-repeat: no-repeat;
   background-position: 0.5rem 0.1rem;
   background-size: 1.1rem;
   color: #444444;
     }

The colors and dimensions will differ depending on the skin you're using. Ignore those and just comment out the background-size line like this:

Code: Select all

ul#toc li > span {
   display: block;
   padding: 0.143rem 0.143rem 0.143rem 1.786rem;
   background-repeat: no-repeat;
   background-position: 0.5rem 0.1rem;
   /* background-size: 1.1rem; */
   color: #444444;
    }

Repeat in the other two TOC CSS files for the phone and tablet modes.

[Dave Gehman]

Thanks.

Any way to add icons to the right-click selection list -- e.g. something like a square or a page in a solid color?

[Tim Green]

Any way to add icons to the right-click selection list -- e.g. something like a square or a page in a solid color?

No, adding a context menu with icons would be a major operation.

[Dave Gehman]

These icons exist somewhere, right? No way for me to break into that repository and substitute something of the same size & resolution for one of the icons?

Or are they hard-coded deep in the innards?

[Tim Green]

These icons exist somewhere, right? No way for me to break into that repository and substitute something of the same size & resolution for one of the icons?

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 that your custom icons cannot be used in CHM output because the Microsoft CHM viewer only supports its own standard set of hard-coded 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. This setting is in Project Explorer > Configuration> Publishing Options > WebHelp > Navigation (in your project if you are not using a skin, in your .hmskin file if you are using a skin).

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 png 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. If your icons are exactly the same dimensions as the originals you should be OK. Otherwise you will need to adjust the settings in the CSS for the various levels in the _toc.css files.

Important: Only use the "double" folder icons for chapters that open and close. If you use them for topics they will "work" but will confuse your users.

[Dave Gehman]

Very nice. Thank you.

[Martin Wynne]

Other than ALL CAPS / all lowercase, are there ways to format the WebHelp TOC?

We'd like to add a background color or change the color of specific listings, if possible. Or include an icon the listings of certain topics.

Hi Dave,

see: https://helpman.it-authoring.com/viewto ... 308#p65308

Martin.