Theme Basics

“The content layer of the page is represented via XHTML, the presentation layer via CSS. To connect the belonging information in both layers XHTML tags and named hooks within page are used. You need quite a lot of them to style complex web applications like Moodle.” — moodleDocs

Moodle references themes from the /theme/ folder, implementing the presentation layer through a pair of HTML files and a variety of CSS files with the capability to inherit from both the standard theme and other themes (takes advantage of the cascading nature of CSS). Themes operate in system, course, and user contexts. Administrators can set the site theme through Administration > Appearance > Themes > Theme Selector.

To install a new theme, one must simply place it in the /theme/ folder. Unless $CFG[‘themelist’] is set in Administration > Appearance > Themes > Theme Settings, it will become immediately available; if it is set, the theme will need to be added to the allowed list.

Theme Development

Each theme in the /theme/ folder has several required files:

• config.php – The file where the $THEME settings are defined.
  • $THEME→sheets – Defines the stylesheets in the current theme folder that the theme must implement.
  • $THEME→standardsheets – Defines any stylesheets from the `standard` theme that the theme should inherit. These get impemented before the $THEME→sheets stylesheets
  • $THEME→parent – Defines a parent theme to reference other stylesheets from.
  • $THEME→parentsheets – Defines the stylesheets in $THEME→parent which the system should implement after the standard stylesheets but before the $THEME→sheets.

• styles.php – Moodle.org recommends not editing this file. It initializes the CSS through style_sheet_setup(), calling and setting up all requested stylesheets as defined in config.php.

• header.html – A file containing all layout before the content. Accepts PHP and Moodle variables. Detects differences between if front page (“$home”) or other page (“$header”). Also includes a navigation conditional (“$navigation”) for the breadcumb and switch users bar. $CFG→httpswwwroot should be used instead of $CFG→wwwroot because $CFG→loginhttps may be enabled.

• footer.html – This file defines all layout after the content.

• favicon.ico – A 16×16 icon that appears in whden the page is bookmarked and as the browser URL bar.

• /pix/ – Contains a series of images (pictures and icons) used by the system and defined by the theme.

For upgrade compatibility and to ensure that no classes are undefined, it is best to inherit the standard sheets and then overload those CSS classes (using !important where necessary to override existing settings).

Further Information

This article was written with Moodle 1.7 and 1.8 in mind. However, it should apply to earlier versions as well, though not sure how far back exactly.

http://docs.moodle.org/en/Themes – moodleDoc on Themes
http://moodle.org/mod/forum/view.php?f=29 – Moodle.org Theme Forum
http://tracker.moodle.org/secure/IssueNavigator.jspa?component=10088 – Moodle Tracker for Themes