English (US)
  1. Zendesk help
  2. Guide
  3. Using Guide for help center
  4. Using themes and customizing your Help Center

Branding your help center

Jennifer Rowe
  • Edited
Zendesk Documentation Team

Suite allall 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 options are in the Settings panel of Guide.

This article covers the following topics:

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, you can edit the underlying theme code (not available on Suite Team), 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 Customize in the theme you want to update. The theme page opens.
  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.

    Click away from the color box and the color choice is saved.

  5. Repeat for other colors you want to change.
  6. When you've finished updating your colors, click Publish.

    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 Customize in the theme you want to update. The theme page opens.
  3. In the Settings panel, click Fonts.
  4. To change the heading font, click the drop-down menu under Heading, then select a font for your heading.

    The font updates in the preview window.

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

    The font updates in the preview window.

  6. When you've finished updating your fonts, click Publish.

    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 Using your own theme assets for Help Center assets.

To update the logo and favicon your help center theme

  1. In Guide, click the Customize design icon () in the sidebar.
  2. Click Customize in the theme you want to update. The theme page opens.
  3. In the Settings panel, click Brand.
  4. 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. The image background should be transparent or match the background color of the header.

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

  6. To change back to the default image for the logo or favicon, click Revert.
  7. When you've finished updating your logo or favicon, click Publish.

    The changes are applied to the theme.

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

To update the images in your theme

  1. In Guide, click the Customize design () icon in the sidebar.
  2. In the Settings panel, click Images.
  3. Under any of the images that appear in the Settings panel, click Replace to browse to and select an image.
    • For the Home image and the Community image, the recommended 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 it 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 Settings panel. 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've finished updating your images, click Publish.

    The changes are applied to the theme.

  6. Click Back to return to the Themes page.
Return to top
Have more questions? Submit a request

