Share:
ClickHelp Documentation

Project Icon and Ordinal Number

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 tell you how to add an icon to your project and change its sort order in publication lists. 

Add Project Icon

In order to add a project icon, do the following:

  • Open your Portal Dashboard.
  • Click the three vertical dots button, then click Settings

  • The Basic Settings page will open.
  • Drag and drop icons to the relevant areas (at least 32x32px recommended).

  • Click SAVE CHANGES.
  • If you may notice, we apply these settings to a project, so when you'll publish it, its icon and title will appear on the left sidebar.
  • Here is the result:

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.

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.
  • At the top of the page, choose Entire Portal for editing settings.

  • Select Portal Home Page in the left-hand navigation bar.
  • Insert the code as it's shown in the screenshot:

  • Click SAVE CHANGES.

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

  • Open the Portal Home Page settings.
  • Scroll down and click Show Home page styles editor

  • Add the code as it's shown in the screenshot.

  • Click SAVE CHANGES.

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

Follow the steps:

  • Firstly, 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.
    HTML
    <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>
    </div>

  • Then scroll down and click Show Home page styles editor.

  • Add the following code:
    HTML
    .pubHoverIcon,
    .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.
    HTML
    .pubItem img
    {
    vertical-align: middle;
    }

  • Click SAVE CHANGES.

Customize Publication Sort Order in Publication Lists 

If you have a long list of publications, you can change their ordinal number. For example, we want 'The Wizard Wand Manual Publication' to be on the first place of our list.

Here are the steps how to do this:

  • Open your Portal Dashboard.
  • Click the three vertical dots button, then click Settings.

    As you may notice, we do it for a publication but you can also do it for projects, so when you publish a project, it will be in the right place according to your settings.
  • Scroll down and find the relevant section. Set up the number for your publication.

  • Click SAVE CHANGES.
  • Here is the result. As you see, 'The Wizard Wand Manual Publication' is in the first place:

Information All projects and publications have 0 as an ordinal number by default, so you should set up numbers for all projects and/or publications to manage the list. If some projects or publications have 0 as an ordinal number, they will be in the first place and sorted alphabetically. 

The settings are applied not only to the list on the Portal Home Page but also to the sidebar list and filters of projects/publications on the Search page.