How to update the icons of your HTML documentation's table of contents

Creating the most complete, comprehensive and up-to-date documentation is the number one priority of technical writers. But readers expect a clean and modern design and companies oftentimes need to integrate documentation web-sites with their existing material, thus mimicking a predefined look-and-feel. Thankfully, the HelpNDoc help authoring tool lets you rapidly add a logo or custom CSS code for quick customization, or even create a completely new template to fully customize your deliverables. In this article, let’s see how you can use customized icons in the generated HTML documentation’s table of contents.

Creating a new template

HelpNDoc’s documentation outputs are based on templates, where you can fully customize the way your documentation is rendered. We will first create a new HTML template before customizing its icons.

Template Editor: Create New HTML Template

In order to create a new HTML template, let’s use HelpNDoc’s built-in template editor:

From HelpNDoc’s “Tools” ribbon tab, click “Templates Editor”
At the top of the “Edit template” dialog, click the “+” button
Click “Create HTML template”
Enter a template name, such as “HTML Template with Custom Icons”
Click “OK”

Your new template is already created: it is fully functional as it is an exact copy of HelpNDoc’s default HTML template.

Customizing table of contents icons

The default HTML template uses one PNG file per icon type. We’ll simply replace any icon that we’d like to customize with a new PNG file with the same name.

Table of contents icons are saved as assets used by the custom template’s code. Let’s locate them in the topic editor:

On the left part of the “Edit template” dialog, click “Assets”: the assets hierarchy is shown on the right
Navigate to the icons folder assets/vendors/helpndoc-5/icons: all icons are placed in that folder

Tip: To navigate and inspect template’s folder using Windows Explorer, click the “Open template location” button in HelpNDoc’s template editor.

Let’s say that we want to replace the default “question mark” topic icon. Its file name is 8.png:

Locate and select the file named 8.png in the assets/vendors/helpndoc-5/icons directory
Click the “Delete” button in the toolbar and confirm
Click the “Import” button
Choose the new icon on your hard drive and click “Open”. Note: icons must be 16x16 pixels in size to look right in the final documentation
If needed, rename the newly imported file to 8.png using the “Rename” button and move it to the correct folder: assets/vendors/helpndoc-5/icons
Click “Save” to store the changes to your template

Your new template is now ready and can be used in any of your documentation project: it will use your custom icon as a topic icon.

Use the template in your documentation projects

Now that the HTML template has been created and customized, it can be used to build your HTML documentation projects. Let’s see how this can be done.

Documentation generation dialog: choose a template

Once you’ve opened your documentation project in HelpNDoc, in the “Home” ribbon tab, click the top part of the “Generate help” button to access the “Generate documentation” dialog.
Select the HTML build in the “Build list” on the left, then click the “Default HTML Template” link on the right to choose the newly created template.
And voilà! Simply generate the documentation again and it will automatically use the customized icon set.

Generated HTML documentation: using custom icons

Thanks to HelpNDoc’s very powerful template system, it is possible to customize almost any part of the generated documentation projects. In this article, we created a new template to customize icons in the table of contents. This is a very small preview of HelpNDoc’s template capabilities. You can inspect one of the templates bundled with HelpNDoc (Single page HTML template, iPhone template, jQuery mobile template…) to see some additional examples. You can also learn more about templates from the documentation, or from various articles on this web-site.
HelpNDoc is free for personal use and evaluation purposes. Feel free to try it for as long as needed and as always, enjoy documenting!.