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:
- 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 for your theme
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
- Brand color
- Brand text color
- Text color
- Link color
- Background color
To update your Help Center colors
- In Guide, click the Customize design icon (
) in the sidebar.
- Click Customize in the theme you want to update. The theme page opens.
- In the Settings panel, click Colors.
- 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.
- Repeat for other colors you want to change.
- When you've finished updating your colors, click Publish.
The changes are applied to the theme.
- 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
- In Guide, click the Customize design icon (
) in the sidebar.
- Click Customize in the theme you want to update. The theme page opens.
- In the Settings panel, click Fonts.
- 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.
- 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.
- When you've finished updating your fonts, click Publish.
The changes are applied to the theme.
- 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
- In Guide, click the Customize design icon (
) in the sidebar.
- Click Customize in the theme you want to update. The theme page opens.
- In the Settings panel, click Brand.
- 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.
- 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.
- To change back to the default image for the logo or favicon, click Revert.
- When you've finished updating your logo or favicon, click Publish.
The changes are applied to the theme.
- 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
- In Guide, click the Customize design (
) icon in the sidebar.
- In the Settings panel, click Images.
- 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.
- For the Home image and the Community image, the recommended size is 1600x300px.
- Repeat for the other images, if you want to replace them.
- When you've finished updating your images, click Publish.
The changes are applied to the theme.
- Click Back to return to the Themes page.
88 Comments
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.
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!
Is it possible to change the color of the top menu bar in Help Center?
Hi Jim,
Can you post a screen shot of exactly which bit you want to change?
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
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!
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
Hey LaShanna,
Did the instructions in this article not give you the information you were looking for? What exactly are you trying to customize?
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
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.
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
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?
Hey Patricia!
The default banner is 1600x300, but it should readily adapt to any size image you put there.
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.
Hi Jim this did it for me:
.navbar-container {
background-color: yourcolorhere;
}
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.
Hey Debbie! It's going to depend...what theme are you using?
Hi Jessie, we are using the Copenhagen theme.
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
Why is the help center setting not optimized for both desktop and mobile? It's so infuriating... it either looks good on mobile or desktop, but not both?
All i'm getting are links to user guides, that don't help.
I'm trying to change the logo return URL and have swapped the code as detailed above.
Something seems to be wrong as my logo doesn't display and parts of the code after the change are now highlighted in pink.
I've attached a screenshot.
Any ideas what I'm doing wrong?
Thanks in advance!
Hi James, let's try without / after .png"
Thanks for the quick reply - I've tried removing the / but it still remains the same (logo not showing and the text after the change highlighted in pink).
I also tried deleted the space before the / but that didn't work either.
Could you please paste your code here? Thanks
Symbol after .com is not good, should be ". Please check or copy paste that Symbol from other location in the code.
That's solved it! Thank you :-) It was the " symbol, so I copied it from somewhere else in the themes html and it worked.
Glad that it works now! Feel free to post here if any further help needed! ;)
How can I delete the community section just as iFood (food.zendesk.com)?
Hey Milton, do you meant on ifood.zendesk.com?
If yes, probably the easiest way to remove this Community section is if you add the following code into your help center CSS file:
Hope this helps!
Thanks! That solved my problem! But I realized that I also need to hide the "Recent Activity" section. Could you, please, help me solve this issue?
Please sign in to leave a comment.