A moodle 2 theme, Université

3 12 2010

I’ve been looking at Moodle 2 again, at my day job, trying to make little enhancements and seeing what’s possible for our own Moodle installation. Part of my experimentation included making a theme design that the University might be able to use when they roll over to Moodle 2.

As a spin off, I decided to split the design in to two copies; one that I’ll continue to work on for my employer, and one available for community download right now, at the current state of the theme.

I hope you like it. It’s called Université.

** News: Just about to release an update on this theme for Moodle 2.1, see the Moodle Themes page for more details **

The general aim of the theme, is to have a nice slightly corporate looking theme, which is fairly easy to completely change the colour scheme of, so that the administrator can more easily make it fit with their own institution’s corp id.

A screenshot of the new theme design

So, how do you go about changing the colour scheme to match your own institution?  You’ll need to do two things, start by designing a new theme with JQuery’s Theme Roller application (mentioned below); then, use matching colours and the Université’s own settings area to customise the colours of the banner, headings, and hyperlinks (the stuff that the Theme Roller css and images won’t do).

JQuery Theme Roller.

Now, this lovely online tool will let you design awesome looking user interfaces, it’ll give you a stack of images and css all ready to go.  The cool thing is, the Université theme for Moodle 2 uses the theme-roller CSS and image directory in a way that lets the administrator:

  • Roll out their own UI design and paste it over the Université theme jquery-ui.css file and jquery-ui images directory.

Now, yes, it sounds easy. Well, it is easy, but there needs to be an extra step because of the way Moodle 2 handles images in CSS.  Basically here’s what to do once you replace the CSS.  Open your new one, and do a find and replace:

  1. search for ‘images/’
  2. replace all with ‘[[pix:theme|jquery-ui/’
  3. search for ‘.png’
  4. replace all with ‘]]’

Then, almost the entire interface will change appearance. Nice hey. But eh, there’s a couple of areas that the theme roller didn’t apply to, so, that leads me to the second enhancement in the theme;

Keep in mind though, that the colours should be as dark/light as they are in the default theme I’ve created, simply change the hue if you want to roll out a new theme-roller to avoid any issues with illegible text etc (dark text on a dark block header for example).

The theme design in Theme-Roller

The Université theme’s settings page.

On the settings page built in to the Moodle theme, you can change the colours of:

  • The links
  • The link roll over colour
  • Link colour in the header
  • The two colours that actually make the gradient in the header
  • and the colour of the buttons in your dock (dock titles), which I couldn’t get the theme to handle automatically.

So, there you have it.

If you’re wondering how the Moodle theme uses the JQuery theme roller files, then read on..

Javascript.

Basically, the theme javascript file does all the work. Yeah, I dunno if it’s the best approach, well okay it’s not, but it certainly works well enough. The javascript (YUI3) find all the elements that are relevant – such as block headers, forum headers, the calendars and so on), and simply ADD the JQuery UI theme classes to those elements once the DOM has loaded.

This is what allows the JQuery Theme Roller css to be almost drag and drop with the Moodle theme.

A little more customisation?

You can actually give some Blocks a slightly more important look.. for example, say you wanted your course list block, and some other block to have a slightly different coloured header, to make them stand out. You can do this by editing the javascript file in the theme’s javascript directory.

To do this, just go in to the JS file, and you’ll see I’ve got about 4 lines commented out as an example, lines 38 to 42, commented with “important blocks”.  Just uncomment a line, and use the html class name of the block you want to make different in appearance.  It simply applies a different class to those elements, and hence makes them look different.

Oops, almost forgot.

As with before, thanks to the JQuery theme roller, aaaaaand Mark Jame’s awesome icons called Silk.

Thanks also to Reuben and Tobias for mega help with testing and finding bugs for me to fix with my last theme, I used all the same fixes so far on this theme too!

And, like my last theme, just update the logo with your own institution’s logo, by replacing the logo.png file in the pix directory. Note the size of that area though, there’s not much space there! (and did you like how it fades in?)

One other thing; I didn’t really spend any time on the main menu feature, so if you use a main menu with your site I’m sorry in advance, it looks pretty crappy in my theme.. I’ll get to fixing it up at some point : D

Wanna download it?

Suss out the Moodle Themes page of this site to get the download link and any latest news on this theme.

Feedback?

Sure, leave a comment, I probably won’t have time to make any fixes until next year, but your comments are most welcome!

Advertisements




créatif (ver 1) – a theme for Moodle 2

6 07 2010

PLEASE NOTE: I’ve just updated the download files again, Nov 30th. It should work with Moodle 2’s official stable release, which was downloadable from the 24th Nov from Moodle.org. There may be some further glitches that I haven’t seen, so please feel free to leave a comment if so.

I’ve just designed a theme for Moodle 2, and I’m entering it in to a theme comp ran by New School Learning. Pretty exciting really, the process of making the theme was really fun, except the bugs in IE of course, haha!

My theme, called créatif, is a mood theme I reckon. The randomised back drops will feature faded photographs (mostly beautiful landscapes), and I’m trying to get a really nice pleasant visual experience happening.

Technically the first draft is fairly okay – I would have liked to have made use of renderers to completely overhaul a lot of the un-needed html and css classes that moodle is bogged down by, but time permitted me from doing it for this version of the theme.

I think the big thing to improve next version (ver 2) of this theme, along with renderers and more effective css will be:

  1. to allow teachers to add their own imagery for the backgrounds for ‘their courses’ – pictures that are course specific for them for example. It would use these instead of the pre-packaged ones I’ve got in the pix directory;
  2. I’d also like to make it work 100% drag-and-drop with jQuery’s theme roller.. So in other words, you simply design your jQuery theme roller and drop it in to the moodle theme directory – and the moodle ui takes on the jQuery css and pix. Why? Well let’s be honest, YUI looks like horrible in comparison and jQuery’s theme roller idea leaves YUI skinning for dead;
  3. have a rather nice handy settings page which allows the admin to change the logo and/or background images, and theme roller css via the GUI rather than putting the files in manually etc;
  4. I might also make it a stand-alone theme rather than use other themes as parents, I only did this to satisfy the requirements of the comp.

Without further adieu, je vouz present – créatif; screenies and a theme download. IF YOU DO DOWNLOAD and install this theme, please read the comments in the config.php – I’ve described a few things that will help you update the institution logo and background images.

This slideshow requires JavaScript.

The download: visit the Moodle Themes page on this blog ; )