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.

Add a custom logo to the library

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
Customize HTML build settings

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

CHM help file size and position [chm] [featured]
How to Customize the Initial Position and Size of CHM Help Files

Creating CHM (Compiled HTML Help) files with HelpNDoc is a breeze, thanks to its user-friendly interface and powerful features. In this article we’ll look into the specifics of how you can set the …

Read More →
Produce MarkDown with the HelpNDoc Help Authoring Tool [markdown] [featured]
Balancing Security and Usability: Best Documentation Formats for Internal Sharing

Sharing documentation effectively and securely is critical in the modern workplace. Whether you’re distributing internal manuals, project documentation, or company policies, the HelpNDoc help …

Read More →
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 →

Categories: articles