Skip to content
  • There are no suggestions because the search field is empty.

Course Studio - Working with Styles

Learn how to create and manage Course Styling configurations to help you build consistent, on-brand courses faster.

Table of Contents:

  1. Overview

  2. What Styling Configuration Controls

  3. Creating a Styling Configuration

  4. Saving and Publishing a Styling

  5. Applying a Style to a Course

  6. Setting a Site Default

Administrative Rights

The table below shows the administrative rights pertaining to Course Studio. Note that you need to be an Editor to manage course styles. Anyone with rights to edit a course can apply the styles you create. They can see and select published styling configurations when working inside the Course Studio, but they cannot access the Course Styling management pages and cannot create or publish configurations.

Role Can View Can Edit Drafts Can Submit for Review Can Approve/Reject Can Publish Can Delete Can manage templates & styling
Reviewer ✅ ❌ ❌ ✅ ❌ ❌ ❌
Developer (Author) ✅ ✅ ✅ ❌ ❌ Drafts only ❌
Editor ✅ ✅ ✅ ✅ ✅ ✅ ✅
Global Admin ❌ ❌ ❌ ❌ ❌ ✅(not the studio course ❌
Microsite Admin ✅ (own domain) ✅ (own domain) ✅ (own domain) ✅ ✅ ✅(own domain) ❌

Note: You need to be an Editor to manage course styles.

1. Overview

When you are building courses at scale, having to rebuild the same structure and apply the same visual settings to every course from scratch is time-consuming and easy to get inconsistent. Course Studio addresses this with several tools designed to give your content team a reliable starting point every time:

  • Course templates are default course outlines that specify page structures (headings, subheadings, and page types) for common course subjects. They are intended to be a starting point for a specific course. Several default course templates are available. Course templates cannot currently be edited or changed.
  • Page layouts are standardized layouts that can be assigned to individual pages and reused across courses. A layout encompasses the arrangement of the items on the page (text boxes, images) and can include boilerplate content. Layouts do not specify course styling.
  • Course styling allows you to change the visual appearance of an entire course -- the colors, fonts, and branding applied to a course when Learners view it. Stylings can be shared across multiple courses and set as defaults at the site and microsite level. Studio comes with several default stylings and you can create your own styling to match your preferences or branding.

        This article covers course styling. Styling is a great way to implement consistent branding and free course developers from concerns about course appearance.

        2. What a Styling Configuration Controls

        Each styling configuration is a named set of visual settings. The settings you can configure include:

        • Background color - The main background of the course content area.
        • Heading color - Applied to all heading text (H1 through H6) within course pages.
        • Body text color - The default color for paragraph text, list items, and other body content.
        • Highlight color - Used for accent elements, active navigation states, and selected items.
        • Button color and button text color - Controls the appearance of call-to-action buttons within course pages.
        • Navigation background and text color - Applied to the course header bar, the table of contents sidebar, and the course footer.
        • Heading font and body font - The typefaces used for headings and body text respectively.
        • Base font size - The default text size from which relative sizing across the course is derived.

        If no styling configuration is assigned to a course, the system uses a default set of colors and fonts built into Course Studio.

         Note: When you publish an updated styling configuration, every course using that configuration or using it as the site default will immediately reflect the new styling for Learners. There is no separate publish step per course. 

              3. Creating a Styling Configuration

              To create a new styling configuration:

              • Navigate to Course Studio > Course Styling and click Create Configuration.

              Tip: If you want to base a styling on an existing styling, click the three dots in the Actions column, duplicate the styling, then edit the duplicated styling.

              • Give the configuration a name and an optional description. Names should be meaningful; for example, "Compliance Training Brand" or "Partner Portal Default" so authors can easily identify the right styling when assigning it to a course.
              • A configuration can specify colors, fonts, and spacing.

              • A live preview updates as you make changes, so you can see how the course will look to Learners before publishing.

              •  If you use microsites, you can specify which microsites have access to the styling. This can be useful to establish different branding for different microsites. 

              4. Saving and Publishing a Styling

              Like course content, styling configurations have their own version lifecycle: Saved, Published, and Archived. A configuration must be published before it takes effect on any course. This means you can make and preview changes to a styling configuration without those changes going live until you are ready.

              If you update a styling and publish a new version, any courses using that styling will be automatically updated to reflect the styling changes.

              • Saved stylings are the working version of a configuration. They can be considered drafts and are visible to Editors but are not visible to Course Developers and cannot be applied to courses. To save a styling, simply click the Save button at the bottom of the Edit Course Styling page.
              • Published stylings are the active version of a styling. Published stylings can be applied to courses by course developers. They are what Learners see. Only one version of a configuration can be published at a time. To publish a styling, click the three dots in the action column on the Course Styling page and click Publish. 

              • Archived stylings are kept for historical reference. When an Editor publishes a new version, the previously published version is automatically archived. Version history is shown in the versions section of the Course Styling page. To archive a published styling, click the three dots in the action column on the Course Styling page and click Archive.

               

              5. Applying a Styling to a Course

              Styling is applied at the course version level, not to the course as a whole. This means different published versions of the same course could theoretically use different styling configurations, though in most cases you will apply the same styling consistently.

              When a styling configuration is updated, every course using it reflects the change automatically.

              As a course developer, to apply a styling configuration to a course, open the course in Course Studio and navigate to the Settings view. Under the Styling section, you have two options:

              • Use Site Default - The course will use whatever styling configuration has been set as the default for the site or microsite it belongs to. This is the default setting for all new courses. If no site default has been configured, Course Studio's built-in system styling is applied.
              • Use Specific Configuration - Select a named styling configuration from the list. This overrides the site default for this course only.

              The styling preview updates in the page editor as soon as a configuration is selected, so authors can see how their content will look with that styling applied before publishing.

               

              6. Setting a Site Default

              A site default is a styling configuration that applies automatically to all courses that have not been individually styled. Setting a site default is the most efficient way to ensure brand consistency across your catalog without having to manually assign a styling to every course.

              To configure site defaults, navigate to Course Studio > Course Styling and click Defaults. From here, you can assign a published styling configuration as the default for your site. If your LMS uses multiple microsites, each microsite can have its own default styling configuration.

              The system resolves which styling to apply to a course using the following priority order:

              • A specific styling configuration assigned to the course version - this always takes priority.
              • The default styling configuration for the Learner's microsite (the site they are accessing the course from).
              • The default styling configuration for the main site.
              • Course Studio's built-in system defaults - colors and fonts hardcoded into the platform.

              Tip: If your organization has a single brand identity, set one styling configuration as the main site default and leave individual courses set to Use Site Default. This way, if your brand ever changes, you only need to update one configuration and every course updates automatically.

                If you have questions about Course Studio, please reach out to your Knowledge Anywhere Account Manager, or email us at support@knowledgeanywhere.com.