-
Notifications
You must be signed in to change notification settings - Fork 0
Styling your course
Adapt supports user-defined themes, a special kind of plugin that lets you style your course in a variety of ways. Themes are written in LESS, all CSS syntax is supported plus variables and nested rules. The HTML templates are created using handlebars.
A basic theme, adapt-contrib-vanilla is included in the framework.
Simple customisation is possible by changing the built-in variable in less/variables.less
#####Theme variables
######Main colours
- @primary-color
- @secordary-color
- @tertiary-color
- @foreground-color
- @background-color
- @inverted-foreground-color
- @inverted-background-color
- @transparency
###How to modify the vanilla theme
Locate the vanilla theme from the following directory:
src/theme/adapt-contrib-vanilla here you will find all of the elements which make up an Adapt theme.
The /less/ folder contains all of the style elements and it is here where we can quite quickly change the look of your course.
Open the file variables.less
Modify the @primary-color & @secondary-color values to:
@primary-color:#BE3550;
@secondary-color:#74104B;
Save your file, rebuild the course and preview in your browser. You should see that your course is now displaying in a red tone. Continue to modify the remaining variables in the .less file for further customisation.
Next - Developing plugins