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
Nathan Purcell
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
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
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
Nicole
Hi Rasmus Lynggaard, you should see a drop-down at the top left in Guide to switch between brands.
0
Rasmus Lynggaard
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
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
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
Hi c.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
Hello again Ifra Saqlain ! Thank you for the dynamic content suggestion - I'll give that a try!
0
Casey Keefe
Hi Ifra 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
Hi c.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.
Now, your div would be hidden when English(GB) is selected.
0
Casey Keefe
Thanks Ifra 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
No worries c.keefe,
Use this updated code where I replaced
".container-inner" to "#custom-blocks"
Updated Code:
0
Casey Keefe
Magnificent, Ifra Saqlain - you saved the day again! Many thanks!
0
Michelle Izatt
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
Hi Michelle Izatt,
See the screenshot:
1
Michelle Izatt
Ifra Saqlain I just added that to our custom theme code, republished and the button is still not showing. Any ideas why? Thank you!
0
Ifra Saqlain
share the public URL I wanna see the issue, did you add custom CSS or JS in your theme?
0
Michelle Izatt
Ifra Saqlain here is one of our articles if that's what you are referring to https://help.peek.com/hc/en-us/articles/10430786382740-Advanced-Ticket-Configurations-
I'm just an admin in a developer world :)
0
Michelle Izatt
<script>
var templateName = 'articles';
</script>
<div class="container-divider"></div>
<div class="container">
<nav class="sub-nav">
{{breadcrumbs}}
<script>
var categoryid = $('.breadcrumbs li:nth-child(2) a').attr('href').match(/[0-9]+/)[0];
</script>
</nav>
<div class="article-content-area" id="article-container">
{{#if settings.sidebar_block_visibility}}
<div class="sidebar collapsible-sidebar">
<h3 class="collapsible-sidebar-title sidenav-title menu-title">
{{#is settings.sidebar_menu_title_dc 'NONE'}}{{settings.sidebar_menu_title}}{{else}}{{dc settings.sidebar_menu_title_dc}}{{/is}}
</h3>
<div class="diziana-category-sidebar-menu"></div>
</div>
{{/if}}
<section class="article-content-section {{#is settings.sidebar_block_visibility false}}article-fluid{{/is}}">
{{#if settings.show_articles_in_section}}
<section class="section-articles collapsible-sidebar">
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'articles_in_section'}}</h3>
<ul>
{{#each section.articles}}
<li>
<a href="{{url}}" class="sidenav-item {{#is id ../article.id}}current-article{{/is}}"
title="{{title}}">{{title}}</a>
</li>
{{/each}}
</ul>
{{#if section.more_articles}}
<a href="{{section.url}}" class="article-sidebar-item" title="{{t 'see_more'}}">{{t 'see_more'}}</a>
{{/if}}
</section>
{{/if}}
<script>
var articleContent = $('.article-sidebar').children();
if (!articleContent.length) {
$('.article-sidebar').addClass('hide');
}
</script>
<article class="article">
<header class="article-header {{#is settings.author_meta_details_visibility 'hide'}}hide-meta{{/is}}">
<h1 title="{{article.title}}" class="article-title">
{{article.title}}
{{#if article.internal}}
<span class="icon-lock" title="{{t 'internal'}}"></span>
{{/if}}
{{subscribe}}
</h1>
<div class="article-meta-wrapper">
{{#if settings.author_meta_details_visibility}}
<div class="article-author">
<div class="avatar article-avatar">
{{#if article.author.agent}}
<span class="icon-agent"></span>
{{/if}}
<img src="{{article.author.avatar_url}}" alt="Avatar" class="user-avatar" />
</div>
<div class="article-meta">
{{#link 'user_profile' id=article.author.id}}
{{article.author.name}}
{{/link}}
<ul class="meta-group">
{{#is article.created_at article.edited_at}}
<li class="meta-data">{{date article.created_at timeago=true}}</li>
{{else}}
<li class="meta-data">{{date article.edited_at timeago=true}}</li>
<li class="meta-data">{{t 'updated'}}</li>
{{/is}}
</ul>
</div>
</div>
{{/if}}
</div>
</header>
<section class="article-info">
<div class="article-content">
<div class="article-body">{{article.body}}</div>
<div class="article-attachments">
<ul class="attachments">
{{#each attachments}}
<li class="attachment-item">
<a href="{{url}}" target="_blank" title="{{name}}">{{name}}</a>
<div class="attachment-meta meta-group">
<span class="attachment-meta-item meta-data">{{size}}</span>
<a href="{{url}}" target="_blank" class="attachment-meta-item meta-data">{{t 'download'}}</a>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</section>
<footer>
<div class="article-footer">
<div class="article-inner-content-area">
{{#if settings.social_share_visibility}}
<div class="article-share">{{share}}</div>
{{/if}}
<div class="comment-icon">
{{#if settings.comment_block_visibility}}
{{#if comments}}
<a href="#article-comments" class="article-comment-count" title="{{article.comment_count}}">
<span class="icon-comments"></span>
{{article.comment_count}}
</a>
{{/if}}
{{/if}}
</div>
</div>
</div>
{{#with article}}
<div class="article-votes">
<span class="article-votes-question">{{t 'was_this_article_helpful'}}</span>
<div class="article-votes-controls" role='radiogroup'>
{{vote 'up' role='radio' class='button article-vote article-vote-up'}}
{{vote 'down' role='radio' class='button article-vote article-vote-down'}}
</div>
<small class="article-votes-count">
{{vote 'label' class='article-vote-label'}}
</small>
</div>
{{/with}}
<div class="article-more-questions">
{{request_callout}}
</div>
<div class="article-return-to-top">
<a href="#article-container">{{t 'return_to_top'}}<span class="icon-arrow-up"></span></a>
</div>
</footer>
<section class="article-relatives">
{{recent_articles}}
{{related_articles}}
</section>
{{#if settings.comment_block_visibility}}
<div class="article-comments" id="article-comments">
<section class="comments">
<header class="comment-overview">
<h3 class="comment-heading">
{{t 'comments'}}
</h3>
<p class="comment-callout">{{t 'comments_count' count=article.comment_count}}</p>
{{#if comments}}
<div class="dropdown comment-sorter">
<a class="dropdown-toggle">{{t 'sort_by'}}</a>
<span class="dropdown-menu" role="menu">
{{#each comment_sorters}}
<a aria-selected="{{selected}}" href="{{url}}" role="menuitem" title="{{name}}">{{name}}</a>
{{/each}}
</span>
</div>
{{/if}}
</header>
<ul id="comments" class="comment-list">
{{#each comments}}
<li id="{{anchor}}" class="comment">
<div class="comment-wrapper">
<div class="comment-info">
<div class="comment-author">
<div class="avatar comment-avatar">
{{#if author.agent}}
<span class="icon-agent"></span>
{{/if}}
<img src="{{author.avatar_url}}" alt="Avatar" class="user-avatar" />
</div>
<div class="comment-meta">
<span title="{{author.name}}">
{{#link 'user_profile' id=author.id}}
{{author.name}}
{{/link}}
</span>
<ul class="meta-group">
{{#if editor}}
<li class="meta-data">{{date edited_at timeago=true}}</li>
<li class="meta-data">{{t 'edited'}}</li>
{{else}}
<li class="meta-data">{{date created_at timeago=true}}</li>
{{/if}}
</ul>
</div>
<div class="comment-labels">
{{#with ticket}}
<a href="{{url}}" target="_zendesk_lotus" class="status-label escalation-badge">
{{t 'request'}}{{id}}
</a>
{{/with}}
{{#if pending}}
<span class="comment-pending status-label status-label-pending">{{t 'pending_approval'}}</span>
{{/if}}
</div>
</div>
<section class="comment-body">{{body}}</section>
</div>
<div class="comment-actions-container">
<div class="comment-vote vote" role='radiogroup'>
{{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'}}
</div>
<div class="comment-actions actions">
{{actions}}
</div>
</div>
</div>
</li>
{{/each}}
</ul>
{{pagination}}
{{#form 'comment' class='comment-form'}}
<div class="avatar comment-avatar">
{{user_avatar class='user-avatar'}}
</div>
<div class="comment-container">
{{wysiwyg 'body'}}
<div class="comment-form-controls">
{{input type='submit' class="button button-large"}}
</div>
</div>
{{/form}}
<p class="comment-callout">{{comment_callout}}</p>
</section>
</div>
{{/if}}
</article>
</section>
</div>
</div>
0
Michelle Izatt
Ifra Saqlain maybe this is the issue? The Button is disabled?
0
Raúl
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
Hey Michelle 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
Hey Raú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:
This is the code which you want
Thanks
0
Raúl
Thanks @Ifra Saqlain .
How would I go about applying custom styling from that screenshot to only one specific category button?
For instance, what if I want to take just "Kickstarter basics" button and make it look like the second screenshot?
screenshot 1
screenshot 2
0
Ifra Saqlain
Hey Raul,
You can add there ID in the element:
for anchor tag:
Now use that ids in CSS for specific element CSS:
0
Lori Christianson
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
Hi Lori 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!
0
Lori Christianson
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
Hi Lori 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
Team Diziana
0