Applying a Theme Using a Template – Digital Learning Design Toolkit

In most cases, it’s easiest to apply a theme using a template. This way you get other relevant page elements in addition to the theme, since they often go together.

Most programs/schools will have home page and module templates available. If you’re not able to find a relevant template, please contact CDIL for assistance.

Video Walkthrough

Step-by-Step Instructions

1. Click Edit Button

To begin, click the “Edit” button in the top right corner of your Canvas site.

Screenshot of a webpage titled Template in Canvas LMS. A red arrow points to the Edit button on the top right, which is outlined, indicating where to click to edit the page.

2. Find the Template Button

Use the indicated search button and type in “Template” to pull up the Template button.

Screenshot of a webpage editor with a template named Template being edited. A red arrow points to the Search box in the Add New Elements panel on the right side.

3. Decide Whether to Override Existing Content

If you’d like to replace the content on the page with a template, check the box next to “Overwrite Current Content with Selected Template.”

A red arrow points to an unchecked box labeled “Overwrite Current Content with Selected Template” in a website’s template content settings panel.

4. Or Place the Template Above or Below Current Content

If not, click either the “Top” or “Bottom” button to position the new content above or below your existing content.

Screenshot of a web interface showing Template Content settings. The Template Position option is highlighted with TOP and BOTTOM buttons. Other sections include Course Content, Import by URL, and Templates.

5. Find the Relevant Template

If you already know the template you wish to use, you can search for it in the indicated bar. Otherwise, you can browse the template menu.

A screenshot shows the DesignPLUS template import menu with a red arrow pointing to the Search Templates search bar, highlighting where to search for templates. The editor and template list are also visible.

6. Browse the Template List

If you would like to view the various options for themed templates, you can scroll through the indicated menu. Templates are categorized by school and/or page type.

Screenshot of a webpage editing interface with a text box labeled Template Content on the left and a sidebar on the right showing category options such as JSON, DATA SCIENCE, General, and NURSING.

7. Select a Relevant Category

Depending on your needs, open the folder for the relevant category of themed templates. For this example, we will be adding a BC General Red homepage. Note that home pages and module pages are formatted differently, so it is important to make sure the selected template matches the page type you are creating.

Screenshot of a webpage titled Edit Template with a text box labeled Template Content. An arrow points to a sidebar menu on the right, highlighting a General section with a list of module page links.

8. Click on the Relevant Template

Click on the themed template you wish to apply. When you hover your cursor over the text of the template, you will see a preview of what it will look like as a Canvas page. Once you click on it, the themed template will be applied to your page.

9. Double Check the Title

Double-check that the DesignPLUS banner title matches the Canvas page title, since it is not updated automatically.

Screenshot of a webpage editor with “Sample Page” in the page title field, “Course Title” in a course card, and “Course Title” entered as the banner title. Red arrows and boxes highlight these areas.

10. Click the Save Button

Finally, save all changes by clicking “Save” in the bottom right corner.