Branding your Help Center

We've updated the theming experience and UI described in this article. Customers who enabled Guide before November 14th, 2017 can upgrade to the new theming experience.

You can change the look and feel of the Help Center using simple WYSIWYG design tools such as color pickers and font choosers. For example, you can change the logo, colors, and web font to make your Help Center follow your company's branding guidelines. Branding options are in the Setting panel of Guide.

This article covers the following topics:

• Updating the colors in your Help Center
• Updating the fonts in your Help Center
• Updating the logo and favicon of your Help Center
• Updating the images in your Help Center

In addition to updating branding with options in the Settings panel, you can easily hide and show some common elements in your Copenhagen standard theme (see Hiding and showing elements in your Copenhagen standard theme). Or, if you're on Guide Professional or Enterprise, you can also edit the underlying theme code to customize elements of your Help Center (see Using themes and templates to customize your Help Center).

Updating the colors in your Help Center

By default, there are five colors you can change in your Help Center, including:

• Brand color
• Brand text color
• Text color
• Link color
• Background color

To update your Help Center colors

1. In Guide, click the Customize design icon () in the sidebar.
2. Click the theme you want to update to open it.
3. In the Settings panel, click Colors.

   

4. Click the color box beside any of the options, then use the color selector to chose a color or manually enter the number for your color.

   The color updates in the preview window.

   When you're satisfied with your color selection, press Enter or click away from the color box.

5. Repeat for other colors you want to change.
6. When you're finished updating your colors, click Save at the top.

   The changes are applied to the theme.

7. Click Back to return to the Themes page.

Updating the fonts in your Help Center

You can change the font for headings and text by default. A list of several built-in font options are available to you.

To update your Help Center fonts

1. In Guide, click the Customize design icon () in the sidebar.
2. Click the theme you want to update to open it.
3. In the Settings panel, click Fonts.
4. To change the heading font, click the drop-down menu under Heading, then select a font.

   The font updates in the preview window.

5. To change the text font, click the drop-down menu under Text, then select a font.

   The font updates in the preview window.

6. When you're finished, click Save at the top.

   The changes are applied to the theme.

7. Click Back to return to the Themes page.

Updating the logo and favicon of your Help Center

You can change the logo and favicon for your Help Center. The logo appears in the header for your Help Center. The favicon is the small image displayed in the browser tab and next to the URL in the browser's address bar.

For information on uploading your own images and other branding assets to use here, see Uploading and using your own assets.

To update the logo and favicon your Help Center theme

1. In Guide, click the Customize design icon () in the sidebar.
2. In the Settings panel, click Brand.
3. If you want to change the logo, under Logo, click Replace to browse to and select an image.

   The recommended image size is 200px by 50px. For the Copenhagen theme, the recommended maximum height is 37px.

   If the width or height of the image exceeds the recommended size, the image is scaled down to keep the aspect ratio constant. To change the image dimensions, see #topic_rzb_lfl_gs. The image background should be transparent or match the background color of the header.

4. If you want to change the favicon, under Favicon, click Replace to browse to and select an image.

   For best results, make sure the favicon is a square image. The image is scaled to fit the display dimensions.

5. To change back to the default image for the logo or favicon, click Revert.
6. When you're finished, click Save at the top.

   The changes are applied to the theme.

7. Click Back to return to the Themes page.

Updating the images for your theme

The standard Copenhagen theme comes with three images that you can replace:

• Hero home image, appears at the top of the home page

  

• Community hero image, appears at the top of the Community topics page

  

• Community banner, appears in the community section on the home page

  

If you are on Guide Lite, you can replace the home page image only. You do not have the two community images.

To update the images in your theme

1. In Guide, click the Customize design () icon in the sidebar.
2. In the Settings panel, click Banners.
3. Under any of the images, click Replace to browse to and select an image.
   • For the Home image and the Community image, the recommend size is 1600x300px.

     You can use an image that is less than 1600px wide if you are concerned about load time, but ensure that your image is at least 300px in height so that is does not appear stretched. If the image exceeds the recommended size, the image is scaled to keep the aspect ratio constant and a maximum height of 300px.

   • For Community banner, the height should be less than 300px to avoid stretching.

   The image appears in the preview window. If you don't want to use the image, you can click Revert to go back to the default image.

4. Repeat for the other images, if you want to replace them.
5. When you're finished, click Save at the top

   The changes are applied to the theme.

6. Click Back to return to the Themes page.