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. If you are upgrading, your old theme will be kept, but installing Moodle 1.5 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
- favicon.ico
- header.html
- footer.html
- gradients.css
- gradient.jpg
- styles.php
Please do not copy your header and footer into the new theme directory, because the themes need the new files. Especially the divs are needed. Better you add your logo and pictures to the new header file. If necessary change the footer too.
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.
