Starter Guide to Customising Moodle Themes

At the iMoot this year I did two sessions on how to customise Moodle themes if you don’t have a lot of experience already with PHP and CSS.

This PDF is my presentation, but of course there’s a huge section where I did some demonstration.

themes2.pdf

Basically what it boils down to is:

Get yourself a theme that has a custom settings page with a custom CSS box. There are quite a few standard Moodle themes that already have this, so you don’t even need to download and install one.
Get yourself Firebug for whichever browser you prefer to use. For theme design, I prefer using Firebug in Firefox, but the browser extension is available for several different browsers.
Watch this quick YouTube video on how to use the Firebug extension specifically with Moodle and a custom CSS box.

Away you go!

Just remember a couple of things:

Never, ever make back-end code changes directly to a core Moodle theme. Reasons why are in the PDF presentation.
Your changes in Firebug are temporary and will be lost if you refresh the page. To keep any changes, they must be put into the custom CSS box of your theme.
If you do want to make back-end code changes to a theme, DUPLICATE it first.

If you want to learn more about Moodle theme design, try our MoodleBites for Theme Designers course!

Source: Miriam’s MoodleLair feed