If you’re using a Boost-based Moodle theme and are wondering what is the best way to customise your theme this post is for you. Although lots of Moodle themes allow you to change the theme colour scheme via the theme settings page, there are times you’d like to fine tune the theme design to meet your organisation or client’s specific design requirements. Some of you who’re code-savvy may dive into the theme SCSS files and make changes directly to the original theme files. However, that is NOT recommended. Why? You may ask. That’s because you’ll lose all your customizations should you decide to update your Moodle theme in the future. Unless you’re 100% sure you won’t be updating your Moodle theme in the future or you don’t mind applying your customizations all over again to the new theme version, it’s best to leave all the original theme files untouched.

The best practice is to override your Moodle theme’s default styling via the theme settings page. This is because the customisation will be saved to the Moodle database, and won’t be overwritten when you update the theme files. For all Boost-based themes, you can enter your custom CSS/SCSS code into an input field called “Raw SCSS”. If you’re using one of our premium Moodle themes you can find the input field under the “Advanced Settings” section.

Edutor Theme

Maker Theme

For example, say you want to change your theme’s base font size and link colour, you can use the CSS code as shown in the figure below. However, the code in the example can only change your theme’s body font size to 18px and the base link colour to red. You’ll probably need to write more targeted CSS code to change some specific elements’ font size or link colour. You can use Chrome DevTools to help you find the right element selector.