Design Settings

Courses in your LMS library are able to be designed with custom settings including: fonts, logos, and colors.

For any course that you own and are able to edit in your content library, you can add custom design settings. These custom settings include manipulating design resources, such as:

  • Colors

  • Fonts

  • Backgrounds

  • Borders

  • and Logos

Demo

In the video above, the design settings are in the course settings area. The user experience has been updated to have the design settings as part of the design elements panel on the left side of the page.

Opening the Design Settings Tab

To find the design settings tab, open up the editor experience for a course of interest and then click on the Design Elements icon to open up the design window. Here you will see a "Design" tab.

Once the settings experience is open, you will want to click on the Design tab.

By default all courses when they are created inherit the default Affinity design schema. You can revert to this at any time by clicking the Set Default Values button.

Also, while you are making changes, if you need to reset anything, you can click the Reset button which will change the design settings back to the previously saved values.

To save any changes, simply click Save.

The design changes will show up in your preview, but won't take effect for learners until you publish the course.

What can be designed?

Fonts

The default font family for a course can be changed. You can also change the default font size for text.

Every course can have it's own logo which is presented in the course catalog and to users. To set your own logo for the course you can upload an image in this area.

Colors

You can style the following colors:

  • Primary color. The dominant color in your training.

  • Widget background and border colors. Widgets are interactive elements like questions and experiences.

  • Default background and foreground colors. These would be the primary color of pages as well as the text on those pages.

  • Side panel color. This is the color of the navigation side panel which shows the progression of the course.

Last updated