Branding your Help Center Follow

team professional enterprise plans

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 is available to Team, Professional, and Enterprise customers.

This article discusses the following topics:

For more information about customizing your Help Center, see the following articles:

Updating the colors and fonts in your Help Center

The Appearance section of the Customize design panel lets you 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 the Help Center, click General in the top menu bar, then select Customize design.

  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 lets you 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. Click General in the top menu bar, then select Customize design.
  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 Help Center HTML 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 General in the top menu bar, then select Customize design.
  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. Click General in the top menu bar, then select Customize design.
  2. Click Edit theme.
  3. Click CSS to open the Help Center CSS stylesheet, then search for the following rule:
    .logo img {
      max-height: 37px;
    }

    Tip: 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 your Help Center 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. Click General in the top menu bar, then select Customize design.
  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, we recommend 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 300px in height so that is does not appear stretched.

    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. And the Community image, should be less than 300px in height to avoid stretching.

  4. Click Publish changes when you are ready.

Updating the name of your Help Center

You may want to change the name displayed on your Help Center. For example, your customers might be used to calling your content "Support, Help, and Tutorials," or "Documentation." The name doesn't affect the URL of the Help Center.

To update the name of your Help Center

  1. Click General in the top menu bar, then select Help Center settings.
  2. Scroll down to Languages.
  3. Find your default language, and enter the name you want displayed for your Help Center.
  4. At the top of the settings page, click Update.

    The new name appears on your Help Center.

    Note: If you have a localized Help Center, other languages may appear in this section. For more information, see Localizing Help Center.
Have more questions? Submit a request

Comments

  • 0

    After I located <div class="logo"> I can't seem to figure out how to put in the right code to allow me to make my companies logo larger.

    Edited by ndavis
  • 0

    Hi there!

    You need to make sure that you switch over to the CSS tab; the logo properties are found there, rather than in the HTML tab. Once you're in the right tab, you can do a CNTL/CMD + F to search for the line of code you need.

    Hope that helps!

  • 0

    Is it possible to change the color of the top menu bar in Help Center?

  • 0

    Hi Jim,

    Can you post a screen shot of exactly which bit you want to change?

  • 0

    Hi Jessie,

    I want to change the color of the black menu bar in Help Center to match our company color as I was able to do for the agent page.

    Thanks, Jim

     

  • 0

    Hey Jim,

    I did some poking around in the code and it might be possible to change it with CSS or HTML, but I can't figure out how. Hopefully one of our Help Center gurus can weigh in and shed some more light on the subject!

  • 0

    Hi Jessie, 

    I am also looking for instructions on how to change the color on the Help Center, any chance you could send in a ticket to ask someone for support on this? I'm working on this area this week and would love to close this out.

    Thank you

     

  • 0

    Hey LaShanna,

    Did the instructions in this article not give you the information you were looking for? What exactly are you trying to customize?

  • 0

    Hi Jessie,

    The article does not address changing the color on the Help Center bar, which is what I asked about as well, I think, as LaShanna.

    Please see your reply on 6-21-2016. Can someone be assigned to help with this?

    Thanks, Jim

  • 0

    Hi, LaShanna & Jim. I don't think there is a way to change that black HC bar, but I'm looking into it. It doesn't (or shouldn't) appear to external visitors, if that is any consolation.

    LaShanna, is that what you want to change? If you want to update colors on the rest of the page, that's addressed in this article, in the section Updating the colors and fonts in your Help Center.

  • 0

    Hi Aimee,

    Now that you've pointed out the obvious, that this bar is only visible internally, it makes my request a lot less interesting. I'll forget about it. :-)

    Thanks, Jim

  • 0

    Hi- we would like to use another image for the home banner using the Copenhagen theme, what are the recommended dimensions and resolution for that banner? 

  • 0

    Hey Patricia!

    The default banner is 1600x300, but it should readily adapt to any size image you put there.

  • 0

    Hi there could you please provide the recommended dimensions for the banner, community and other main image that can be swapped out using the Copenhagen theme as soon as possible?

     

    Also, how does one change the font if not using a google font to link in or embed, rather a purchased front (Proxima Nova Soft). I have the font files on my computer to upload.

    I know how to write and edit css however cannot see the options to do so in the css,

     

    Need this info asap please for urgent job.

    Thank you.

  • 0

    Hi Jim this did it for me:

    .navbar-container {
    background-color: yourcolorhere;
    }

  • 0

    Hi! It states this in the article:

    "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."

    Do you have any information on which number is which setting? I'm trying to change the color of the header 'large' in a knowledgebase article.

  • 0

    Hey Debbie! It's going to depend...what theme are you using?

  • 0

    Hi Jessie, we are using the Copenhagen theme.

  • 0

    i've tried inspecting element etc. could not locate. 

     

    what should the dimensions of the home banner be?

     

    i see you recommend dimensions for the logo. 

     

    thanks,

    garrett

Please sign in to leave a comment.

Powered by Zendesk