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
Line 68: Line 68:


== Further Information about Moodle 1.5 Themes ==
== Further Information about Moodle 1.5 Themes ==
* 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.
* 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.

Revision as of 09:07, 4 November 2005

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 the Firefox Web Developer Extension and/or the CSS Inspector

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

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.

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

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.

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 Adding a logo to the Theme Header.

Start adding new CSS styles to your theme

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.

To get an impression how the styling works look at the other themes with your Moodle installation. The 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!

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

Further Information about Moodle 1.5 Themes

  • Continue with more detailed descriptions about Moodle themes in Themes Basics
  • How the blocks on the course page are structured can be seen in this posting with the Activity block as an example.



Back to Themes