This article explains how to perform advanced customizations of the learning experience design. The learning experience is what your learners see when they access a course.

Read this first:

There are a few important things to note before moving forward. Knowledge of CSS is required. Additionally, as Northpass updates to the learning experience may affect custom styles, ongoing maintenance is required on your end.

Step 1

Access the templates.

  • Click Design and select Styling.
  • Select Learning Experience Styling.

Step 2

Enter your styles and javascripts into the Styles for Learning Experience text box.

  • To enter styles, surround your styles with the <style></style> tags.
  • To enter scripts, surround your scripts with the <script></script> tags.

The code entered will be injected into the <head> tag after all default Northpass styles and scripts on both the Learning Experience and the Course Cover Page. If you need any of your javascripts to load in the footer of the Learning Experience, click here to learn more.

Note that the structure of all pages is built on UI Kit, so those classes and icons will be available to you to use.

Step 3

Click on the Save button at the top right. Your changes will be available to your learners immediately.

Step 4

It is highly recommended that any customizations made are tested in all major browsers released within the past year, including on the device sizes that you anticipate your learners to use.

Click here to see all articles related to Design

Did this answer your question?