Customizing your Help Center theme Follow

team professional enterprise plans

More web-savvy Help Center Managers can work directly with the page code to build a customized theme for Help Center. The code is contained in editable templates that define the layout of each page type, as well as the global header and footer of 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. Special templates let you add JavaScript or customize the site's CSS.

For information on branding your Help Center, without any coding, see Branding your Help Center.

Note: Access to the page code is available on Team, Professional, and Enterprise. Trial users are given the Professional plan, which includes code editing options, but they can no longer access that feature if they purchase the Essential plan.

This article covers the following topics:

Note: Before making custom changes to your Help Center, take a few minutes to check out the support tip Preventing poor Help Center load times by following templating best practices by Jake Bantz.

About the standard theme and custom theme in Help Center

Help Center comes with a standard theme, designed for best practices and responsiveness, called Copenhagen. When you use the standard Copenhagen theme for your Help Center, it is supported by Zendesk and automatically updated when new features are released.

Note: Before November, 2016, Help Center contained five additional standard themes. If you are using one of these legacy themes, you can continue to do so. However, if you switch your theme, you will not be able to switch back to the legacy theme.

When you modify the standard theme, using the Theme Editor to edit the page templates, CSS, or JavaScript, or when you develop your own theme, it is saved as a custom theme. Custom themes are not supported by Zendesk and are not automatically updated when new features are released.

Important: When you create a custom theme, you take ownership of the theme, and you need to manually add new features. To stay informed about new features and to get instructions for adding them, subscribe to Zendesk announcements.

To determine whether your Help Center is using a standard theme or a custom theme

  1. In the Help Center, click General in the top menu bar, then select Customize design.

    The Help Center switches to Preview mode, and opens a panel on the left of your screen.

  2. Click Switch Theme.

  3. Review the list of themes and look for a green check that indicates the theme currently applied to your Help center.

    If the theme with the checkmark is in the standard themes section, then your Help Center is using a standard theme. If the checkmark is beside a theme in the custom themes section, then your Help Center is using a custom theme.

Tip: You can edit the display name for a custom theme by hovering your cursor over the theme and clicking the Edit icon.

Uploading and using your own assets

You can upload assets such as images and files to the Help Center. The assets are stored in a web cache in a cloud delivery network (CDN). Web caches reduce bandwidth requirements and server load, and improve response times.

Note: The cache is refreshed on a weekly basis. If you modify an asset and upload it again with the same name, the file might not be refreshed in the cache for up to a week. A workaround is to upload the modified asset with a different name and update any links to it.

To upload assets to the Help Center

  1. Click General in the top menu bar, then select Customize design.

  2. Click Edit Theme.
  3. Click the Assets tab in the Theme editor and do any of the following:
    • To upload an asset, click the Add file link. The file size limit is 50 MB.
    • To use an uploaded asset in your HTML, CSS, or JavaScript, copy the asset path and paste it in your template code.
    • To remove an asset from the list, hover the mouse over the asset and click the delete button that appears on the right.

Customizing the HTML

The HTML for the Help Center is contained in editable templates that define the layout of each page type, as well as the global header and footer. You can customize the template of any of the following page types or elements:

  • Document head, the document's head tag
  • Header and Footer, the bars appearing at the top and bottom of all Help Center pages
  • the Help Center Home page
  • the Category page and Section page landing pages
  • Article page, the individual article pages in the knowledge base
  • Contributions page, the lists of questions, answers, and comments in the knowledge base
  • Following page, the list of categories, sections, and articles a user is following
  • Request list page, the lists of requests or tickets assigned to a user, or that a user is CC'd on
  • Request page, the individual request or ticket pages
  • New request page, the request or ticket submission form
  • Search results, the search results display format
  • Error page, the message displayed when a user lands on a non-existent page
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 a custom theme. Custom themes are not supported by Zendesk and are not automatically updated when new features are released. See About standard themes and custom themes in Help Center.

To edit the HTML

  1. Click General in the top menu bar, then select Customize design.

    The Help Center switches to Preview mode with the currently applied theme at the top of the sidebar.

  2. Click Edit Theme.

    Zendesk makes a copy of the existing theme. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time.

  3. Click the drop-down menu in the Theme editor, and select a template to modify.

  4. Use the code view to edit the template. 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 using template expressions, see Help Center Templates.
    • Dynamic content placeholders. See Adding translated text.
    • Embeddable widgets created by third parties (such as the Twitter search widget)
    • HTML markup

    Example:

  5. Click Preview to preview the effect of your changes on the page.

    If you want to see what the Help Center looks like to end-users or anonymous users, click Preview, then select a role in the lower-right corner of your Help Center.

  6. To save your changes, click Save at the top of the sidebar.

    The changes are not deployed to Help Center until you click Publish changes at the top of the sidebar. If you want to keep working on the theme later, click Close at the top of the sidebar. Your changes are saved.

  7. When you're ready to deploy your changes, click Publish changes at the top of the sidebar.

    The changes are applied to every page that is based on the template or templates you modified.

