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 Editing the source code of help center articles.
When you modify a theme's code (for example, its templates, JavaScript, or CSS), the theme
preview displays the </>
icon, indicating that the theme's code has
been modified and will no longer receive new features and updates.
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 Localizing help center content)
- Embeddable widgets created by third parties
- 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.
Note: When previewing a theme, all features may not work. The preview functionality is intended to show look-and-feel changes, but it is not intended for end-to-end testing of interactive theme functionality. We recommend you use a Sandbox for end-to-end testing.
- 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 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
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}}
178 comments
Shane Weber
Hi Everyone, i'm looking to add priority to my "my requests" page.

I think i've got the basics down, but am probably missing something simple.
I've added a table head for priority and a <td> for it as well, but I am not pulling back any results.
<td>{{priority}}</td>
I've also tried priority_name priority_description and priority_title.
Any thoughts?
0
Tipene Hughes
Hey Shane Weber,
Are you seeing any errors at all in the help center code editor? Also, if you can you share a screenshot of the code from your end, that'd be super helpful.
0
Shane Weber
Tipene Hughes Thanks for the response, we are not seeing any errors in the code editor, I can force an error by trying misspelling something though.
0
Tipene Hughes
Thanks for sending this through - everything looks good with your code. Can you check in admin center to see if the priority ticket field is deactivated? I just tested on my end and deactivating the field resulted in the priorities being blank in the HC requests page.
Let me know how you go!
0
Shane Weber
Thanks it does look to be active, but it's set for only agents to view, could that be the cause?
0
Tipene Hughes
0
Brooke Kitten
Hi there,
I'm needing some help adding subsections to my Help Center.
Currently, our Category pages display each individual article in a section. We'd like to create subsections and show those on the category page.
Currently, it's not displaying the sections I created as a test at all.
For the Section pages, we'd like the section title to appear below the search box with the subsections below that.
Can anyone help me with the code to do this? I tried the code provided here, but it's displaying very oddly small. We'd like the subsections to appear larger and more spaced like the articles below them that haven't been placed in a section yet. (Place an order, Xpressdocs Standard Pricing)
Here is the current Category code with no subsection coding:
And here is the current coding for the Section page with no subsection coding:
Thanks in advance for any help at all!
Brooke
Evan Pitonzo
0
Christopher Kennedy
Do the new subsections have accessible articles within them? The parent section or category page won't display to end users if they contain no articles that they can access.
0
Abdelhameed Khaled
Hello , I created a custom Page then I tried to loop over the articles with this code from category_page.hbs but it gave me an error that "articles doesn't exists"
how could I use article object (or any other object) outside category page (or any other page)
<ul class="article-list">
{{#each articles}}
<li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
{{#if promoted}} TEST
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}">
<path fill="currentColor" d="M2.88 11.73c-.19 0-.39-.06-.55-.18a.938.938 0 01-.37-1.01l.8-3L.35 5.57a.938.938 0 01-.3-1.03c.12-.37.45-.63.85-.65L4 3.73 5.12.83c.14-.37.49-.61.88-.61s.74.24.88.6L8 3.73l3.11.17a.946.946 0 01.55 1.68L9.24 7.53l.8 3a.95.95 0 01-1.43 1.04L6 9.88l-2.61 1.69c-.16.1-.34.16-.51.16z"/>
</svg>
{{/if}}
<a href="{{url}}" class="article-list-link">{{title}}</a>
{{#if internal}}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
<rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
<path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
</svg>
{{/if}}
</li>
{{/each}}
</ul>
0
Christopher Kennedy
This error is expected behavior because the section.articles array from your snippet is not an available property on custom pages. The custom page doesn't have the context of a current category or section (where all articles are structured within) to be able to render them. Can you share some more background info on your use case? Are you looking to include promoted articles on the custom page? Because that can be done using the promoted_articles property.
0
Nicholas Sexton
Hello all,
Is there a possibility to update the wording of ‘Submit a Request’ in top right of our guide home page? We would like to change this to say ‘Submit a Ticket’.
Furthermore, is it possible to bold article categories on our guide home page? We would like to bold the words before FAQs.
0
Ifra Saqlain
Hey Nicholas Sexton,
Go to your header.hbs file and replace the code with the given code snippet.
Current Code:
Screenshot for the same: Desktop
Screenshot for the same: Mobile
Use this given code:
Screenshot for the same: Desktop
Screenshot for the same: Mobile
And use this given CSS code to bold the title of block:
Screenshot for the same:
If any confusion feel free to ask :)
Thanks
0
Janais Rule
Hello Community,
We only allow our customers to submit tickets on Form ABC. However, we create internal tickets on forms JKL, PQR, and XYZ. is there a way to hide tickets on forms JKL, PQR and XYZ from appearing the in end users “my requests” page?
requests_page.hbs
I am using the Copenhagen Theme version 2.19.4
0
Nicole
Janais Rule You should be able to achieve that from the form in the Admin Center. There is a checkbox that makes it viewable to endusers:
You would just open the form(s) in question and uncheck this box to have it removed from the dropdown list.
To add, as long as you use the other forms as internal forms and don't assign the end user as the requestor, it wouldn't show to them at all when they log in to review their ticket history.
0
Janais Rule
Thanks Nicole,
However, that's our issue - we need to assign the customer as the end user so the tickets are linked back to the organization.
Customers can only submit tickets to our “customer support form” based on the checkbox you show, but since our team creates the tickets for the internal project work and lists the customer as the end user, we're running into a speed bump.
This was not an issue in the past because the Help Center was not live. We're rolling it out to our customers in July and need a way to continue creating our internal tickets, but hide the forms from the my requests view if it's not the “customer support” form.
0
Nicholas Sexton
Hello Ifra Saqlain ,
With my example of bolding the words before “FAQs”, it seems this updated the whole box instead of this specific question. Is it possible to bold the words ‘Business’, ‘Agent’, & ‘Corporate’ with the screenshot below, and keep the rest of the text non bolded?
0
Ifra Saqlain
Remove previous SS code and use this code:
0
Austin Kettler
Is it possible to display all the articles under a section rather than having the “see all x articles” link?
0
Simon
Hi Zendesk community,
It seems Zendesk's theming API has been upgraded from v3 to v4.
I have a question regarding the change to {{categories}} and the fact that "articles" has been removed entirely from being called from the categories object on the homepage. Our custom design relies on being able to list articles on the homepage under sections. Does this mean articles can be called via another object or has it been removed entirely?
Requirement
How can I call a list of articles that belong to a specific section on the home_page.hbs template?
Currently, on API v3 I use:
Will I instead need to inject a list of articles via a script? If so, will I face an issue with API rate limiting or API limits?
I've got a potential solution that I need some help with: https://support.zendesk.com/hc/en-us/community/posts/7551780567578-Listing-articles-in-the-home-page-hbs-template-via-curlybars-or-an-API-script-API-v3-to-API-v4
0
Patrick Beebe
Our organization uses four ‘brands’ (example, tech support, office services, HR, and Finance). I removed the ‘submit a request’ option on the MAIN landing page, as this caused confusion for staff. Unfortunately, it removed the ‘submit a request’ option on ONLY ONE = office services. I've tried editing the code to reinstall on the header.hbs, but the page only displays a ‘hamburger’ and does not do anything.
So, WHY would it effect only one of the pages? WHY would it remove it in the first place?
here is the code:
<a class="skip-navigation" tabindex="1" href="#main-content">{{t 'skip_navigation' }}</a>
<header class="header">
<div class="logo">
{{#link 'help_center'}}
<img src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}" />
{{#if settings.show_brand_name}}
<span aria-hidden="true">{{help_center.name}}</span>
{{/if}}
{{/link}}
</div>
<div class="nav-wrapper">
<button class="menu-button" aria-controls="user-nav" aria-expanded="false" aria-label="{{t 'toggle_navigation'}}">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-menu">
<path fill="none" stroke="currentColor" stroke-linecap="round" d="M1.5 3.5h13m-13 4h13m-13 4h13"/>
</svg>
</button>
<nav class="user-nav" id="user-nav">
{{link 'community'}}
{{link 'new_request' class='submit-a-request'}}
</nav>
{{#if signed_in}}
<div class="user-info dropdown">
<button class="dropdown-toggle" aria-haspopup="true">
{{user_avatar class="user-avatar"}}
<span class="hide-on-mobile">
{{user_name}}
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon" aria-hidden="true">
<path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
</svg>
</span>
</button>
<div class="dropdown-menu" role="menu">
{{link "my_activities" role="menuitem"}}
{{my_profile role="menuitem"}}
{{change_password role="menuitem"}}
{{link "sign_out" role="menuitem"}}
</div>
</div>
{{else}}
{{#link "sign_in" class="sign-in"}}
{{t 'sign_in'}}
{{/link}}
{{/if}}
</div>
</header>
0
Patrick Beebe
I've resolved this myself, CLose the ticket
0
Tony
that's great to hear! Feel free to share your solution with the community if you feel like it!
Best,
0
Julian Garcia
I am at a loss as to how to either add editable fields to the category or make the landing page for a category an overview article. Very much just like zendesk's own developer documentation:
https://developer.zendesk.com/documentation/ticketing/
Help is very much welcome
0
Omar Aborayan
Hi,
I have 2 questions here:
1- if I want to enable Gather for internal users only, the article advises removing the community links from the theme.
Now, could you let me know which links to be removed and how to remove them?
2- If we decided to keep the community for the public (external users), how can we manage the posts (internal and external)?
Thanks in advance :))
0
Tatiana Christensen
Hi, I hope this is the right place for this question and apologies if I missed the answer in the many comments!
How do we set up this “Articles in the series” feature. Is there a recipe for that?
We'd love this feature for a stronger presentation of advanced workflows or interconnected processes under one procedure. This would for us strengthen the help center as a tool for process documentation.
0
Ashok Kumar Reddy Putta
Hi ,
We have added URL's as fields description for end user reference to visit / update templates (spreadsheets) ,and these Url's are currently visible to end users in help center portal .
however when they click on URL , and the URL is getting open in same tab.
Is there any way to open URL's in new tab.
I have tried this .js , and it is working in sandbox , but not working in production instance and i only see the version difference of portal
Regards,
Ashok
0
Growthdot
Hi community! You can count on GrowthDot If you have any difficulties with theme customizing or need a specific theme tailored to your website. Also, we have ready to use Zendesk Themes, or we can help you with any issue with your existing one.
0
Raúl
i'm trying to customize our zendesk guide theme. i've noticed there are certain elements which i cannot edit because they are being rendered with snippets. for instance, on an article page, the {{request_callout}} snippet is rendering the “Have more questions? Submit a request” prompt. how can i edit such snippets if i'm interested in changing the behavior of the <a> tag living inside that snippet? another example is the button in the user nav bar, which appears to be living in the {{user_info}} snippet which has all of the user menu stuff, including the button.
0