Using the Style editor to update your Style

The Style editor is used to make changes to your Style.

It is split into two main sections:

• Styling controls on the left, contained within accordions
• A preview on the right of an example Project which shows the real-time effect of the changes you make

Each collection of controls can be revealed by selecting its respective accordion. 

Note: Brand Styles can only be created and edited by Adminstrator users. To learn how to create a Brand Style for your account, see Creating a Brand Style.

 

Contents

1 Style controls

i Typography

ii Page Sections

iii Header

iv Footer

v Color Palette

vi Buttons

vii Interactive items

2 Using the color picker

i The color matrix and sliders

ii HEX, RGBA, and HSLA values

 

 

1. Style controls

Here is a brief explanation of the Style controls and how they work.

 

i. Typography

This section controls the typography settings of your course. The controls are split into three sub-sections, each controlling a different aspect of your Project.

• Body text: controls font family and font size for the text in the body of your Project
• Headings: controls title fields in your Project. Here you can choose the font family and weight used by your titles and set different sizes for Project, section, and interaction titles.
• Buttons: controls font family, weight, and size of the text in your Project's buttons. For example, the Submit button of a question or a link button.

Select a font family or size from the drop-down menus:

You can access a library of thousands of fonts that can be used in your Projects.

You can choose the font family used, as well as use different weights and sizes for different elements.

When choosing a font, you'll be given a smaller list of fonts that you may want to use but you can choose to view the full library of fonts by selecting Load more fonts:

This will open up a modal window where you can browse through the available fonts or search for a specific one.

 

ii. Page Sections

Here you can control the colors of the sections of your pages.

• You can set alternating section colors and text colors, applying one set of colors for every even section and another for every odd section:

• Under Background image overlay, you can choose to apply a color over your background images to maximize accessibility.

 

iii. Header

This set of controls allows you to set the background color and the text color for the Project's header.

 

iv. Footer

Here you can choose how the footer navigation appears in your Projects. You can learn more about this option in Setting the navigation menu style for your courses.

You can also choose to upload an image to be used for brand identification as well as an optional strapline. The strapline can contain hyperlinks if you'd like to link out to your company website or other destination:

 

There are also controls for the background color and text color of the footer.

 

v. Color Palette

This control gives you the ability to set a color palette that creators can use to apply one-off changes to their Projects. This can be useful if you'd like to give your colleagues the freedom to make a Project their own whilst staying within your brand guidelines. You can add up to ten color palette combinations.

Select Add Colour to add a color to your palette.

For more information about how to use the color palette to apply one-off color changes to a Project, see Changing the appearance of your Project without changing the Brand Style.

 

vi. Buttons

Here you can change the style of your buttons and the colors they use.

There are several button styles available to use, each of which will apply a different border style to your buttons:

• Drop shadow: adds a light shadow under the button
• Outer glow: adds a widely diffused border to the button
• Thin outline: adds a thin border to the button
• Thick outline: adds a thick border to the button
• Inner shadow: adds a lightly diffused border to the button

The setting used for the button's text color will also apply to the button's border.

 

vii. Interactive items

This section contains controls for styling interaction components. You can pick a fill color and a text color.

You can also set the feedback display format of questions to Popup or Inline and choose whether the learner is told immediately whether their answer is correct or incorrect with the Show Answer Status drop-down menu. For more information about this, see Customizing the way your questions display feedback using your Brand Style.

 

2. Using the color picker

The color picker is used to choose colors. There are several different ways of using the color picker to help you find the exact color you need.

 

i. The color matrix and sliders

You can choose a color by selecting one on the color matrix. The color matrix will give you a wide variety of colors based on the one selected in the slider directly below it.

You can choose to add a level of transparency to the color by using the second slider.

 

ii. HEX, RGBA, and HSLA values

You can also directly input the HEX, RGBA, or HSLA values if you know them. This can be useful if there's a specific color you want to apply.

You can switch between formats using the arrow icon:

Note: If a level of transparency has been applied, the HEX controls will become unavailable as they do not support the Alpha channel which controls transparency. Only RGBA and HSLA support transparency. If you would like to use the HEX format, ensure the transparency (Alpha) setting has been set to 1.