Web-savvy Guide admins can work directly with the page code to build a customized theme for your help center. Customized themes can include:
- Editable templates that define the layout of each page (for example, article page, category page, or community topic page)
- Custom pages that you create from scratch and place anywhere in your help center
- Global header and footer for 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 and custom pages. You can also use the JavaScript and CSS files included with your theme to make site-wide changes to the appearance and behavior of the theme. If you are thinking about using your own HTML code to edit your help center theme, read Allowing unsafe HTML in help center articles.
This article covers the following topics:
Related articles:
Customizing page templates and custom pages with HTML and Curlybars
The HTML for the help center is contained in editable templates that define the layout of page types, custom pages, and a global header and footer. You can also use a full-featured templating language called Curlybars to create or manipulate content for these elements.
You can customize the template of any of the following page types or elements, or create your own custom pages.
- Custom pages (custom_page.hbs): custom pages that you create from scratch and link from anywhere in your help center
- 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)
To edit the page templates
- In Guide, on the sidebar, click the Customize design icon (
).
- Click Customize on the theme you want to edit.
- Click Edit code.
- In the Templates section, click the template or custom page you want to modify.
The page opens in the code editor.
- Use the code view to edit the template or page.
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
- Template expressions to display and manipulate content in your pages
- Click Save in the top right corner to save your changes.
If you edited a template, 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 or custom page, 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 elementsbrand_text_color
is the brand color for hover and active statestext_color
is the text color for body and heading elementslink_color
is the text color for link elementsbackground_color
is the background color of your help centerheading_font
is the font for headingstext_font
is the font for body textlogo
is the company logofavicon
is the icon displayed in the address bar of your browserhomepage_background_image
is the hero image on the home pagecommunity_background_image
is the hero image on the community topics pagecommunity_image
is the image for the community section on the home page
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 a 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}}
71 Comments
Hi Tanya, Got it. Thanks for your help.
Hi,
How does one change the picture associated with the Help Center theme.
See examples of pictures below:
Thank you in advance.
Sebastian
Sebastian Jensen if you're just looking to change the image and not add/change a whole theme, it's done from within Guide. You'd click customize, then image from the options on the left, replace the image, then click publish to save the changes.
Hi Tanya,
Thank you - This does not help here though, as I am not looking to change the image in the help Center. I am looking to change the preview picture. As we operate with numerous versions, being able to change the picture makes it easy to manage and see what is what.
Hi SNT Aps
Please follow the below steps
1. Take a screenshot of your homepage
2. Rename that screenshot with the following name "thumbnail"
3. Then Download your theme in your system unzip the zip file
4. The Replace the thumbnail image with the current one
5. Create the Zip of your theme and then Install
Let me know if you need any further assistance
Thanks
Pulkit
Team Diziana
Hi, thank you for your replies.
Pulkit Pandey - This was exactly what I was looking for, thank you very much!
Have a nice day!
How do I add an image to a theme so it can be referenced in the HTML? I don't want it to be editable by anyone in Guide but it needs to be part of the theme.
Nathan Purcell you can add the image to your assets:
After it uploads, you can click on the asset and use the CSS or Javascript code provided by ZD, or right click on the image to grab the URL that you can use in the HTML.
Hi Nicole, thanks for your reply.
How do I reference it in the theme though?
To be clear, I mean in the code, not the UI.
It depends on how/where you're using it. If you mean from your theme pages, you can use a <a href='http://(image URL from assets here)> tag.
I found it!
In the theme, add the file to the /assets directory and reference using the same asset helper:
https://developer.zendesk.com/documentation/help_center/help-center-templates/helpers/#asset-helper
Please sign in to leave a comment.