IT training resources & rants

View My GitHub Profile

Custom Moodle CSS

Customising CSS styles in Moodle 3.3’s default Boost theme is a relatively simple and painless process provided that you have some knowledge of CSS in the first place of course.

Something to be aware of before starting is that Moodle caches much of its content, CSS included, for performance reasons. So to work on theme design it is necessary to temporarily disable caching by enabling designer mode. This can either be done in the Site Administration console:

Site Administration->Appearance->Themes->Theme designer mode

or in the Moodle configuration file config.php, where you should uncomment this line:

$CFG->themedesignermode = true;

Don’t forget to enable caching again as soon as you are finished. Caches can be purged at any time in the Site Administration console:

Site Administration->Development->Purge all caches

The Boost theme uses Theme preset files to customise CSS. These combine Bootstrap 4 SCSS files with Moodle SCSS files and adds a layer of customisation on top. Two default Theme preset files should already be installed in Moodle 3.3, default.scss and plain.scss.

To customise the Boost theme, create a new preset file with the following three sections. Creating or overriding variables is optional:

// example.scss
// An example preset file.

/****** Variables section ******/
// Create new variables or override the default values 
// for Bootstrap and Moodle variables in SCSS files.

$card-bg: green;

/****** Import section ******/
// This is always required.
@import "moodle";

/****** Rules section ******/
// New rules or customisations go here.
body {
  background-color: $card-bg;

Upload the new file to the Boost theme via the Site Administration console here:

Site Administration->Appearance->Themes->Boost->Additional theme presets files

Once uploaded, select the new Theme preset file, save your changes, and purge the caches.

Job done!

For more information see https://docs.moodle.org/dev/Boost_Presets.