Difference between revisions of "Themes"

Jump to: navigation, search
(Modified Installing)
(theme selector)
Line 1: Line 1:
 
{{Themes}}
 
{{Themes}}
  
Moodle has a powerful '''themes''' system that allows for a variety of effects through the use of XHTML and CSS.
+
==Moodle themes==
 +
Moodle has a powerful themes system that allows for a variety of effects through the use of XHTML and CSS.
  
* Themes may be [[Theme config|configured]] at site level, course level and/or user level.
+
* Themes may be [[Theme settings|configured]] at site level, course level and/or user level.
 
* Each page is individually-addressable via CSS, allowing you to pinpoint exact items.
 
* Each page is individually-addressable via CSS, allowing you to pinpoint exact items.
 
* Our CSS class naming system uses simple English, is consistent and easily understood.
 
* Our CSS class naming system uses simple English, is consistent and easily understood.
Line 9: Line 10:
 
* Themes can be based on the ''standard'' theme, which is very plain but functional.  You simply override styles you want to change by adding to the stylesheet in your own theme.  This means that if you upgrade Moodle later and new styles are needed, your custom theme will still work without any changes, because the new classes will be defined in the ''standard'' theme.
 
* Themes can be based on the ''standard'' theme, which is very plain but functional.  You simply override styles you want to change by adding to the stylesheet in your own theme.  This means that if you upgrade Moodle later and new styles are needed, your custom theme will still work without any changes, because the new classes will be defined in the ''standard'' theme.
 
* Themes can also be based on any other theme.  This allows you to easily create families of themes, or variations on a theme.  For example you might create a spectrum of pastel shades for use in different courses, but with the same basic layout and logos.  You may also want to create a family of differently-coloured themes for accessibility purposes.
 
* Themes can also be based on any other theme.  This allows you to easily create families of themes, or variations on a theme.  For example you might create a spectrum of pastel shades for use in different courses, but with the same basic layout and logos.  You may also want to create a family of differently-coloured themes for accessibility purposes.
 +
 +
==Theme selector==
 +
 +
Moodle has a number of themes for you to choose from using the theme selector, including an interactive theme called [[Chameleon]]. Chameleon uses Ajax technology to enable you to easily design your own theme or enhance an existing theme.
 +
 +
Alternatively, you can download a theme from the Moodle.org [http://moodle.org/themes Themes database].
  
 
== Creating your own theme ==
 
== Creating your own theme ==
  
If you plan to work on your own theme please create a new one (with its own named subfolder) and use Moodle's [what] feature to base your theme on an existing theme such as ''standard''. If you just modify one of the delivered themes it will be overwritten by the next Moodle update.
+
If you plan to work on your own theme please create a new one (with its own named subfolder) and use Moodle's theme system to base your theme on an existing theme such as ''standard''. If you just modify one of the delivered themes it will be overwritten by the next Moodle update.
  
 
To distribute your theme, zip the theme folder and submit to the [[Moodle Themes Database|http://moodle.org/themes]]
 
To distribute your theme, zip the theme folder and submit to the [[Moodle Themes Database|http://moodle.org/themes]]
  
== Installing your own theme ==
+
== Installing a theme ==
 
 
Once you have your own theme created, you should follow these steps to install it on your site:
 
  
# Unzip the .zip file to an empty local directory
+
To install a theme:
# Upload folder to your web server to the /moodle/theme/[Theme Name]
+
# Unzip the .zip file to an empty local directory.
#* Note: Replace [Theme Name] with the name of the theme you have downloaded.
+
# 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.
#* Note: 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'' (version 1.7+) or ''Administration > Configuration > Themes'' (older versions).
# Choose your new theme from within Moodle
 
#* Admin > Appearances > Themes (version 1.7+)
 
#* Moodle Admin > Configuration > Themes (older versions)
 
  
== Theme system changes across Moodle versions ==
+
== Theme system changes ==
  
Moodle 1.5 themes are quite different from previous versions and so a [[Theme upgrade|theme upgrade]] is required. A theme upgrade is also required for the [[1.6 theme upgrade|transition from 1.5 to 1.6]], since the XHTML structure has been reworked for improved [[Accessibility|accessibility]].
+
Themes have improved a great deal in recent versions of Moodle. If you are using your own theme and want to upgrade, please refer to one of the following:
 +
* [[1.6 theme upgrade]]
 +
* [[1.7 theme upgrade]]
 +
* [[1.8 theme upgrade]]
  
 
[[Category:Themes]]
 
[[Category:Themes]]

Revision as of 13:49, 5 October 2007


Moodle themes

Moodle has a powerful themes system that allows for a variety of effects through the use of XHTML and CSS.

  • Themes may be configured at site level, course level and/or user level.
  • Each page is individually-addressable via CSS, allowing you to pinpoint exact items.
  • Our CSS class naming system uses simple English, is consistent and easily understood.
  • New modules can tell Moodle what styles they need and automatically include these in the stylesheet.
  • Themes can be based on the standard theme, which is very plain but functional. You simply override styles you want to change by adding to the stylesheet in your own theme. This means that if you upgrade Moodle later and new styles are needed, your custom theme will still work without any changes, because the new classes will be defined in the standard theme.
  • Themes can also be based on any other theme. This allows you to easily create families of themes, or variations on a theme. For example you might create a spectrum of pastel shades for use in different courses, but with the same basic layout and logos. You may also want to create a family of differently-coloured themes for accessibility purposes.

Theme selector

Moodle has a number of themes for you to choose from using the theme selector, including an interactive theme called Chameleon. Chameleon uses Ajax technology to enable you to easily design your own theme or enhance an existing theme.

Alternatively, you can download a theme from the Moodle.org Themes database.

Creating your own theme

If you plan to work on your own theme please create a new one (with its own named subfolder) and use Moodle's theme system to base your theme on an existing theme such as standard. If you just modify one of the delivered themes it will be overwritten by the next Moodle update.

To distribute your theme, zip the theme folder and submit to the http://moodle.org/themes

Installing a theme

To install a theme:

  1. Unzip the .zip file to an empty local directory.
  2. 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.
  3. Choose your new theme from within Moodle via Administration > Appearance > Themes > Theme selector (version 1.7+) or Administration > Configuration > Themes (older versions).

Theme system changes

Themes have improved a great deal in recent versions of Moodle. If you are using your own theme and want to upgrade, please refer to one of the following: