Style and Customize a Site

Scroll Viewport's theme editor lets you adjust the visual appearance of your site. Currently, all Viewport sites are based on the Help Center Theme. This theme determines the overall look and feel of the site.

The Templates menu in the theme editor contains styling options for all HTML templates that are used to generate your site.

To access these styling options, from the single site overview click Edit theme > Templates.

The theme editor consists of:

A sidebar on the left with all available templates and template styling options.
A theme preview on the right that immediately reflect all changes made to the theme. Please note that you cannot interact with the elements in the preview.
A theme preview navigation on top of the theme preview. Use the article and content source dropdown to preview how specific pages in your site will display on your live site.

Overview of all Site Templates

Site templates that can be customized are split into two categories in the theme editor: Global and Pages.

There are some site templates like the 404 page that can’t be customized (yet) and don’t appear in the theme editor. Learn more in Fixed Templates.

Global templates

Global templates are used on all pages of your site. Any changes applied to global templates will be visible to users everywhere they navigate within the site.

Currently, the settings in this section are determined by the structure of the Help Center Theme. The Help Center Theme allows you to customize:

the site’s header
the site’s footer
the site’s favicon (available under the section 'header)

Learn how to use the global template settings to Customize Header, Footer, and Favicon .

Page templates

Page templates are used for specific pages in your Viewport site. Any changes applied to a page template will be only be visible to users when they are on pages that use that specific template.

Currently, the settings in this section are determined by the structure of the Help Center Theme. The Help Center Theme allows you to customize:

The content source page
The article page
The portal page (Options for these templates are only shown if more than one content source is added to your site)

Additional Settings

Additional fields in the templates editor include:

Cookie notice settings
Custom CSS editor
Custom Javascript editor

You can choose to enable or disable the cookie notice. Once enabled, you can configure how the notice behaves and displays.

You can use the code editors to inject custom CSS or inject custom Javascript to your site. We recommend that you only use the code editors if you find that the visual theme editor doesn’t provide your required styling options and if you have the required knowledge to write and maintain the custom code.

Changing Template Settings with the Visual Theme Editor

Learn how to interact with the Visual Theme editor and its template settings.

Find a detailed list of all available template settings in our Overview of the Help Center Theme.

Changes to the template settings won’t affect your live site until you click Save, close the theme editor, click Update site and Go live. Learn how to Publish and Update a Site.

Option	Usage
Uploading images to the Asset Library	Click the Select image button to upload custom images for the background (banner) and logos of your site. You can manage all your custom images from your site’s asset library: Click Upload File or drag your custom image to the asset library to start the image upload. Confirm and close the dialog by clicking Select Image. All custom images used in the theme are uploaded and stored in the Asset Library. If you have multiple Viewport sites, you asset library will only show the assets of the current site. Only those images that are selected and used in the theme for your site are made public. Before uploading your image, have a look at our Recommended Custom Image Formats
Choosing colors with the color picker	To help you find the right HEX code for the colors in your site, click on the color field or 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.
Add links using the link fields	Click the + Add new link button to add up to five navigation links in your header and footer section. To be visible, links require a link name and a URL link. Make sure to paste full URLs starting with "https://". Click and hold the left area of the link element to sort the order of links via drag and drop.
Select a Layout Type	For some page templates (e.g the content source page) you can choose between different layout types. Selecting a layout in the Layout Type menu will add or remove elements and restructure the page. Keep an eye on the theme preview to see the differences between layouts. Overview all available layout options for the content source page and the portal page.
Display additional sections using Confluence page labels	Some templates allow you to display additional page sections (e.g. Pinned pages section or News section) by turning on the display checkbox. You can define where the content for each section should come from by going back to Confluence and adding specific page labels. Optionally, you can define headings for all additional sections (see next row). If left empty, no heading is displayed. Overview all available page labels and learn how to Define Pinned, News and Call-to-Action Pages.
Insert site descriptions in text fields	Some texts that are displayed in the site can be set and changed using text fields. Click the text field to input your text. Click anywhere outside of the text field to confirm the input. See texts in your site but no matching text field? Some texts are automatically set by your Confluence content and can’t be changed in the theme editor. Learn how to Change Descriptions in the Site.
Add icons to sections by referencing Material Design Icons	For some additional sections, you can add an icon next to or as a heading. Visit https://materialdesignicons.com/ , copy the icon name of the icon you would like to use. Paste the icon name in the icon field in the theme editor. Pick a color for the icon using the color picker.