Developers Guide: Theme

Chuck Lorenz edited this page Aug 29, 2015 · 7 revisions
Clone this wiki locally

Overview

In this guide we'll be looking at a type of plug-in for Adapt called theme. Themes change the look and feel of your Adapt course. They contain Less, templates, Javascript, fonts and assets.

The structure of an Adapt-compatible theme is as follows:

Folder Purpose
assets Holds any static assets (for example: images, etc.)
fonts Any fonts which might be referenced in the associated .less files
js JavaScript/JQuery files on which the theme depends go here
less Location for any Less based CSS files
templates Location for any snippets of pre-defined HTML templates (see below)

Adapt themes support customisation for the rendering of various Adapt elements via the following Handlebars templates. Note that the template names are coordinated with the appropriate javascript file name:

  • article.hbs
  • block.hbs
  • loading.hbs
  • navigation.hbs
  • page.hbs

Until this guide can be completed, please take a look at the technique explained in Modifying the Vanilla Theme.

TO DO: Add explanation of how to use "_classes" by adding a CSS class to theme-extras.less or other Less file.