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 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, 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
- 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 Using your own theme assets for Help Center 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.
14 Comments
i have uploaded a 1600x300 image to my help center "hero image" but on higher res screens the edges are getting cut off. Are there tricks to preventing this?
Hello, just wanted to ask if the logo image size recommendations in this article still apply to the Copenhagen Theme. I ask as the default image in git is 470x470. Thanks in advance.
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.
Running into an issue that I've seen posted in the comments but I wasn't able to see any resolution to it. Apologies if I missed it. I have uploaded a new Hero banner image to our Guide but at 100% zoom in chrome, the image gets cut off on the top and bottom. If I zoom to 200% in Chrome, the image looks fine but then the rest of the help center is MASSIVE. I have resized the image at least 10 times but every time I upload, the image remains the same, cut off on the top and bottom. I ensured to use the 300 pixel hight suggest in the article. I even tried one that was much smaller and one that was bigger. It always looks the same.
Here is 200% Zoom in chrome
Here is 100% zoom in Chrome
Any ideas how to make the banner actually fit?
Is it possible to update your own fonts?
Hi Carlo,
Yes, customizing your help center base on your preference is possible under Guide Professional Plan. You may check Customizing your help center theme for more information.
All the best
I am a Guide Admin but unable to customize the design and restructure my help center. I believe this is because I am not the Account Owner? Is there a way for the Account Owner to grant these permissions?
It appears that although you're set to be an Admin in Support, you're an Agent in Guide. See About team member product roles and access for information on how to update your Guide role.
Hi There,
I would like to know how to change the colour of the help center name and language selection under the footer? Thanks
Thanks for reaching out!
You can do this by updating the CSS values for those elements in the
style.css
file of your help center theme. Specifically, you'll want to update the.footer a
and.footer-language-selector button
selectors. As an example, the below code snippet would update both elements to display as red:This article will go in to a bit more detail about customizing the CSS of your help center:
I hope this helps! Feel free to reach out with any questions.
Tipene
Was there ever a resolutions for the problem Treez, Inc mentioned? I am experiencing it as well.
I would suggest that you initiate a conversation with us, so one of our Support Representatives would be able to help you troubleshoot the hero image issue
Hi VONQ B.V. / Treez, Inc
Thank you for reaching out!
I think you can solve the problem by making some changes in your help center's style.css file. All you have to do is look for 'Hero Component' section and make the following amendments:
I hope this helps, but let me know if you have any questions.
Best,
Kuldeep
How do you set the height of the hero container? I added height to .hero-unit but that didn't have any effect. The section class is hero-unit--large container but I don't see that anywhere in the CSS.
Does anyone know how to add a branding logo to the Help Center's page and it appears on top of search sections? I added a screenshot below and also included circles where I need the logos to appear. Please advise
Please sign in to leave a comment.