The Problem

Adding some style to your Moodle courses by using CSS is not as easy as you would think. Paste some markup in Atto or TinyMCE and you might find it strips out your code if you go back to edit it. We can get around this by using a Bootstrap 4 based Theme in Moodle that gives you some nice CSS classes to use. But what happens if you are not using a Bootstrap theme, you want to extend the functionality or like I found, the class is not included?

The following guide will show you how to add callouts to Moodle, a component used in the Bootstrap documentation but not included in Bootstrap 4. The same process can be used to add any custom CSS classes to use in a Moodle course.

What are we going to learn?

  • Add CSS to Moodle
  • Optional – Create a custom SCSS preset

What I am using

  • Moodle 3.4.1
  • Boost Theme

The short and easy way (good for testing CSS)

Navigate to site administration > Appearance > Themes > Boost > Advanced Settings

Paste the following code in raw SCSS box

Once you have hit save you will be able to add callouts anywhere in your Moodle site.

Using Theme Presets

Theme presets allow you to add additional (S)CSS to your Boost based Moodle theme. The following achieves the same thing as the “short and easy” way but is more preferred version for several reasons. We will be keeping changes in an SCSS file to extend functionality and override any defaults we would like to change.

Boost Variables Github – “Override the Bootstrap defaults without modifying key, versioned files” and extend your existing CSS classes (which is what we will be doing today)

We start by creating a “Theme preset”. Open your favourite text editor (I am using notepad++) and paste the following:

Under rules we want to add our custom CSS (this can be in CSS or SCSS format. To understand the difference I suggest taking a look at https://www.codecademy.com/learn/learn-sass. You will notice the code under rules is exactly the same as we used in the first exercise.

Save your file as custom.scss

Navigate to site administration > Appearance > Themes > Boost

Upload your SCSS file into the “Additional theme preset files section”. Once you click save you should be able to select your custom.scss file from the list and click save to apply the changes to your theme.

Uploading scss file