The Design tab gives you control of General, School Website and Learning Experience Styling. Custom CSS options are also available, but require a foundation of CSS background knowledge.

Going over to School Website Styling, you can customize the colors used across the school's website and utilize templates.

To delete a template, click Delete next to the templates for the page in which you’d like to revert the design back to the default styling. You will see a confirmation modal to confirm the action you would like to take. This action cannot be undone. You can also download templates, which is helpful if you're looking to build on existing customizations.

Learning Experience Styling walks through the color scheme that will be used across your learning experience.

Select the desired colors for your learning experience & check out how the colors would look with the preview screen that will update in real-time.

Custom CSS Option requires knowledge of CSS. Additionally, as Northpass updates to the learning experience may affect custom styles, ongoing maintenance is required on your end.

Step 1

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 2

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

Step 3

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.

Did this answer your question?