1.5 theme upgrade: Difference between revisions
No edit summary |
|||
| Line 3: | Line 3: | ||
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. | 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. | ||
This documents covers the steps needed for converting your old Moodle 1.4 theme to Moodle 1.5. It's also useful even if you are starting from scratch with a new Moodle 1.5 theme.... | This documents covers the steps needed for converting your old Moodle 1.4 theme to Moodle 1.5. It's also useful even if you are starting from scratch with a new Moodle 1.5 theme. | ||
== Get Firefox and install the "Web Developer Extension" == | |||
The [http://chrispederick.com/work/firefox/webdeveloper/ 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 to Moodle 1.5 == | |||
Make the normal upgrade to Moodle 1.5. Your theme will be kept, but it will not work in Moodle 1.5. You have to create a new one. | |||
* make a copy of standardwhite | |||
* rename it to your new theme name | |||
* create a new CSS file | |||
* edit config.php and add your new stylesheet name in addition to the CSS file "gradients" or replace it | |||
== Change the Header and Footer Files == | |||
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 [http://moodle.org/mod/forum/discuss.php?d=24610#116168| this posting] with the Activity block as an example. | |||
* You can read about the Moodle 1.5 Themes Basics in [http://moodle.org/mod/forum/discuss.php?d=21189| this Moodle thread]. | |||
Revision as of 03:56, 16 July 2005
How To Upgrade 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.
This documents covers the steps needed for converting your old Moodle 1.4 theme to Moodle 1.5. It's also useful even if you are starting from scratch with a new Moodle 1.5 theme.
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 to Moodle 1.5
Make the normal upgrade to Moodle 1.5. Your theme will be kept, but it will not work in Moodle 1.5. You have to create a new one.
- make a copy of standardwhite
- rename it to your new theme name
- create a new CSS file
- edit config.php and add your new stylesheet name in addition to the CSS file "gradients" or replace it
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.
