Cascading CSS
Moodle Themes use style sheets to describe the "look" of Moodle by controlling the layout, fonts and colors. These are constructed by a PHP script called "styles.php" in each theme directory, and controlled by a file called "config.php" in the same place.
Moodle has a "standard" theme which is very plain and provides a basic layout for other themes to build on. Each theme may also have a "parent" theme, which will be included before the current theme.
So, depending on your settings, you may have up the three stylesheets for a theme:
- "standard" theme - theme/standard/styles.php
- "parent" theme - theme/parentname/styles.php
- "main" theme - theme/yourname/styles.php
Due to the cascading character of CSS the definitions in later files can overwrite the definitions in the earlier CSS files. Moodle makes extensive use of the cascading character of CSS and gives the theme designer many opportunities. They range from easy development of themes based on the existing ones with few changes up to the design of a completely individual Moodle appearance with new CSS files.
Theme designers can define and add any CSS stylesheets and name them any way as needed for this theme.
The Standard Theme
Figure 1: The theme "standard" with the CSS files "styles_layout.css", "styles_fonts.css", "styles_color.css" and "styles_moz.css".
Small Changes
If you just want to make small changes to a theme like different colors or adding a logo then your new theme will include the "standard" theme (and possibly another parent theme) then define a few extra CSS styles.
For an example, of this, see the "standardwhite" theme.
It uses the file "config.php" to set the appropriate options. The first entry $THEME->sheets = array('gradients');
defines the CSS file "gradients.css" as the file with additional CSS definitions. It also specifies $THEME->standardsheets = true;
which says to include all the styles from the standard theme too.
Instead of basing the theme on "standard", you could base it on another theme by specifying $THEME->parent = 'cooltheme';
Figure 2: The theme "standardwhite" with all CSS files from the theme "standard" plus "gradients.css" from the selected theme.
Mixed CSS - Standard Layout and It's Own Fonts and Colors
The theme "formal_white" mixes the page layout from the theme "standard" with it's own layout, fonts and colors. This way all layout changes in the standard Moodle layout are kept. This is done by setting $THEME->sheets = array('fw_layout','fw_color','fw_fonts');
and $THEME->standardsheets = array('styles_layout');
in the config file.
Figure 3: The theme "formal_white" with the CSS file "styles_layout.css" from the theme "standard" and the individual files "fw_layout.css", "fw_fonts.css", "fw_color.css".
A Theme Using a Parent Theme (Faked)
An advanced feature is to set any existing theme as the "parent" theme and offer variant themes to this. One possible use can be to design an own theme and offer color variants of this theme to be chosen by the users according to their color preferences. The configuration could look like $THEME->sheets = array('my_layout');
, $THEME->parent = 'formal_white';
and $THEME->parentsheets = array('fw_layout','fw_color','fw_fonts');
Figure 4: The faked theme "formal_white_plus" with an additional CSS file.
A Theme Without Standard Dependencies
The theme "orangewhite" uses its own CSS. The settings $THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color');
and $THEME->standardsheets = false;
deactivate all other Moodle CSS and make a completely independent theme. All changes in the standard Moodle theme do not change this theme at all.
Figure 5: The theme "orangewhite" with it's own CSS files "styles_layout.css", "styles_fonts.css" and "styles_color.css".
Some more Basic CSS Files
In addition to this theme CSS files Moodle features a basic CSS file for every module, block and for every language. Developers can provide basic CSS properties for their modules and blocks to get the page or block layout right, if they need formatting for special functionality. The look and feel of Moodle is not changed by these layout basics.
These files are only loaded when the "standard" CSS is activated. They are loaded first before all theme CSS files.
Figure 6: The CSS file loading order of all Moodle CSS and theme CSS files.
Last but not least
Very good information about the Moodle CSS you can get from the final stylesheets that reach your browser. Moodle integrates some helpful documentation. For example you can read the CSS with the Firefox "Web Developer" extension.