Customizing your help center theme

EditedOctober 31, 2023 21:35

Zendesk Documentation Team

Suite Growth, Professional, Enterprise, and Enterprise Plus professional enterprise plan

Fastpath:Guide admin > Customize design > Customize > Edit code

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, readEditing the source code of help center articles.

Tip:If you need help with your help center branding and customization, seeDiziana. They offer hundreds of ready-to-use themes and templates for purchase and can help get you up and running.

Note:Trial users are given the Professional plan, which includes code editing options, but they will no longer be able to access that feature if they purchase Suite Team.

This article covers the following topics:

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.

Note:On Enterprise plans, you can create custom pages, as well as additional page templates for articles, sections, and categories if you need multiple versions of those templates.

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'sheadtag
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)

Note:When you use the Theme Editor to edit the page templates, CSS, or JavaScript for a standard theme, or when you develop your own theme, it is saved as acustom theme. Custom themes arenotsupported by Zendesk and arenotautomatically updated when new features are released (seeAbout standard themes and custom themes in help center).

To edit the page templates

In Guide, on the sidebar, click theCustomize designicon ().
ClickCustomizeon the theme you want to edit.
Click编辑代码.
In theTemplatessection, 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 expressionsto 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, seeHelp center templates.
- Dynamic content placeholders, (seeAdding translated text)
- Embeddable widgetscreated by third parties
- HTML markup
ClickSavein 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, clickPreview, seePreviewing 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 clickSave.
When you're finished editing the page template or custom page, you can close it.

Tip: Read this Zendesk blog postfor more knowledge base article template ideas.

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:

Note:When you use the Theme Editor to edit the page templates, CSS, or JavaScript for a standard theme, or when you develop your own theme, it is saved as acustom theme. Custom themes arenotsupported by Zendesk and arenotautomatically updated when new features are released. SeeAbout standard themes and custom themes in the help center.

自定义CSS或JavaScript

In Guide, click theCustomize designicon () in the sidebar.
ClickCustomizeon the theme you want to edit.
Click编辑代码.
Clickscript.jsto modify the JavaScript orstyle.cssto modify the CSS.
The file opens in the code editor.
Add or modify the JavaScript or CSS in the code view.
ClickSavein the top right to save your changes.
The changes are applied to your theme.
To preview your changes, clickPreview, seePreviewing your theme in the help center.
Make other code changes as needed, then clickSave.
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'sstyle.cssfile. 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 theSettings manifest reference).

In the standard Copenhagen theme, you have the following variables by default:

brand_coloris the brand color for major navigational elements
brand_text_coloris the brand color for hover and active states
text_coloris the text color for body and heading elements
link_coloris the text color for link elements
background_coloris the background color of your help center
heading_fontis the font for headings
text_fontis the font for body text
logois the company logo
faviconis the icon displayed in the address bar of your browser
homepage_background_imageis the hero image on the home page
community_background_imageis the hero image on the community topics page
community_imageis the image for the community section on the home page

To use variables in CSS and HTML, see:

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'sstyle.cssfile.

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 thesettingsobject 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}}

Return to top

148 Comments

Nathan Purcell
- March 01, 2023 10:34
Why can we not inject dependencies to the document_head (or the out-of-reach area of the head)?

It makes adding custom styling and working with frameworks (Bootstrap, Tailwind, Foundation) incredibly difficult and leads to a massive over use of !important declarations.

0
Jérôme BOUILLIER
- March 02, 2023 14:18
Hello

I would like to customize the Copenhagen help center theme by adding a custom field positioned at the organization level to the home page when the end user is logged in.

Can you help or advise me.
Thanks in advance.

Jérôme

