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}}
150 Comments
Hey Hedda,
Are you looking to limit the number of Sections that can be added to a Category or the number of Sections that are displayed under each Category?
I'm afraid there wouldn't be a way to limit how many sections can be added to a Category but you should be able to limit the number of sections displayed with some custom code in your Guide theme.
I encourage you to take a look at the following documentation regarding Help Center customization:
Hope this helps get you started :)
Qual é a previsão para liberar a configuração da API?
Hi Charles,
Can you point me to an article which describes how to add an image to the copenhegan theme..
I tried the following but is not able to follow this properly
https://support.zendesk.com/hc/en-us/articles/223150367-How-to-localize-the-banner-image-in-Copenhagen-Help-Center-theme
Thanks
Suman Saha
Hey Suman,
Have you had a chance to look at this article? Branding your Help Center
This will walk you through the appropriate steps for updating your images in the Help Center.
Hope this helps!
Is there a way to add an image to the help text for a field in the submit a request page?
Hi Mike,
It's not possible to add an image to the help text as HTML is filtered out automatically. With some theme customization you could get it to work though.
Alternatively you can add an image above or below the form by editing the new_request_page.hbs file in your theme.
Best,
Simon
Simon,
That is what I was looking for thanks for the help.
Mike
Hi Guys
I have modified the codes on our Theme before using "Edit code", however, now I'm not able to modify the Document_head anymore! I will get the error message as "Failed to save theme". Other pages are ok.
The problem exists even on themes which are not live.
Any advice?
Hey Ehsan,
I have the same issue on the requests list page, mine started yesterday around noon. I assumed I had made a mistake somewhere, but I was unable to figure out what I did as I could not save it no matter what I changed. I should note that it appears to be working again this morning.
Thanks,
Jason Fouchier
Hi Ehsan and Jason!
Thank you for reporting this - our teams have identified the root cause of this behaviour and they have addressed this from their side. You shouldn't run into this issue again.
Apologies for any inconveniences and thank you once again for your patience.
Hi Jason and Alexander
Thank you for your replies. I just tried and It seems to be working for me as well.
Hi,
this is to ask you something regarding the new_request_page.hbs template - thus the contact us form customization.
How can we set mandatory fields and relative notification error messages to be shown in case user tries to submit the request without having filled all the mandatory fields? Also where to check the code preventing user to send the request? Currently we are facing cases where users are able to submit a request even without having filled every mandatory field.
I can not find the relative piece of code - nor in new_request_page.hbs and script.js, could you please give me any suggestion?
Many thanks and regards
Hey Vanessa,
This isn't handled in the Help Centre, this is handled in the Support admin settings for Ticket Fields. Each ticket will have an attribute that can be checked making it required to submit the request. If a user tries to submit a ticket without this field, the form will reject and highlight the field that needs filling.
Setting found here:
Sample setting:
Error message on submission when not completed.
I have done same changes in requests_page.hbs and preview the functionality, It was working as expected, after that I published the code .but the change is not working when I am accessing the guide as a end user.
Could you please suggest is there any way to save the code explisidly .
Thanks
Samir
Hey Samir Sarkar
Can You please share the code or screenshot of the changes you have made on requests_page.hbs file.
Regards
Pulkit
Hi Pulkit,
Thanks for checking on it , I have written a piece of code in where only "Platinum" organization's user will be able to see a particular form in guide.
Sorry it's my bad , I wrote the code on script.js instead of request_page.hbs
//Hide ticket form
$(window).load(function() {
var i = 0;
var checkExist = setInterval(function() {
i++;
if ($("a.nesty-input").length){
clearInterval(checkExist);
$("a.nesty-input").each(function() {
$(this).bind( "click", function() {
for (var c in HelpCenter.user.organizations) {
if (HelpCenter.user.organizations[c].name !== "Platinum"){
$("#360002268853").remove();
}
//reserve space for additional organizations
}
});
});
}
if (i > 10){
clearInterval(checkExist);
}
}, 100);
});
Please find the attachment
Hi there,
I'd like to be able to make the category buttons on my home page stand out more. Instead of turning into a block colour when I scroll over, I'd like them to be a block colour from the start.
Does anyone know how I can do this?
Cheers,
Aishah
Hey Aishah Hamzah
Do you have a link to your help centre that's publicly accessible? It would make providing a solution much simpler. If not, do you have a snippet of code you can post that shows your category buttons
Thanks!
Hi Dan Ross,
Thanks for your comment!
Our Help Center isn't publicly accessible yet and I'm out of my depth in terms of code! So here's a screenshot.
We think the standard Copenhagen theme leaves the buttons a little hard to see - as you can see with the "Category 1" button. You can't see this but in the screenshot I have my cursor over the "Category 2" button.
Is there a way to make the buttons orange without having to hover over them?
I hope that makes sense! Cheers.
Thanks Aishah Hamzah, that helps. I'd suggest you make a copy of your theme before trying this until you're satisfied with the results.
In your theme code, go to the style.css file and find the .blocks-item class. In the list of parameters, you may see one called 'color:$brand_color;'
Replace that with 'background-color:orange;' Note that you can use hex values, or CSS colors here
After you're done, it might look like this:
If you want to change the colour that's displayed when you mouse over each button, lookup the
.blocks-item:hover class. It might also have .blocks-item:focus, .blocks-item:active
on the same line. Change the background-color attribute to another colour of your choosing.
Hopefully that helps point you in the right direction! Good luck!
Thanks Dan Ross, that worked a treat!
Hi, I am in the process of setting up a new guide page and I need to change the spacing on the homepage after the category buttons; there is a massive white space under these buttons and the footer. I've tried amending many of the margins/padding sections to no avail. Can someone point me in the right direction to change this spacing?
Hey Nicola Bachelor
Can it's possible to share the URL of your HC where this thing is happening, So i will get the clue what is going on there and provide you a desired solution to your problem
Thanks
Jay
Hi Jay - I've not made it live yet so it has not been activated yet. Thanks Nicola
Hey Nicola Bachelor
Can You please let me know are you using Copenhagen theme, can you please share me a screenshot of your problem.
If you have no issue can you make it live for a few minutes so that I can go to the issue and provide you an exact answer ;)
Thanks
Jay
Hi Jay,
Thanks for coming back to me.
It is the Copenhagen 2.2.4 version.
I've attached a screenshot of the page below - so it's the space under the category buttons (below FAQ) and above the black footer at the bottom.
Hey Nicola Bachelor
Thanks for sharing screenshot, Do you have made any changes on the home_page.hbs template
I think you need something like that
Thanks
jay
Hi,
Yes - that looks right. I have made 1 amendment to the home_page.hbs to rename the Submit a request form. It was mainly css code that I have amended.
That's Great
Here goes the solution to your problem, Please Swap the below code of home_page.hbs file with your code and you can look at the code which I have commented, If you need that code in future you can keep as its if you don't then you can remove the part of code that I have commented, its totally depend upon you ;)
Let me know if you have any issue after the implementation of the above ;)
Thanks
Jay
Is it possible to somehow customize the registration form? I'd like to add a phone number field to it and maybe even make it a required field. It seems it is not part of the templates or maybe I just cant find it.
Please sign in to leave a comment.