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
Leung Edward
Hi Tanya, Got it. Thanks for your help.
1
Shaping New Tomorrow
Hi,
How does one change the picture associated with the Help Center theme.
See examples of pictures below:
Thank you in advance.
Sebastian
0
Nicole
Shaping New Tomorrow 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.
0
Shaping New Tomorrow
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.
0
Pulkit Pandey
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
1
Shaping New Tomorrow
Hi, thank you for your replies.
Pulkit Pandey - This was exactly what I was looking for, thank you very much!
Have a nice day!
0
Nathan Purcell
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.
0
Nicole
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.
0
Nathan Purcell
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.
0
Nicole
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.
0
Nathan Purcell
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
0
Dave Dyson
0
Dave Dyson
Hudson is a third-party theme, so you'll need to contact the developer directly -- there's a "Contact Us" link here: Hudson theme
1
elena
0
Jahn
Hello Charles Nadeau or anyone, can we possibly have like interactive workflow in Guide using this?
0
Rebeca
Hello! Has anyone customized their own theme while still using the basic search functions of the Copenhagen theme?
Our theme has been too customized, and the search functions are not working very effectively, I was wondering if it's possible to use basic search functions but being able to maintain the design we have created for our Help Center.
Thanks in advance!
0
Gorka Cardona-Lauridsen
Rebeca
There should be no problem using the native search helper (functionality) with a customized theme, though depending on how you want to customize the search experience using the native search helper may have some limitations.
Alternatively, you can build your own experience using the search API, though searches would count against you account's API rate limit.
Another alternative would be to use one of our partner apps like Algolia, Swiftype, or Coveo.
0
colleen
I am using a customized Braden theme and have successfully added custom blocks to my landing page. I now need to remove those blocks, but removing them from the CSS hasn't updated the front end. Here is the section from the CSS, which is showing the correct IDs I want to display:
But you can see in dev tools the removed IDs are still there:
I've cleared cache and waited several days, but no change. What happened?
0
Lotus Themes, Zendesk partner for Help Center design and customization
Hi colleen,
Thank you for choosing our Braden theme. Can you contact us directly? Our developers will be happy to help.
Best,
Lotus Themes
0
Nathan Purcell
Colleen, that CSS isn't targeting those divs as they don't have the class "block-list-item".
In your CSS, replace ".block-list-item" with ".custom-block" and it should work.
0
Heather Firth
Just want to say a big thank you to Carmina G. your email was very helpful, thank you! I wasn't able to add a comment to the ticket but I just wanted to give you a big thumbs-up. Sorry I didn't get to the survey in time.
0
Gorka Cardona-Lauridsen
Hi All,
We are looking to talk to people that have code customized a Help Center theme or tried and failed to code-customize a theme.
If you are up for sharing your feedback through a 30 min video interview, please sign up and answer 3 short survey questions at the end of the form. We would love to hear from you!
Sign up here.
Looking forward to talking to you!
Gorka Cardona-Lauridsen
Sr. Product Manager, Zendesk Guide
0
Francisco M
Hi!
I am trying to find the article that had the code for the Zendesk Forms (Image Below).
I need to hide certain fields and add custom text above certain fields.
0
Anne Ronalter
Unfortunately, I can not see a screenshot.
But it sounds like you are referring to Building a custom ticket form with the Zendesk API.
0
Francisco M
Sorry, I thought I posted it. It's just an image of a form.
What I used to be able to do is simply add some code into ZD Guide > Themes > Customize > Edit Code > and add some code directly to script.js
Here is my code:
1
Ifra Saqlain
Use this code:
Note: ?ticket_form_id=13055910490772 - Remove this id and add your form ID
Instead of:
0
Andrii Melnychuk
Hi there 👋
Noob question: I'm trying to achieve what Daniel Goldberg asked above, but getting errors when copying container from requests_page.hbs to home_page.hbs:
Any hints how one can make that container to work on home page?
Thanks!
1
Nicole
Hi Andrii Melnychuk,
There was an article found here that kind of relates to your question. The errors are from undefined helpers that are only usable on their respective pages. I'm honestly not sure if there is a workaround, but reading up on the helpers and where they work would be a good starting ground. Hope that helps some!
1
Tomas M. Parra
Hello, community!
I'm customizing the Copenhagen theme. I added some Javascript, CSS and HTML to the files style.css, script.js, category_page.hbs and some other files.
Is it safe, or do I have to create a child theme to prevent future updates from overwriting my changes?
Thanks!!
0
Ifra Saqlain
Hello Tomas M. Parra, if you have been Edit Code of Copenhagen theme then you don't need to do to prevent future updates.
When you go to customize the Copenhagen theme, you will get an alert
"By accessing the code of your theme, the theme will be unlinked and will no longer receive new features and updates from Zendesk. You'll be responsible to implement any new theme features. Learn more
Yes, you can do one thing, download your updated theme and save that into a folder on your PC.
Thanks
0