Branding your Help Center

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.

This article discusses the following topics:

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

If you're on Guide Professional, you can also edit the underlying theme code to customize your Help Center (see Using themes and templates to customize your Help Center).

Updating the colors and fonts in your Help Center

The Appearance section of the Customize design panel enables you to control the colors and font used in your Help Center.

There are five color settings and two font settings.

To update your Help Center colors and fonts

1. In Guide, click the Customize design icon () in the sidebar.
2. In the Appearance section, under Colors, click the hexadecimal number for the color setting you want to change.

   The color settings control different areas of your Help Center layout, including font colors, depending on the theme you are using.

3. Under Fonts, use the drop-down menus to select the font style you want to use.

   The font settings control the text in different areas of your Help Center layout, depending on the theme you are using.

4. When you're satisfied with the design, click Publish changes at the top of the sidebar.

   

   The changes are applied to the Help Center.

Updating the logo and favicon of your Help Center

The Appearance section of the Customize design panel also enables you to update the brand-related elements of your Help Center.

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

To update the branding elements of your Help Center

1. In Guide, click the Customize design icon () in the sidebar.
2. In the Appearance section, under Logo, click Change to browse to and select the default logo image displayed in the header.

   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 Specifying logo dimensions. The image background should be transparent or match the background color of the header.

3. Under Favicon, click Change to browse to and select the default favicon.

   A favicon is the small image displayed in the browser tab and next to the URL in the browser's address bar. For best results, make sure the favicon is a square image. The image is scaled to fit the display dimensions.

4. In the Powered by Zendesk logo section, click the check box to display or hide the Powered by Zendesk logo at the bottom of each Help Center page.
5. When you're satisfied with the selection of branding elements, click Publish changes at the top of the sidebar.

Customizing the logo return URL

By default, clicking the logo image in your Help Center header returns users to the home page. You can edit the HTML in your theme to return users to a different URL.

To update the logo URL

1. Upload your logo image to the Assets area, as described in Uploading and using your own assets.

   Make a note of the image's URL.

2. Click the Customize design icon () in the sidebar.
3. Click Edit theme.
4. Select Header from the drop-down menu, and locate the logo div tag in the HTML:

   <div class="logo">

5. Replace this code:

   {{#link 'help_center'}}
         <img src="{{logo_url}}" alt="{{t 'logo'}}">
       {{/link}}

   with the following HTML (in bold):

   <div class="logo">
     <a href="http://new_url">
       <img src="https://path_to_image/image.png" />
     </a>
   </div>

   The code inserts a linked image in the page.

6. Specify the URL of the page (new_url), the path to your logo image (path_to_image), and the image name (image).
7. Click Save.

Specifying logo dimensions

Although the recommended logo image size is 200px by 50px, you can override this default if needed.

Note: To use a logo larger than the recommended size, you need to host the logo image somewhere outside your instance of Zendesk Support.

To change your logo size

1. In Guide, click the Customize design () icon in the sidebar.
2. Click Edit theme.
3. Click CSS to open the CSS stylesheet, then search for the following rule:

   .logo img {
     max-height: 37px;
   }

   To search, click inside the code editor and press Control+F (Windows) or Cmd+F (Mac).

4. Modify the height property in the ".logo img" selector to match the height of the image.
5. Click Save.

Updating the images in Copenhagen theme

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

• Home banner

  

• Community banner

  

• Community image

  

To update the images in the Copenhagen theme

1. In Guide, click the Customize design () icon in the sidebar.
2. In the Appearance section, under Home banner, click Change to browse to and select an image.

   For the Home banner and the Community banner, the recommend size is 1600x300px. The default size of the placeholder images is 1160 x 300. 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. Your image will be centered with a maximum height of 300px.

   The image appears in the theme so that you can preview it. If you don't want to use the image, you can click Discard changes to remove it.

   

3. Repeat for the Community banner and Community image.

   Again, ensure that the image you use for the Community banner is at least 300px in height so that is does not appear stretched. Your image will be centered with a maximum height of 300px.
   The Community image, should be less than 300px in height to avoid stretching. 

4. Click Publish changes when you are ready.