Let’s assume you have a collection of categories on your Moodle server and want each category to have it’s own colour scheme. This means, all category 1 courses have one colour for their main heading and all category 2 courses will have a different colour heading.

Option 1

To do this you could apply CSS to classes and elements in each category.

Each category in Moodle has an ID number and this is applied to each page when you view a course in each category.

What we can do is apply styles to sub classes or elements below each category.

To do this manually can be a very time consuming process. For example we could use the class.

.category-1 h1 { color:red;}
For courses that are listed under category 1, this will display all headings as red.

To add this CSS to a server, you could add this to the theme CSS settings.

As an administrator in Moodle, go to Site administration > Appearance > (Select the theme you are using) > (find the SCSS option to add your own SCSS)

Adding CSS would work, except that you would need to duplicate this for every category.

.category-1 h1 { color:red;}
.category-2 h1 { color:blue;}
.category-3 h1 { color:green;}
Option 2

There is a better way using SCSS.

Using SCSS we can set a variable and then create a loop to apply the CSS in a more compact manner.

$catprimary: #00B3BE,#FE5000,#753BBD;
$catsecondary: #005293,#f32054,#1283a2;
@for $i from 1 through 3 {
.category-#{$i} {
  h3 {
      color: nth($catsecondary, $i);
      margin-top:20px;
      margin-bottom: 20px;
    };
  }
 }
In the example above we set the variable $catprimary to have 3 different colour options then set the variable $catsecondary to have 3 different colours that we will use in the theme CSS.

Next we create a loop for the 3 categories that we have, in my case I loop from 1 to 3.

In line 4 we find the class for the first category ‘category-1’.

Because the styles cascade, we look for the category-1 class with the element H3 and apply a colour.

The colour is created by finding the nth item in the $catsecondary array.  In this case it will be the color #005293.

The SCSS will be generated based on the loop and will be applied to each category.

If you have more categories, then you will need to increase the number of items in the loop and add more colours to the $catprimary and $catsecondary array.


There are a few things to note:

  1. You may need to make some changes if a theme is updated or the core classes are changed in Moodle.
  2. You may need to clear the Moodle Cache to apply the changed SCSS.