Share:
ClickHelp Documentation

Page Header and Footer

In ClickHelp, you can brand various elements of the Reader UI. For example, your readers see the header with your logo and the search box on every page. There's also a possibility of adding a custom footer to topics' content. There's no default footer.

Basic Styling Options

You can visually set up several options to make the portal look more authentic on the Tools > Global Settings... > Branding > Logo & Company Info settings page:

  • Add your company logo to the header.
    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.
  • Specify a favicon for your portal.
    This is a small 16x16 icon you see in the browser caption when your portal page is open.
  • 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.

Advanced Branding with CSS

On top of the basic branding options we have just talked about, you can do much more using the branding CSS. To learn if any branding CSS file is already applied to your portal, select Tools > Global Settings...   and switch to the Branding > Reader Interface section. In that section, you will see two settings:

  • Branding CSS.
    This setting holds the path to the branding CSS file that will be applied to every page the readers see. If the setting is empty, this means that you are using the default interface without any CSS file. To start doing some branding, click the Create a new file link to the right of the edit box.
    By default, every new portal has the  Branding.css file created in the File Manager > Styles storage and having the default content. Use the File Manager item of the main menu to access the Styles storage. You will see the Branding.css file in the root folder of the Styles tab - select it, and then click the View File button at the bottom of the dialog. The CSS file editor will open in a new browser window, so you can see and modify the file contents.
    In the default Branding.css file, you will see a number of CSS selectors that demonstrate how to access the main header element. The style attributes are commented out on purpose - read the comments in the CSS selectors to understand which element that selector affects. You can uncomment some style attributes to see how they affect the Home page header (see the note below).
  • Branding script.
    This is the script file that will be loaded for every reader-facing page. So, if you are implementing some tricky functionality through a script, you can invoke that script file by selecting it in this setting.
Information
The advanced branding settings are applied only to the reader interface for anonymous users and Power Readers.
These settings are not applied to the Author interface. To see UI changes while you are changing the CSS file, open the Home page of your portal in a different web browser or in a separate Incognito / In-Private window of the browser to act as anonymous user.

Adding a Footer

A footer is an optional element you can use for your Reader UI. As a rule, you provide useful links and company contact information in the footer, give web site links, and any other information you feel important to be in each topic.

Typically, you want the footer to be the same for all help topics, with a quick way to update it everywhere if needed. The easiest way to achieve this result is using the Topic Master Page settings - you specify the footer HTML in the settings, and you get that content shown at the bottom of every topic. Updating the footer settings will automatically reflect in all topics.

Advanced: Header Background

CSS allows customizing your online portal's header in ClickHelp. This is how To get the desired code, go to Tools > Global Settings... and switch to the Branding > Reader Interface section. Then, click the button shown on the screenshot below to open the currently used branding CSS file in the CSS Editor.

There are some existing branding rules in the files, but they are commented. 

.BaseMaster_mainMenuContainer
{  
/* Uncomment the following lines to get custom header background image */
/*background-image: url('/resources/Storage/Templates/Projects/Minimalist/escheresque.png') !important;
background-repeat: repeat !important;*/

/* Uncomment the following lines to get plain white header background */
/* background-color: white !important;
background-image: none !important;*/
}

And, this is the default gray look of the Header with these code lines commented:

Let's uncomment the two bottom lines to change the Header's color to white.

.BaseMaster_mainMenuContainer
{  
/* Uncomment the following lines to get custom header background image */
/* background-image: url('/resources/Storage/Templates/Projects/Minimalist/escheresque.png') !important;
background-repeat: repeat !important;*/

/* Uncomment the following lines to get plain white header background */
background-color: white !important;
background-image: none !important;
}

This is what we get:

You can upload any custom image to the File Storage and use it by changing the file path in the CSS rule that sets the Header's background image. Don't forget to uncomment these lines.

.BaseMaster_mainMenuContainer
{  
/* Uncomment the following lines to get custom header background image */
background-image: url('/resources/Storage/Branding/custom-header-bg.png') !important;
background-repeat: repeat !important;
}

This is how the new custom Header looks:

 

Advanced: Hide Header Links

To hide the Login link from the header, you can use the corresponding option in the Reader Interface section of your portal settings (learn more in Topic Header). Hiding other links, like the Home link, requires using some CSS. To do this, you need to edit a couple of lines in the Branding  file of your portal. Open it from Tools > Edit Portal Branding.css. Find the following classes there:  .BaseMaster_mainMenu, .BaseMaster_profileLink .  

To hide header links from both full and mobile versions of your portal, your CSS rules should look like this:

.BaseMaster_mainMenu,
.BaseMaster_profileLink,
li.CHMenu_menuItem[data-item-id="menuItemMenu"],
li.CHMenu_menuItem[data-item-id="menuItemLogin"] 
{
display: none;
}

Advanced: Change Search Box Style

The reader search box can also be branded via the Branding file that can be found here - Tools > Global Settings... > Branding > Reader Interface.

To customize the default color of the focused search box border, find the following code lines:

.BaseMaster_mainMenuContainer .dxeFocused_DefaultTheme,
.BaseMaster_contentContainer .dxeFocused_DefaultTheme
{ /* Set border color for focused Search edit boxes in the app header and on the Search page */
border-color: #0072C6;
}

We made the border purple (#7C4DFF) in the example below by changing the border-color attribute's value.

.BaseMaster_mainMenuContainer .dxeFocused_DefaultTheme,
.BaseMaster_contentContainer .dxeFocused_DefaultTheme
{ /* Set border color for focused Search edit boxes in the app header and on the Search page */
border-color: #7C4DFF;
}

And, we used the same purple color for the hover over quick search results:
.SearchBox_completionWindow .CHListBox_item:hover
{  
background-color: #7C4DFF!important;
}

This is the outcome:

The search results page can be branded, as well. You see this page after clicking the Search Entire Portal... link. Here's its default look:



Let's use the light blue color for the filter drop-down - we need to change the background-color as shown below. We'll also have to change the color value to a darker color (e.g. black) for text to be visible on light-blue.

.ProjectsTreeDropdown_dropDownContainer .CHTree_nodeFocused
{ /* Set the focused node color in the project filter dropdown on the Search page */
  background-color: #BBDEFB !important;
  color: black !important;
}

Here's the result:



There are some pre-defined example code lines for you to uncomment in a default branding file. For example, there is code that allows setting different background color for odd and even search results:

/* Uncomment the following two rules to specify different styles for odd and even search results */
/*.SearchResults_itemOdd
{
  background-color: #EFEFEF !important;
}
.SearchResults_itemEven
{
  background-color: white !important;
} */

If we uncomment these lines, the search results page will look like this:

These simple CSS rules can help you brand your online documentation portal.