Theme changes in 2.0

Moodle 2.0

• PROJECT STATE: Proposal
• MAIN TRACKER ISSUE: n/a
• DISCUSSION AND COMMENTS: n/a
• AUTHOR: Petr Škoda (škoďák)

Please note this is a work in progress, do not edit - use page comments instead if needed, thanks.

Goals

The main goals are:

1. general simplification of code
2. easier theme customizations
3. allow themes to be stored in dataroot
4. improved performance
5. solve all caching problems
6. base all themes on YUI CSS foundation
7. easy customisation of theme images (similar to smartpix)

Design overview

All theme files will be served through two files /theme/styles.php and '/'theme/image.php. If more advanced themes need extra javascript files we could add optional /theme/javascript.php file.

All CSS style sheets (including YUI, plugin CSS and parents) would be merged into single large CSS file served via the /theme/styles.php file, it would have several parameters:

• theme - string, theme name
• rtl - bool, modified style sheet for RTL languages
• iehack - 6/7, IE would include special IE6/7 incompatibility fixes (this means IE 6 and 7 loads two styles.php instead of one)
• rev - int, theme revision number stored in main config table, solves all caching problems

The theme config.php would be significantly simplified, the complete list of available options would be:

• $THEME->parents = array('standard', 'purple'); lists all parents top-down, each theme contains full list of parents, this is non-recursive and more flexible specification without any limits
• $THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color'); the same as before, lists files from current theme directory
• $THEME->parents_exclude_sheets('standard'=>array('styles_moz'), 'purple'=>array('styles_fonts.css')); it would be also posssible to use true instead of array in order to specify all sheets or all sheets in all parents
• $THEME->plugins_exclude_sheets('mod_book', 'gradereport_grader'); - specify individual components that should be excluded from this theme
• $THEME->layouts = array(...); - the same as before, cascades through parent themes
• resource and filter hacks $THEME->resource_mp3player_colors, $THEME->filter_mediaplugin_colors

Implementation

One huge CSS sheet

Each page would only include only one huge style sheet. The URL would be returned from theme_get_url($themename, $rtl, $iehack) function. All theme URL would be served by a /theme/styles.php script. Page parameters specifying theme name and RTL flag, rev parameter is used for invalidating of browser caches.

The CSS concatenation is done from the YUI CSS, styles.css from all plugins and theme CSS. Algorithm is following:

1. YUI CSS
   1. merge all YOU CSS into one file
   2. put image placeholders instead of relative links {{yui|someimage}}
2. Plugins CSS
   1. go through all plugins and search for styles.css - put the list into array, use component names as keys, locations as values
   2. filter out excluded sheets specified in current $THEME->plugins_exluded_sheetes
3. Theme CSS
   1. go through all sheets defined in all parents and store all #THEME->sheets in array
   2. filter out excluded sheets specified in current $THEME->parent_exluded_sheetes
4. Resolve real image locations
   1. regex search for {{component|image}}
   2. priority is: current theme, parent themes, then plugin or YUI fodlers
   3. images in web accessible areas are linked directly, images in dataroot would have to go through /theme/image.php?theme=xxx; alternatively all theme images could go through this file because we could add rev parameters that would solve caching issues here

Backwards compatibility

Limited, the themes would have to be updated to have new options in config.php. Obsoleted themes can be detected by searching for /theme/oldtheme/styles.php, this file will not be present in new themes any more. Moodle core would simply use parent them if already updated or standard theme.

Upgrade steps:

1. delete styles.php
2. redefine all config.php options - in majority of cases change parent value to parents array
3. rename styles_ie6.css and styles_ie7.css to styles_layout_ie6.css and styles_layout_ie7.css - each normal sheet may have an extra sheet with _ieX suffix now, these are loaded automatically, excluding is applied based on $THEME->parents_exclude_sheets() info from the current theme
4. rename rtl.css to styles_layout_rtl.css - again each normal style sheet may have extra sheet with _rtl suffix similar to IE hacks sheets
5. delete header.html, footer.html and meta.php - obsoleted by $THEME->layouts option and new layout files

In order to minimize confusion during the upgrade, the old themes will be ignored and will be listed os "Incompatible" on the theme selection page - this page is probably the first place admins go in order to diagnose theme problems.

Removed old features

1. sometheme/meta.php - used mostly for IE6/7 hacks, custom layouts may be used instead
2. pix/smartpix - completely obsoleted by new image location resolution algorithm
3. $CFG->themewww, $CFG->themedir and friends - themes can be stored in dataroot, web hosting companies could use shared dirroot without custom themes, the styles.php URLs would be always constructed via some helper functions
4. styles.php replaced by styles.css, supported in all plugin types - the PHP is not needed because images are specified using {{component|dir/image}} syntax