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:
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.
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 |
URL | Enter a complete URL | " https://www.k15t.com " Note: "www.k15t.com" will not work |
Free text | Enter text | Setting |
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 |
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.