This feature is available with the following pricing plans: Premium, Unlimited, Pay as You Grow

This article is a reference to enable you learn how to customize each page of your website.

Learning Experience

The Learning Experience encompasses the pages where the learners can interact with the content that you have built within the Syllabus Builder. These pages can only be styled via CSS and Javascript. Javascript files will be uploaded as templates as described below, and CSS will be managed via the Learning Experience CSS Editor. Click here to learn more.

School Website

The School Website encompasses the following pages:

  1. Homepage (if using Website and Catalog app)
  2. Course catalog (if using Website and Catalog app)
  3. Course details (if using Website and Catalog app)
  4. Custom page (if using Website and Catalog app)
  5. Course cover page*
  6. My courses
  7. 404 error page
  8. 500 error page
  9. Authentication pages (if not using SSO)**
  10. My Profile page (if not using SSO or URL Authentication)**

*As the Course Cover Page often shares styles with the Learning Experience, the styles will not be controlled by styles.css.sktl file as referenced below, and will pull styles from the Learning Experience CSS Editor. Click here to learn more.

**You will have access to template files for all of the above pages where you can edit the HTML, CSS, and Javascript of all pages, other than the secure Authentication and My Profile pages (if applicable). The Authentication and My Profile pages (if applicable), will display your custom header, footer, and styles templates. The sections below explain which template files to use to edit each of the editable pages.

Templates for School Website

A note on the .sktl extension

Each file has a sktl file extension, which stands for Northpass Templating Language. These files are regular HTML files and contain mostly HTML. The template files have some dynamic variables using the a templating language called Scribble. Click here to learn more about Scribble. Scribble provides variables so that your data can be pulled from what you've entered into Northpass. These dynamic variables will be represented with curly brackets (e.g ##{{ variable_name }}) and will pull the corresponding data from what you had entered into Northpass.


Homepage - Homepage.html.sktl (e.g. myschool.northpass.com/)
This template is only used if you have the Website and Catalog app enabled. It corresponds with the root URL of your school website.


Course Catalog - Course_index.html.sktl (e.g. myschool.northpass.com/catalog)
This template is only used if you have the Website and Catalog app enabled. It corresponds with the Course Catalog of your school website.


Course Details Page - course_details.html.sktl
This template is only used if you have the Website and Catalog app enabled. It corresponds with the Course Details page of your school website. This page is accessed by visiting the Course Catalog page as a learner and clicking on a course that you are not enrolled in yet. When you preview your school, you will be enrolled in all courses by default so you will not be able to access this page.


Custom Page - custom_page.html.sktl
This template is only used if you have the Website and Catalog app enabled and if you have created Custom Pages in your school. Click here to learn more about adding custom pages.


My Courses Page - my_content.html.sktl (e.g. myschool.northpass.com/my_courses)
This template displays all of the courses that a learner is enrolled in. It corresponds with the My Courses page of your school website. The corresponding URL will change depending on any custom vocabulary chosen (e.g. myschool.northpass.com/my_toolkits or myschool.northpass.com/my_sessions). The name of the file does not need to change, and the system will populate the template correctly regardless of your course vocabulary. Click here to learn more about course vocabulary.


Course Cover Page - course_cover.html.sktl
This template is the cover page for the course. When you are enrolled in the course and click to Start the course from the Course Catalog page or the My Courses page. This page displays the cover of the course, an image, the syllabus, and overall progress.


404 Error - not_found.html.sktl
This template displays in the case that a learner experiences a 404 error.


500 Error - server_error.html.sktl
These template displays in the case that a learner experiences a 500 error.


<Head> tag - _head.html.sktl
This file is a partial that is rendered on all pages, including authentication pages, except for course_cover.html.sktl. It is injected into the <head> tag.


Course Tile - _course.html.sktl
This file is a partial that is rendered on the Course Catalog and My Courses page. It represents the repeated course tiles that display a snapshot about each course. Changes made to this partial will take place across both pages for all courses.


Header - _header.html.sktl
This file is a partial that is rendered on all pages except for course_cover.html.sktl. It represents the header of the school website and contains the header navigation.


Footer - _footer.html.sktl
This file is a partial that is rendered on all pages except for course_cover.html.sktl. It represents the footer of the school website and contains the footer navigation.


Styles - styles.html.sktl
This file is a partial that is rendered on all pages except for course_cover.html.sktl.
There are two options for styling. You can choose to create specific overrides to existing styles, or you can remove all existing styles.

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


Javascript
You can upload any file with the .js extension. These javascript files will be loaded into the bottom of the learning experience and cover pages. Click here to learn more about how to structure and manage your javascript files.

Click here to see all articles related to Design

Did this answer your question?