Overwriting CSS

In Learn most of the CSS has been written using LESS. This provides a large number of benefits when creating and modifying themes. For setting up a development environment (including the compilation process) see Working With LESS in Themes

Adding a CSS file to your theme

Adding a minor change to a few small areas can done by placing a CSS file in theme/<your theme name>/styles directory and adding the name of the css stylesheet to the $THEME→sheets array within your themes config.php file (note: this will need to include RTL declarations if required). This will not require LESS compilation (but changes wont take effect until the cache is cleared unless the themedesignermode setting is enabled).

Modifying LESS

We want to make use of LESS variables, so the regular Moodle approach to CSS inheritance (include CSS from all themes starting from parent working down) won't work. Instead we:

• Disable Moodle CSS inheritance using $THEME->parents_exclude_sheets()
• Within less/totara.less, include totara.less from the parent theme - if major customisation is required, it may be beneficial to copy the totara.less file from the parent theme and remove import directives for some components
• Add any theme-specific LESS imports below that
• Finally override any variables set by the parent theme that you want to change (see next section on overriding)

It is worth reading about LESS lazy-loading of variables to make sure you understand how variable inheritance works as this is not obvious.

Overriding Bootstrap / LMS specific styles

Bootswatches provide a portable convention for theming and extending the Bootstrap framework. In Roots and Basis these overrides can be found in their corresponding less/bootswatch/variables.less and less/bootswatch/bootswatch.less files.

The Basis Bootswatch extends the Roots Bootswatch. Styles specific to LMS (e.g. using mixins to apply Bootstrap styles to core markup which cannot yet be converted to Bootstrap markup or LMS specific components) can be found under the less/totara directory.

When creating overrides in child themes of Roots (e.g. Basis) we adhere to this structure. This is an internally enforced best practice and while we recommend this approach it is not a requirement for working with LESS in the new themes.