Allowing unsafe HTML in pages

By default, the Help Center quarantines unsafe HTML tags and attributes in pages to reduce the risk of somebody introducing malicious code. See the list of safe tags and attributes below.

Note: Even if the Help Center doesn't strip safe tags from the HTML used for the site design, the Help Center uses a third party HTML article editor called TinyMCE that may strip some safe tags from the HTML of articles. For example, the editor removes <i> tags with no content, such as those used to display Font Awesome icons. Example: <i class="fa fa-eyedropper"></i>.

The unsafe HTML is not stripped from your pages on the server. Rather, it's not included in the HTTP responses sent to browsers. As a result, pages might not render as intended in browsers. You can override the default setting to allow all the HTML to be sent to a browser.

Warning: Making this change will allow potentially malicious code to be executed when users open a page in a browser.

To allow unsafe HTML in HTTP responses

  1. Click General in the top menu bar, then select Help Center settings.

  2. On the settings page, select the Display Unsafe Content option.
  3. Click Update.

Safe tags

strong, em, b, i, p, code, pre, tt, samp, kbd, var, sub, sup, dfn, cite,
big, small, address, hr, br, id, div, span, h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd, abbr, acronym, a, img, blockquote,
del, ins, u, table, thead, tbody, tfoot, tr, th, td, colgroup

Safe attributes

href, src, width, height, alt, cite, datetime, title, class, name,
xml:lang, abbr, target, border

Everything else is considered unsafe.

Customizing the content with Curlybars

You can also use a full-featured templating language called Curlybars to access Help Center data and manipulate content in page templates. For example, the breadcrumbs template helper {{breadcrumbs}} displays a breadcrumbs navigation element on a page. For a detailed guide on using the templating language, see Help Center Templates. For ideas and techniques, see the Help Center templating cookbook.

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 a custom theme. Custom themes are not supported by Zendesk and are not automatically updated when new features are released. See About standard themes and custom themes in Help Center.

To customize the content with Curlybars

  1. Click General in the top menu bar, then select Customize design.

  2. Click Edit Theme.

    Zendesk makes a copy of the existing theme. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time.

  3. Click the drop-down menu in the Theme editor and select a template to modify.
  4. Add, edit, or delete template expressions in code view. See Help Center Templates for details.
  5. Click Preview to preview the effect of your changes.

    If you want to see what the Help Center looks like to end-users or anonymous users, click Preview, then select a role in the lower-right corner of your Help Center.

  6. To save your changes, click Save at the top of the sidebar.

    The changes are not deployed to the Help Center until you click Publish changes at the top of the sidebar. If you want to keep working on the theme later, click Close at the top of the sidebar. Your changes are saved.

  7. When you're ready to deploy your changes, click Publish changes at the top of the sidebar.

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 a custom theme. Custom themes are not supported by Zendesk and are not automatically updated when new features are released. See About standard themes and custom themes in Help Center.

To customize the CSS or JavaScript

  1. Click General in the top menu bar, then select Customize design.

  2. Click Edit Theme.

    Zendesk makes a copy of the existing theme. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time.

  3. Click the CSS or the JS tab in the Theme editor.
  4. Add or modify the CSS or JavaScript in the code view.
  5. Click Preview to preview the effect of your changes.

    If you want to see what the Help Center looks like to end-users or anonymous users, click Preview, then select a role in the lower-right corner of your Help Center.

  6. To save your changes, click Save at the top of the sidebar.

    The changes are not deployed to the Help Center until you click Publish changes at the top of the sidebar. If you want to keep working on the theme later, click Close at the top of the sidebar. Your changes are saved.

  7. When you're ready to deploy your changes, click Publish changes at the top of the sidebar.

Using variables in the CSS

The properties you set in the Appearance panel are stored in variables that you can use in your CSS. The variables are useful if you want to specify the same value in several places in your CSS and update it quickly. Updating the property in the Appearance panel updates it everywhere the variable is used in your CSS. See Updating the appearance of your Help Center for information on updating properties in the Appearance panel.

The variable names are as follows:

  • $color_1
  • $color_2
  • $color_3
  • $color_4
  • $color_5
  • $font_1
  • $font_2

