1.5 theme upgrade
Upgrading Your Theme from Moodle 1.4 to 1.5
In Moodle 1.5 a lot of work has been done to extend the CSS support to all parts of Moodle and to remove any old hardcoded styles (such as fonts or colors) 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 1.4 and earlier no longer work very 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.
Get Firefox and install the "Web Developer Extension"
The Web Developer Extension is an excellent tool for examining the structure of web pages and the underlying code. This tool is extremely useful when creating new Moodle themes.
Use the "Information" menu in it to see the class names for different elements of Moodle pages. Use the "CSS/Edit CSS" menu in it to try new CSS properties and see directly the changes in the page.
Upgrade or Install Moodle 1.5
Install Moodle 1.5 as normal. If you are upgrading, your old theme directory will be kept, but the installation process will set the theme to the new default: standardwhite
Create a new theme directory
Themes are all stored within the "theme" directory of Moodle.
To create a new theme directory make a copy of the standardwhite directory (or any other theme) and give the directory a new name to match your theme. The directory/theme name should be very simple, with just a-z and numbers if necessary.
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 in your theme
Your theme can have as many CSS files as you like. Create a new one (eg mystyles.css) and include it in your theme by editing config.php and changing $THEME->stylesheets. You can remove gradients.css there too if you don't want it.
This new CSS file is where you will be adding styles that override ones from the standard stylesheet.
While you're looking in config.php, read through it to get an idea of the other things that you can do in there.
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 that is to do this in the header file. Look closely at the code in header.html and you'll see there is different code for different parts of Moodle.
Warning: if upgrading from 1.4 themes don't just copy your old header and footer files over as they have changed substantially.
Build Your CSS to Rework Your Moodle 1.4 Theme
Looking at the site in Firefox with the "Web Developer" extension, start adding new styles to your new CSS file. Some you can copy from the 1.4 theme, some you can't. To get an impression how the styling works look at the other themes coming with your Moodle installation. Ask on the Moodle forums especially the "Themes" forum when you need help.
Many elements in Moodle pages have multiple short names in the class tag like the sideblocks "block_activity_modules sideblock". You can apply styles to all sideblocks using the class name "sideblock" or only to the block "Activity" using the class name "block_activity_modules".
Further Informations about Moodle 1.5 Themes
- How the blocks on the course page are structured you can see in this posting with the Activity block as an example.
- You can read about the Moodle 1.5 Themes Basics in this Moodle thread.
