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