Tuesday, September 16, 2008

A free flexible Moodle theme

Photo from arbeer.de Running a host of VLEs is fun - sometimes. One of the most difficult things to do is ensure that things are centralised (to some degree) so that changes we implement at the centre happen with little or no fuss on the Moodles which are across the County. This creates a natural tension with schools who want to do their own thing within the framework in which we're all working.
The way a VLE looks is an example of this - Moodle comes with a standard set of themes which can be modified, but only to a limited extent. There's the fact that most people who are Moodle admins within the County never want to know what the letters 'FTP' or 'CSS' stand for - but there will always be some who do. Catering for everyone is difficult, and so this post describes what I've been doing over the summer to attempt to cater for the bulk of our schools...
We co-develop our Moodle service with the folk at Atomwide and the team in West Sussex - effectively this means that we have over 400 schools using Moodle and can share developments / ideas / problems and solutions together. Previously we had used (and I had blogged about) the Chameleon theme - an "editable in the browser" theme which, while working OK, put a lot of load on the servers due to the way it worked. Schools seemed to use it simply because, in its default incarnation, It Was Green, and no-one actually did much customisation with it. With the performance issues, it was decided to retire it.
Last year, during an upgrade for all of our schools, Mark from the West Sussex team shared a theme which had been developed by Dan Smith from St Paul's Catholic College in West Sussex. This was a theme which allowed a Moodle admin to upload a number of replacement images to an area within the Site Files section of the site to customise the theme, and also edit a CSS file in that area to update the sitewide styles.
Over the summer I've taken the theme and developed it a little. The previous theme would only take JPEG files, this one will now accept PNG, GIF or JPEG files and can display a mixture. The theme takes into account whether or not the slasharguments variable is switched on in your Moodle, which the previous one didn't. Moodle admins can also now upload a favicon.ico file into the appropriate folder within Site Files to replace the standard one, and the CSS file now has some (fairly) extensive documentation inside it. I've written a manual in PDF format and authored a range of instructional videos on how to customise it.
You can download the PDF of the manual here. I'm not currently sure if I'm going to open up the instructional videos to everyone, since they could significantly affect the performance of our Adobe Connect server, so I'll have a think about that. I might put them somewhere else, and will update this post to reflect that. Anyway... The videos are now detailed further down this post...

How to use the theme

You will need:

  • FTP access (yes, I know this is an "easy to use" theme but it's not intended to be maintained via FTP, just initially uploaded that way) to place the theme in the standard Moodle themes folder;
  • Moodle Administrator rights - to copy the editable themes folder into the Site Files area.

There are two elements:

  1. A folder which needs to be copied (via FTP or some other method) into your themes folder in Moodle (next to the place where the standard theme lives). It's called Schools by default and should (bizarrely, due to the capital letter) appear first in the list of themes. Download it here. (.zip file containing a folder called Schools)
  2. A folder which needs to be created in your Site Files area. The folder must be called theme. Download it here. (.zip file containing a folder called theme)

Once you've done both of these, the theme should appear in the standard Moodle theme selector. This has been tested with Moodle 1.8, I plan on testing it with our 1.9 development server as soon as is practicable, and possibly releasing any necessary update when we go live with our 1.9 build.

The theme is intended for someone in my situation (who is looking after a number of school Moodles and has schools who want to customise their own, but doesn't want to burden the schools with issues of FTP and similar complexities). If you are obsessed about micro-managing your Moodle theme then you are probably better off creating your own theme.

The important point with this theme is not the way it looks. It comes with a number of standard images, which you really shouldn't use. They are just there to illustrate the difference between PNG, GIF and JPEG files, which is also explained in the manual. The important thing is that once installed, it's easy to change, with no need to FTP. The alterations.css file in the Site Files area allows those who are comfortable with CSS, or even those who aren't, to go to town on the styling using Cascading Style Sheets.

If you're in a Buckinghamshire or West Sussex school and want to use it in your Moodle, this will shortly be available for you to use, so you don't need to download it.

The license

It's released under Creative Commons Noncommercial Share-Alike License. Basically, you can't sell it, but you can adapt it. If you do adapt it or pass it on, then the same license applies to that and all derivative works.


If you have any questions about its use, please post them as comments on this post, but please use your common sense and read the manual first! I'm not technical support for this, but it should work unless you break it!


If you use this and make a success of it, then please include a link as a comment so I can get an idea if it works.

Update - video tutorials

OK, I've published the video tutorials to support this in a publicly accessible place where I don't have to worry about the bandwidth! They were all done in Adobe Captivate and are hosted on the Adobe Connect server - hence you'll need Flash to view them, but you have that, don't you?

First of all, yet another link to the manual:

Then the videos:

and finally a video for People Like Me - you're looking after more than a few Moodles for organisations (like, for example, a bunch of schools) and you want to know where the files go:

I can't vouch that these tutorials will always be up to date - I maintain an identical set on our BucksGfL Connect server, and will always update those ones first, since That's What I'm Paid For. However, it's easy to publish the Captivate movies to many places, so I'll try and keep them in sync.


  1. Just to say - the theme is really simple to use (IF you read the manual :) ) and has a lot of potential. I shall suggest to our broadband/Moodle suppliers CLEO that they might want to offer it in their next upgrade too.

  2. I've experiemented with your theme. It works fine in IE6 but in Firefox all of the headings dispaly in a font size that's too large and it upsets the formatting. It's a real shame because it's a nice theme. Using the theme on 1.9

  3. Hi Alasdair...

    Thanks for your comment. I've looked at it in Firefox as best as I can and it seems to be OK - I'm looking at it on our test site now, but haven't used it on 1.9 yet. As mentioned in the posting, it is only tested on 1.8, I will be checking it for 1.9 when we upgrade later in the school year. At the time I may include some Flash if possible, but that's not a promise...!


  4. I have made a few changes to the CSS and although I didn't make any changes to the size/position of the headings, the issue seemed to resolve itself. The theme now works as well in Firefox as in IE.

  5. This is such a cool idea to make ust of site files to customise a theme :)

    I am working on a theme and will include this and a credit to your great idea!

    Many Thanks,