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 in which you can affect how your space appears in the Viewport view: by editing the theme-settings in the theme editor and by manipulating content in Confluence, like setting labels on pages.
On this page, you will learn how the Help Center theme can be customized in general, both in terms of appearance and content. For more info about which settings need to be altered to change a specific component, refer to the view-specific pages:
- Global Settings
- Article Page Settings
- Space Home Page Settings
- Portal Page Settings
- Settings Using Confluence Info
- Theme Settings File
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 spaces in which the theme is active.
To access the settings
- Navigate to Space Tools > Apps > Scroll Viewport
- In the list of viewports, click Configure
- Click the ⋯ button and choose Edit
To edit a default theme, you must first create a copy of it.
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 update the setting. In this case, the header background color is set to the html color value #000C34. You can modify the setting by entering a different color value.
Comments in the themes settings explain what the setting does and which values are allowed. If a value does not fit the property, it will be set to its default value.
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:
|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 |
|URL||Enter a complete URL|
Note: "www.k15t.com" will not work
|Free text||Enter text||Setting |
|Other||Follow the description for the setting||Setting |
After changing the settings, choose Save and switch to the viewport from a space in the help center to see your customizations.
Uploading custom files to the theme
To include custom images in the theme, those have to be uploaded and attached to the theme. After they have been attached, they can be references by name in the properties of the Filename type.
Files currently attached to the theme are listed in the file section on the left of the theme editor along with the theme-settings.properties file.
The Help Center theme supports JPG, PNG and SVG image file types.
Confluence page & space content
You can tailor how your content is displayed in Viewport view by directly manipulating 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 it is done in as opposed to all spaces the theme is active in.
Confluence page content
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.
The Help Center theme supports a range of content macros in article view. Some Confluence macros also used for other purposes.
Example: The excerpt macro is used to define the page description. This description will appear on the tile that represents a page on the space home page.
Confluence page and space metadata
Labels are used to give pages special status in a space.
Example: A page that has the label "scroll-help-center-exclude-page" will be hidden from all navigation, including the page tree and space home page.
Space name, description and avatar are included in the different views in the Help Center theme.
Example: The tiles on the portal page of a multi-space that represent the space contain the space avatar, name and short description of that space.