Using the Style editor to update your Style

The Style editor is the interface that you'll use to make changes to your Style.

It is split into two main sections:

• Styling controls on the left contained within accordions
• A preview of an example Project which shows the real-time effect of the changes being made

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

Style controls

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

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 which contains controls for font family and font size for the text in the body of your Project
• Headings which contains controls for the title fields in your Project. Here you can choose the font family and weight used by your titles as well as set different sizes for Project, section, and interaction titles.
• Buttons which contains controls for the 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.

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 a background image to maximize accessibility.

Header

This set of controls allows you to set background and text colors for the header.

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.

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 also staying within your brand guidelines.

You can add as many color palette combinations as you like by selecting Add Color.

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

Buttons

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

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

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

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

Interactive items

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

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.

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.

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 very specific color you're looking for.

You can switch between formats using the arrow icon:

Choosing fonts

The Style editing interface gives you access to 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. However, 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.