Note: You are currently viewing documentation for Moodle 1.9. Up-to-date documentation for the latest stable version is available here: Make your own theme.

Make your own theme

From MoodleDocs
Revision as of 09:34, 25 August 2008 by Howard Miller (talk | contribs) (New page: 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 ...)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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 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.