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
Anita Rajkumar
Let me try and get back you soon
0
Anita Rajkumar
Thank you Pulkit
Could you please share code for adding title under the line ?
0
Pulkit Pandey
Okay 👍, I will sharing it shortly
0
Anita Rajkumar
Thank you Pulkit!
0
Pulkit Pandey
Hi Anita Rajkumar
Please, add the below CSS code at the bottom of your style.css file
Let me know if it solves your issue
Thanks
Pulkit
0
Pulkit Pandey
Hi Anita Rajkumar
Happy to hear it solves your issue, have a nice day
Thanks
Pulkit
0
Anita Rajkumar
Pulkit,
Is it possible to embed email hyperlink in the home page image?
1
Pulkit Pandey
Hi Anita Rajkumar
It's not possible to add a link to the text which was added to the image
Thanks
Pulkit
1
Anita Rajkumar
Thanks again Pulkit
when the new 'Submit a request' is opened (requests/new?) is it possible to pre-populate the Last Name and First Name based on who is logged/requestor in to submit the ticket?
1900005454064 - Firstname
1900005454544 - Lastname
{{ticket.requester.name| split:" " | first}}
0
Anita Rajkumar
any suggestion/sample code on below requirement
Requirement : - (End –User Window only)
“Last Name”, “First Name”, “Network ID”, “Reports To” and “Location” fields needs be pre populated and read-only for new requests
When “Is this request for someone else?” Field is checked and User Type field is selected as ‘Network Users’ and Email Address filed is entered
0
rob crozier
Hello,
I am looking for resources for adding a multilevel sidebar to the article page of the Copenhagen theme. I'm not finding any resources for an API call or any other way to do this. Is it possible to create this with the Copenhagen theme?
Thank you
0
Dave Dyson
Can you give an example of what you'd want this "multilevel sidebar" to look like, and/or what you'd want it to contain and what the behavior would ideally be? Thanks!
0
Ifra Saqlain
Hi rob crozier,
if you are talking about a sidebar that has -
Category > All the Sections of it > All the subsections of it (if exists) > All the articles of it.
e.g.
If you are talking about this, then you can contact to Diziana.
https://www.diziana.com/
Also, you can get this feature via APIs. You will need to write script code.
Have a nice day :)
Thanks
Team Diziana
0
rob crozier
Hi Ifra,
Yes that's what we'd be looking to create. We're okay creating an API call for that, if possible can you point me toward documentation for creating that call?
Thank you for your help!
0
Ifra Saqlain
Okay, I'll share some points.
Here, these are the APIs to create the sidebar:
Articles API: /api/v2/help_center{/locale}/sections/articles,
Categories API: /api/v2/help_center{/locale}/categories,
Section API: /api/v2/help_center/{locale}/categories/sections
Now, you will need to call this one by one,
Call category API, then section, and then article.
Hope it helps you.
Thank You
0
flora123
with what
0
Support Admin
Which template file is used for editing articles? I want to add a display option setting for our articles
0
Ifra Saqlain
Hi Support Admin,
Please follow the below steps:
To edit the page templates
Thanks
Team Diziana
0
Support Admin
Thanks, but that was not the question. I know where the template is for controlling the display of the article to users. I want to know where the template is that controls the view presented to agents when editing articles.
0
Office
Hello,
Could you recommend someone (Trusted agency or freelancer) which implement help center new theme designed in figma? Thank you in Advanced!
0
Nicole Saunders
Hi Office,
Your best resource would be the official Zendesk Marketplace. There are a number of trusted partners who can help with theme designs there.
0
Nicole
Pulkit Pandey I know this is a long shot here, but you made a couple replies in this thread on August 30, 2021 and these are exactly two items that I'm trying to accomplish. I would like to make my section headings in a block layout like the categories, and I'd also like to add an icon to the blocks if possible. I didn't see a response in the thread on how to work to do this. Any tips or ideas would be greatly appreciated!
0
Pulkit Pandey
Hi Nicole S
Are you pointing out to make the section heading on category page or in homepage.
Its would be a good if you share screenshot and live help center URL, so that I will provide you a solution for that
Thanks
Pulkit
Team Diziana
0
Nicole
Pulkit Pandey Such a quick reply, thank you! Yes, I'm looking to make the section headings in block format, and then add icons to the blocks (both section and category).
0
Brent
I like everything about this site. This is the first time our HOA has ever had a website. It has greatly improved communications and has given us the ability to make important documents readily available to everyone. I have not had any problems and they just keep updating the ability to do new things on a regular basis. You really cannot go wrong using them.
0
Jimmy
how can i resize the "community_background_image"?
0
Pulkit Pandey
Hey Jimmy
Do you want to update the height of the hero section? Can you please share the screenshot of what you to want to achieve.
Thanks
Pulkit
Team Diziana
0
Nicole
Jimmy I believe you would need to edit the CSS for the container that applies to the background image.
0
Leung Edward
Hi there,
Where and how can I modify the question (highlighted in yellow) in "Submit a request"?
Thanks for your help.
0
Nicole
Leung Edward That is actually found from the Admin center, in your ticket forms area.
0