Content Styler: Essential Guide
Content Styler is an important piece of Creator+. It lets creators set a consistent theme that is applied across all course pages. When Content Styler is enabled, every content page that you create will have the same font style, font colour, and accent colours.
How Does it Work?
Content Styler applies a universal CSS style at the org level. This means every page in that org unit will have the special style coded into it when it opens, no extra effort from you.
To set up your style, admins will select the Content Styler tool from Admin Tools. Then apply a name and description to your style. Next, you’ll choose four design elements that will be applied across all of your pages: Accent, Accessible Accent, Header Colour, and Header Font.
The following chart breaks down these four elements, and how they will impact your design.
Accent Colour
Certain Creator+ Elements will use accent colours. These accent colours are decorative and are not required for accessibility.
For example, the Header 1 style uses a decorative underline. The colour of the underline is determined by the accent colour you configure in Content Styler.
Here is a list of the Creator+ design elements that use an accent colour:
- Standard callout border-colour
- Blockquote standard left-line colour
- Blockquote large quote icon colour
- Heading 1 underline colour
- Accordion numbered line divider
Accessible Accent Colour
The accessible accent colour acts as a background colour for Creator+ elements that display white text. This colour needs to be accessible for all learners since it will frame white text.
Here is a list of the Creator+ design elements that use an accessible accent colour:
- Jumbotron callout background colour
- Timeline panel heading background colour
- Timeline panel arrow background colour
Header Colour
The header colour is used for all levels of headers. The header colour must be accessible on a white background.
This colour is applied to all Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, and Heading 6 on your content pages.
Header Font
The header font is used for all levels of headers. The font in all other elements, including paragraphs will remain the same.
This font is applied to all Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, and Heading 6 on your content pages.
Learn More
We’re here to help you get the most out of Content Styler. For a detailed list of instructions and best practices, check out the Content Styler page in our Creator+ Instructional Design Best Practices course.
Do you have a question about Content Styler? Ask your question in the comment section below and someone on the Creator+ team will help you out.