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.

Basically what it boils down to is:

  1. 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.
  2. 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.
  3. 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!

    Advertisements

    About M Laidlaw

    I work for Waitemata District Health Board as an instructional designer. I enjoy photography, drawing, painting, writing, reading, ice skating, skiing, snowboarding, wind surfing, fire poi and many other things.

    Posted on June 11, 2012, in Uncategorized and tagged , . Bookmark the permalink. Leave a comment.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out /  Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out /  Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out /  Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out /  Change )

    Connecting to %s

    %d bloggers like this: