Implementation plan for new Moodle template scheme

DRAFT

Overview

All the HTML code embedded in various places throughout Moodle will be "pulled out" into separate template files, thus separating presentation from the code as much as possible. The first goal is to simply replicate the existing interface of Moodle using this method, cleaning up as necessary along the way.

Once this is done, work can proceed on making each page completely compliant with XHTML Transitional 1.0, as well as WAI, SENDA and Section 508 standards for accessibility.

Finally, options can be added so that users can choose their own themes.

 

What is a template?

A template is a file that looks like XHTML but contains some embedded commands wherever data is to inserted. These commands may include presentation logic, but not program logic. Presentation logic includes how to lay out collections of data that is given to it, but will not create or select any data. Here is a simple example that shows the difference:

A Moodle PHP script collects the data up for the whole page, then passes it for template processing:

<?php
    $t->assign('title', 'My Title');
    $t->assign('records', get_records('course') );
    $t->display('simplepage.html');
?>

So, the included template simplepage.html looks something like this:

<{include file="header.html"}>

<table>
<{foreach from=$records item=row}>
    <tr>
      <td><{$row->id}></td>
      <td><{$row->name}></td>
    </tr>
<{/foreach}>
</table>

And the included template header.html could be something like simple like this:

<html>
  <title><{$title}></title>
</html>

 

Page Parts

As you saw above, templates will be small parts of HTML pages, and combined to build up a full display.

The intention with Moodle's templates will be to build up a strong, consistent set of page parts, enough to cover any display need in Moodle.

For example, notice the similarity between the Moodle formatting for a forum post, a glossary entry and a calendar event. These could all use a common template with a name like user_posting.html

Some of the templates will be whole pages, putting together small templates like building blocks to form course pages, discussion listings and so on. The main advantage of this approach is that the total number of templates is far smaller than the total number of pages, since they can be re-used again and again. This makes it easy to change the overall look of the site. Another advantage is that Moodle display will be far more consistent among different modules - most new modules will never need to define their own templates.

Those familiar with the Moodle code will see some connection to the way weblib.php is designed.

 

Template Sets

Templates

To start with there will be a single set of template files, stored in template/default.

This will include a flat directory with all the main template files in it. If they need to, modules will also be able to install new ones in there using a standard naming scheme such as widget_display.html to avoid conflicts.

Later, a web interface will be developed that allows the admin user to browse and edit these files directly in non-default template sets.

Themes

Each template will also include plugin themes, which are directories stored in a folder called theme. At the very least there must be a theme called template/default/theme/default - other themes can use any name they like. Each theme contains a styles.php file which contains all the styles needed for the whole site, as well as all associated images. All styles will be named with a mdl_ prefix to allow mixing with other styles.

Later, a web interface will be developed that allows the admin user to browse and edit the CSS file directly.

Colour sets

Lastly, there will be a number of colour sets. A colour set is simply a standard set of colours defined in the Moodle database and controlled via a web interface. These colours will be applied within the currently selected styles.php and will allow a complete novice some opportunity to customise a theme without needing to edit any files or deal with CSS.

 

Template Preferences

The admin user will be allowed to choose a template set, theme and color set (TTC), and whether teachers and users are allowed to override any of the TTC.

If allowed to, teachers will also be able to choose a TTC for their course that overrides the site preferences. They will also have a setting that allows/disallows students from overriding this TTC in this course.

If allowed to, users will be able to choose to see either: the site/course settings; their own choice of TTC overriding the site theme only; or their own choice of theme overriding all others.

 

Template Processing

We will be using Smarty as a template engine. This allows templates to be written very clearly in a non-PHP language and then be compiled and cached in PHP form for speed.

Each page in Moodle will function as follows:

  1. Process data according to parameters etc, building up a data object containing all the information to be output.
  2. From the preferences, calculate the template set, style sheet and colours to use.
  3. If the required main template doesn't exist in the current template set, use default
  4. Call Smarty with the name of the main template and all the data it needs.
  5. Smarty builds the total page and outputs the results (caching it for future use).

By default Smarty code is marked with {curly brackets} but this can be changed to something better, eg

 

Template Development

Development will proceed gradually, maintaining the old system while the new one is rolled in.

This may mean some conflicts in appearance for a while until the new system is fully implemented.

Suggested order:

Development 28/5/2004