Customizing your help center theme – DEMETER ICT

Suite Growth, Professional, Enterprise, and Enterprise Plus professional enterprise plan

Quick Look: Guide admin > Customize design > Customize > Edit code

More web-savvy Guide admins can work directly with the page code to build a customized theme for your 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.

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: Trial users are given the Professional plan, which includes code editing options, but they will no longer be able to access that feature if they purchase Suite Team.

This article covers the following topics:

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:

Article page (article_page.hbs): the individual article pages in the knowledge base
Category page (category_page.hbs): landing pages
Community post list page (community_post_list_page.hbs)
Community post page (community_post_page.hbs)
Community topic list page (community_topic_list_page.hbs)
Community topic page (community_topic_page.hbs)
Contributions page (contributions_page.hbs): the lists of posts, community comments, and article comments by an end-user
Document head (document_head.hbs): the document's head tag
Error page (error_page.hbs): the message displayed when a user lands on a non-existent page
Footer (footer.hbs): the bars appearing at the bottom of all help center pages
Header (header.hbs): the bars appearing at the top of all help center pages
Home page (home_page.hbs): the top-level landing page for your help center
New community post page (new_community_post_page.hbs)
New request page (new_request_page.hbs): the request or ticket submission form
Request page (request_page.hbs): the individual request or ticket pages
Requests page (requests_page.hbs): the lists of requests or tickets assigned to a user or that a user is CC'd on
Search results (search_results.hbs): the search results display format
Section page (section_page.hbs): landing pages
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.
- Dynamic content placeholders, (see Adding translated text)
- Embeddable widgets created by third parties, (such as the Twitter search widget)
- HTML markup
Click Save in the top right corner to save your changes.
The changes are applied to every page in your theme that is based on the template you modified.
To preview your changes, click Preview, see Previewing your theme in the help center.
Make other code changes as needed, then click Save.
When you're finished editing the page template, you can close it.

Customizing the CSS or JavaScript

You can add JavaScript code or customize the site's CSS. For a taste of the things you can do in the help center with a little bit of coding, check out the following resources:

To customize the CSS or JavaScript

In Guide, click the Customize design icon () in the sidebar.
Click Customize on the theme you want to edit.
Click Edit code.
Click script.js to modify the JavaScript or style.css to modify the CSS.
The file opens in the code editor.
Add or modify the JavaScript or CSS in the code view.
Click Save in the top right to save your changes.
The changes are applied to your theme.
To preview your changes, click Preview, see Previewing your theme in the help center.
Make other code changes as needed, then click Save.
When you're finished, you can close the file.

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

To use variables in CSS and HTML, see:

Examples using variables in CSS

The properties you set for colors, fonts, and theme images are stored in variables that you can use in your theme's style.css file.

For example, you can use some of the default variables in CSS with the following syntax:

$brand_color
$brand_tex_color
$heading_font
$text_font

In the CSS file, you assign a variable to a CSS property the same way you would assign a normal value. For example:

.button {
  label-color: $text_font;
}

You can also use single curly brackets to embed the helper in a CSS expression, as follows::

max-width: #{$search_width}px

Examples using variables in Curlybars in HTML

The properties you set for colors, fonts, and theme images are stored in variables that you can reference with Curlybars expressions in HTML page templates.

The variables become properties of the settings object in Curlybars. As with any Curlybars object, you can use double curly brackets and dot notation to insert an property in a page template.

For example:

{{settings.color_1}} is the HEX value of a color. For example: #FF00FF
{{{settings.font_1}} is the font stack. For example, system is defined as: '-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
{{settings.homepage_background_image}} is the path to the file stored in this field. For example: p8.zdassets.com/theme_assets/...
{{settings.range_input}} is the value of the range input.

The settings object can be used as input to any helper. For example:

{{is settings.enabled}} ... {{/is}}