Customizing page templates with HTML and Curlybars

Stan Jobs
Stan Jobs

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 also use a full-featured templating language called Curlybars to access Help Center data and manipulate content in page templates.

On Guide Enterprise, you can create 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:

  • 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)

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 page templates

  1. In Guide, click the Customize design icon (Customize icon) in the sidebar.

  2. Click the theme you want to edit to open it.

  3. Click Edit code.

    Edit code

  4. In the Templates section, click the template you want to modify.

    The page opens in the code editor.

  5. 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 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
  6. Click Save in the top right corner to save your changes.

    The changes are applied to every page in your theme that is based on the template you modified.

  7. To preview your changes, click Preview (see Previewing your theme in Help Center).

    Edit code preview

  8. Make other code changes as needed, then click Save.

    When you’re finished editing the page template, you can close it.

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.