Add custom CSS styles to categories in Moodle themes

Suppose you have a collection of categories on your Moodle  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.

Solution 1

You apply CSS to classes and elements in each category.

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

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

.category-1 h1 { color:blue;}

For courses that are listed under category 1, this will display all headings as blue.

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;}

Solution 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.

$primary: #00B3BE,#FE5000,#753BBD; 
@for $i from 1 through 3 {
.category-#{$i} {
      h3 {
          color: nth($primary, $i);  };
      }
}

In the example above we set the variable $catprimary to have 3 different colour options  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.

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 array.

Note : You may need to clear the Moodle Cache to apply the changed SCSS.