ClickHelp User Manual

Project Icon

Customizations make your documentation more personal and recognizable; that's why ClickHelp provides you with different branding options that don't require CSS knowledge. In this topic, we will tell you how to add an icon to your project and change its sort order in publication lists. 

Add Project Icon

To add a project icon, do the following:

  • Open Projects page.
  • Click the three vertical dots button, then click Settings
    Project settings button on the Projects page
  • The Basic Settings page will open.
  • Drag and drop icons to the relevant areas (at least 32x32px recommended).
    Choose a project icon in the project Basic settings
  • Click Save Changes.
  • As you may notice, we apply these settings to a project, so when you publish it, its icon and title will appear on the left sidebar.
  • Here is the result:
    The modified project icons in the Reader UI

If you want to add an icon to an existing publication, open the publication settings and proceed with the above steps.

Here are some other scenarios.

The WYSIWYG Home page editor mentioned here has been deprecated since the Amber release (Autumn, 2023) and is subject to removal in future releases. Please consider using the new block editor instead.

Scenario #1. Add Publication Icon to Home Page

If you want a publication icon to be shown on your Home page, do the following:

  • Firstly, add an icon for a publication as it's described above.
  • On the Home page click the Edit Home page option.
  • Insert the following code in the Publication link markup template field:
    <div class="pubItem">
    <a href="{{URL}}" title="{{NAME}}"><img src="{{ICON_URL}}" alt="{{NAME}}"/>{{NAME}}</a>
  • Here is what it should look like:
    Insert the code into the Publication link markup template field in the Portal Home Page settings
  • Click Save Changes.

If an icon is bigger than a publication title, do the following:

  • Open the Portal Home Page settings.
  • Scroll down and click Show Home page styles editor
    Navigate to the Show Home page styles editor section in the Portal Home Page settings
  • Add the code as it's shown in the screenshot.
    Add the code to the Home page styles editor in the Portal Home Page settings
  • Click Save Changes.

Scenario #2. Add Publication and Mouse Hover Icons to Home Page

Follow the steps:

  • First, add icons for a publication as it's described above.
  • Open the Portal Home Page settings.
  • Add the following code to the Publication link markup template field.
    <div class="pubItem">
    <a href="{{URL}}" title="{{NAME}}"><img src="{{ICON_URL}}" alt="{{NAME}}"/><img src="{{HOVER_ICON_URL}}" class="pubHoverIcon" alt="{{NAME}}"/> {{NAME}}</a>

  • Then scroll down and click Show Home page styles editor.
    Navigate to the Show Home page styles editor section in the Portal Home Page settings
  • Add the following code:
    .pubItem a:hover img
    display: none;

    .pubItem a:hover .pubHoverIcon
    display: inline-block;

  • If icons are higher than publication titles, add the following code, as well.
    .pubItem img
    vertical-align: middle;

  • Click Save Changes.