Sections

Core concepts

Base styles

Theme settings

Every theme has a number of settings that you can configure using the Settings Panel in Zendesk Guide when branding or customizing your theme.

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.

  • 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 field
  • list - Dropdown list
  • checkbox - Checkbox
  • color - Color picker
  • file - File uploader
  • range - 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",
    }]
  }]
}