Create themes for Evolve modules · Customer Self-Service

Views:

Overview: an Evolve theme contains all the design elements that visually make up a course (colours, fonts, and logos). Every Evolve course must have a theme assigned to it. As a training manager, you need to create themes for Evolve modules so that the courses have a consistent design and reflect your branding.

Start from: any existing course in Evolve.

Note: you can view your themes on the main page of Evolve. How, you can only make updates within a course.

Duplicating a theme.

Select the Theme icon.
Select Create Theme.
Select the theme you want to duplicate.
Select Create.

Your theme is ready to update.

Note: it's always best to duplicate a theme to ensure you keep the version we created as an original.

Apply a different theme to a course

Select the Theme icon.
Select Select Theme.
Choose your new theme from the existing list.
Select Select Theme.

Note: Evolve themes are very adaptable and have been created so you can easily switch them over. However, always make sure that your theme is working as expected with all components on your course. For that, review your new theme in Live Preview.

Change de colour palette

Select the Theme icon.
Select Default colours.

Note: if you need to make an update to one colour, it will update across the whole theme. You can update one or all the colours: however, please make sure to use the same brightness when swapping colours. For example, if you are changing a dark colour, make sure your new colour is just as dark, this will ensure good contrast and legibility.

Change fonts

Evolve is synced with Google Fonts, therefore we can use font in the library.

Select the Theme icon.
Select your new font from the drop-down menu.

Note: in general, Font 1 has been used for Headers, Font 2 for Body text and Font 3 for introduction text. Replacing any of these three will update across the course. You can add up to 7 fonts and cans elect them within the Article Style.

Change logo

Note: to add a new logo to your navigation bar, you must add it to the asset library first.

From the main Evolve page:

Select your logo.
Upload Asset.

Then, navigate to your course:

Select Theme > Images > Add theme image.
Select your logo.
Select Add.

Finally, you can add this to your Navigation.

In your theme:

Select Navigation > Navigation logo.
Toggle on Navigation logo.
Add your logo to Navigation Logo Large Image and Navigation Logo Small Image.

You can then change the size of the logo and colour of the navigation bat in the settings.

Updating an article style

Note: within a theme, there are multiple article styles so you can vary the design of your course, but also because styles can work better with some components than others. For instance, we have created a Quote and Introduction styles that have been created to display text in different ways. There are a maximum of 20 article styles you can create. You can make specific changes to every element within an article style by following the steps below. However, thus is quite advanced, so please, reach out if you need help.

Within your theme:

Select Article Styles.
Select the article style you want to update.

At first, you will see the settings for Article:

You can change the style of anything you add to an Article.
By using the dropdown, you can select further into the style layers to update and change any article.

For example, if you want to change the button style, you select Button from the drop-down, you will then see all the styles for the buttons within this article. You can change anything from colour, font, hover colour, border colour etc.

Note: We recommend when changing a theme you also have a preview screen up of what you are changing and do one thing at a time. If you change multiple elements and something doesn't look right, you will have to manually fix it, since there is no undo button.