Customizing your Help Center theme (Guide Professional and Enterprise)

More web-savvy Guide Managers can work directly with the page code to build a customized theme for Help Center. The code is contained in editable templates that define the layout of each page type, as well as the global header and footer of the Help Center. You can also use a full-featured templating language called Curlybars to access Help Center data and manipulate the content in page templates. Special templates let you add JavaScript or customize the CSS.

You must have Guide Professional or Enterprise to access page code for your Help Center theme.

Tip: If you need help with your Help Center branding and customization, check out Diziana. They offer hundreds of ready-to-use themes and templates for purchase and can help get you up and running.

Note: If you are on a trial version, you have the Guide Professional plan, which includes theme code editing. After the trial, you will not be able to access theme code if you do not purchase Guide Professional or Enterprise.

Customizing the page templates with HTML and Curlybars

The HTML for the Help Center is contained in editable templates that define the layout of each page type, as well as the global header and footer. You can also use a full-featured templating language called Curlybars to access Help Center data and manipulate content in page templates.

Note: On Guide Enterprise, you can create additional page templates for articles, sections, and categories if you need multiple versions of those templates.

You can customize the template of any of the following page types or elements:

Following page (subscriptions_page.hbs): the list of categories, sections, and articles a user is following

User profile page (user_profile_page.hbs)

Note: When you use the Theme Editor to edit the page templates, CSS, or JavaScript for a standard theme, or when you develop your own theme, it is saved as a custom theme. Custom themes are not supported by Zendesk and are not automatically updated when new features are released. See About standard themes and custom themes in Help Center.

To edit the page templates

In Guide, click the Customize design icon () in the sidebar.

Click the theme you want to edit to open it.

Click Edit Code.

In the Templates section, click the template you want to modify.

The page opens in the code editor.

Use the code view to edit the template.

You can add, remove, or reorder any the following:

Template expressions to display and manipulate content in your pages

For example, the breadcrumbs template helper {{breadcrumbs}} displays a breadcrumb navigation element on a page. For a detailed guide on template expressions, see Help Center Templates.

Note: When you use the Theme Editor to edit the page templates, CSS, or JavaScript for a standard theme, or when you develop your own theme, it is saved as a custom theme. Custom themes are not supported by Zendesk and are not automatically updated when new features are released. See About standard themes and custom themes in Help Center.

To customize the CSS or JavaScript

In Guide, click the Customize design icon () in the sidebar.

Click the theme you want to edit to open it.

Click Edit Code.

Click script.js to modify the JavaScript or style.css to modify the CSS.

Using variables in CSS and HTML

The properties you choose in the Settings panel or set in your manifest file for colors, fonts, and theme images are stored in variables. You can use these variables in the theme's style.css file. You can also reference the variables using Curlybars expressions in HTML page templates.

The variables are useful if you want to specify the same value in several places and update it quickly. Updating the property updates it everywhere the variable is used. The default Copenhagen theme includes some variables for colors and fonts. You can change the names and labels, delete variables, or add your own (see the Settings manifest reference).

In the standard Copenhagen theme, you have the following variables by default:

brand_color is the brand color for major navigational elements

brand_text_color is the brand color for hover and active states

text_color is the text color for body and heading elements

link_color is the text color for link elements

background_color is the background color of your Help Center

heading_font is the font for headings

text_font is the font for body text

logo is the company logo

favicon is the icon displayed in the address bar of your browser

homepage_background_image is the hero image on the home page

community_background_image is the hero image on the community topics page

community_image is the image for the community section on the home page

"It's something we're looking at and requires some coordination between the Guide team and the team that manages the Authentication work flow for all of Zendesk. We've had a few brainstorming sessions on how we'd like this to work but we don't yet have a timeline for this.

The biggest issue we have here is with protecting the security of authentication. If someone were to execute untrusted JavaScript on this page it could harvest usernames and passwords. This is obviously not ideal and therefore we have to keep this page tightly controlled. Unfortunately, for our customers this means there isn't much of an ability to customize this at the moment. I can update this thread once we have more in the works."

That was shared about a year ago, and we have not seen any further updates, which means that it's something they would still like to consider doing at some point, but it's not currently on any of the roadmaps or in any plans for development. So there's no ETA, but it's also not been crossed off the list of things that we would like to do at some point.

You're welcome to head to the Product Feedback post linked above and add your vote and use-case.

We are looking for a Premium Zendesk Theme, but want to be able to use it for not only the Help Center page, but the Online Community page too! If you have purchased a Help Center theme from Diziana, Lotus, or Customer Support theme, are you able to purchase one theme that you could use for both "pages"? If so, which one do you recommend and why? Thanks in advance!

You can use any of our Zendesk themes as all of them include a homepage, articles, community, and 'Submit a request' form. So you buy one theme and get everything covered.

Additionally, you get additional formatting components that are included in all our themes for Zendesk Guide to make your articles more attractive and easier to digest.

View all help center pages with content in our demos (every theme has one) to test their functionality and choose a theme that meets your needs best. You can also see some examples of our work in Case Studies and read what our customers say on our website and Facebook page.

Sarah, if you have any questions, contact us and we'll be happy to assist you.

Hi - apologize if this has already been answered, but I'm wondering if there's way to upload a custom font to the Copenhagen theme. I'm not seeing an easy way to do it in the UI, so is there a place we can edit the CSS to put our own font in?

@Emma - If you have the ability to customize the theme then yes you can upload custom fonts. You will just upload them to the Assets Area and then point to them via the CSS tab. Take a look at this article.

Is there a way to target the logo on the home page only and apply a display: none; to it? I put a large logo above the Search Bar on the home page and would just like the one instance removed in the header, I still need it to display on every other page

I installed a custom theme on my Zendesk Guide account. The vendor has published a newer version to fix a bug they had. I have installed the new theme and previewed it. The preview does not look like my Live theme. If I swap to the new version will I lose my customization and content?

I think this is an easy one, but I am trying to update the images on my page, but my pics are not the right size for the home image on the Help Center page. There are three images that I can update, can Someone give me the dimensions of each image space?

Has anyone worked up a way to build a template that will display lists of articles, themed similarly to a category, that have been filtered by label? The use case would look like: I display the labels on each artlcle. User clicks on label and is brought to a page that displays all articles that have that label - similar to a standard taxonomy functionality.

How can I edit the CSS that is in my assets for my custom template. With you latest platform, I don't have the option to edit the references to other assets. Since you changed the way assets are accessed, the URLs in my CSS are wrong and my templates are broken. Is there any chance you can alert your customers when you make a major change like this?

I have tried redirecting end users with something similar to the following code (I changed the website for this snippet) When the code runs it does the redirect, but seems to get stuck in a loop where it continually loads the page. When you do something like the google address it seems to work fine. Is this looping because it is checking if it is an end user again? Any tips, tricks, or direction would be amazing.