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.
This article covers the following topics:
Related articles:
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.
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)
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
-
Template
expressions to display and manipulate content in your
pages
- 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
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}}
149 Comments
Can you add a link to the community page in a section of a help center? If so, how?
Hi Tiffany!
This is going to depend on where exactly you want to put the link...can you give me some more details about what you have in mind?
Hi Jessie,
I was thinking at the bottom of the page, similar to how the community link looks on the home page. I didnt want to put it in an article, because then the user would have to click the article title and then the link to access it.
Thanks for the additional info, Tiffany!
You should be able to do this pretty easily by making some modifications to the HTML or CSS code in your Guide. As long as you're on the Team plan or higher you'll have access to this in your Guide admin settings.
You can modify the footer in the CSS code so it shows up on every page, or you can make changes to specific areas so it only shows up in certain places.
Let us know if you have any more questions!
Very useful step-by-step guide on help center customization. Thanks, Charles!
And this isn’t the ultimate list of what you can do to customize your Zendesk theme. You can also change the look of your content to make it more user-friendly and easy to navigate. For example, it’s possible to add tabs, accordions, callout blocks or simply change fonts and icons. Explore more additional components you can use to your advantage: http://bit.ly/2uld6zZ
If you have any questions about customizing Zendesk themes, don’t hesitate to ask!
Best,
Lotus Themes Team
Hey,
In the documentation, it mentions that Custom themes are not supported by Zendesk and "... are not automatically updated when new features are released". So several questions.
1) What does adding a new feature mean exactly? edits to HTML? complete rewrites? Do the old custom themes get deleted?
2) Is there a way where we can monitor or find out when a new feature is added?
3) How can we update our custom theme with the new features without resetting or starting from scratch from the Standard theme?
Thanks,
Mark DiValerio
Hi Mark,
1) When we release new features that affect the theme we do not automatically update custom themes because updates you had made to your templates, CSS or JavaScript would get overridden and lost. So you have to manually use the Theme Editor to edit the page templates, CSS, or JavaScript to add the new feature.
You will continue to receive all non-theme related features, regardless of whether you have a custom theme. Updates to the article editor, history view, etc. are unaffected by customizing your theme.
2) You can learn about new features by subscribing to our Announcements section.
3) When features are released for a theme, we include instructions in our templating cookbook for how to manually add them to customized themes. You can edit your current custom theme to add the code for the new feature. You do not need to start from scratch, and any customizations you've already made should be unaffected.
Does that clear things up? Let us know if you have more questions about this.
Hi all,
Wondering if any of you know how to add an additional hyperlink next to the Community link on the navigation bar on top so users can go back to main site after using the help page.
Thanks
Hi @Fivegrid Websites - If you are on a plan that allows customization then you should be able to just add HTML into the "Header" template.
It would look like this:
<a href="http://www.google.com">Main Page</a>
Thanks Wes, that was easy!
@Fivegrid - Glad to hear and if you run into any other issues along the way just let us know.
Hi everyone I have a somewhat tricky, two-part question.
Within a given section, is it possible to have my articles appear all together as one big long article? I'd like to do this to provide better sequential context for users.
If so, can users who submit a query using the Search function, be directed from the search results page to the relevant information still within that long article format (by way of anchors or some other mechanism)?
Huge thanks to anyone who can help in any way.
Hey Community,
Does anyone have experience coding their "Submit a request / Contact Us" page to ask visitors to select a specific issue and receive self service deflection before allowing them to submit a ticket? See these links for some examples of how it could look: https://www.hellofresh.com/contact-page/?footer or https://help.nowtv.com/get-in-touch
Any pointers or tips would be much appreciated :)
Hey Jonathan -
You might want to try posting this to the Q&A topic in the Community, your question may get more visibility over there.
@Ramador -
You'll notice that in our documentation, we often have one long article that leverages anchor links, with a summary at the top of the article. See this for an example: "Creating and managing triggers for ticket updates and notifications")
When people search, if they search for one of the sub-sections, it will bring it up. However, the link only takes them to the top of the page, not the anchored part. But with the bulleted and anchored list of topics at the top of the article, it's usually pretty easy for people to find what they're looking for.
I hope that helps!
@nicolerelyea
Thanks Nicole - we've been able to implement the anchor functionality within our long articles, just not the search results landing directly on the anchors.
I want to learn to do 2 simple elements you used in your own article- A table of contents with links to lower part of the page, and highlighted note boxes. I can't seem to figure out either!
These things should be more user-friendly. They are so basic and important to knowledge base.
@Mike Rappaport
If you are familiar with HTML and CSS, you can do both.
To add a table of contents you need to create a script that finds titles in the article. To highlight note boxes you need additional HTML markup and CSS styles.
Alternatively, if you need help, you can get Zendesk extensions and other customizations from us.
Best,
Lotus Themes
We've customized our Zendesk theme, including adding the following <meta> to the Header portion of the theme:
However, it looks like when you choose a logo in your Guide settings that Guide creates a <meta> that uses the logo as the og:image:
Is there any way to make Guide NOT do that? We want to specify a custom image to be displayed when any of our Guide links are shared.
Link to our Guide: https://get.brushfire.help/hc/en-us/.
Can we customize the og:image that appears in the head tag? It seems that ZenDesk is writing an og:image meta tag above where I can add my own document_head.hbs customizations. And I tried changing my logo image, and that doesn't appear to be updating it either (unless it's cached and the cache isn't invalidating).
Does anybody have any idea, how I could change words organisation to team in Help Centre.
e.g. when clicking on My Organisation Requests to view them, I would like to say My Team's requests.
Also to say Teams: by the dropdown where you can select from multiple organisations when selecting which organisation requests do I want to view.
If anybody has a good idea, please let me know.
Hey foks, I'm looking to expose some of the custom fields for our users from ZD support into the help center, is there a way to achieve this within the templating engine provided by Zendesk?
Hey all -
Customization questions are good to post over in the Q&A section in the Community, where more users hang out and are likely to see your questions and offer solutions.
Hey Flo! Sorry for the delayed response.
As long as your custom fields are set up to be visible to both agents and end-users, they will show up in the user's ticket that they can see in your Help Center. You can find more information about this here.
Hi,
I have found it hard to upload custom CSS file to the Assets directory of the new customization interface of Guide. My question is how can I upload Fontawesome css with its font files and reference its font files 'ttf", "Woff", "eot" etc. Everything uploaded to Assets folder are referenced through these placeholders like $assets-fontawesome-webfont-woff2. This doesn't work in files uploaded to the assets directory.
Thanks,
Jehan
@Jehan - Why don't you just call the font awesome files via CDN. Then if you need to include them in your CSS then you can call the font family and content.
@Wes Drury, Fontawesome was and example I have given, lets assume you have a custom font OR a custom JavaScript file and you don't have a CDN for it, then what would you do?
@Jehan - Sure I implement custom fonts all the time on client's Help Centers. You just upload the .ftt,.woff.eot.etc and then you call them via CSS. Below is an example of what your CSS should look like.
@font-face {
font-family: NationalFont;
src: url($assets-national-bold-otf) format("opentype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: NationalFont;
src: url($assets-national-bookitalic-otf) format("opentype");
font-weight: normal;
font-style: italic;
}
I am trying to edit the background color for all agents comments in guide.
So far i have this in my css.
.staff{ background-color:#F6FFEB; padding:20px 10px 10px 20px;}
and this in my JS
$j(".by-staff").parents().filter(".item").addClass("staff");
But it is still not working. What am i missing. Thoughts?
Hey Peter!
I see that you've posted this question elsewhere, and one of our Community Moderators is ready to weigh in help you out. He'll be able to help you over there!.
Please sign in to leave a comment.