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.

  • Border color

    The border color used throughout the theme.

  • Secondary button color

    The color used for secondary buttons with the outline style.

  • Hero heading color

    The color for headings in the hero element.

  • Hero background color (primary)

    The primary background color for hero elements.

  • Hero background color (secondary)

    The secondary background color for hero elements, which can be used to create gradient effects.

  • Hero background color opacity

    The opacity of the background color for the hero element which determines the balance between it and the underlying image.

  • Note color

    The color used for note content elements. The background color is automatically derived from this color.

  • Warning color

    The color used for warning content elements. The background color is automatically derived from this color.

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

  • Boxed background color

    The background color visible when a boxed layout is used

  • The background color applied to the page footer.

Some themes will include additional color settings like shades of gray, 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>.

  • Font size

    The base font size used by the theme, which flows through to all other elements.

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.

Brand

Several types of fonts are configurable in every theme.

  • Favicon

    The icon displayed in the address bar of your browser

  • Your company logo.

  • Logo height

    The height, in px, of the logo image.

  • Tagline

    An optional tagline to be displayed beside the logo image.

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.

You can choose to have both the Home and Community page hero images displayed above the background color. This can be used to great effect when your background image is semi-transparent.

Some themes include additional image settings that can be used to change images used in Home page blocks, call-to-action sections and other elements. Themes that feature block images also include a setting to control the height of those images.

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
Search settings Search placeholder The placeholder text to display in search fields
General page elements Boxed layout Display the page within a boxed layout
General page elements Notification Display a notification banner at the top of the page.
General page elements Notification content A reference to the Dynamic Content snippet containing your notification content.
Header elements Fixed header Make the header float above hero elements
Header elements Sticky header Make the header stick to the top of the page
Header elements Header height The height, in px, of the header
Header elements Light links Make links in the header contrast with a dark background color
Header elements Light links when fixed Make links in the header contrast with a dark background color or image when the header is fixed
Header elements Website link text Text to display in the link to your company website
Header elements Website link URL The URL of your company website
Header elements User name Show the full user name for signed-in users
Home page elements Hero element heading The heading text to display within the hero element
Home page elements Promoted articles Show promoted articles on the Home page
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
Article page elements Social sharing title Title to display alongside social media sharing links
Section page elements Follow section Users can follow a specific section
Section page elements Table of Contents Show a Table of Contents element on articles with two or more headings
Section page elements Table of Contents heading The heading to display above the Table of Contents links
Section page elements Note title The title to display within note content elements
Section page elements Warning title The title to display within warning content elements
Section page elements Lightboxes Enable lightbox functionality throughout the Help Center
Section page elements Lightboxes Enable our custom video player for YouTube, Vimeo and MP4 videos
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
Footer elements Light links Make links in the footer contrast with a dark background color
Footer elements Social links Show links to your social media pages
Footer elements Facebook The URL of your Facebook page
Footer elements Twitter The URL of your Twitter page
Footer elements LinkedIn The URL of your LinkedIn page
Footer elements Credit link An optional and greatly appreciated link to the Zenplates website

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",
    }]
  }]
}