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.