Developers Guide: Theme

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


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.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.