Skip to main content
WARNING You're browsing the documentation for an old version of Deskpro. Consider updating to Deskpro Horizon.

Help Center Branding & Design

in Help Center
Authors list
Published: 22 Jun 2020|Last updated: 18 Mar 2022

Go to User Interface > Helpcenter to customize the look of the Help Center to match your organization’s brand. You can easily edit the colors, fonts, welcome text and more.

image.png

Note

After making any of the below customizations in the Help Center editor, you can preview the changes before making them live:

  • Click Preview Changes at the top to preview the changes in the Help Center editor.

  • Click Discard Changes to abandon the change you have made.

  • Click Save Changes to apply your changes to the live Help Center if you are happy with the preview.

Managing ThemesCopy link to Managing Themes to clipboard

image.png

  • Clone to new theme - allows you to create a new theme with the same settings and template as the one currently selected. This allows you to make a child theme after customization for a different brand or as a backup before you make further customizations.

  • Import theme - allows you to import a previously exported theme.

  • Import theme and replace current - allows you to import a previously exported theme which will replace the current theme in use.

  • Export theme - allows you to export a theme. This option is at the bottom of the editing menu.

image.png

Custom Welcome MessageCopy link to Custom Welcome Message to clipboard

You should customize the welcome message on the Help Center so that your users know that this is the official Help Center for your organization.

  1. Expand the Welcome Message option.

  2. Enter a title and welcome message. This text can be formatted using HTML.

  3. Click Set & Preview to preview the welcome message in the Help Center editor.

  4. Click Save Changes to apply your welcome message to the live Help Center, or click Discard Changes to abandon the change.

Consider including alternative contact methods (such as your ticket email accounts or support phone numbers), your support hours, and links to your social media accounts.

image.png

Adding a LogoCopy link to Adding a Logo to clipboard

You can add your logo to appear at the top-left of your Help Center.

  1. Expand the Logo section.

  2. Click Choose file to upload a logo image.

  3. Click the green Preview Changes button at the top to see the logo.

  4. Click Save Changes to apply your logo to the live Help Center, or click Discard Changes to abandon the change.

image.png

Adding a FaviconCopy link to Adding a Favicon to clipboard

You can add a favicon to appear in the browser URL bar and next to bookmarks.

  1. Expand the Favicon section.

  2. Click Choose file to upload a favicon.

  3. Click the green Preview Changes button at the top to see the favicon.

  4. Click Save Changes to apply your favicon to the live Help Center, or click Discard Changes to abandon the change.

::: info The ICO image format commonly used for favicons is not supported. Instead, prepare a square image in PNG or GIF format that is 16x16 or 32x32 pixels. :::

Adding a Splash ImageCopy link to Adding a Splash Image to clipboard

You can add a splash image to replace the gradient background behind the search bar on the Help Center.

  1. Expand the Splash Images option.

  2. Click Choose file to upload a photo or Browse Free Images to select from our library of Unsplash images.

image.png

  1. Click the green Preview Changes button at the top to preview the splash image.

  2. Click Save Changes to apply your splash image to the live Help Center, or click Discard Changes to abandon the change.

Editing Theme OptionsCopy link to Editing Theme Options to clipboard

Hide Navigation ButtonsCopy link to Hide Navigation Buttons to clipboard

If you'd prefer to hide the large navigation buttons on the home page, you can uncheck the following option.

image.png

The main navigation buttons that are usually displayed by default will then be removed.

Before:

Nav-Buttons.png

After:

Without-Nav-Buttons.png

Click Set & Preview to preview the changes. Click Save Changes to apply your splash image to the live Help Center, or click Discard Changes to abandon the change.

Setting Featured ArticlesCopy link to Setting Featured Articles to clipboard

Here you can also choose Knowledgebase articles to be featured on the home page of your Help Center. This helps to highlight your most relevant articles to users and ensure that this content is easily visible.

Featured-Articles.png

To define the articles you wish to feature, enter the ID numbers of the articles, separated by a comma.

image.png

The ID number of an article can be found in the top right-hand corner when viewing the article in the agent interface.

Article-ID.png

Click Set & Preview to preview the changes. Click Save Changes to apply your splash image to the live Help Center, or click Discard Changes to abandon the change.

Color EditingCopy link to Color Editing to clipboard

You can pick custom colors for most of the elements of the Help Center. These are the sections you can edit to change different aspects of the Help Center colors.

image.png

  1. Click on the color square to edit the color. Once you have selected the color you want, click choose.

  2. Click Preview Changes at the top to preview the changes in the Help Center editor. Depending on which color you edited, you may find that you need to look at a different section of the portal or use a Help Center function (like search or submitting a ticket) to see your change.

  3. Click Save Changes to apply your color changes to the live Help Center, or click Discard Changes to abandon your changes.

Font EditingCopy link to Font Editing to clipboard

You can change the style of text used on the Help Center.

  1. Expand the Fonts option.

  2. Enter the fonts you wish to use.

  3. Click Preview Changes at the top to preview the font changes in the Help Center editor.

  4. Click Save Changes to apply your font changes to the live Help Center, or click Discard Changes to abandon your changes.

Background ColorCopy link to Background Color to clipboard

You can change the background color of the Help Center.

  1. Expand the Page option.

  2. Click on the color square to edit the color. Once you have selected the color you want, click choose.

  3. Click Preview Changes at the top to preview the color change in the Help Center editor.

  4. Click Save Changes to apply your change to the live Help Center, or click Discard Changes to abandon your change.

Additional CustomizationsCopy link to Additional Customizations to clipboard

If you wish to take the customization of your Help Center layout and design even further, we provide you with access to the Help Center templates and allow you to insert custom HTML, CSS or Javascript. See the next section of this Guide for more informatiom.

HelpfulUnhelpful
next pageCustomizing portal content
previous pageBasic Help Center settings

Please log in or register to submit a comment.