Rapidly add a logo and custom CSS and JavaScript code to your HTML documentation files

HelpNDoc's amazing responsive HTML web-site generation process can be customized to add a logo, tailored CSS and JavaScript code, translated strings and more... let's see how easy and fast it is to produce truly customized HTML documentation web-site using HelpNDoc.

Add a custom logo to the project's library

The library includes every reusable media elements (pictures, movies, documents...) available in the project.

In order to add the desired logo picture to the project's library, a few simple steps are required:

  1. From HelpNDoc's "Home" ribbon tab, in the "Library" group, click "Add item"
  2. Click "Add Picture"
  3. Click "Include file" to browse for the desired logo on your hard drive, or drag and drop it on the preview panel from the Windows Explorer
  4. Click "OK"

The logo is now part of your project and saved withing your HND project file. It can be used in any of the topics present in that project, as well as in custom build settings.

Customize HTML build settings

HelpNDoc can generate a batch of documentation builds from a single source. Each build can be customized for a specific company, product, target demographic...

Defining the documentation's custom build settings is trivial in HelpNDoc:

  1. From the "Home" ribbon tab, click the top part of the "Generate help" button to display the "Generate documentation" dialog
  2. Select the build to customize in the list: "Build HTML documentation"
  3. Click "Customize" on the right if the customization tabs are not yet visible
  4. Navigate to the "Template settings" tab

From there, the Custom CSS field can be used to add specific CSS code, while the Custom JavaScript field can be used to add specific JavaScript code to customize the look and feel and behavior of the generated documentation web-site.
To define a custom logo, simply select the newly included picture using the Logo field. The Logo link field can also be used to specify an URL to link to when the end-user clicks the logo.
Various other template settings are available for each builds such as fields to translate your documentation to other languages.

That's how fast and easy it is to customize your generated HTML documentation web site: by rapidly adding a logo, customized CSS or JavaScript code, localized strings... you can be confident that you are producing the best looking and most useful documentation web site for your end-users. If you haven't done so yet, we encourage you to download the free edition of HelpNDoc to experiment with this powerful help authoring tool.