ClickHelp Documentation

How and Where to Style Content and Reader Interface

ClickHelp User Manual/Documentation Portal Management/Branding and Styling/How and Where to Style Content and Reader Interface

In ClickHelp, you can style every element of the reader UI. Different elements are styled in different places. In this topic, we will describe the difference among those places - Branding CCS, Project Styles, and Home Page styles.

Branding CSS

Branding CSS influences all elements of the reader interface, but it doesn't affect the content of your topics. By editing the Branding CSS, you can design any element of the reader-facing pages:

  • portal Home Page elements;
  • Search page elements;
  • portal header with the logo, Search box, and the Login link;
  • Login page;
  • the Table of Contents panel;
  • topic header area (where the topic title is displayed).

The Branding CSS file is applied for readers only, so you can't see the changes you make while you are logged in as an author. To see the changes, you need to log out, or use a different web browser, or open a private browsing session. Styles defined in Branding CSS are isolated from your topic content styles and don't affect the CSS rules you define in your projects.

Do not use the same file as a branding style file and as a project style file at the same time: it will be hard to maintain and difficult to understand which styles relate to what.

The only exception is the Web Help output. Your portal Branding CSS will be exported to the Web Help format and will apply both to the interface elements and the topic content. So, if you plan to produce the Web Help output to host on your own server (instead of hosting in your ClickHelp portal), keep an eye on the branding styles you define.

To learn more, refer to this topic: Branding: General Information.

Project Styles

Project styles are defined in each project, as a list of CSS files from your Styles storage. These style files will affect your topic content styling. Project CSS files can be conditional (e.g., to apply different styles to printed and online outputs). Project styles are applied to the content of your topics in the reader, reviewer, and author UI.

Here is a screenshot to provide you with more visual clarification:

The content styles and the elements styles sections in the Reader UI

If you need to edit your content styles (section #1), go to Project Styles.

If you need to edit the styles of elements inside section #2, edit Branding CSS.

To learn more, refer to these topics:

Home Page Styles

The Portal Home page is what readers see when they visit your documentation portal. ClickHelp offers ready Home page templates you can use as a baseline and then customize the page as you need. Every Home Page Template has two parts: HTML code and CSS code. You can see both parts in your portal Home Page Settings. Selecting a specific template will replace current HTML and CSS with those from the template. If you make changes to the Home page content or styles, be careful when switching to another template as your custom changes will be lost.

Both Branding CSS and Portal Home page settings influence your Portal Home page UI. Project styles do not affect the Home page UI.

To learn more on the Home page styling, refer to this topic: Portal Home Page.

Master Page Styles

You can add style files, fonts, and other tags to the Additional tags box on the Topic Master Page settings screen.

The additional tags box in the Topic master page settings

Using the global Master Page settings, you can add a specific CSS style file reference to all your projects at ones or define CSS rules right there. This is useful when your projects must use the same style files, and you don't want to add them to each project's Style Files list.

Inline Styles of Topic Content

In addition to the CSS-based styles you define in your project and the Topic Master Page, each topic content may have its own inline styles defined. All inline styles (image position, margins, border style, color, etc.) that you use directly in the topic will combine with your CSS-based styles. Typically, inline styles have higher priority than CSS rules, but this depends on how the CSS styles are defined.

FAQ on Branding CSS, Project Styles, and Home Page Styles

[-] How to change my TOC and main menu styles?  
You should do it in Branding CSS.
[-] How to change link colors for my portal? 
If you want to do it for the interface, go to Branding CSS. To change link colors in your topics, you should do it in Project Styles.
[-] How to change my home page styles? 
Use ready Portal Homepage templates. If it's not enough, go to Portal Settings > Portal Home Page.
[-] I need to make sure all my topics across the entire portal use the same style, is it possible? 
Yes, it's possible. Once you build your standard CSS style file to use, include a link to it in the Portal Settings > Topic Template > Topic Master Page settings, in the Additional head tags section:
<link href="/resources/Styles/global-styles.css" rel="stylesheet">
ou can include several links in this way.
[-] I don't know CSS but I want to design my portal, can you help? 
Our Branding Team will be happy to help, contact us at and describe what you'd like to achieve.
[-] How can I style the printed output? 
Printed documentation gets the styles from the publication you're exporting. If you want to customize headers or footers of the printed pages, we recommend that you use MS Word templates. To learn more, refer to this topic: Export with Word Templates.