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.

See also...

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 →

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 →

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 →

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 →