Modify Course Templates

Templates

Course Builder uses templates to determine the look and feel of the pages in your course. The templates are HTML files and can be found in

  • the views directory (e.g., views/lesson.html)
  • templates or views subdirectories of specific modules (e.g., modules/assessments/templates/assessment.html or modules/course_explorer/views/course_explorer.html).

Base templates define the overall HTML structure of Course Builder. Every page displayed in Course Builder starts from the views/base.html template. There is also views/base_course.html, which extends base.html and is the base template for most course pages.

Other templates, such as lesson.html and assessment.html, add structure for a specific type of page. Finally, other files can add content for a particular page, such as lesson-1.1.js.

You can edit the templates and related files to customize the look and feel of the pages in your course. The sections below list the templates used to render some common Course Builder pages. For other pages, check out the views directory and the relevant module subdirectories.

For more information on the structure of the templates themselves, see Using templates for an introduction and then check out the Jinja2 documentation.

Registration

Course Builder uses the following files to render the Registration page:

  • views/base.html defines the header and footer areas.
  • views/register.html defines the content of the registration form.
  • views/summary.html provides the course description and other introductory material. This page is also used by views/course.html.

Learn about registration.

Course Home Page

The following files render the course home page (Course in the navigation bar):

  • views/base.html defines the header and footer areas.
  • views/course.html defines the structure of the content area.
  • views/summary.html provides the course description and other introductory material.

Learn about the course home page.

Lesson

The following files render a lesson page:

  • views/base.html defines the header and footer areas.
  • views/unit.html defines the second two lines of the header, the vertical navigation, and the content area.

Learn about lessons.

Assessment

The following files render an assessment page:

  • views/base.html defines the header and footer areas.
  • modules/assessments/templates/assessment.html defines the structure of the content area.

Learn about assessments.

Forum

The following files render the forum page:

  • views/base.html defines the header and footer areas.
  • views/forum.html defines the structure of the content area. It also has a link to the discussion forum. You need to change that to the link you create for your forum.

Learn about creating a forum.

Announcements

The following files render the announcement page:

  • views/base.html defines the header and footer areas.
  • views/announcements.html defines the structure of the content area and contains the actual announcements.

Learn about announcements.

Student Profile

The following files render the student profile page:

  • views/base.html defines the header and footer areas.
  • views/student_profile.html defines the structure of the content area.
  • views/unenroll_confirmation_check.html defines the content of the page that asks for confirmation before unenrolling
  • views/unenroll_confirmation.html defines the content of the page that confirms the student is actually unenrolled.

Learn how to access the student profile from the Progress tab.

On the Dashboard, there is footer text that states “Powered by Course Builder.” You are not obligated to keep this, and you may delete it by going to /modules/dashboard/templates/view.html and deleting the text in the HTML.