Skip to main content
Skip table of contents

Customize the Theme

You can customize the Help Center theme to match your brand by modifying the site's colors, layout, and more.

There are generally two ways to change how your space appears in the Viewport: by editing the "theme-settings.properties" file in the theme editor and by changing content in Confluence, like adding labels to pages.

Notice that - by default - space administrators can only edit files or upload file types that are considered safe, but Confluence administrators can extend the theme editing permissions to space administrators.

On this page, you'll learn how to customize the appearance and content of the Help Center theme. To learn which settings to alter to change a specific component, refer to the view-specific pages:

Theme Settings

Access the settings

Most of the visual customization of the Help Center theme is done by editing the "theme-settings.properties" file in the theme editor. Edits in this file affect all viewports in which the theme is used.

To access the theme settings:

  1. Navigate to Space Tools > Apps > Scroll Viewport.

  2. In the list of viewports, click Configure.

  3. Click the   button and choose Edit.

To edit a default theme, you must first create a copy of it.

Change settings

The theme settings are broken into several sections based on how they affect the help center. Individual settings are defined as key value pairs.

For example, you might see a setting like: "header.backgroundColor=#000C34". Let's break this down:

  • header.backgroundColor – This is the name of the setting. In this case, you're setting the background color of the header.

  • #000C34 – This is is the value you modify to change the setting. In this case, the header background color is set to the html color value #000C34. You can change the setting by entering a different color value.

There's a description above each setting explaining what it does and which values are allowed. If you enter an invalid value, the default value is used.

There are a few different types of settings, each with a description of what it does and how to change it. In general, you'll encounter these types of settings:

Setting Type

Description

Example

Filename

Enter the name of the uploaded file.

"header-logo.png"

Color

Enter a hex color code

"#000C34", or another color value supported by CSS.  Learn more

Toggle

Enter "on" or "off" to enable or disable the setting.

Setting header.displaySpaceName to "on" makes the space name display in the header.

URL

Enter a complete URL

" https://www.k15t.com "

Note: "www.k15t.com" will not work

Free text

Enter text

Setting helpCenter.overview.headingText to "Our Products"

Icon

Enter a valid icon name. Available icons and their names are listed under this link.

"calendar"

Other

Follow the description for the setting

Setting tracking.google.analyticsID by entering your Google Analytics tracking ID.

After changing a setting, choose Save and switch to the viewport from a space in the help center to see your customizations.

Uploading images

You can use an image, like a logo, in the theme by uploading it in the lower left of the theme editor. Uploaded files are listed in the file section on the left of the theme editor along with the "theme-settings.properties" file.

Once a file is uploaded, you can use it in the theme by entering the name of the file in Filename settings.

The Help Center theme supports JPG, PNG, GIF and SVG image files. 

Due to security consideration space administrators can only upload JPG, PNG and GIF though. A Confluence administrators can can extend theme editing permissions.

Confluence Space and Page Content

You can tailor how your content displays in a Viewport by changing page content like macros or by assigning metadata like labels or descriptions to your Confluence pages or spaces.

This customization method generally only affects the space in which the change is made, rather than all spaces in which the theme is active.

Confluence page content

Page title

Page titles are used in the URL of any given page and also appear as the HTML title for it. Titles of space home pages are also used for other elements.

Example: The title of the space home page is also displayed in the banner if the "hero" style is used.

Macros

The Help Center theme supports a range of content macros in article view. Some Confluence macros are also used for other purposes.

Example: The excerpt macro is used to define the page description. This description appears on the tile that represents a page on the space home page.

Confluence space and page metadata

Page labels

Labels are used to give a page a special status in a space.

Example: A page with the label "scroll-help-center-exclude-page" is hidden from all navigation, including the page tree and space home page.

Space metadata

Space name, description, and logo are included in the different views in the Help Center theme.

Example: Each tile on the portal page representing a space contains the space logo, name, and short description of that space.

Learn more

Learn more about the settings that use Confluence information.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.