Customizing your help center theme

<body>
<p id="docs-hc-snippet" style="display: none;">Web-savvy Knowledge admins can work directly with the page code to build a customized theme for your help center. Customized themes can include:</p>
<div class="article-banners">
<div id="docs-wmp-link">
<a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a>
</div>

<div class="article-banner" id="suite_gpee">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Growth, Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>

<div class="article-banner" id="support_with_guide_all">
<table>
<tbody>
<tr>
<td>
<strong>Support with</strong>
</td>
<td>Knowledge Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>

</div>

<div class="body">

<div class="note fastpath">
<span class="fastpathtitle">Location: </span> Knowledge admin &gt; Customize design (<img class="image" id="topic_jqq_skv_n3__image_fnl_mv4_s2c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) &gt; Customize &gt; Edit code</div>
<p class="p">Web-savvy Knowledge admins can work directly with the page code to build a customized theme for
your help center. Customized themes can include:</p>
<ul class="ul" id="topic_jqq_skv_n3__ul_xpc_5lr_nrb">
<li class="li">Editable templates that define the layout of each page (for example, article page,
category page, or community topic page)</li>
<li class="li">Custom pages that you create from scratch and place anywhere in your help center</li>
<li class="li">Global header and footer for the help center</li>
</ul>
<p class="p">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 <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824584602" target="_blank">Editing the source code of help center articles</a>.</p>
<p class="p">When you modify a theme's code (for example, its templates, JavaScript, or CSS), the theme
preview displays the <code class="ph codeph">&lt;/&gt;</code> icon, indicating that the theme's code has
been modified and will no longer receive new features and updates. </p>
<div class="p">
<div class="note tip">
<span class="tiptitle">Tip:</span> If you need help with your help center branding and customization, you can
visit the <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408842911898" target="_blank">Zendesk Marketplace</a> to purchase new themes created
by Zendesk and third party developers.</div>
</div>
<div class="note">
<span class="notetitle">Note:</span> 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.</div>
<p class="p">This article covers the following topics: </p>
<div class="p">
<ul class="ul" id="topic_jqq_skv_n3__ul_g4t_ymx_ds">
<li class="li"><a class="xref" href="#topic_h5c_k4w_n3">Customizing the page templates with HTML
and Curlybars</a></li>
<li class="li"><a class="xref" href="#topic_gxl_3qw_n3">Customizing the CSS or
JavaScript</a></li>
<li class="li"><a class="xref" href="#topic_blp_cgw_pk">Using variables in CSS and HTML</a></li>
</ul>
</div>
<p class="p">Related articles:</p>
<div class="p">
<ul class="ul" id="topic_jqq_skv_n3__ul_uxf_4jj_my">
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824139546" target="_blank">Branding your help center</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408831783962" target="_blank">Guide theming limits</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832681626" target="_blank">Help center templating cookbook</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4409012911770" target="_blank">Creating custom pages in your help center</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408828878106" target="_blank">Adding multiple article, section, and category templates to your
theme</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_h5c_k4w_n3">
<h2 class="title topictitle2" id="ariaid-title2">Customizing page templates and custom pages with HTML and Curlybars</h2>
<div class="body">
<p class="p">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.</p>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> 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.</div>
</div>
<p class="p"> You can customize the template of any of the following page types or elements, or create
your own custom pages.</p>
<ul class="ul" id="topic_h5c_k4w_n3__ul_jp1_zhx_n3">
<li class="li">
<strong class="ph b">Custom pages</strong> (<em class="ph i">custom_page.hbs</em>): custom pages that you create from scratch
and link from anywhere in your help center</li>
<li class="li">
<strong class="ph b">Article page</strong> (<em class="ph i">article_page.hbs</em>): the individual article pages in the
knowledge base</li>
<li class="li">
<strong class="ph b">Category page</strong>
<em class="ph i">(category_page.hbs)</em>: landing pages</li>
<li class="li">
<strong class="ph b">Community post list page</strong> (<em class="ph i">community_post_list_page.hbs</em>)</li>
<li class="li">
<strong class="ph b">Community post page</strong> (<em class="ph i">community_post_page.hbs</em>)</li>
<li class="li">
<strong class="ph b">Community topic list page</strong> (<em class="ph i">community_topic_list_page.hbs</em>)</li>
<li class="li">
<strong class="ph b">Community topic page</strong> (<em class="ph i">community_topic_page.hbs</em>)</li>
<li class="li">
<strong class="ph b">Contributions page</strong> (<em class="ph i">contributions_page.hbs</em>): the lists of posts, community
comments, and article comments by an end-user</li>
<li class="li">
<strong class="ph b">Document head</strong> (<em class="ph i">document_head.hbs</em>): the document's <code class="ph codeph">head</code>
tag</li>
<li class="li">
<strong class="ph b">Error page</strong> (<em class="ph i">error_page.hbs</em>): the message displayed when a user lands on a
non-existent page</li>
<li class="li">
<strong class="ph b">Footer</strong> (<em class="ph i">footer.hbs</em>): the bars appearing at the bottom of all help center
pages</li>
<li class="li">
<strong class="ph b">Header</strong> (<em class="ph i">header.hbs</em>): the bars appearing at the top of all help center
pages</li>
<li class="li">
<strong class="ph b">Home page</strong> (<em class="ph i">home_page.hbs</em>): the top-level landing page for your help
center</li>
<li class="li">
<strong class="ph b">New community post page</strong> (<em class="ph i">new_community_post_page.hbs</em>)</li>
<li class="li">
<strong class="ph b">New request page</strong> (<em class="ph i">new_request_page.hbs</em>): the request or ticket submission
form</li>
<li class="li">
<strong class="ph b">Request page</strong> (<em class="ph i">request_page.hbs</em>): the individual request or ticket
pages</li>
<li class="li">
<strong class="ph b">Requests page</strong> (<em class="ph i">requests_page.hbs</em>): the lists of requests or tickets
assigned to a user or that a user is CC'd on</li>
<li class="li">
<strong class="ph b">Search results</strong> (<em class="ph i">search_results.hbs</em>): the search results display
format</li>
<li class="li">
<strong class="ph b">Section page</strong> (<em class="ph i">section_page.hbs</em>): landing pages</li>
<li class="li">
<strong class="ph b">Following page</strong> (<em class="ph i">subscriptions_page.hbs</em>): the list of categories, sections,
and articles a user is following</li>
<li class="li">
<strong class="ph b">User profile page</strong> (<em class="ph i">user_profile_page.hbs</em>)</li>
</ul>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> 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 a <em class="ph i">custom theme</em>.
Custom themes are <em class="ph i">not</em> supported by Zendesk and are <em class="ph i">not</em> automatically updated
when new features are released (see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408821255834" target="_blank">About standard themes and custom themes in help
center</a>).</div>
</div>
<p class="p"><strong class="ph b">To edit the page templates</strong></p>
<ol class="ol" id="topic_h5c_k4w_n3__ol_awc_vvw_n3">
<li class="li"><span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, click <strong class="ph b">Customize design</strong>
(<img class="image" id="topic_h5c_k4w_n3__d8e60" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar.</span></li>
<li class="li">Click <strong class="ph b">Customize</strong> on the theme you want to edit.</li>
<li class="li">Click <strong class="ph b">Edit code</strong>.<p class="p"><img class="image img-screenshot" id="topic_h5c_k4w_n3__image_dcb_mjp_prb" src="https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/guide_themes_edit_code_btn.png" width="600"></p>
</li>
<li class="li">In the <strong class="ph b">Templates</strong> section, click the template or custom page you want to
modify.<p class="p">The page opens in the code editor.</p>
</li>
<li class="li">Use the code view to edit the template or page. <p class="p">You can add, remove, or reorder any
the following:</p>
<ul class="ul" id="topic_h5c_k4w_n3__ul_fnj_bjx_n3">
<li class="li">
<strong class="ph b">Template expressions</strong> to display and manipulate content in your pages<p class="p">For
example, the breadcrumbs template helper <code class="ph codeph">{{breadcrumbs}}</code> displays a
breadcrumb navigation element on a page. For a detailed guide on template
expressions, see <a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/introduction" target="_blank">Help center templates</a>.</p>
</li>
<li class="li">
<strong class="ph b">Dynamic content placeholders</strong> (see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408834328090-Localizing-Help-Center-Plus-and-Enterprise-#topic_wnw_fbg_yj" target="_blank">Localizing help center content</a>)</li>
<li class="li">
<strong class="ph b">Embeddable widgets</strong> created by third parties</li>
<li class="li"><strong class="ph b">HTML markup</strong></li>
</ul>
</li>
<li class="li">Click <strong class="ph b">Save</strong> in the top right corner to save your changes.<p class="p">If you edited a
template, the changes are applied to every page in your theme that is based on the
template you modified. </p>
</li>
<li class="li">To preview your changes, click <strong class="ph b">Preview</strong>. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408845893274" target="_blank">Previewing your theme in the help center</a>.<p class="p"></p>
<div class="note" id="topic_h5c_k4w_n3__note_mlc_mm2_syb">
<span class="notetitle">Note:</span> 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.</div>
<p class="p"><img class="image img-screenshot" id="topic_h5c_k4w_n3__image_fcx_pnl_1cb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/themes_edit_code_preview.png" width="250"></p>
</li>
<li class="li">Make other code changes as needed, then click <strong class="ph b">Save</strong>.<p class="p">When you're finished
editing the page template or custom page, you can close it.</p>
</li>
</ol>
<div class="p">
<div class="note tip">
<span class="tiptitle">Tip:</span> <a class="xref" href="https://www.zendesk.com/blog/knowledge-base-article-template/" target="_blank">Read this Zendesk blog post</a> for more knowledge
base article template ideas.</div>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_gxl_3qw_n3">
<h2 class="title topictitle2" id="ariaid-title3">Customizing the CSS or JavaScript</h2>
<div class="body">
<p class="p">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: </p>
<ul class="ul" id="topic_gxl_3qw_n3__ul_ebq_g4c_2m">
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408842914714-Help-Center-CSS-cookbook" target="_blank">Help center CSS cookbook</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836487450" target="_blank">Help center JavaScript cookbook</a></li>
</ul>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> 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 a <em class="ph i">custom theme</em>.
Custom themes are <em class="ph i">not</em> supported by Zendesk and are <em class="ph i">not</em> automatically updated
when new features are released. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408821255834-About-the-standard-theme-and-custom-themes-in-Help-Center" target="_blank">About standard themes and custom themes in the help
center</a>.</div>
</div>
<p class="p"><strong class="ph b">To customize the CSS or JavaScript</strong></p>
<ol class="ol" id="topic_gxl_3qw_n3__ol_ppm_vkx_n3">
<li class="li"><span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, click <strong class="ph b">Customize design</strong>
(<img class="image" id="topic_gxl_3qw_n3__d8e60" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar.</span></li>
<li class="li">Click <strong class="ph b">Customize</strong> on the theme you want to edit.</li>
<li class="li">Click <strong class="ph b">Edit code</strong>.<p class="p"><img class="image img-screenshot" id="topic_gxl_3qw_n3__image_yxz_php_prb" src="https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/guide_themes_edit_code_btn.png" width="600"></p>
</li>
<li class="li">Click <strong class="ph b">script.js</strong> to modify the JavaScript or <strong class="ph b">style.css</strong> to modify the
CSS.<p class="p">The file opens in the code editor.</p>
</li>
<li class="li">Add or modify the JavaScript or CSS in the code view. </li>
<li class="li">Click <strong class="ph b">Save</strong> in the top right to save your changes.<p class="p">The changes are applied to
your theme.</p>
</li>
<li class="li">To preview your changes, click <strong class="ph b">Preview</strong>, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408845893274" target="_blank">Previewing your theme in the help center</a>.<p class="p"><img class="image img-screenshot" id="topic_gxl_3qw_n3__image_whx_wjv_5bb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/themes_edit_code_preview.png" width="200"></p>
</li>
<li class="li">Make other code changes as needed, then click <strong class="ph b">Save</strong>.<p class="p">When you're finished, you
can close the file.</p>
</li>
</ol>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested1" id="topic_blp_cgw_pk">
<h2 class="title topictitle2" id="ariaid-title4">Using variables in CSS and HTML</h2>
<div class="body">
<p class="p">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
<strong class="ph b">style.css</strong> file. You can also reference the variables using Curlybars expressions in
HTML page templates. </p>
<p class="p">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 <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408846524954" target="_blank">Settings manifest reference</a>).</p>
<p class="p">In the standard Copenhagen theme, you have the following variables by default:</p>
<div class="p">
<ul class="ul">
<li class="li">
<code class="ph codeph">brand_color</code> is the brand color for major navigational elements</li>
<li class="li">
<code class="ph codeph">brand_text_color</code> is the brand color for hover and active states</li>
<li class="li">
<code class="ph codeph">text_color</code> is the text color for body and heading elements</li>
<li class="li">
<code class="ph codeph">link_color</code> is the text color for link elements</li>
<li class="li">
<code class="ph codeph">background_color</code> is the background color of your help center</li>
<li class="li">
<code class="ph codeph">heading_font</code> is the font for headings</li>
<li class="li">
<code class="ph codeph">text_font</code> is the font for body text</li>
<li class="li">
<code class="ph codeph">logo</code> is the company logo</li>
<li class="li">
<code class="ph codeph">favicon</code> is the icon displayed in the address bar of your browser</li>
<li class="li">
<code class="ph codeph">homepage_background_image</code> is the hero image on the home page</li>
<li class="li">
<code class="ph codeph">community_background_image</code> is the hero image on the community topics
page</li>
<li class="li">
<code class="ph codeph">community_image</code> is the image for the community section on the home
page</li>
</ul>
</div>
<div class="p">To use variables in CSS and HTML, see:<ul class="ul" id="topic_blp_cgw_pk__ul_ht5_4zt_gbb">
<li class="li"><a class="xref" href="#topic_oc1_bxt_gbb">Examples using variables in CSS</a></li>
<li class="li"><a class="xref" href="#topic_z3t_bxt_gbb">Examples using variables in Curlybars in HTML</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title5" class="topic nested2" id="topic_oc1_bxt_gbb">
<h3 class="title topictitle3" id="ariaid-title5">Examples using variables in CSS</h3>
<div class="body">
<p class="p">The properties you set for colors, fonts, and theme images are stored in variables that
you can use in your theme's <strong class="ph b">style.css</strong> file.</p>
<p class="p">For example, you can use some of the default variables in CSS with the following
syntax:</p>
<ul class="ul" id="topic_oc1_bxt_gbb__ul_itf_kgw_pk">
<li class="li">
<code class="ph codeph">$brand_color</code>
</li>
<li class="li">
<code class="ph codeph">$brand_tex_color</code>
</li>
<li class="li">
<code class="ph codeph">$heading_font</code>
</li>
<li class="li">
<code class="ph codeph">$text_font</code>
</li>
</ul>
<p class="p">In the CSS file, you assign a variable to a CSS property the same way you would assign a
normal value. For example:</p>
<pre class="pre codeblock"><code>.button {
label-color: <strong class="ph b">$text_font</strong>;
}</code></pre>
<p class="p">You can also use single curly brackets to embed the helper in a CSS expression, as
follows::</p>
<div class="p">
<pre class="pre codeblock"><code>max-width: #<strong class="ph b">{$search_width}</strong>px</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title6" class="topic nested2" id="topic_z3t_bxt_gbb">
<h3 class="title topictitle3" id="ariaid-title6">Examples using variables in Curlybars in HTML</h3>
<div class="body">
<p class="p">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.</p>
<p class="p">The variables become properties of the <code class="ph codeph">settings</code> 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. </p>
<p class="p">For example:</p>
<div class="p">
<ul class="ul" id="topic_z3t_bxt_gbb__ul_qn1_lyt_gbb">
<li class="li">
<code class="ph codeph">{{settings.color_1}}</code> is the HEX value of a color. For example:
<code class="ph codeph">#FF00FF</code>
</li>
<li class="li">
<code class="ph codeph">{{{settings.font_1}}</code> is the font stack. For example, system is
defined as: <code class="ph codeph">'-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
sans-serif"</code>
</li>
<li class="li">
<code class="ph codeph">{{settings.homepage_background_image}}</code> is the path to the file
stored in this field. For example:
<code class="ph codeph">p8.zdassets.com/theme_assets/...</code>
</li>
<li class="li">
<code class="ph codeph">{{settings.range_input}}</code> is the value of the range input.</li>
</ul>
</div>
<p class="p">The settings object can be used as input to any helper. For example:</p>
<div class="p">
<pre class="pre codeblock"><code>{{is settings.enabled}} ... {{/is}}</code></pre>
</div>
</div>
</div>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408839332250",
"url": "https://support.zendesk.com/hc/en-us/articles/4408839332250",
"headline": "Customizing your help center theme",
"description": "You can customize your help center's theme by editing HTML templates, CSS, and JavaScript code, using variables and a templating language to modify page layouts, styles, and content.",
"articleSection": "Using themes and customizing your help center",
"datePublished": "2021-10-16T05:37:48+00:00",
"dateModified": "2026-06-16T14:14:31.928153+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408839332250"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com",
"softwareAddOn": {
"@type": "SoftwareApplication",
"name": "Knowledge",
"@id": "https://support.zendesk.com/hc/en-us/sections/4405298860954"
}
}
}</script><script id="fast-path-script">
//<![CDATA[
const fast_path_style = document.createElement('style');
fast_path_style.innerHTML = `#article-body .fastpath{font-size:.9em;background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 8px;margin-bottom:16px}#article-body .fastpath::before{content:none!important}`;
document.head.appendChild(fast_path_style);
//]]>
</script>
</body>