Guide: Getting Started with Theme

A guide for those who haven't started working on a theme yet, with the ultimate goal of having the theme match your existing site. Take it step by step, experiment as you go, and remember that you can always deactivate the theme if you're not satisfied.

Getting started with themes on an existing website doesn’t have to be a huge undertaking. Start at a comfortable pace by adding a theme and setting up a test environment on your website.

When creating your first theme, you can design one that differs significantly from your website in terms of colors and fonts so you can see how and what the various settings affect. It may also be a good idea to upload a different web font than the one(s) you already have on the website.

• Upload a new web font under Site Settings / Appearance / Web Fonts.
• Finish by clicking OK to save your new web font.

To follow the guide and make adjustments to your website, you must be an administrator and have administrator permissions.

Add a theme

Then add a theme to your website. You can do this under Site Settings / Appearance / Theme.

Give your theme a name, for example, Basic Theme.

Configure the theme settings for:

• Basic
• Profile color
• Block colors.

If you’ve added a new web font, you can select it under Basic / Fonts in your theme. This way, you’ll immediately see which modules are loading fonts from Basic.

Create a test folder

Create a folder on your website and hide it from search. This way, no website visitors will accidentally find your test pages.

Create a test page

Create a test page in your folder. Before activating the theme on the page, start by adding several layouts and modules. The image shows examples of what you can add to the page. Keep in mind that different modules retrieve their settings from different sources. You may need to go back to your theme and make additional or different settings depending on which modules you place.

The image shows examples of elements that can be useful to have on a page when testing a theme. It also displays appearance settings for the various layouts and modules that are retrieved from the theme.

Activate the theme on the page

Once you’ve added layouts and modules to the page, it’s time to activate your theme. To do this, go to the page’s Properties and then Appearance/Theme, where you select your theme.

Now you can see which content is affected by the settings you’ve made in the theme.

If you’ve selected a different font under Basic in your theme, you’ll immediately see which modules get their appearance from there.

If any area of the page loses its color or changes color, you should check the settings in the base template first.

Two examples of how the footer background color changes—or doesn’t—when you activate your theme:

1. If the background color of the base template is set in the template’s properties, it will be replaced by your theme’s background color.
2. If the footer background color is instead retrieved from a layout, the footer retains that color.

Test pages with and without a theme enabled

In the example Without theme, the components have colors even though no theme is activated on the page. This is because appearance settings are retrieved from Sitevision Standard if no theme is activated on the page. You can read more about standard colors on Sitevision Envision.

The images show the same example as earlier on the page but illustrate how it appears in view mode with and without a theme.

The next step could be to link more appearance settings to the theme by having the theme control, for example, format templates and colors.

Control the format templates via the theme

Go in and apply the theme to your format templates. You can do this in two ways:

1. Use fonts and/or text colors from the theme.

Only fonts and/or text colors are retrieved from the Basic settings in the theme. You configure the remaining settings as usual under Format Templates.

2. Link your format templates to the theme’s content text settings.

Start by taking stock of your existing format templates and decide which variants they should be linked to under Content Text in the theme. Then link your format templates, one at a time, to the respective Content Text in the theme.

This way, you manage all settings in the theme regarding how text should appear. The same number of format templates can thus be used with completely different appearances if you create multiple themes. For example, for dark and light modes.

NOTE! If you do not specify a font under each Content Text, the font will be inherited from Basic.

Theme controls colors

The theme controls the website’s colors to simplify management. When naming colors, consider naming them based on what they do rather than what they are. Example: Border instead of Gray.

Under Site Settings/Colors, you’ll see your various theme colors organized by theme-controlled color.

Dark theme

Another step is to ensure you have both a light and a dark theme on the website, as this is an accessibility requirement. The light theme is likely the one you’ve already created, so now you can create a dark theme.

• Add a theme and name it "Dark Base Theme."

If you want to use the settings from the Base Theme as a starting point and adjust them, click the Advanced tab in the new theme:

• Under Import Theme/Import Type, select Import values from another theme.
• Select Basic Theme and click Import.

Configure all appearance settings for your dark theme and checkPrimary Dark Theme under the Advanced tab.

• Finish by clicking OK to save your new theme.

When you activate the dark theme as the primary theme, the website detects the visitor’s device mode and adapts accordingly.

Activate the theme on the base template

Now it’s time to activate the theme on the base template. Does that feel a little scary? Then our tip is to create a copy of the base template and test it there before making the settings on the live template.

Remember that you can always deactivate the theme if you’re not satisfied.