Navigating the theme files

Each Help Center theme consists of a collection of editable page templates that define the layout of different types of pages in Help Center, CSS, images, and Javascript files. 

Let's look at the folder structure that comes with each theme:

theme/
  ├── assets/
  ├── settings/
  ├── templates/
  ├── manifest.json
  ├── script.js
  └── style.css
  

 

assets/

The assets/ folder contains all custom files such as scripts, images, fonts, etc. You can add and use your own theme assets by adding files to assets/ folder. There are several allowable file types for themes; see Allowable file types for theme assets.

 

settings/

The settings/ folder contains images associated with settings and variables described in the manifest.json file. The names of images must match the variable identifiers.

 

templates/

The templates/ folder contains all editable page templates for each page type, such as home, category, and section, as well as the global header and footer. Templates are written in Curlybars, Zendesk’s templating language.

 

manifest.json

The file defines the Settings panel of the theme in Guide. It allows changing the theme options without touching the code. The properties you 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. You can use it to add or edit theme settings.

 

script.js

The script.js file contains basic JavaScript for your theme. You can add your custom functionality here.

 

style.css

The style.css file contains the main styles for your theme. Instead of hard-coded values, we use CSS custom properties (variables) that are supported in all modern browsers.

Extensions Bundle

Get 6 most popular extensions for your help center with a total price of $1,218 for $699 only.

  • Side Navigation
  • Prev Next Buttons
  • Table of Contents
  • Community Hot Posts
  • Alerts
  • Server Status
Learn More
Did this answer your question?
Still can’t find what you’re looking for?

Hire an expert

Our consultants and developers are Zendesk Guide certified.
Free up your time for your business while we take care of your help center.

Get a Quote

Ask a question

Not sure how something works or how to make changes?
Don’t worry, we’ll answer all your questions.

Contact Us