In this article
Colors
Every theme has a unique set of colors that you can configure using theme settings to instantly align the look-and-feel of your Zendesk Help Center with your company brand.
-
Primary color
The color for major navigation and brand elements throughout the theme.
-
Primary text color
The text color for hover and active element states where the primary color is used.
-
Heading color
The color for heading elements. This includes elements that use the
.h1
-.h6
classes. -
Text color
The color that serves as the default for all text elements throughout the theme.
-
Link color
The color for all link elements in both layouts and body content throughout the theme.
-
Outline color
The outline color used for form element and search field focus effects.
-
Background color
The background color of each page in your Help Center.
Some themes will include additional color settings like shades of the primary color, depending on their style requirements.
Fonts
Several types of fonts are configurable in every theme.
-
Heading font
The font used for heading elements. This includes elements that use the
.h1
-.h6
classes. -
Text font
The font used for all text elements throughout the theme.
-
Code font
The font used for all inline and block code elements, like
<code>
and<pre>
.
Some themes include Google Font options for one or more of the above settings and you can always add your own custom fonts if required.
Images
As most themes have hero sections on the Home and Community landing pages, these settings allow you to change the background image for each quickly and easily.
-
Home page hero image
The image used as the background image for the hero section on the Home page.
-
Community page hero image
The image used as the background image for the hero section on the Community page.
A checkbox associated with each settings allows you to specify whether the image should be used or not. In the absence of an image, a background color is used.
Elements and features
The following groups of settings are available for most themes and allow you to control search functionality as well as various page-specific elements. For example, you can disable the Subscribe button on the Section page or remove comments from all Article pages, all through theme settings.
Section | Name | Description |
---|---|---|
Search settings | Instant search | Show suggested articles on search |
Search settings | Scoped search in Knowledge Base | Search results are confined to the category the user is in |
Search settings | Scoped search in Community | Search results are confined to the topic the user is in |
Home page elements | Hero element heading | The heading text to display within the hero element |
Article page elements | Article author | Show author image and name |
Article page elements | Article comments | Show comments on articles |
Article page elements | Follow article | Users can follow a specific article |
Article page elements | Recently viewed | Show recently viewed articles |
Article page elements | Related articles | Show related articles |
Article page elements | Social sharing | Show social media sharing on articles |
Section page elements | Follow section | Users can follow a specific section |
Post elements | Follow post | Users can follow a specific post |
Post elements | Social sharing | Show social media sharing on post |
Topic elements | Social sharing | Show social media sharing on post |
Some themes include additional settings related to unique UI elements, features or even colors.
Custom theme settings
If you would like some aspect of the theme to be configurable from with the theme’s Setting Panel, you can create your own custom theme settings by editing the manifest.json
file.
The following setting types are available:
text
- Text input fieldlist
- Dropdown listcheckbox
- Checkboxcolor
- Color pickerfile
- File uploaderrange
- Range input field
For example, the following snippet demonstrates a custom file type setting:
{
...
"settings": [{
"label": "Images",
"variables": [{
"identifier": "background_image",
"type": "file",
"description": "Background image for my custom section",
"label": "Background image",
}]
}]
}