More web-savvy Guide 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 CSS.

You must have Guide Professional to access page code for your Help Center theme.

Note: If you are on a trial version, you have the Guide Professional plan, which includes theme code editing. After the trial, you will not be able to access theme code if you do not purchase Guide Professional.

Customizing the page templates with HTML and Curlybars

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.

You can customize the template of any of the following page types or elements:

Article page, the individual article pages in the knowledge base

Category page landing pages

Community post list page

Community post page

Community topic list page

Community topic page

Contributions page, the lists of posts, community comments, and article comments by an end-user

Document head, the document's head tag

Error page, the message displayed when a user lands on a non-existent page

Footer, the bars appearing at the bottom of all Help Center pages

Header, the bars appearing at the top of all Help Center pages

Home page, the top-level landing page for your Help Center

New community post page

New request page, the request or ticket submission form

Following page, the list of categories, sections, and articles a user is following

Request page, the individual request or ticket pages

Requests page, the lists of requests or tickets assigned to a user or that a user is CC'd on

Search results, the search results display format

Section page landing pages

Subscriptions page

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

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

Click the theme you want to edit to open it.

Click the options menu, then select Edit Code.

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

The page opens in the code editor.

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.

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

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

Click the theme you want to edit to open it.

Click the options menu, then select Edit Code.

Click script.js to modify the JavaScript or style.css to modify the CSS.

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

Comments

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.

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!

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.

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.

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?

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..

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?

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.

@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.

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.

@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.

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.