Adding CSS To Modify Your Theme In Moodle™

Updated on 2021. Time flies! While some of the basics explained by Johnson are timeless, the processes do look a bit different. Here are some resources to keep you going

• Moodle Theme & CSS Hacks
• Theme Settings at docs.moodle.org (Explains how to access the CSS editing panel of your theme. Note: The availability and behavior of the CSS panel depends on the individual theme.
• CSS in Moodle ideas (see video above)
• Using Moodle 3.7? Did you know you can take advantage of the Bootstrap framework elements in your design? Find a list of all Bootstrap elements and how to invoke them in your course design.

CSS? What you need to know

Cascading Style Sheets are a powerful method to customize pretty much every visual element on your website. A simple syntax makes it easy for everyone to get started tweaking around:

selector {
    property: attribute;
}

Going forward is an inviting challenge for design, perfectionism, some math (including trigonometric functions—and you thought you’d never use them!); all in the name of an effective and pleasing user experience.

Now back to the Original, 2014 post:

Here’s a handy video by Andrew Johnson which highlights the process of editing your standard Moodle theme with CSS which will allow you to modify look and feel of your site through html. Check out the full ~3 minute video at https://www.youtube.com/watch?v=OL5g77ZkNas.