1.5 theme upgrade

From Moodle version 1.5 and higher CSS support is extended throughout Moodle to remove hardcoded styles e.g. fonts or colours, from the HTML code. As a result, Moodle themes are a lot more flexible and accessible, but this also means that custom themes written for Moodle version 1.4.x and earlier may no longer work well.

The best approach when upgrading is to reconstruct your theme again from scratch, borrowing graphics and styles from your old theme as necessary. This approach will result in a more robust theme that will survive future upgrades of Moodle.

The instructions below therefore apply whether you are upgrading or not.

Upgrade or install Moodle 1.5 or higher

Install Moodle as normal. If you are upgrading, your old theme directory will remain, but the installation process will set the theme to the new default standardwhite.

Create a new theme directory

Themes are all stored in the theme directory of Moodle.

To create a new theme directory, make a copy of the standardwhite directory (or any other theme) and name it appropriately.

Inside this new directory you will see the following files.

config.php - edit this to change parameters for your theme

favicon.ico - the site icon that shows in the browser location bar or bookmarks

header.html - a fragment of HTML that defines the top of your pages

footer.html - a fragment of HTML that defines the bottom of your pages

gradients.css - an actual stylesheet containing styles to add to your theme

gradient.jpg - an image file, you can add as many as you want

styles.php - the actual script that Moodle calls, there is no need to change this

Create a new CSS file

Your theme can have as many CSS files as you like. Create a new one, e.g. mystyles.css, and include it in your theme by editing config.php and changing $THEME->stylesheets. You may remove gradients.css if you don't want it.

This new CSS file is where you will be adding styles that override ones from the standard stylesheet or set new ones.

While you're looking in config.php, read through it to get an idea of the other things that you can do.

Make your theme the active one

Choose your new theme from the list on Administration >> Configuration >> Themes. (Alternatively, a user or session theme may be configured for testing purposes.)

Changing the header and footer files

The header and footer files define the layout for the top and bottom of pages.

The first thing most people want to do is to add a logo to the front page. The easiest way to do this is to edit the header file. Look closely at the code in header.html and you'll see there is different code for different parts of Moodle. Adding a logo to the theme header contains further information.

Warning: If upgrading from 1.4, don't just copy your old header and footer files over as they have changed substantially.

Start adding new CSS styles

Start adding classes to your CSS file, one by one. The best way to find out what styles you want to change is by using one of the following tools:

• Andrew Walker's CSS Inspector - this enables you to easily view details of an element, including its ancestors and any class and id attributes
• Web Developer Extension for Firefox

Clear your browser cache

Please remember that browsers usually cache CSS files, so a forced refresh (Ctrl+F5) is required in order to see any changes. For a detaled description look at how-to-clear-your-browser-cache

See also

• Theme basics
• Moving Title Text in Sideblocks forum discussion
• Themes forum