Sections

Settings

Theme settings allow you to make instant changes to your Help Center without editing any code.

Theme settings

Theme settings provide Guide Managers control over theme colors, fonts, images and branding.

Default settings

All of our themes share the same collection of default settings.

Section Name Description
Colors Primary color Primary color for major navigational elements
Colors Primary text color Text color for hover and active element states where the primary color is used
Colors Heading color Color for heading elements
Colors Text color Color for text elements
Colors Link color Text color for link elements
Colors Outline color Outline color for form elements and search fields
Colors Background color Background color of your Help Center
Fonts Heading font Font for headings
Fonts Text font Font for body text
Fonts Code font Font for code elements
Brand Logo Company logo
Brand Favicon Icon displayed in the address bar of your browser
Images Home hero image Hero image on the home page
Images Community hero image Hero image on the community topics page
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
Page elements Sticky header Make the page header stick to the top of the page
Page elements Article comments Show comments on articles

Custom settings

Custom settings can be added to your theme’s Settings Panel by updating 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",
    }]
  }]
}

Sass variables

Sass variables provide complete control over base styles, utilities, elements and (consequently) patterns. They are contained in the scss/framework/_variables.scss Sass partial.

//
// Gray scale
//
// These are the colors you will use the most and will make up the majority of your UI.
// They're often used for text, backgrounds and borders.
//

$color-gray-100:    #F7FAFC !default;
$color-gray-200:    #EDF2F7 !default;
$color-gray-300:    #E2E8F0 !default;
$color-gray-400:    #CBD5E0 !default;
$color-gray-500:    #A0AEC0 !default;
$color-gray-600:    #718096 !default;
$color-gray-700:    #4A5568 !default;
$color-gray-800:    #2D3748 !default;
$color-gray-900:    #1A202C !default;

Theme settings can be referenced within Sass and CSS using the identifier property from the manifest.json file as a variable name. For example, use the $heading_color variable to apply the Heading color in CSS:

h1, h2, h3, h4, h5, h6 {
   color: $heading_color;
}

Theme assets can also be referenced using a variable name, which can be found in the Theming Center interface:

  1. Click the Customize design icon (Customize icon) in the sidebar.
  2. Click Customize on the theme you want to edit.
  3. Click Edit code.
  4. In the Assets section, click the asset file you want to use

Theme assets