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
Francis Morissette
Hey guys,
Am I able to just start from complete scratch? Completely different layout, like, modify a base "template.hbs", and not just header. I want to access the head, complete body and stuff. Is that possible?
0
Ifra Saqlain
Hey Francis, editing the header is so simple. Go to the header.hbs template and start editing or you can share the screenshot here if I misunderstood your point.
-1
Ken Billing
Ifra,
I'm considering switching to the Copenhagen theme and customizing it but I'm concerned about having to migrate that customization to future versions of the theme. Is there a revision history for the theme documented somewhere or can you comment on how often it has been or expects to be updated?
Thanks
0
Augusto Silva
HeY Ken Billing,
The best way to follow updates is to fork the theme's github repository and use the github integration to import your customized theme.
0
Sarah Cronin
Can anyone tell me where I would go in the Copenhagen theme to edit where it says Announcements Customer Connection and Tips & Best Practices on this page:
0
Maggie Ungerboeck
Hi,
My guess is that these are either article categories or community topics. If you go into your Guide Admin, you can click on Arrange Articles and you can see a list of all your Categories. If you click on Arrange topics, you can see your community topics.
Hope this helps!
Thanks,
Maggie
1
Vitor Galveia
Hi,
I need to add an extra page with some static content and a link on the footer to access that page. Is that possible with the copenhagen template?
Thanks
0
Marius
Hi,
I'm trying to add a background picture to the footer in the Copenhagen theme.
How does it work?
0
Pulkit Pandey
Hey Marius Tendick
If you have not customized the default Copenhagen theme just add the below CSS at the bottom of your style.css file
You need to upload the image under the assets folder then copy the following Highlighted URL and replaced it with the text inside the URL() parameter
let me know if it solves your issue
Thanks
Pulkit
Team Diziana
0
Marius
Hi Pulkit,
Thanks you! It's working perfectly
How can I change the size of the footer image?
Marius
0
Pulkit Pandey
Hey Marius Tendick
You can use background-size CSS property
Let me know if it solves your issue
Thanks
Pulkit
0
Jim Thompson
Hello everyone. Will cross-post this in the Javascript cookbook article as I suspect this is JS related. Our "Community" section is now tracking "Feature Requests" from our customers and I would like to further customize the status of posts/ideas. Anyone know how or where to modify this list? Is it part of the theme editor or somewhere else in Admin settings?
0
Anton Hughes
Step #3 of To edit the page templates - There is no Edit Code button.
Whats going on?
0
Pulkit Pandey
Hi Anton Hughes
It's possible for you to share the screenshot of what you are seeing.
Thanks
0
Cas.D
I have added a javascript file to my template assets. This file contains functions, with arguments.
How would I use one of these functions in my template?
0
Pulkit Pandey
Hi Cas du Plessis
Can you please share a screenshot of what you want to do
Thanks
Pulkit
Team Diziana
0
Cas.D
In my document_head.hbs, I have added this:
The icon.js file looks something like this:
My home-page.hbs I want to add an icon for each category:
No errors in the template edit, and no errors during run time in the dev tools console.
I have tried adding the asset directly into the home_page.hbs, but still not working:
Any ideas?
0
Cas.D
any idea how to access the script from a template?
0
Timothy LeCras
Is there a snippet of code that can change the sections in a category to look like a block w/description (like how a category looks on the help center main page?
0
Pulkit Pandey
Hi Cas du Plessis
Sorry for the late replay, I will give it a try today and let you know, are you open to update the code base.
As I can see that you want to add a image on the category blocks on the homepage.
Thanks
Pulkit
0
Pulkit Pandey
Hi Tim LeCras
You need to modify the code base of the category page, do you want to show the list of article under the section or you just want to show the section name
Thanks
Pulkit
0
Daniel Goldberg
Hi,
How I can make the home page to be the "requests" page.
Just to be clear, when customers are logging in the first thing they see is their requests with an option to create new one
1
Vishal Kadu
I have cards type structure (all categories in cards layout) on the home page and I want to add the following behavior:
The left-hand ToC should appear in an expanded state and highlight the section that is selected, while the rest of the ToC remains in a collapsed state.
Any directions on how can I achieve this based on the Copenhagen theme please?
Thanks
0
Lotus Themes, Zendesk partner for Help Center design and customization
Hi Vishal,
You can use the Side Navigation extension for the second one. More information about theme compatibility is here.
0
Jill Hohnstein
I am using multibrands to create my help centers in zendesk, which is working fine. But, for the life of me, I cannot figure out how to create a single landing page with links to each brand like the demo I was shown here: https://z3n-retaildemo.zendesk.com/hc/en-us. I was told we have this ability, but I can't figure it out.
My account person said to use home_page.hbs, but that's the landing page of each individual brand, and not an overall landing page. Please help.
0
Tipene Hughes
Hi Jill Hohnstein,
One way you could go about this is by using (or creating) and overarching brand and creating links to the other Help Center URLs from there. Here's an example below of how that could look. This code would go in the home_page.hbs file of the overarching brand:
I hope this helps! Feel free to reach out with any questions.
Tipene
0
Anita Rajkumar
is it possible to add line between some of the fields in submit a request- new web
form?![](/hc/user_images/9xX-E4xAoiLt7hE_d85DLQ.png)
0
Pulkit Pandey
Hi Anita Rajkumar
Yes, you can add by using CSS get the ID of the form field and the add the border
If it's possible to share the URL of help center where this form is in use, so that I will provide the CSS which will solves your issue
Thanks
Pulkit
0
Pulkit Pandey
Thanks Anita Rajkumar, I will come with the solution shortly
0
Pulkit Pandey
Hi Anita Rajkumar
Please, add the below CSS at the bottom of your style.css file
Let me know if it solves your issue
Thanks
Pulkit
0