Themes FAQ

How do I install a new theme?

Unzip the .zip file to an empty local directory.
Upload folder to your web server to the /moodle/theme/[Theme Name]. (Replace [Theme Name] with the name of the theme you have downloaded.) Ensure the new theme folder and its contents are readable by the webserver. Change Read and Write permissions (CHMOD) for the files and folder to 755 - Owner read/write/execute, Group read/execute, Everyone read/execute. Incorrect permissions may prevent display of the newly installed theme.
Choose your new theme from within Moodle via Administration > Appearance > Themes > Theme selector (or Administration > Configuration > Themes in versions of Moodle prior to 1.7).

How do I create a custom theme?

See Creating a custom theme and/or Make your own theme.

How can I get the New Moodle2 theme for my site?

Not til Moodle 2.x comes out and it will be a "sort of". The new look (refered to as "Moodle2") for Moodle.org was made public just before the close of 2008. The Moodle2 look has various things hard coded into its fabric. The good news is that many pieces of the look are available.

Will I lose my courses, language files, logo, etc. if I switch my theme?

Switching themes only changes the appearance of your site, not the content within it. The logo is a part of the theme and will be lost when you switch.

Follow these instructions to add a logo to a theme.

Are there tools which help me creating and editing themes?

Please note that the following tools are only for development. They only changes the way you see your Moodle site, not the Moodle site itself. Any changes you make using these tolls will not be visible to anyone else who uses your site.

Firebug

The single most useful tool is the Firebug add-on for the Firefox web browser. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page... And there are additional add-ons for making Firebug an even more powerful tool.

Web Developer Toolbar

Another great tool for any web developer is the Web developer extension, another Firefox add-on. One very useful feature is the option to disable your browser's cache while working on your theme. That way you are sure you're always presented with your latest modifications and not with an older, cached version.

Stylish

Modifications made with Firebug are lost when refreshing your page. If you want your CSS changes to be a bit more permanent, for example to try them with different pages of your Moodle installation, you can use another Firefox plugin: Stylish. That way you can change your site's CSS with a simple mouse click without having to change Moodle code.

See Stylish for detailed instructions and examples.

Documentation