Skip to main content
Skip table of contents

Using the Theme Configurator

Most themes can be customized further using the theme configurator to create a look and feel that is true to your or your customer’s brand.

Your customization options depend on the theme you choose but typically include the option to:

  • add your own logo

  • define the colors of text and background

  • choose between different layout options.

You customize a theme mostly through a visual user interface that requires no coding skills.

How to Interact with the Theme Configurator

Open the theme configurator from Site Settings > Look and feel > Customize theme.

You can interact with the interface in the following way:

  • Use the sidebar on the left to see all customizable settings that are available for the selected theme. These themes might be grouped into different categories on the outer sidebar. Click through the categories and individual settings to find the customization option you’re looking for.

  • Use the dynamic theme preview on the right to revise your setting changes. The preview immediately reflects the changes you make to the theme. Please note, you can only view and not interact with the elements in the preview.

  • Use the theme preview navigation on top of the theme preview to preview how specific pages in your site will display with the setting changes you make.

How To Use the Different Settings

Learn how to interact with the different types of settings that the theme configurator offers.

Your exact customization options depend on the theme you choose. For a detailed list of all available settings, please refer to the documentation of the corresponding theme (e.g. Configure the Help Center Theme for the help center theme)

Setting

Usage

Image picker

Upload images or select one from the already uploaded images in an asset library to be used in one or various locations of a theme.

  • Click the Upload File button to upload custom images for e.g. logos in your site. You can manage all uploaded images from an 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 Scroll 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 for the help center theme, have a look at our Recommended Custom Image Formats.

Color picker

Choose a color for an element in the theme.

  • Click on the color field to open the color picker. The picker will help you find the right HEX code for the colors in your site.

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

Link list

Add and sort links that are displayed in a specified location of your theme (e.g. in a header).

  • Click the Add new link button to add one link. Depending on the theme you use, you might be able to add multiple links.

  • To be visible, links require a Link name and a Link URL.

  • 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.

Text field or text area

Show custom text in the theme, like names or descriptions for content.

  • Click the text field to input your text.

  • Click anywhere outside of the text field to confirm the input.

See texts in your theme but no matching text field to customize it? Some texts might come directly from Confluence and will need to be edited there.

Select option

Choose between different types of layouts, typography and more.

Checkbox

Turn a specified element or feature in the theme on or off.

Radio button

Choose between various options that the theme offers.

Code editor

Inject additional custom code into the theme.

The theme you select will specify which coding language is allowed.

JavaScript errors detected

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

If this problem persists, please contact our support.