Share:
ClickHelp Documentation

Branding: General Information

Branding means creating a custom style that would correlate with your company design. This means adding a company logo, using similar color schemes, fonts, etc.

In ClickHelp, there are many branding possibilities. You can familiarize yourself with them further in this article.

What Can be Branded in ClickHelp

As both readers and authors will be using your ClickHelp online documentation portal, note:

  • Reader Interface - can be branded! 
    That is, the Portal Home Page, the Topic Viewer including the Table of Contents, and the Login Page. These are pages available to readers - anonymous users and authenticated Power Readers. We will look into the details of what can be branded on these pages later in this document.

  • Author Interface - no branding.
    This is the UI your authors use after logging in to the portal. This UI is not supposed to be branded.

Portal Home Page

The portal Home page is what readers see when they go to the root URL of your documentation portal, like this:  http://doc.clickhelp.co

Let us take a look at the default view of the page, and talk about its elements.

  • 1 is the header of the portal Home page. You can change its style through the global branding CSS file
  • 2 is the actual contents of the home page - you can configure it in the Portal Home Page settings.
  • 3 is a block inside element 2, it is a placeholder for the list of publication links available to the current visitor. This list may be different for anonymous readers and authenticated power Readers. You can learn more on setting this element up in Portal Home Page > Placeholders.
  • 4 is the page footer. You can style it in any way you like right from the Home Page editor. We recommend adding links to your website, support team and social network profiles there.

Take a look at some of Home Page designs the ClickHelp Team created for your usage below, notice how powerful ClickHelp's branding options are:

Topic Viewer

When a reader clicks a publication link on the home page, or uses a direct topic link, they get to the topic viewer page.

ClickHelp Topic Viewer
  • 1 and 5 are the header and footer of the reader UI. The header is shown on every topic page, you can change its style through the global branding CSS file, while the footer is merely optional and can be added manually using, for example, topic snippets
  • 2 is the Topic Header element. It shows the main information about the current topic - title, rating, last modification date, etc. You can configure it in the Reader Interface settings.
  • 3 is the Table of Contents panel. It has a quick filter on top, so readers can filter the TOC elements, the tree-like structure of topics. You can learn how to modify the style of this panel in the TOC Styling topic.
  • 4 is the actual topic contents the authors create. Authors have full control over the style of this area - they can use inline styles (applied to specific elements in a topic), or they can use a more organized approach and style the contents through CSS. To learn more on topic styling, see the Topic Content Styling document.

Login Page

The Login Page of your online portal can be customized, as well. Make it more relevant by adding some branding like your logo or a custom background image.

Table of Contents

The Table of Contents is a tree-like structure your readers see on the left side of their interface, it is used for navigation and quick search of topics.

This element of the reader interface can also be customized in many ways: you can change the background color or even use a custom image, set up font color, use your own node images, etc. Take a look at these design examples:

In ClickHelp, you can easily adapt your online documentation portal's look and feel to your company style book. Continue reading this section to learn more on how to implement style changes.