| « The Networked Learner and Trainer | The free tool selection grid » |
Moodle is well known for a slight lack of design flair in the out-of-the-box theme packs. That's fine. They still work.
Often, though, we'll need to redesign the overall look and feel of a Moodle site. Perhaps you need to make it match an existing website, or you just need something that's more in keeping with your particular organisation.
Things to note before you start
Firstly, you don't need to start from scratch. In fact, I would recommend strongly that you don't! Moodle is a very complex application, with many different parts of the interface that need styling. So, I always start with an existing theme and build on that.
Secondly, remember that each upgrade to Moodle may add new interface elements. If you're not careful these will break your theme. Follow the guidelines below and you should be OK.
Thirdly, Moodle themes cascade. This means that you can build your theme pack so that Moodle starts by reading the standard theme, which will always be kept up-to-date with regard to new interface elements. Once the standard theme is read in, then you can add in your customised theme on top.
Step-by-step guidelines to creating a new theme
- Get yourself a locally hosted version of Moodle. You'll find it a lot quicker to build your theme here. It's very easy to install Moodle on both Windows, MacOSX and Linux. Instructions are here.
- Create a new folder in the /themes directory. Remember not to have spaces or non-alphanumeric characters in the folder name.
- Copy all the files from /themes/standardwhite into your new theme folder. You will see that standardwhite is a custom theme built on top of the main standard theme.
- Use Firefox as your browser, with the web-developer toolbar and ColorZilla colour picker add-ins. Without these, or something similar, your job becomes ten times harder.
- Understand how to use the config.php file within the theme pack. Especially how it is used to pull in css files from the standard theme, and also from another theme which you would like to act as a parent. If you understand this, it makes building slightly-tweaked themes for specific courses or course categories a whole lot easier.
- Create one css file in your theme folder, called overrides.css. Use this to contain any css commands that are specific to your theme.
- Add overrides to the line in config.php that starts $THEME->sheets = ... so it reads $THEME->sheets = array('overrides');
NB. I normally remove the gradients.css file from the files I copied in from the standardwhite theme. It usually becomes redundant when I created the new theme. Use the header.html and footer.html files to add in any extra styled divs that you might want to use to wrap the page or to add in horizontal menu bars. You can see both in the image below:
Remember that, if you open a div in the header, you will need to close it in the footer.
- Also in header.html add in any logos or other images. Again, you might want to add extra styled divs here, remembering to add those styles to the overrides.css file.
- As with all css, start with the big things you want to change: link colours, page backgrounds, overall font styles etc. Then, using the web-developer toolbar, find the specific page elements that need changing, eg. #left-column, #right-column and .sideblock and tweak those.
- One thing I always do, in my overrides.css file, is add the lines:
/* needed to remove left & right bars */
#course-view .section .right a, #course-view .right {
display:none;
}
#course-view .section td.left {
display: none;
}
/* But display for editing */
.editing#course-view .section .right a, .editing#course-view .right {
display:inline;
}
.editing#course-view .section td.left {
display:inline;
}
These tidy up the course view for students, by hiding extraneous information such as topic numbers, and confusing functionality such as the hide topics button.
More information
For more detailed reference material on themes development please see the following sites:
Moodle Docs: Make your own theme
Moodle Docs: Creating a custom theme
Moodle Docs: Theme basics
To see what's possible with Moodle themes, see the Moodle themes database
Update
For a visual guide to Moodle theming see Julian Ridden's post which takes you through the whole process of creating a theme to match a client's website.
12 comments
This post has 2 feedbacks awaiting moderation...
Comment feed for this post
I've been playing around with Moodle for a few months, but only rather half heartedly, as the documentation that's available hasn't always proved all that great. In particular I've wanted to change the front end of mine and this is exactly what I needed.
Out of curiosity, since I intend to start one this net year, where did you do your MSc and has it been useful? Would you recommend your course?
Dan
Thanks for the comment. I've been doing my Masters (an MEd - but I should really have done an MSc) with Hull University. It's entirely online - which has been a very interesting experience.
Since I started, over six years ago, there have been lots of other courses start up. The one in Edinburgh looks particularly interesting: http://www.education.ed.ac.uk/e-learning/
Cheers,
Mark
I had thought long and hard about the Hull course, but actually the Edinburgh one does look good and that's the one I am currently applying for (my application arrived a bit too late for this last year's intake).
Does the online element add to the experience, given the subject matter, or not? I believe that the Edinburgh course is the same.
Dan
I would say that the online experience is essential (the medium is the message after all). But, ideally, you need some face-to-face time. Especially if there's group work involved.
The assessed group-work was the hardest thing to sort out online. It would have made such a difference if we could have been in the same room, or use video-conferencing of some sort. But the differences in our connectivity made the latter impossible. And we were spread out across many countries.
Your online experience will depend very much on the quality and experience of the tutors. Some at Hull are experts at facilitating online and really make the environment work for them. Others less so.
Cheers,
Mark
I totally agree with you about removing potentially useful functionality. However, the vast majority (if not all) Moodle implementations I have worked on have not needed any concept of "current sections".
That's because I'm not, at the moment, working in a context where we need to run cohorts of students through an online course with an online facilitator/teacher.
If you were in that section then the left/right hand bars might be more useful. In my context, though, they just clutter up the screen.
I thought the point should be made that those bars, while I agree do add one more element to the page, do have some functionality, and that your readers shouldn't automatically get rid of them.
thank you for such a helpful document .
Converting a Wordpress theme to a Moodle theme involves quite a bit more than just tweaking the CSS. Dependant on how the WP theme is built, you may need to add one or two extra
That's not to say it's impossible - just quite a lot of work.
Mark