Assign a variable to a CSS property the same way you would assign a normal value. Example:

.button {
  label-color: $color_2;
}
Have more questions? Submit a request

Comments

  • 0

    I would like open, organization requests to be shown to signed-in users on the Home Page of the Help Center. Or, potentially, modify the home page to redirect to the "My Activities" page, and then I can use the API to display articles there.

  • 0

    @Will - This script will redirect an end user to the Request Page.

    https://gist.github.com/moderatorwes/614de539de35aece9530

  • 0

    Ok, so just "manually" redirect the user. I was hoping there was a way to update subdomain.zendesk.com/hc/en-us BE the requests page, but a redirect is certainly usable! Thank you =)

  • 0

    @Will - I'm not aware of any way to update the subdomain so I believe the re-direct is the only option available at this point in time. Best of luck

  • 0

    I'm trying to get my logo to link to the company's official site but couldn't find any way to do it. I am now trying to input my logo as an uploaded image in assets but I can't get the hyperlink to attach to the image. Right now the image in not visible, if I add text the hyperlink does go to the appropriate site.

    I've been working in the HTML but I'm probably doing something obvious wrong as I know nothing about coding!

    <header class="header">
    <div class="header-inner">
    <a href="https://www.COMPANY WEBSITE/">
    <img scr="//p5.zdassets.com/hc/theme_assets/793026/200142987/BFC-logo-1-line_zendesk.jpg" style="max-height:30px;border:0">
    </img>
    </a>
    <nav class="user-nav">
    {{language_selector}}
    {{submit_a_request}}
    <!--{{user_info}}-->
    </nav>
    </div>
    </header>

    Thank you in advance :)

    Edited by OliviaBasileo
  • 0

    how to make export template to import sandbox?

  • 0

    It would be real nice if we could clone our live theme, so we can mess with it in a sandbox environment when thinking about big theme changes. Looks like I will be using the old copy and paste method. 

  • 0

    Hey folks, does anyone know why I can't get more than 3 images in a row on my home page?

     

    The clear fix and table in CSS seem to be controlling this:

     

    * Clearfix: contain floats
    */
    .clearfix:before, .clearfix:after {
    content: " ";
    display: table;
    }

    .clearfix:after {
    clear: both;
    }

    /*
    * Column size
    */
    .main-column {
    float: left;
    width: 950px;
    margin-left: 0px;
    }

    . {
    float: right;
    width: 300px;
    }

     

  • 0

    Hey Kevin,

    That's right, it's in the CSS.  You'll either have to make the width-constricting high level container larger, or make the blocks smaller.  I say high level because your main-column may be limiting the overall width, but there may be a higher level element also restricting it.  I changed some of my high level elements like 'main' to max-width and min-width from a fixed width to make them flexible across screen sizes.  Then set some lower level containers, like your 'main-column' to a fixed percentage width.  This way my block screen, that looks similar to yours, will use more of the wide space available without getting too big or too small.  The thing to look out for is to check your other pages to make sure the same css element changes will work there as well.  If not, you'll have to change one or the other too have everything come out nicely.

  • 0

    Hi Olivia,

    This is how my header logo html looks with a link to my page.  I added the image using base64 encoding.  If you google convert jpg / png / etc to base64 you'll find online tools that will give you the base64 code for your image.  The code is very long so I put ellipses (...) in place of most of it.

    <a  style="border:0px" href="https://companyurl"><img width="30px" height="30px" src="data:image/png;base64,iVBORw...VYCh" alt="Home"></a>

  • 0

    Hey Nicholas! Thanks for hopping in and helping out!

  • 0

    The theme we are using displays 6 questions in each section on the category page with a 'show all' option if there are more than 6 in that section. We can't see a limiting number in the code we've looked at. Does anyone know how to reduce that number?

  • 0

    Hey Amy!

    Our moderator Wes posted a tip about this: Show less than 6 articles in a section in Help Center. That'll get you started!

  • 0

     Thanks Jessie that's great!

  • 0

    Hi!

    Great article! We are in the middle of a re-make of our help center and I'm wondering how to divide the articel in different topics, as it is in the beginning of this article? Publishing links to another article is not a problem but it would be nice to give the costumers better suggestions on topics in long articles.. 

  • 0

    Hi Eva! You can find that information in this article:

    Happy formatting!

     

  • 0

    Any chance that it is possible to add a custom column to the My Requests page?

  • 0

    Hi Jay!

    There isn't a way to do that at this time, but it's definitely something we've received a lot of feedback about. You can find that thread here: Enable custom ticket field columns to be added to the request table in Help Center my activities page.

    You'll see that our Help Center Product Managers have weighed in on it, and have done some information gathering as well. I'd encourage you to add your vote and use case to that thread!

     

  • 0

    We're planning on using the Copenhagen theme and for now don't want to create a custom theme, but just want to adjust colors and fonts using the settings available in the theme editor.

    However, even though it lists a number of different fonts that can be used, when I save my settings the font changes don't register.  Is this not really enabled for use with the standard theme?

  • 0

    @Larry - The fonts should be applied through-out your theme when selected.  I just tested and it worked fine but I didn't test every font.  Which font are you selecting?

  • 0

    My first few attempts didn't seem to stick...  (I believe I had tried Arial Black), but after a few combinations, I selected Future for Font 1 and Helvetica for Font 2 and those were retained and applied.

    Questions:  

    1) Which parts of the template are Font 1 applied to, and which are Font 2 applied to?

    2) Similarly - What do colors 1 - 5 control the colors of?  Is there a chart somewhere that shows which parts of the template these selections are applied to?

    3) Is there any control on the font sizes?  Or does that require custom coding in the .css  (We want to keep this simple to maintain and don't want to get into the code itself if we can avoid it).    If font size can't be controlled, do any of the available fonts appear larger relatively for ease of reading?

    On a non-related note:

    3) We've uploaded images, but notice that they don't resize when viewed in mobile or smaller screens.  It appears they just get their left and right sides removed (causing text on the left and right of the image to be cut off).  What's the best strategy for these images so they look good in all screen widths?

    Thanks! 

     

    Edited by Larry Deckel
  • 0

    @Larry

    Hi Larry!

    I'm sorry the fonts didn't seem to work, but I can try to answer your questions:

    1)  The Font 1 is for heading tags, so it would change any `<h1>....<h6>` and the Font 2 variable is set to the body of the element, so the remaining text would have this.

    2)

    - Color 1: We identify it as brand color this will change the icons, the color of the boxes in the home screen and the color of the buttons.

    - Color 2: This color is of the text inside anything with a Color 1 background, for example the category boxes on hover, buttons, icons, etc.

    - Color 3: Text color, so everything inside the content, the comments, posts, titles, etc.

    - Color 4: Link color

    - Color 5: Background color

    We are working on the naming :D

    3) Right now, to change the font size you would need to go in the code to change that

    4) The recommended sizes can be found here(https://support.zendesk.com/hc/en-us/articles/220672108#comment_206572007), the way we handle them is by using a "background-size: cover" so the image doesn't stretch and dynamically adapts to the screen size and displays the center of the image, that may cause issues when using text on the image, in my opinion, the best way to go would be without text.

     

    Hope this helps :)

  • 0
    Avatar
    Brad M.

    Is there any way to create your own custom variables outside of the provided '$color_' and '$font_' variables?

  • 0

    @Brad - I haven't found a way to add any more variables however I have suggested this to the HC Product Manger before.  You may want to go and post this over in the Product Feedback section.  It would get my vote.

  • 0

    Just wondering if anyone knows of a way to customize the design based on the category? I wanted to do a different header depending on which category our user selects. I assume different brands would help me acheive this, but i'd like to avoid that as these categories are just different products within our brand.

  • 0

    @Frank - Yes you can change the design a little based on the category.  You will use a combination of JQuery and the curlybar brackets.  I did this to change the background color of the page based on the category you were on.

    Are you just wanting to change the header based on the category.  Can you give me a little more details.

     

  • 0

    Thanks for the reply Wes.


    Yes, so my current mockup, our header is one solid color, with our logo and the zendesk login. I'd like to be able to change the header color and logo for each category (if that clarifies it any)

  • 0

    Nevermind...  

     

    When you are customizing the theme of your help center, is there a way to change the language and see that while editing?

    Our font in English is fine, but some text in french or german is much longer because of translation so it wraps. But i want to be able to see the changed when I am editing it to see if it works without saving and publishing something that may not work.

     

    Thanks

    Edited by eball
  • 0

    Would it be possible to get a guide on how to setup our own Search Results page similar to how yours looks here in the Zendesk Help Center?

  • 0

    Hi,

    How to limit cell about #each?

    Example:
    {{#each requests count='10'}}
      {{id}}
    {{/each requests}}

    Not works a limit 10, please help.

    https://developer.zendesk.com/apps/docs/help-center-templates/helpers (Not explain about each)

Please sign in to leave a comment.

Powered by Zendesk