Scroll Viewport's theme editor lets you adjust the visual appearance of your site.

To access the styling options in the theme editor, click Edit theme in the site overview screen, then Templates.

The Templates menu contains settings concerning the HTML templates that are used for site generation. They generally determine the look and feel of the live site.

Changes made to the templates require a site update to reflect on the live site.

The Template Menu

On the left, you’ll find a sidebar with all of the available theme settings. Changes made to the theme are immediately reflected on the theme preview, located on the right side. The theme preview can’t be interacted with.

The sidebar is split into three categories: Global, Pages and Site Settings.

Global

Global settings are reflected on all pages of your site. An example is the header and footer of the Help Center theme.

Site settings

Learn more about the specific settings on the individual templates in our Overview of the Help Center Theme.

Option

Usage

Attachment picker

  • Use the attachment picker to select background images and logos for your site.

  • The dropdown menu lists all available attachments found in the space home page. To identify your space home page, go to Space settings and in the Space details tab you will see the link to your Home page listed.

Color picker

  • If you’re nur sure what hex-code your color has, click on the color tile to open the color picker.

  • Use the top slider to select a color range and the picker in the field below to change the saturation.

Navigation Link

  • By using the “add new link” button, you can add up to five navigation links in your header and footer section.

  • To be visible they require a filled in link name and a URL link.

  • Click the left area of the link elements to sort them per drag and drop function.

Free text

  • Texts without confluence representation can be set by using the text field below the descriptions.

  • Click out of the text field to save all written content.

  • Some texts are automatically set by your Confluence content and can’t be changed in the theme editor. Learn how you can define and structure content with labels and macros

Layout selection

  • In some page templates (e.g the content source page) you can choose between different layout styles.

  • Selecting a layout in the dropdown menu will add or remove elements and restructure the page.

  • By choosing no layout (None) the page uses the confluence content (e.g the space overview page)

Labels and sections

  • By default, all page templates contain non-deletable elements to enable easy navigation through your site (e.g. Header logo, article topics or pagetree).

  • Display additional page sections (e.g. Pinned pages section or news section) by turning on the display checkbox and adding the necessary labels in Confluence.

  • Learn more about how to define and structure content with labels and macros

Headings and Icons

  • Inputing headings on sections is optional. If left empty the heading is not displayed.

  • To some Headings an Icon can be added. Select an Icon on https://materialdesignicons.com/, copy and paste the icon name in the icon field in the theme editor to display it.

  • Set a general color using the color picker