Overview

To customize the look and feel of a specific page you have to modify the corresponding template. Each page has its main template and each template can have multiple smaller templates (called partials) used inside of it. Here's an example:

catalog.html.liquid
├── _header.html.liquid
├── _sub_navigation.html.liquid
├── _courses_filter.html.liquid
│   └── _filter_select.html.liquid
├── _courses/catalog.html.liquid
└── _footer.html.liquid

The catalog.html.liquid file is the main template for the Catalog page. Inside that template, there are multiple partials that construct the whole UI. Partials allow reusing parts of the template and provide a way to structure your customization code.

📘

Please note that the structure above represents the way the templates are included in one another, not the structure of folders from the zip file.

Quick start

1. Download the default templates from the Northpass Admin panel.

Go to the Design tab in the Admin panel and then to School Website Styling. Click the Download Default Templates button.

2. Unzip the downloaded file and open the folder with templates in your favorite code editor.

You should see a list of all main templates and their partials.

3. Modify the templates to your liking.

Unleash your creativity! You can use any combination of HTML, CSS, and JavaScript to provide the best user experience to your learners.

4. Upload the templates using the Northpass Admin panel.

After you make changes to selected base templates, you should upload them to the application. Go to the Design tab in the admin panel and then to School Website Styling.

Click the Upload Templates button and add the templates you have chosen, then confirm the changes with the Save button.

❗️

Once you edit your templates we won’t support automatic updates with additional features that Northpass makes to the base templates. You will need to merge the changes into your templates directory. Additionally, we will not be able to support the look and feel of your website.