Developing a new theme for Moodle 2.0

At the start of the current academic session (2010-2011) the University introduced Moodle as its preferred learning management system (LMS), also called a ‘virtual learning environment’ (VLE) and began the move away from WebCT (which is now owned by former rival Blackboard).

Moodle (which I discovered is an acronym for Modular Object-Oriented Dynamic Learning Environment) is an open-source application which of course means that it’s free… up to a point: you still need to install it, configure it and create a new visual theme for it should you require. And that’s exactly what I’ve been doing this week.

screenshot

A dream to work with

Over the last few years I’ve worked on the redesign of quite a few third-party Web applications. Some have been easier than others. One quite literally drove me to tears with frustration. Moodle 2.0, though, has been an absolute dream to work with.

Moodle 2.0 is written in PHP which I have quite a bit of experience with, so that greatly helped. Having the right mental model of how something works really helps when you’re only working with one aspect of an application.

It also helped that we have a very helpful and responsive Moodle development team located within the School of Computer Science who have been great to work alongside.

Great documentation

The way that Moodle have organised how their themes work is logical and pretty clean, and the documentation on developing Moodle 2.0 themes is really good.

And I mean really good: it’s usable. I spent an hour or so carefully reading through the documentation and then got stuck in.

I did what many advise and started with an existing core theme and adapted it for our use, which took me about half a day. The rest of my time was spent working on icons.

Icons

I didn’t really like the default icons in Moodle, they looked quite pre-Windows 3.1. So I decided that I’d try to replace them using the excellent Silk icons set by FamFamFam.

Well, lo and behold if Moodle doesn’t also have an excellent document on how to use images within your theme as well as an example silk icons theme! Someone has already done the work for me!

I discovered that the example theme doesn’t contain all the icons we’re using and it didn’t customize the smilies so I complimented Silk with two other 16 x 16 pixels sets:

All-in-all that gave me over 4,500 icons from which to choose.

Moodle logic for icons, example 1

Something that really helped me was understanding the logic that Moodle uses to determine which icon to use. I was helped by this thread on the Moodle forum.

I discovered pretty early on that if your theme doesn’t provide a particular icon then Moodle will just use its own default icon. You include your own icons within three sub-directories within your theme folder:

  • /pix
  • /pix_core
  • /pix_plugins

Using Firebug or Chrome’s Web developer tools look at the URL of the icon you want to replace.  You’ll see that it looks something like this:

http://example.com/moodle/theme/image.php?theme=newtheme&image=icon&component=qtype_multianswer

The important bits are in bold which are, in order of appearance:

  • newtheme is the name of your theme.
  • icon is the filename of the icon file without the filetype suffix, e.g. icon.gif, icon.jpg or icon.png.
  • qtype is the name of the sub-directory. In this case (I think!) because it’s a ‘&component=’ it is a sub-directory within the pix_plugins directory.
  • multianswer is the name of the sub-directory within the above sub-directory!

In other words, that URL is for an image within this directory:

/theme/newtheme/pix_plugins/qtype/multianswer/icon.png

Moodle logic for icons, example 2

Similarly, the following code

<img alt=”” class=”smallicon navicon” title=”” src=”http://turret-new.cs.st-andrews.ac.uk/moodle-2/theme/image.php?theme=newtheme&amp;image=i%2Fsettings&amp;rev=235″&gt;

will look for a replacement icon in this directory:

/theme/newtheme/pix_core/i/settings.png

You can glean that from ‘i%2Fsettings’, as ‘%2F’ is the URL encoding (also called percent-encoding) for a forward-slash (‘/’), and the word that appears beyond that is the filename of the icon, in this case ‘settings’. As far as I can tell you can use any format you like from GIF, JPG and PNG.

Clearing the cache

The way that our installation is set up, every time I made an HTML or CSS change I had to clear the theme cache which was as simple as logging into Moodle 2.0 and navigating to Administration > Appearance > Themes > Theme selector then clicking on the button at the top of the page: “Clear theme cache”.

Later on in the development I discovered that Moodle was also caching the information about the themes, such as the theme name and any information that appears once you’ve activated a particular theme. I needed to get the Moodle administrator to clear that for me.

Conclusion

This has been a surprisingly fun project to work on. Surprising only because of my experience with other less-well designed systems. I wish all Web applications were this fun and this easy to edit.

Download

A number of people have emailed me asking for the theme and icon set that I developed/extended. Feel free to download the file below, on the understanding that I can offer no technical support on it.

This theme is released under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

About

University of St Andrews is a fluid-width, three-column theme for Moodle 2.0 that was adapted by the University of St Andrews web team, based on a theme called Leatherbound created by Patrick Malley.

Tweaks

This theme is built upon both Base and Canvas, two parent themes included in the Moodle core. If you want to modify this theme, we recommend that you first duplicate it then rename it before making your changes. This will prevent your customized theme from being overwritten by future Moodle upgrades, and you\’ll still have the original files if you make a mess. More information on modifying themes can be found in the MoodleDocs.

Icons

License

This, and all other themes included in the Moodle core, are licensed under the GNU General Public License.

The following zip file is hosted at Let’s Crate.

Download moodle-2.zip (190 KB)

About these ads

8 thoughts on “Developing a new theme for Moodle 2.0

  1. Thanks Tim, I should have said that in the post. As I understand it the Theme designer mode has a side-effect of slowing down the system and as others are working on other parts of the installation at the same time we agreed that I would just manually clear the cache.

  2. Hi Gareth,
    is there any possibility of having the completed iconset you used? :-) I am also facing a moodle “redesign” situation and it would greatly help me!

  3. I’ve emailed a zip file with the theme to the email address you used to comment with. Hope that’s ok and that you find it useful.

    … It’s just been returned to me. Can you email me at webteam AT st-andrews.ac.uk to request the Moodle theme zip file?

  4. Pingback: First steps towards a new theme… « gshaw0

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s