0
Rasmus Lynggaard
- March 06, 2023 15:23
Hi,
I'm customizing the Copenhagen theme. We're using multiple brands and the theming is almost identical. I have a few places where I would like it to differ between the brands.
Can I do something like {{#is brand_id '123456789'}}
What I'm asking is. How do I know which brand I'm on?

Thanks
Rasmus

0
Teresa
- March 06, 2023 15:28
HiRasmus Lynggaard, you should see a drop-down at the top left in Guide to switch between brands.

0
Rasmus Lynggaard
- March 06, 2023 15:31
Hi Nicole

I was thinking of how to do differ in the code. I would like to have as few differences in the code between my themes as possible. Preferred there shouldn't be any difference and that is why I'm looking at the #is statement to switch between brands, but I can't find a helper which will return the brand id

0
Greg Katechis
- March 07, 2023 17:42
Zendesk Developer Advocacy
Hi Rasmus! Since each help center's theme is isolated by brand, there isn't a helper available that would allow for a conditional statement that you're looking for.

0
Casey Keefe
- March 15, 2023 13:25
Hi Zendesk & Community! Trying to localize some content on home_page.hbs, but getting the following error (used current_locale in header and footer with no issues):

Any suggestions? Thanks!

0
Ifra Saqlain
- March 15, 2023 17:07
Community Moderator
Hic.keefe:)

If you created Dynamic Content for your homepage content, you can use Dynamic Content placeholder like this:

{{dc 'dc_placeholder_name'}}

Post:

https://support.zendesk.com/hc/en-us/articles/4408894121754-Changing-your-help-center-design-based-on-your-end-user-language

OR

Can you please share some more info.. about your query?

0
Casey Keefe
- March 15, 2023 17:23
Hello againIfra Saqlain! Thank you for the dynamic content suggestion - I'll give that a try!

0
Casey Keefe
- March 17, 2023 13:38
HiIfra Saqlain- Not able to get it working with Dynamic Content unfortunately (I appreciate the suggestion though!)

Essentially, I want to hide the following div (and all of its elements) of the page when English (GB) is selected, but am getting the "not possible to access current.locale error":
0
Ifra Saqlain
- March 17, 2023 16:00
- Edited
Community Moderator
Hic.keefe,

Now I'm getting your point, you wanna hide the shared div with all the child elements of it when locale is English (GB).

Add the given code to your script.js file at the bottom.
```
if (window.location.href.indexOf("en-gb") > -1) {
document.querySelector(".container-inner").style.display = "none"
}
```
Now, your div would be hidden when English(GB) is selected.
0
Casey Keefe
- March 19, 2023 23:22
- Edited
ThanksIfra Saqlain! I think I may be using the wrong div. What I am looking to do is hide the top two rows of tiles above the Category pill containers.

I believe they are the "custom-blocks" in the code, but that didn't work for me when I swapped it in for .container-inner in the code. Thanks again!

0
Ifra Saqlain
- March 19, 2023 18:38
Community Moderator
不用担心c.keefe,

Use this updated code where I replaced

".container-inner" to "#custom-blocks"

Updated Code:
```
if (window.location.href.indexOf("en-gb") > -1) {
document.querySelector("#custom-blocks").style.display = "none"
}


Output:
```
0
Casey Keefe
- March 19, 2023 23:22
Magnificent,Ifra Saqlain- you saved the day again! Many thanks!

0
Michelle Izatt
- March 24, 2023 13:47
Does anyone have a code Snippet to add the Submit button to comments? It was deleted from article on our custom theme.

0
Ifra Saqlain
- March 24, 2023 13:58
- Edited
Community Moderator
HiMichelle Izatt,

See the screenshot:
```
{{输入类型= '提交' class="button button-large"}}



Screenshot:
```
1
Michelle Izatt
- March 24, 2023 19:42
Ifra SaqlainI just added that to our custom theme code, republished and the button is still not showing. Any ideas why? Thank you!

0
Ifra Saqlain
- March 24, 2023 20:54
- Edited
Community Moderator
share the public URL I wanna see the issue, did you add custom CSS or JS in your theme?

0
Michelle Izatt
- March 24, 2023 21:07
- Edited
Ifra Saqlainhere is one of our articles if that's what you are referring tohttps://help.peek.com/hc/en-us/articles/10430786382740-Advanced-Ticket-Configurations-

I'm just an admin in a developer world :)

0
Michelle Izatt
- March 24, 2023 21:05
```
Ifra Saqlain
```
<导航类= "ub-nav">
{{breadcrumbs}}
{{#if settings.sidebar_block_visibility}}

{{#is settings.sidebar_menu_title_dc 'NONE'}}{{settings.sidebar_menu_title}}{{else}}{{dc settings.sidebar_menu_title_dc}}{{/is}}

{{/if}}

{{#if settings.show_articles_in_section}}

{{t 'articles_in_section'}}

{{#each section.articles}}

title="{{title}}">{{title}}

{{/each}}

{{#如果section.more_articles}}
{{t 'see_more'}}
{{/if}}

{{/if}}

{{article.title}}
{{#if article.internal}}

{{/if}}
{{subscribe}}

{{#如果settings.author_meta_details_visibility}}

{{#if article.author.agent}}

{{/if}}

{{#link 'user_profile' id=article.author.id}}
{{article.author.name}}
{{/link}}

{{#is article.created_at article.edited_at}}
{{date article.created_at timeago=true}}

{{else}}
{{date article.edited_at timeago=true}}

{{t 'updated'}}

{{/is}}

{{/if}}

{{article.body}}

{{#each attachments}}

{{name}}

{{size}}
{{t 'download'}}

{{/each}}

{{#if settings.social_share_visibility}}
{{share}}

{{/if}}

{{#if settings.comment_block_visibility}}
{{#if comments}}

{{article.comment_count}}

{{/if}}
{{/if}}

{{#with article}}

{{t 'was_this_article_helpful'}}

{{vote 'up' role='radio' class='button article-vote article-vote-up'}}
{{vote 'down' role='radio' class='button article-vote article-vote-down'}}

{{vote 'label' class='article-vote-label'}}

{{/with}}

{{request_callout}}

{{t 'return_to_top'}}

{{recent_articles}}
{{related_articles}}

{{#if settings.comment_block_visibility}}

{{t 'comments'}}

{{t 'comments_count' count=article.comment_count}}

{{#if comments}}

{{t 'sort_by'}}

{{#each comment_sorters}}
{{name}}
{{/each}}

{{/if}}

{{#each comments}}

{{#if author.agent}}

{{/if}}

{{#link 'user_profile' id=author.id}}
{{author.name}}
{{/link}}

{{#if editor}}
{{date edited_at timeago=true}}

{{t 'edited'}}

{{else}}
{{date created_at timeago=true}}

{{/if}}

{{#with ticket}}

{{t 'request'}}{{id}}

{{/with}}
{{#if pending}}
{{t 'pending_approval'}}
{{/if}}

{{body}}

{{vote 'up' role='radio' class='vote-up' selected_class='vote-voted'}}
{{vote 'sum' class='vote-sum'}}
{{vote 'down' role='radio' class='vote-down' selected_class='vote-voted'}}

{{actions}}

{{/each}}

{{pagination}}

{{#form 'comment' class='comment-form'}}

{{user_avatar class='user-avatar'}}

{{wysiwyg 'body'}}

{{输入类型= '提交' class="button button-large"}}

{{/form}}

{{comment_callout}}

{{/if}}
0
Michelle Izatt
- March 24, 2023 22:51
Ifra Saqlainmaybe this is the issue? The Button is disabled?

0
Raúl
- March 27, 2023 19:48
I'm trying to create a section within the home_page.hbs template where we can post "news and updates". I noticed our default Guide Template seems to have included that at some point, but I couldn't find it in the code. Do you know how I could set something that looks like the "Product News and Updates" seen in the attached screenshot?

0
Ifra Saqlain
- March 29, 2023 12:23
Community Moderator
HeyMichelle Izatt, are you still facing the issue. I know I'm too late, I opened your link and I can't sign-up.

0
Ifra Saqlain
- March 29, 2023 12:28
Community Moderator
HeyRaúl,

Go to th home_page.hbs file

Find for 'categories blocks', see line no. 30 in the screenshot.

copy that compete code from there, I'm attaching that code here:
```
{{#each categories}}
{{#if ../has_multiple_categories}}


{{name}}
{{excerpt description}}


{{else}}
{{#each sections}}



{{name}}

{{excerpt description}}


{{/each}}
{{/if}}
{{/each}}

{{pagination}}
```
This is the code which you want

Thanks
0
Raúl
- March 29, 2023 15:42
Thanks @Ifra Saqlain.

How would I go about applying custom styling from that screenshot to only one specific category button?

例如,如果我想要什么just"Kickstarter basics" button and make it look like the second screenshot?

screenshot 1

screenshot 2

0
Ifra Saqlain
- March 29, 2023 17:06
Community Moderator
Hey Raul,

You can add there ID in the element:
```
id="block-items-{{id}}"


screenshot for the same:
```
for anchor tag:
```
id="blocks-item-link-{{id}}"

Screenshot for the same:
```
Now use that ids in CSS for specific element CSS:
```
#block-items-360003781252 {

}

#blocks-item-link-360003781252 {

}
```
0
Lori Christianson
- 4月il 05, 2023 00:16
Hi everyone --

Does anyone know how to change the name 'Promoted Articles' on the home page? I'm using a free theme by Diziana. (Love that Thor theme!) I've looked in the code on the home page, on the header, on the section ... it's escaping me. Any ideas?

Thanks,
Lori

0
Casey Keefe
- 4月il 07, 2023 11:03
HiLori Christianson- I don't know the exact location within the Diziana-Thor theme, but on line 610 of our theme on home_page.hbs , I changed "Promoted Articles" to "Common Questions". Try a Ctrl-F search for "promoted-articles__title" or "Promoted Articles" and that should be near where you can change it. Good luck!
```
Common Questions
```
0
Lori Christianson
- 4月il 07, 2023 16:28
Hi back,c.keefe!

Thanks for this. Unfortunately, this theme doesn't have anything like that. But I do appreciate you taking a stab at this. I'll talk to Diziana. Or change my theme ;-). Thanks again!

Lori

0
Pulkit Pandey
- 4月il 08, 2023 05:35
Community Moderator
HiLori Christianson

Please let me know the name of the theme you are using and share the URL of your help center where you need to make those changes so I can provide you a solution for your query.

Thank You

Pulkit

TeamDiziana

0

Pleasesign into leave a comment.

Customizing your help center theme

Customizing page templates and custom pages with HTML and Curlybars

Customizing the CSS or JavaScript

Using variables in CSS and HTML

Examples using variables in CSS

Examples using variables in Curlybars in HTML

148 Comments

{{#is settings.sidebar_menu_title_dc 'NONE'}}{{settings.sidebar_menu_title}}{{else}}{{dc settings.sidebar_menu_title_dc}}{{/is}}

{{t 'articles_in_section'}}

Common Questions

Related articles