More web-savvy Guide admins can work directly with the page code to build a customized theme for 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 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 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}}
143 Comments
I would like open, organization requests to be shown to signed-in users on the Home Page of the Help Center. Or, potentially, modify the home page to redirect to the "My Activities" page, and then I can use the API to display articles there.
@Will - This script will redirect an end user to the Request Page.
https://gist.github.com/moderatorwes/614de539de35aece9530
Ok, so just "manually" redirect the user. I was hoping there was a way to update subdomain.zendesk.com/hc/en-us BE the requests page, but a redirect is certainly usable! Thank you =)
@Will - I'm not aware of any way to update the subdomain so I believe the re-direct is the only option available at this point in time. Best of luck
I'm trying to get my logo to link to the company's official site but couldn't find any way to do it. I am now trying to input my logo as an uploaded image in assets but I can't get the hyperlink to attach to the image. Right now the image in not visible, if I add text the hyperlink does go to the appropriate site.
I've been working in the HTML but I'm probably doing something obvious wrong as I know nothing about coding!
<header class="header">
<div class="header-inner">
<a href="https://www.COMPANY WEBSITE/">
<img scr="//p5.zdassets.com/hc/theme_assets/793026/200142987/BFC-logo-1-line_zendesk.jpg" style="max-height:30px;border:0">
</img>
</a>
<nav class="user-nav">
{{language_selector}}
{{submit_a_request}}
<!--{{user_info}}-->
</nav>
</div>
</header>
Thank you in advance :)
how to make export template to import sandbox?
It would be real nice if we could clone our live theme, so we can mess with it in a sandbox environment when thinking about big theme changes. Looks like I will be using the old copy and paste method.
Hey folks, does anyone know why I can't get more than 3 images in a row on my home page?
The clear fix and table in CSS seem to be controlling this:
* Clearfix: contain floats
*/
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/*
* Column size
*/
.main-column {
float: left;
width: 950px;
margin-left: 0px;
}
. {
float: right;
width: 300px;
}
Hey Kevin,
That's right, it's in the CSS. You'll either have to make the width-constricting high level container larger, or make the blocks smaller. I say high level because your main-column may be limiting the overall width, but there may be a higher level element also restricting it. I changed some of my high level elements like 'main' to max-width and min-width from a fixed width to make them flexible across screen sizes. Then set some lower level containers, like your 'main-column' to a fixed percentage width. This way my block screen, that looks similar to yours, will use more of the wide space available without getting too big or too small. The thing to look out for is to check your other pages to make sure the same css element changes will work there as well. If not, you'll have to change one or the other too have everything come out nicely.
Hi Olivia,
This is how my header logo html looks with a link to my page. I added the image using base64 encoding. If you google convert jpg / png / etc to base64 you'll find online tools that will give you the base64 code for your image. The code is very long so I put ellipses (...) in place of most of it.
<a style="border:0px" href="https://companyurl"><img width="30px" height="30px" src="data:image/png;base64,iVBORw...VYCh" alt="Home"></a>
Hey Nicholas! Thanks for hopping in and helping out!
The theme we are using displays 6 questions in each section on the category page with a 'show all' option if there are more than 6 in that section. We can't see a limiting number in the code we've looked at. Does anyone know how to reduce that number?
Hey Amy!
Our moderator Wes posted a tip about this: Show less than 6 articles in a section in Help Center. That'll get you started!
Thanks Jessie that's great!
Hi!
Great article! We are in the middle of a re-make of our help center and I'm wondering how to divide the articel in different topics, as it is in the beginning of this article? Publishing links to another article is not a problem but it would be nice to give the costumers better suggestions on topics in long articles..
Hi Eva! You can find that information in this article:
Happy formatting!
Any chance that it is possible to add a custom column to the My Requests page?
Hi Jay!
There isn't a way to do that at this time, but it's definitely something we've received a lot of feedback about. You can find that thread here: Enable custom ticket field columns to be added to the request table in Help Center my activities page.
You'll see that our Help Center Product Managers have weighed in on it, and have done some information gathering as well. I'd encourage you to add your vote and use case to that thread!
We're planning on using the Copenhagen theme and for now don't want to create a custom theme, but just want to adjust colors and fonts using the settings available in the theme editor.
However, even though it lists a number of different fonts that can be used, when I save my settings the font changes don't register. Is this not really enabled for use with the standard theme?
@Larry - The fonts should be applied through-out your theme when selected. I just tested and it worked fine but I didn't test every font. Which font are you selecting?
My first few attempts didn't seem to stick... (I believe I had tried Arial Black), but after a few combinations, I selected Future for Font 1 and Helvetica for Font 2 and those were retained and applied.
Questions:
1) Which parts of the template are Font 1 applied to, and which are Font 2 applied to?
2) Similarly - What do colors 1 - 5 control the colors of? Is there a chart somewhere that shows which parts of the template these selections are applied to?
3) Is there any control on the font sizes? Or does that require custom coding in the .css (We want to keep this simple to maintain and don't want to get into the code itself if we can avoid it). If font size can't be controlled, do any of the available fonts appear larger relatively for ease of reading?
On a non-related note:
3) We've uploaded images, but notice that they don't resize when viewed in mobile or smaller screens. It appears they just get their left and right sides removed (causing text on the left and right of the image to be cut off). What's the best strategy for these images so they look good in all screen widths?
Thanks!
@Larry
Hi Larry!
I'm sorry the fonts didn't seem to work, but I can try to answer your questions:
1) The Font 1 is for heading tags, so it would change any `<h1>....<h6>` and the Font 2 variable is set to the body of the element, so the remaining text would have this.
2)
- Color 1: We identify it as brand color this will change the icons, the color of the boxes in the home screen and the color of the buttons.
- Color 2: This color is of the text inside anything with a Color 1 background, for example the category boxes on hover, buttons, icons, etc.
- Color 3: Text color, so everything inside the content, the comments, posts, titles, etc.
- Color 4: Link color
- Color 5: Background color
We are working on the naming :D
3) Right now, to change the font size you would need to go in the code to change that
4) The recommended sizes can be found here(https://support.zendesk.com/hc/en-us/articles/220672108#comment_206572007), the way we handle them is by using a "background-size: cover" so the image doesn't stretch and dynamically adapts to the screen size and displays the center of the image, that may cause issues when using text on the image, in my opinion, the best way to go would be without text.
Hope this helps :)
Is there any way to create your own custom variables outside of the provided '$color_' and '$font_' variables?
@Brad - I haven't found a way to add any more variables however I have suggested this to the HC Product Manger before. You may want to go and post this over in the Product Feedback section. It would get my vote.
Just wondering if anyone knows of a way to customize the design based on the category? I wanted to do a different header depending on which category our user selects. I assume different brands would help me acheive this, but i'd like to avoid that as these categories are just different products within our brand.
@Frank - Yes you can change the design a little based on the category. You will use a combination of JQuery and the curlybar brackets. I did this to change the background color of the page based on the category you were on.
Are you just wanting to change the header based on the category. Can you give me a little more details.
Thanks for the reply Wes.
Yes, so my current mockup, our header is one solid color, with our logo and the zendesk login. I'd like to be able to change the header color and logo for each category (if that clarifies it any)
Nevermind...
When you are customizing the theme of your help center, is there a way to change the language and see that while editing?
Our font in English is fine, but some text in french or german is much longer because of translation so it wraps. But i want to be able to see the changed when I am editing it to see if it works without saving and publishing something that may not work.
Thanks
Would it be possible to get a guide on how to setup our own Search Results page similar to how yours looks here in the Zendesk Help Center?
Hi,
How to limit cell about #each?
Example:
{{#each requests count='10'}}
{{id}}
{{/each requests}}
Not works a limit 10, please help.
https://developer.zendesk.com/apps/docs/help-center-templates/helpers (Not explain about each)
Please sign in to leave a comment.