Share:
ClickHelp Documentation

Custom Topic Footer and Header

You can create a custom topic header or footer and apply it either to the whole online documentation portal or to projects of choice. Topic headers and footers are often used to provide company information, navigation blocks or even for marketing purposes such as banners, etc. 

To create a custom header or footer, do this:

  • Go to Tools > Portal Settings > Topic Template > Topic Master Page
  • At the top of the page, select whether you want the settings to be applied to the entire portal, or to a certain project.
  •  If you want to create a custom header/footer for a certain project, you should uncheck Use parent level settings to be able to edit the text fields below.
      
  • Find the text fields below that correspond to a header and/or footer.
     
  • Add the HTML code for a custom header and/or footer (hint: it is also possible to edit the header/footer content visually, see below).
     
  • Save the changes.
  • Open any topic of the project you've chosen to see the result.

Q&A on Custom Headers and Footers

Question: How to edit headers and footers visually? 

Answer: Create the "My Footer" topic which will be used as a header/footer snippet. Then, open Topic Master Page and add the following code to a header and/or footer where a snippet URL is a link to the topic that you want to add:

<ch:snippet url="/articles/project-magic-wand-manual/my-footer"/> 

The topic content will be added to the header/footer as a snippet referencing the topic you created, so you will be able to change the header/footer visually via editing the "My Footer" topic in the topic editor.

Question: How to add common text information like a product name or support phone number to headers/footers?

Answer: You can use Variables for that. Header/footer content becomes a part of topic markup when publishing and it's handled as regular topic markup, so you can use both project and global variables there. Just open Topic Master Page and add the following code to a header and/or footer:

<ch:var name="supportEmail"/> 

Question: How to add breadcrumbs, See Also blocks or other automatic navigation elements to every topic of a project?

Answer: Open Topic Master Page and add the following code to a header and/or footer:

<ch:nav type="breadcrumb" includeSelf="true" class="CHBreadcrumb"/>

You also can style the breadcrumb in a centralized way via the CHBreadcrumb CSS class in project styles or with inline CSS:

Here is the result - grey line for the breadcrumbs container:

This way, you can add different navigation blocks such as links to top, next, previous topics, and See Also.

Question: How can I create different headers/footers for different publications from a single project?

Answer: You can use conditional blocks inside the Master Page fields. For example, to exclude content from documents with the PrintedDoc output tag, you can use excluding blocks:

<ch:exclude tags="PrintedDoc">support@email.com</ch:exclude>

As a result, documents published with other tags will include the support e-mail address, and the printed version will not have it in the header or footer.

If you want to see some content only in documents with the PrintedDoc output tag, you can use an including block in the same way:

<ch:include tags="PrintedDoc">support@email.com</ch:include>

Question: How to remove the default header?

Answer: In order to remove it, go to Tools > Portal Setting > Branding > Reader Interface, and uncheck the "Show topic header" box. Note that the changes apply to reader UI only, so you will need to log out or open the portal in the incognito/private browsing mode to see the effect.

Question: How can I adjust margins and spacing around the topic body area?

Answer: You can create a special wrapper DIV element around the topic content, and control the margins through the styles of this container. To achieve this, open the div tag in a Master Page header and close it in the Master Page footer, as it's shown on the screenshot below.

Question: Do header/footer settings affect my existing publications?

Answer: Publications have their own header/footer settings, which are not affected by global settings. When you publish a project, the publication gets a "snapshot" or a copy of the current header/footer settings applied to each topic content. When the publication is created, the headers/footers become a part of your publication topics content and therefore cannot be updated in a centralized way after that. In order to update headers/footers in your publication, you should republish your project using the Update mode. If you republish your document through the Incremental Update mode, you'll add new articles with new headers/footers but you will not upgrade the old ones.

Question: How are headers/footers handled during publishing?

Answer: Header/footer content is added before/after your topic content, so it is handled like regular topic content and may contain any dynamic elements (snippets, variables, conditional blocks, etc.) a topic may contain. A newly created publication gets the Use Global Settings box unchecked and its header/footer settings cleared in master page settings.