Brand new Moodle theme released! Based on Boost and packed with exciting new features.
View Demo

Moodle Theme Maker – Advanced Theme Colour Customisations

Maker is our most popular Boost-based Moodle theme. It comes with 6 built-in colour schemes and options to change the primary and secondary colours to suit your organisation’s branding. For advanced colour customisations you can also write your own custom SCSS/CSS code to fine tune the theme appearance.

In this post we’d like to share some useful SCSS/CSS code snippets you can use to tweak your theme’s colour schemes further. The colours used in the code snippets are there as placeholders. You can change them to your desired colour hex code to make them consistent with your design.

Site Top Bar

Default Styling

moodle-theme-maker-topbar-origin

Custom CSS/SCSS to override the default styling:


/* Top Bar Background Color */
.page-header .top-bar { background: purple; } 

What you get after applying the custom code:

moodle-maker-theme-topbar-change-color

Benefits Section

Default Styling

moodle-theme-maker-benefits-section

Custom CSS/SCSS to override the default styling:


/* Benefits Section */
.benefits-section .icon-holder { color: purple; } /* material icon color */
.benefits-section .item-title { color: purple; } /* title text color */
.benefits-section .item-desc { color: purple; } /* content text color */
.benefits-section .item-desc a { color: white; } /* content text link color */
.benefits-section .item-desc a { text-decoration: underline; } /* content text underline */

What you get after applying the custom code:

moodle-maker-theme-benefits-section-change-color

Promo Section

Default Styling

moodle-theme-maker-promo-section-origin

Custom CSS/SCSS to override the default styling:


/* Promo Section Background Color  */
.promo-section .item-content { background: purple; }

What you get after applying the custom code:

moodle-theme-maker-promo-section-color-change

Call To Action Section

Default Styling

moodle-theme-maker-cta-section-origin

Custom CSS/SCSS to override the default styling:


/* Call To Action Section */
.cta-section .cta-title { color: purple; } /* section title color */
.cta-section .cta-content { color: purple; } /* content text color */
.cta-section .cta-content a { color: white; } /* content text link color */
.cta-section .cta-content a { text-decoration: underline; } /* content text link underline */

What you get after applying the custom code:

moodle-maker-theme-cta-section-color-change

Footer Section

Default Styling

moodle-theme-maker-footer-origin

Custom CSS/SCSS to override the default styling:

/* Footer Section */
#page-footer { background: purple; } /* footer background color */
#page-footer .footer-bottom-bar {background: black} /* bottom copyright bar */

What you get after applying the custom code:

moodle-theme-maker-footer-change-color

Code Snippets

Below are all the code snippets from the examples above:

/* Topbar */
.page-header .top-bar { background: purple; } 

/* Benefits Section */
.benefits-section .icon-holder { color: purple; }
.benefits-section .item-title { color: purple; }
.benefits-section .item-desc { color: purple; }
.benefits-section .item-desc a { color: white; }
.benefits-section .item-desc a { text-decoration: underline; }

/* Promo Section  */
.promo-section .item-content { background: purple; } 

/* Call To Action Section */
.cta-section .cta-title { color: purple; } 
.cta-section .cta-content { color: purple; } 
.cta-section .cta-content a { color: white; } 
.cta-section .cta-content a { text-decoration: underline; } 

/* Footer Section */
#page-footer { background: purple; } 
#page-footer .footer-bottom-bar { background: black; }

Want to master Moodle?

Moodle 3.0x Masterclass: Complete Educator's Guide to Moodle

Moodle Tutorial for Educators - Learn Moodle to create WORLD CLASS online courses. Leverage Moodle 3 like a BOSS!

1500+ students enrolled

Are you a Moodle admin?

Moodle Administration Tutorial: Beginner, Intermediate Guide

Learn World Class Moodle LMS Admin, Configure, Theme, Manage Courses, Users, Permissions, Roles, Security, Plugins...

2000+ students enrolled