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.
Comments
-
Hi Joey
In this article 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 -
Hey Birgitte,
Thanks for your question and sorry for the delayed response. I sent your question along to one of our courseware experts at D2L. This is his response:
Options for styling C+ elements are limited. If you're looking to have custom CSS files with different colour sets for the C+ elements you will want to use these variables (I have noted their relationship/names from the content styler tool):root{--d2l-cplus-color-primary-dark: #9D1FD4; // Accessible Accent--d2l-cplus-color-primary: #46A661; // Accent--d2l-cplus-color-neutral-one-head: #000000; // Header--d2l-cplus-font-family-one: 'Lato', sans-serif; // Header Font}With Content Styler this CSS file is also loaded:
So, any additional CSS you write would have to work with that. The key piece here is the use ofbody:not(.template-fallback)in the CSS file. This will need to be included to overwrite any styles fromHere is an example:
body:not(.template-fallback) h1, body:not(.template-fallback) h2, body:not(.template-fallback) h3 { color: #005A9C; /* Example custom color */ }
