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

Create, Style editing interface.png

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.

Brand identity

This section contains controls for the elements that appear in the Project's footer. Here you can control:

  • The logo that appears in the footer
  • The text that appears in the footer

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.
  • Button 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 "Overlay", you can choose to apply a color behind a background image to maximize accessibility.

Header and Footer

This set of controls allows you to set background and text colors for the header and 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:

  • Default which removes the border from the button
  • Glow which adds a widely diffused border to the button
  • Minimalist which adds a thin border to the button
  • Extravert 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.

Interactions

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.

Create, color picker in the Style editing interface.png

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:

Create, arrow pointing to channel change icon in color picker in the Style editing interface.png

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.

 

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.

Create, arrow pointing to Load more fonts in Styles editing interface.png

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

Was this article helpful?
0 out of 0 found this helpful

Articles in this section

Request support
Access support that’s tailored to you by getting in touch with our Support Team.
Send us feedback
Do you have a new feature request, or want to tell us about something that works well (or not so well) for you? Get in touch!