View source for 1.5 theme upgrade

{{Themes}}
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 <code>$THEME->stylesheets</code>. 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 [[Theme config|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. [[Header logo|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 [http://www.moddular.org/log/css-inspector/ CSS Inspector]  - this enables you to easily view details of an element, including its ancestors and any class and id attributes
* [http://chrispederick.com/work/firefox/webdeveloper/ 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 [http://www.esqsoft.com/html/how-to-clear-your-browser-cache.htm how-to-clear-your-browser-cache]

== See also ==

* [[Theme basics]]
* [http://moodle.org/mod/forum/discuss.php?d=24610#116168| Moving Title Text in Sideblocks] forum discussion
* [http://moodle.org/mod/forum/view.php?id=46 Themes forum]

[[Category:Themes|Upgrade]]

[[fr:Adapter un thème pour 1.5]]