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.

Template Editor: Assets Editor

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.

Table of contents icon list

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!.

See also...

HelpNDoc's character analyzer illustration [illustration] [Featured]
Tech Writers' Secret Weapon: The Unique Advantages of Using HelpNDoc's Characters Analyzer

HelpNDoc has been a go-to solution for professionals seeking to create high-quality, engaging, and user-friendly documentation. However, it’s not just its user-friendly interface or its versatile …

Read More →
Happy technical writer using HelpNDoc [happy] [Featured]
Making the Most of HelpNDoc: How the "Keep Temporary Files" Feature Can Benefit Technical Writers

When working on technical documentation, every tool and feature at our disposal can make a big difference in productivity and efficiency. One such feature in HelpNDoc, often underutilized, is the …

Read More →
Converting Legacy WinHelp HLP to Modern Documentation [converting] [Featured]
Revitalize Your Help Files: Converting Legacy WinHelp HLP to Modern Documentation with HelpNDoc

In an age where information is consumed on a plethora of devices and platforms, the classic WinHelp HLP files — once the standard in Windows-based help documentation — are now relics of a bygone era. …

Read More →
HelpNDoc vs WordPress [versus] [Featured]
Mastering Multi-Channel Publishing: Why HelpNDoc Leaves WordPress in the Dust

In today’s interconnected digital world, the concept of multi-channel publishing has become more critical than ever. As audiences seek information through various platforms and formats, content …

Read More →

Categories: articles