90 Comments

  • Vladan Jovic
    Community Moderator

    Here you go ;)

    section.section.activity {
     display: none;
    }
    0
  • Milton Marcelo

    @ Vladan!

    Thanks a lot!

     

    Sorry for disturbing you so many times, but I just noticed that some categories and sections are not displayed in anonymous and "end user" profiles. How to solve this problem?

     

     

    0
  • Vladan Jovic
    Community Moderator

    You are welcome! Is there a content (articles) into these categories / sections?

    • if not, add and publish some articles
    • if yes, check maybe this is the reason

    Hope this helps!

     

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    You are awesome, Vlad! Thanks for helping out. 

    0
  • Milton Marcelo

    Thanks @Vlad! 

    0
  • Liz Rosen

    Hello, the dimensions for the default banner and logo have specific recommendations that I can pass along to our designer, but with regard to the community image, the article only says, "...should be less than 300px in height to avoid stretching." Can you please provide a specific  X by Y px recommendation?  Thanks!

    0
  • Jessie Schutz
    Zendesk team member

    Hey Liz!

    I double checked the wording in the article, and the way I read it is that the 1600x300px recommended dimension applies to both the top banner and the community banner. You can use an image that is less than 1600px long if you'd like, but it needs to be at least 300px tall regardless of the length of the image to make sure it doesn't get distorted.

    Let me know if that doesn't clear things up for you!

    0
  • Liz Rosen

    Hi Jessie - there are 3 - the home banner and the community banner are 1600x300, but then there's also the community image, which doesn't go all the way across the page. I was looking for the specific width of the community image to give our designer so that he doesn't have to fix something later.  Thanks for your help!

    1
  • Jackson Miller

    Looking for the same info as Liz.  

    The best I can tell, the default image is 495x274.

    0
  • Jessie Schutz
    • Edited
    Zendesk team member

    Hey Liz and Jackson!

    I apologize, I misunderstood the question!

    If you look at item 3 in the article, right under where it gives the recommended dimensions for the banners, you'll see where we've specifically called out the Community image: "And the Community image, should be less than 300px in height to avoid stretching." 

    I did some testing on my end by way of a sanity check, adding images that were 394x300px, 728x300px, and 855x300px, and they all rendered perfectly. 

    So essentially, you can add a Community image that's any dimension you like, as long as it's 300px high or less. While not the specific X x Y answer you were looking for, it does give you a lot of leeway in terms of design because you're only restricted by dimensions in one direction.

    Hopefully that clears things up for you! Let me know if you have any additional question!

    0
  • Ravi Bail

    Hi,

     

    I have uploaded banner images for the theme, Now I would like to go back to default images, is it possible?

     

    Thanks

    Ravi

    0
  • Jessie Schutz
    Zendesk team member

    Hi Ravi! Welcome to the Community!

    You can change your banner images to anything you like, but once you've replaced the default image with your own branding, you won't be able to get that back unless you saved it somewhere before you replaced it. There's no button revert to the default settings. Sorry to be the bearer of bad news!

    0
  • Clayton Waters

    We've customized our Zendesk theme, including adding the following <meta> to the Header portion of the theme:

    <meta property="og:image" content="//p7.zdassets.com/hc/theme_assets/231027/200067384/brushfire-zendesk-share-image.png" />

    However, it looks like when you choose a logo in your Guide settings that Guide creates a <meta> that uses the logo as the og:image:

    <meta property="og:image" content="http://p7.zdassets.com/hc/settings_assets/231027/200067384/H1dAOi09S26ihCNkqHv4Rw-Brushfire-logo-white.png">

    Is there any way to make Guide NOT do that? We want to specify a custom image to be displayed when any of our Guide links are shared.

    Link to our Guide: https://get.brushfire.help/hc/en-us/. 

    2
  • Lisa S

    Hi,

    Is it possible to upload multiple logos within Guide? One brand supporting 8 languages - we'd love to be able to customise the logo per user language if possible.

    Thanks,

    Lisa 

    0
  • Sergei
    Zendesk team member

    Hi Lisa!

    Thank you for this question. Sorry to say, but there are no straight forward options for this approach. One brand = one logo and multiple languages ( https://support.zendesk.com/hc/en-us/articles/204108983-Setting-up-multiple-brands-Enterprise- ).

    The only workaround that I could think of is - creating multiple language specific brands, like MyBrand EN, MyBrand DE, MyBrand FR and attaching different logos to them (Professional plan with add-ons and Enterprise plans can create up to 300 brands), then using our API, determine which language settings customer is using, and show them page according to their preferences. This is time and work consuming, so threat it as a suggestion. 

    Let us know about any other questions you might have!

     

    0
  • Lisa S

    Thanks Sergejs!

    We only have capacity for 5 brands, however, require more languages than this but thanks for your help.

    Lisa 

    0
  • Trapta
    Community Moderator

    Hi @Lisa Santamera,

    You can use the {{#is}} helper to achieve something like this. All you have to do is copy the locale name from the language selector (you have on your help center) and put it in place of LOCALE in the below code.

    Replace <img src="{{settings.logo}}" alt="{{t 'logo'}}"> with the below code -

    {{#is current_locale.name 'LOCALE'}}
      <img src="{{settings.logo}}" alt="{{t 'logo'}}">
    {{/is}}

    Repeat this code for different locales.

    Let us know if you face any issue.

    Team Diziana

    0
  • Sarah Cronin

    Hi! We have a company font that isn't listed in the choices drop down box. It is imperative that we are able to use our font so it matches all of our other company websites. Is it possible to have it added? If so, how?

    Thanks,
    Sarah

    0
  • Nicole S.
    Zendesk Community Team

    Hey Sarah -

    Here are some articles and community tips that should help you out:

    Adding a custom Font Family to Help Center

    Resources for designing your Help Center

    0
  • Molly Phillips

    How do I prevent copy/paste from taking the font from a Google Doc and putting it into my Help Center content?
    I started my Help Center in Google Docs and once I got my Zendesk Guide license, starting copying/pasting content from one to the other. It appears that this is picking up the font formatting from Google Docs and overriding my default font in my Help Center. I can get into situations where I have two different fonts in one article--besides the fact that I can't figure out how to override the wrong font.

    0
  • Jim Uomini

    Hi Molly,

    I have the same issue with MS Word. I use an app called Doc Converter Pro to convert my docs to clean HTML, which I then paste into the code view in an HC article.

    Here's a link to a post about converting Google Docs to clean HTML:

    https://www.techjunkie.com/google-docs-to-html/

    Best, Jim

     

    1
  • Patrick Bosmans
    Zendesk Customer Advocate

    Thanks for that workflow idea Jim!  

    Molly, I hope that helps you with your workflow.  I might also suggest trying Shift+Cmd+v to paste the content with the same formatting as what is currently set in the editor.

    0
  • Gorka Cardona-Lauridsen
    Zendesk Product Manager

    @Molly, as you are using Google Docs I would also suggest that you can use the Google Doc importer feature in Guide. It strips the font formatting and you can bulk import your docs.

    0
  • Molly Phillips

    @Gorka, I originally planned to do that, but it requires that I give Zendesk access to all of my Gfiles, which is a security issue.

    0
  • Maimoona Abbas
    • Edited

    I need to change logo and theme but I am encountering this error while hitting at customize theme page. Any one can answer why I am seeing this.

    For reference screenshot is attached.

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Maimoona,

    That's definitely some odd behavior going on there. If you navigate to ethizo.zendesk.com/theming/workbench do you receive the same error?

    If the issue continues please let me know so I can get a ticket created on your behalf. Our Customer Advocacy team may need to dig into this further and take a look at your account.

    Hope to hear from you soon!

    0
  • Janice Whiteside

    Can the standard "hero home" image on the Copenhagen theme be replaced with an image that contains links?

    0
  • Yamen Hawit
    • Edited

    Hello, I added a header image on the home page, but the picture is not being responsive to smaller screen sizes, and so cuts off as you open it on smaller screens or in mobile. 

    Desktop:

     

    Mobile:



    Is there a way to make the header image responsive (in a sense) so that it adjusts to different screen sizes? 

    Thanks, 
    Yamen 

    0
  • Sebastiaan Wijchers
    Community Moderator

    Hello Yamen,

    It keeps the the image at a height of 300 pixels (if that's the Copenhagen theme). So your people fall off to the left and right. What would be your desired effect?

    With kind regards,

    Sebastiaan

    P.S.

    A starting point could be something like this in the .hero class of your CSS:

    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #eff7ff;

    It will put the image at the center of the bottom. It will 'contain' instead of 'cover' the image, but not repeat it. And you set the background color of the hero container to the background color of your image.

    Then the image will size with your browser width, but you're probably after something more refined.

    0
  • Ron de Vries

    Hello!

     

    Maybe one of you can help me with a simular issue. I want to have the Company Logo (under Brand) to change whenever a customer selects the language English (GB). This because in Great Britain Help Center is written as Help Centre.

     

    I've already uploaded both assets (Help Center and Help Centre) but I can't figure out how to code it. We make use of the Diziane Eczar theme.

     

    I know how to do it with dynamic content but I don't like the look of it. I would prefer the logo to change completely when selecting EN-GB language.

     

    I think I'm close with the {{#is helper but it doesn't yet show my asset:

    <header class="header-wrapper">
    <div class="header">
    <div class="logo">
    {{#link 'help_center'}}
    {{#is current_locale.name '/hc/en-gb'}}
    <img src="{{asset 'FG_HC_GB.png'}}" alt="{{t 'logo'}}">
    {{/is}}


    Thank you so much in advance!

     

    BR,

    Ron

    0

Please sign in to leave a comment.

Related articles

Powered by Zendesk