Improving the usability of the webhelp TOC

Out of the box, the default webhelp skin from Flare is not that attractive. It contains every icon they have and the TOC is too jammed together.

Fixing the menu bar and icons is easy….fixing the TOC maybe not so much. Let’s look at what the TOC looks like before it’s touched.

Not very readable, is it? I’ll show you how to fix it.

First, I would like to get rid of the book and page icons. I prefer something a bit less busy. To change the icons, open your skin, click on the Styles tab, and select TocEntry from the list. You’ll see this:

I’m going to replace the book and page icons with triangles, because they’re cleaner and less busy. Here’s the TOC with the new icons.

For me, the icons are little snug for my taste. So I’m going to add some padding (3px) above and below the images. Here’s the result:

Here they are side-by-side:

The change seems small but it makes a lot of difference. More white space in the TOC and less clutter. So, don’t be afraid to change the icons in the TOC and don’t feel obligated to use the book/page icons.

Finally, remember

White space is your friend!