Make your own theme

There are a number of ways of creating new themes for Moodle. This page describes a simple way of making a new theme based mostly on changing the colours, fonts and headings. Hopefully it gives you a start to do more adventurous things.

Getting started

I'm working on this page at the moment - it ain't finished :-) --Howard Miller 04:35, 25 August 2008 (CDT)

I need to make a few assumptions. There are many different ways to set up Moodle and I can't cover all of them. I am therefore assuming that you can handle the following...

• Copying files and directories in your Moodle installation.
• Editing a file in you Moodle installation.
• You have at least a basic understanding of HTML and CSS.
• If you need custom graphics you have a basic understanding of web graphics and can work graphics creation/editing software.

If there is a "trick" to this it is the ability to analyse the existing CSS for the Moodle page. There are a number of tools, but the best I have found is Firebug. This is an extension for the Firefox web browser, so you'll need that first. Basically, Firebug allows you to right click on any element on an HTML page, select "Inspect Element" and it will show you loads of information about that element including the CSS rules that affect it.

Some basic information you should know

The cornerstone of Moodle themes is the 'Standard' theme. Every other theme (should) simply describe the differences from the Standard theme. This makes theme development relatively simple as you only have to identify the elements of the Standard theme that you wish to change. Often there are very few.

First steps

The first thing to do is to make a new "empty" theme on you site. The easiest thing is to start with a theme that is very similar to the Standard theme and delete some stuff.

I will use the "Standard White" theme. Find the theme directory in the top level of your Moodle directory and find the standardwhite theme within. Copy the standardwhite directory and all its contents (important!) to a new directory still within the theme directory. You can call it whatever you like.

From now on we will be working entirely inside this new directory.

You can now (in the new directory - I won't say this again) delete two files - gradient.png and gradients.css. These are specific to this theme and we won't need them. You can now login to your Moodle site as Administrator and select your "new" theme from the list. If you can't see it, check your new folders permissions and ownership are the same as all the other theme directories. All being well, this will now be identical to the Standard theme.