Updating the University shield

Move and replace dialog box

Updating the University shield in my SVN working copy.

Here’s a minor update that I made to the University website this afternoon: I updated the University shield across most of the central website.

As you can see from the screenshot above, the problem with the old one was that, while it looked fine on a blue background, when it was embedded on a white background (for example, if someone linked to a University page from within Facebook, or was printed) then it looked awful!

So I created a new one, at the same dimensions (42 x 52 pixels) and for the first time it now adheres to the new corporate identity guidelines…

Dimensions for University shield on a webpage

Dimensions for University shield on a webpage

It the little things that make me happy!

Update

A couple of people have asked me on Windows Live Messenger and on Twitter why it was like that in the first place.

Well, it was to do with a slight colour mismatch between the graphic files we got from the designers (who were using CMYK values) and the web team (who were using RGB values). So we made the shield’s inner blue colour transparent so that it could pick up the RGB colour in the header behind it.

It seemed like a good idea at the time.

I’ve been meaning to change it for some time, since receiving the new batch of updated University crests months ago (in which those who pay attention will notice that the lion has lost his genitals). And with today being Fix-it Friday… I fixed it.

The next time we do a major refresh of the University website’s design I expect we’ll use a PNG and some tasty alpha transparency for that even smoother finish.

Temporary website for EuCOMC XX – the 20th EuCheMS Conference on Organometallic Chemistry

euchems-conference

A couple of weeks ago we had a visit from someone from our Conference and Group Services (CGS) unit asking for a small website to be created quickly. It was for the intriguingly-entitled EuCOMC XX, or the 20th EuCheMS Conference on Organometallic Chemistry, being held next year in St Andrews.

All they needed was a single page which pulled together the information contained in their PDF brochure. It was to be a temporary website, a stop-gap until CGS take delivery of a Web application that will provide them with a simplified, point-and-click Web-building module on top of a large conference management system.

A simple enough task, except that with two members of the team on sick leave just now we simply didn’t have the capacity to do it within office hours.

“It’s pretty simple, I could code this up in an evening,” I heard myself say to Jason, my contact from CGS.

And then I heard another voice, this one inside my head, saying, “Did I just volunteer to code this up in my spare time?”

Jason was a star. He provided me with the component parts and a mocked-up sketch of how the site might look. He did all the hard work. I just needed to translate it into HTML and CSS.

My wife was out on Friday evening.; my three children were remarkably quiet and slept for the whole night, and so I proved myself right. It could be coded up in an evening.

All in all it took me about five hours from start to finish, including moving the style and content into TerminalFour Site Manager. A satisfying little project.

Visit the EuCOMC XX website.

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)