ClickHelp Documentation

Page Header and Footer


ClickHelp provides different premade templates, but you can brand various elements of the Reader UI. For example, a header and footer. In this topic, we'll tell you how you can customize these elements.

Basic Customization Options

You can visually set up several options to make the portal look more authentic. You can find all the settings following these steps:

  • Open Author Dashboard.
  • Click Portal Settings.
  • Select Header Logo

Here are the options you can set up there:

  • Company logo. This makes the first impression when someone visits your portal - based on the logo in the top-left corner, they realize they got to the right place.

  • Favicon. This is a small 16x16 icon you see in the browser caption when your portal page is open. In order to add it, go to Portal Settings - Header Logo.

  • Header logo tooltip. This is just a text snippet that shows up when you hover the mouse pointer over the logo image in the header. However, since this element is at the very beginning of the page, search engines will give it additional attention.

  • Header Logo URL. The logo image in the header is actually a link, and you can specify any URL for that link. Typically, it makes sense to link your company web site there, so your documentation portal visitors could easily jump to your web site for product information, pricing, etc.

Customizing Header

To customize a header, go to  Portal SettingsReader Interface. On the right, you'll see the customization options. You need to scroll it down and find the Application Header section. There you can customize:

  • Minimal height.
  • Text color.
  • Background color.
  • Background image.

Customizing Reader Menu 

You can also add Reader Menu Items to a header to make navigation more efficient. Here is an example:

To learn more, refer to this topic: Reader Menu Editor.  

Customizing Footer

As a rule, tech writers provide useful links and company contact information in a footer, give web site links, and any other information you feel important to be in each topic. To customize it and add the necessary information, go to Portal Settings - Reader Interface. On the right, you'll see the customization options. You need to scroll it down and find the Application Footer section. There you can customize: 

  • Text color.
  • Link color.
  • Background color.
  • HTML content.

To customize your header and footer, we highly recommend that you use the Reader Interface settings. However, if it's not enough, you can use Branding CSS for advanced customization: Advanced Branding with CSS.