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, Home Page styles.

• Branding CSS
• Project Styles
• Home Page Styles
• What Else Influences My Topics Content?
• FAQ on Branding CSS, Project Styles, and Home Page Styles

Branding CSS

Branding CSS influences all elements of the reader interface but it doesn't influence your topics content. Be 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 log out, 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.

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 for printed and online outputs). Project styles are applied to your topics content in the reader, reviewer and author UI.

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

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:

• Project Styles and Scripts
• Content Styling
  

Home Page Styles

The Portal Home page is what readers see when they visit your documentation portal. ClickHelp offers reade 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 both 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 - 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.

For additional details on portal branding, check this topic: Branding Your Portal.

Master Page Styles

You can add style files, fonts and the like to the additional tags box on the Topic Master Page settings screen. This will influence your topics content styles.

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