Note: You are currently viewing documentation for Moodle 1.9. Up-to-date documentation for the latest stable version is available here: 1.5 theme upgrade.

1.5 theme upgrade: Difference between revisions

From MoodleDocs
m (cat edit)
 
(31 intermediate revisions by 18 users not shown)
Line 1: Line 1:
== Upgrading Your Theme from Moodle 1.4 to 1.5 ==
{{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.
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 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.
Line 7: Line 6:
The instructions below therefore apply whether you are upgrading or not.
The instructions below therefore apply whether you are upgrading or not.


== Get the Firefox Web Developer Extension and/or the CSS Inspector ==
== Upgrade or install Moodle 1.5 or higher ==
 
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 new "Information" menu to see the class names for different elements of Moodle pages. Use the "CSS/Edit CSS" menu to try new CSS properties and see directly the changes in the page.
 
Andrew Walker's [http://www.moddular.org/log/css-inspector/ CSS Inspector] enables you to easily view details of an element, including its ancestors and any class and id attributes.
 
As good as these tools are, you will still have to know something about CSS to be able to create new Moodle themes!  :-)  A [http://www.htmlhelp.com/reference/css/ CSS reference] may help you.
 
== Upgrade or Install Moodle 1.5 ==


Install Moodle 1.5 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'''
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 ==
== Create a new theme directory ==


Themes are all stored within the "theme" directory of Moodle.
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 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.
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.
Inside this new directory you will see the following files.


* '''config.php'''  - edit this to change parameters for your theme
:''config.php''  - edit this to change parameters for your theme
* '''favicon.ico''' - the site icon that shows in the browser location bar or bookmarks
:''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
:''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
:''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
:''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  
:''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
:''styles.php'' - the actual script that Moodle calls, there is no need to change this


== Create a new CSS file in your theme ==
== Create a new CSS file ==


Your theme can have as many CSS files as you like. And you can name them 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.
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.
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 in there.
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 ==
== Make your theme the active one ==


In Moodle, go to Admin >> Configuration >> Themes and choose your new theme from the list to make it active.  If your site is set up for it (Admin >> Configuration >> Variables >> userthemes) you could also just go to your profile and change the theme for YOURSELF only (so that you don't disrupt other users of the site).
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 ==
== Changing the header and footer files ==


The header and footer files define the layout for the top and bottom of pages.   
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.
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 themes don't just copy your old header and footer files over as they have changed substantially.
 
If you want to add a logo to your header please look at [[HeaderLogo|Adding a logo to the Theme Header]].


== Start adding new CSS styles to your theme ==
Warning: If upgrading from 1.4, don't just copy your old header and footer files over as they have changed substantially.


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 the CSS Inspector, as explained above. 
== Start adding new CSS styles ==


To get an impression how the styling works look at the other themes with your Moodle installation.  The [http://moodle.org/mod/forum/view.php?id=46 Themes forum on Moodle.org] is also a very useful resource, so look in there and ask questions if you need help; we love to help!
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:


In particular, remember that browsers usually cache CSS files, so after you make changes and want to see the results, hold down the "Control" key while clicking refresh in your browser (some browsers use Shift instead).
* 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]


== Further Information about Moodle 1.5 Themes ==
== Clear your browser cache==
* Continue with more detailed descriptions about Moodle themes in [[Themes/ThemesBasics/|Themes Basics]]


* How the blocks on the course page are structured can be seen in [http://moodle.org/mod/forum/discuss.php?d=24610#116168| this posting] with the Activity block as an example.
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]


[[Themes|Back to Themes]]
[[Category:Themes|Upgrade]]


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

Latest revision as of 10:22, 18 June 2007


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

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

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