Sections

Configure settings

You can control fundamental aspects of our theming framework through the use of theme settings and Sass variables.

Theme settings

Theme settings allow you to make instant changes to your Help Center without editing any code. They allow you to control theme colors, fonts, images and branding.

All of our themes share the same collection of default settings, which include:

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 Use Home hero image Whether the selected Home hero image should be used or not
Images Community hero image Hero image on the Community Topics and Posts pages
Images Use Community hero image Whether the selected Community hero image should be used or not
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

Additional settings are made available in some themes. For example, some will have additional settings to control unique UI elements or theme-specific colors.

More complex changes to layouts and pages can be made using utilities, elements and patterns.

Creating your own settings

If you’d like to make elements of your theme configurable by Guide Managers, you can add custom settings 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. For example, the gray color palette is represented by the following Sass variables:

//
// 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;

If you would like to override framework Sass variables, we recommend doing so in the scss/theme/_variables.scss file before recompiling the Sass styles. For example, to use a different shade for $color-gray-600 you would add:

$color-gray-600: #656e7b;

Special variables

When writing custom Sass or CSS you can reference theme settings by 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