How to add custom CSS styles to categories in Moodle themes

6 comments

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.

6 Comments

  1. patrick
    patrick on May 12, 2020 at 2:27 pm

    dear chris

    interesting article , i always excited of site talks about modifying and developing moodle
    i’ve been trying to modify css style in moodle course categories to become card style
    is it possible to do this using css ,
    can you help me with these

    regards.

    • Chris Richter
      Chris Richter on May 14, 2020 at 8:24 am

      Hi Patrick,
      I would need a bit more information on what you are trying to do. I think this may involve HTML and CSS which would need a different approach than just CSS.
      Thanks, Chris

  2. Godwin France
    Godwin France on June 19, 2020 at 8:09 pm

    Hello Chris,

    I will like to change the colour of the course category, and every course that falls under it should carry the same colour.

    • Chris Richter
      Chris Richter on June 22, 2020 at 3:51 pm

      Hi Godwin,
      Following the CSS guide in this post will allow you to do this.
      Which part of the course category HTML do you need to change?
      Thank,
      Chris

  3. Pawan K
    Pawan K on June 26, 2020 at 3:51 am

    Hello sir,
    I tried to use the concept for customisation of course page. The one with all the categories and subcategories. The structure I have made for courses is something like this

    Category 1
    -> Subcategory 1
    —-Course 1
    —-Course 2
    ->Subcategory 2
    —-Course 1
    —-Course 2

    Category 2
    ->Subcategory 1
    ->Subcategory 2

    These Subcategories contains the different courses. As per the inspect tool, The complete layout falls under class=content, then there is class=category then class=subcategory.
    The problem starts when Inspect this after expanding a subcategory, The Subcategory and its courses falls under again the classes with same name. On expanding the Subcategory1 it has another class=content in it containing the name of subcategory and details, and its courses falls under again another class=content.

    There is no mention Id and now I am unable to use custom css to the parts.

    I just want to give this page some different and user friendly look. It will be very helpful, if you can guide me here.

    • Chris Richter
      Chris Richter on June 29, 2020 at 8:26 am

      Hi Pawan, Thank you for the detailed information. I had only considered first level categories when I wrote this article as that is what I needed for a project I was working on. With sub categories, as you have shown, you only have the category ID of the sub category that you are using in the top level page classes. The only suggestion I can give is to use SCSS which allows you to nest CSS. For example.

      category-1, category-2, category-4, {
      banner {
      backgound-color:333;
      }
      }

      category-3, category-5, category-6, {
      banner {
      backgound-color:333;
      }
      }

      This is not the best solution, but it would give you the required result.
      Let me have a think if there is a more suitable solution.
      Thanks,
      Chris

Submit a Comment