Friday, 16 March 2012

Customising my Moodle theme

Since the very beginning of my position as eLearning CoOrdinator, one of my goals has been to customise the appearance of our Moodle site, to bring it in line with our external websites and make it feel a bit more like a website and less like a filesystem.

We use the formfactor theme and it's already astonishingly close to our website layout - considering the alternative core themes. But we upgraded to Moodle 2.2 at the end of February and I knew my time had come. I don't know if this is the officially recommended way to go about things, but I was reasonably confident I wouldn't destroy the world so I took the following steps.

Step 1: make all changes on the development server only! This is a duplicate of our live server taken shortly after the upgrade. In terms of course materials it's out of date, but in development terms, it's exactly the same.

Step 2: figure out how much of the alterations/ customisations can be made from the site administration panel. Not a whole lot, as it turns out, but one or two things that I would have spent a while beating my head against if I was trying to do it through the css; mostly block related. Surprisingly, there isn't an easy way to turn off a block column through the Site Admin panel. Thanks to Mary Evans I know the changes would be easy enough to automate but I suspect, from a comment she made, that Moodle won't incorporate the option because it causes problems with other aspects of the site (notably Grading).

Step 3: locate the theme files on the server, identify the css, start making changes and refresh the website endlessly to make sure it's doing what you think it should. Yeah. That's the bit that should probably be formalised. In reality, the Moodle 2 theme setup is really impressive. They've seperated out the core CSS into a file called "core.css" (in a folder called "style") making it easy to locate and make alterations. I uploaded the picture I wanted in the header (pictures are stored in "pix") and redirected the path in a few quick strokes. Similarly, altering the gradient pictures used took seconds. These areas are really sensibly named in the css (page-header, page-navigation, breadcrumb), so it's easy to identify what the alterations you are making should affect, as long as you're comfortable recognising the html names used (li, a:hover, etc).

Sadly, the same cannot be said for the "custommenu". It took me ages to identify the difference between menu-content and menu-item-content. I'm still not sure I've got it. However, the menu is in working order despite not looking exactly the way I want it to, so I'm happy enough.

I resorted to moodle.org and the inestimable Mary Evans for advice on removing the left hand block column and I am now literally at the last stage - the part where I turn the topic box on the home page and the Summary box on the category pages into a resplendent piece of artwork stuffed with buttons. However, even if that doesn't happen I'm rather chuffed with what I've acheived and I don't think this is beyond anyone who has the interest and commitment to give it a real go.

I am deeply impressed with the Moodle team right now - there aren't many organisations who will go out of their way to make it this easy to change the appearance of their product.