Content Styler: Essential Guide

Welcome to C+_community.png

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.

div.png

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. 

div.png

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. 

Comments

  • Birgitte.B.96
    Birgitte.B.96 Posts: 15 🌱

    Hi Joey
    In this article https://community.d2l.com/brightspace/kb/articles/4449-set-up-style-and-branding-with-creator-content-styler it is mentioned that we can also use client-hosted, custom CSS files. It has been confirmed (by a D2L employee in the developer group) that additional features (besides the four mentioned above) can be styled, but I am searching for guidance on how to write the content of such a file:
    What should it look like? Which tags/elements can be styled? Etc.

    We are interested in knowing exactly what our options are when it comes to C+ and styling, but the article mentioned above does not give any guidance on it.
    I was pointed in the direction of this group and this article by a supporter, in a case where I asked the same, but they were unable to answer.

    Regards, Birgitte