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
Jack
I want to customise main page and display requests list there. Is there an example how to do it with custom javascript? Anyway to access {{ requests }} variable?
0
Ifra Saqlain
@Jack, you do this via JS:
Credit: https://stackoverflow.com/questions/43900571/copy-content-from-one-page-to-another-js
i). Add this line of code to requests_page.hbs file.
ii). Add this code to homepage like this:
Output: Request list is on homepage now.
If any confusion feel free to ask :)
Thanks
0
Yaniv RECETTE
Hello,
is it possible to convert a design I have created in Figma to HTML or CSS and paste in Zendesk guide edit code to create a new page ?
Thanks
0
Dirk Pekari
Hi Zendesk Guide Team, do you plan to add some basic responsive functionality to Copenhangen? https://www.w3schools.com/css/css_rwd_intro.asp
0
Paul Dandurand
This article talks about choosing or customizing the theme for the Help Center Guide. We have the Gather Community turned on and it has a default Zendesk image. Is there a way I can upload my own photo for the Gather Community top panel like I did for the Help Center Guide top panel? If so, where are the instructions?
0
Walter
Hi Paul Dandurand,
Yes. See https://support.zendesk.com/hc/en-us/articles/4408824139546-Branding-your-help-center#topic_p1r_345_lw
0
Pulkit Pandey
Hi Paul Dandurand
If you are using Zendesk Default theme Copenhagen, then please refer to the Images setting there you get an option to Change the image of the Gather hero section as shown in the below screenshot.
Please let me know if it solves your issue
Thank You
Pulkit
Team Diziana
0
IT Helpdesk
Hi,
How can I put "submit a request" button function to "Manuals"? It is possible to replace it?
0
Ifra Saqlain
Hi IT Helpdesk,
To get it done, please follow the below steps:
1. Go to your home_page.hbs file.
2. Put this code inside the block list as given in screenshot.
3. Output is:
Change text of 'Submit a request' button text and functionality would be same
Output:
There are more ways to get it done. Hope it'll help you.
Thanks
0
IT Helpdesk
Dear Ifra Saqlain
Thank you for your kind and quick support.
as you can see from the screenshot, Now, I create 2 more "submit a request " buttons with two different name.
1. Can I know how to remove "Manuals" from the homepage? I am trying to hide this button beside from "WPX" and "Helpdesk"
2. Once end-user clicks "WPX" or "Helpdesk" is it possbile to directly go through the "WPX" once the end-user click? Currectly once user clicks, "Submit a request" uses need to choose the team.
0
Ifra Saqlain
Hi IT Helpdesk,
Hide the category blocks as you are saying to hide manuals block and I think that is category block. So add this CSS (style="display:none") to the category block div as I did below:
and,
You mean, when user select WPX button it should redirect to one request form and when user clicks Helpdesk then it should redirect to another request form?
Yes, it's possible.
Add anchor tag with the form's URL as I'm doing below:
In the demo I added my request form URL but you will have yours so replce the href="value" value.
If I misunderstood your query for the second point let me know.
Thanks
0
Mike DR
0
IT Helpdesk
Dear Ifra Saqlain,
Thank you for your kind support.
Now I see three of those boxes but when I put mouse on "Manuals" the word "Manuals" is not disappear but for other menu's it is disappearing.
Can you kindly support us how to have same function?
Always thank you for your support!
Kind ragards,
0
Ifra Saqlain
Hi IT Helpdesk,
Wrap the text inside the span tag as below
0
Brooke Kitten
I have minimal coding experience but would like to use more of the white space in the Copenhagen theme since our users don't access via mobile. Can anyone help me with what to edit to give more horizontal room for text/images on the article pages?
0
Ifra Saqlain
Hi Brooke Kitten,
Just follow the steps below:
i). Go o edit mode of your Copenhagen them.
ii). Open style.css file. See red underline, open that file style.css
iii). Find for container class. Currently, max-width is 1160px ,
you can update it 1400px as I did. It's up to you.
iv). Doing this width will be increased for all pages not only for article page because container should be equal for every page in a theme.
If any bug, feel free to ask :)
Thanks
0
Brooke Kitten
Hi Ifra Saqlain,
Thanks so much for this! It definitely helps. However, it seems something prevents the text from going past the left edge of the upper search bar. Is there any way to make it go even further right on article pages?
Also, the category and section pages still seem to have too much white space on the left. Is there a way to fix that?
0
Michael Webb backup
I want to turn the title of a section that, when clicked, will redirect to a separate site. Is this possible?
0
Pulkit Pandey
Hi Michael Webb backup
Thank you for reaching out. It is definitely possible to redirect all section titles to the same external URL when clicked. However, in order to provide you with specific guidance, do you want to these changes on the Section page?.
I am here to assist you in any way I can.
Thanks
Pulkit
Team Diziana
0
Pulkit Pandey
Hi Brooke Kitten
Would it be possible for you to share screenshots of the issues you are referring to? This would enable me to review them and provide you with a more effective solution.
Thanks
Pulkit
Team Diziana
0
Ifra Saqlain
Hey Brooke Kitten,
Here is your solutions for all three pages, you need to edit your style.css file to extend the width of category and section page.
For category page:
For section page:
For article page:
Now your footer and header have not same width as container has so increase the container for both:
Header:
Footer:
0
Brooke Kitten
Ifra Saqlain - Thank you so much for your clear and concise help! You made this very simple for a very novice user. Thanks again!
Brooke
0
Ifra Saqlain
I'm glad that it worked for you :)
0
Michael Webb backup
Hi Pulkit Pandey.
Yes. Effectively I would be inside of the section already where I can see the titles of its articles. I would want to turn the title of the section I'm in into a clickable link that would take me to its associated website.
0
Brooke Kitten
Hi there,
I'm currently using this code to make all of our images enlarge on hover. We'd like to try click to enlarge instead. How can I implement this in our style sheet?
div-img{
justify-content: center;
align-items: center;
display:flex;
padding-top:20%;
}
img{
transition: transform .2s;
margin:0 auto;
}
img:hover{
transform:scale(2.0);
}
Thanks in advance!
0
Ifra Saqlain
Hi Kitten,
You can use
Credit: https://www.w3schools.com/howto/howto_css_zoom_hover.asp
0
Brooke Kitten
Hi Ifra Saqlain,
Correct me if I'm wrong, but the code you provided also seems to be a hover to enlarge instead of click to enlarge.
Basically, our users don't want the images to auto-enlarge, but they would prefer to click an image and have a larger version open in the center of the screen (a modal, perhaps?) to view the larger version only when each user needs to do so.
Thanks!
Brooke
0
Amanda Gunn
Any idea what to remove in the code to hide the CC tab from users?
0
Ifra Saqlain
Hi Amanda,
Add this line of code to your script.js file at the bottom and test if any issue you can ask.
0
Ifra Saqlain
@Brooke Kitten, it is possible when you are creating articles with the images, you need to add some HTML tags there for popup; CSS and JS will be added or there is Bootstrap Modal as well.
Another way is, that you can use JS only to add a modal for your images but that will apply to all images of the theme so you need to check the URL with the condition.
Any help feel free to ask :)
0