1.6 theme upgrade

Revision as of 07:11, 16 May 2008 by Helen Foster (talk | contribs) (Reverted edit of Nageshd, changed back to last version by Tsala)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Note: You are currently viewing documentation for Moodle 1.9. Up-to-date documentation for the latest stable version is available here: 1.6 theme upgrade.


Which areas in Moodle have changed?

The semantic structure of Moodle pages

For better orientation of non visual Moodle users it is important to build a semantic structure for all Moodle pages. The skeleton are the headers h1 to h3. Details follow...

The header

For the semantic structure of the Moodle pages the "headermain" area is no longer built with a div but with a "h1" element. (See header.html)

The footer

A link to the relevant Moodle Docs page is added. (See footer.html)

moodledocslink in footer

Starting with Moodle 1.6 it is possible to make a link to Moodle Docs available (to admin or teacher, not to student) by adding the following to the footer.html file of your theme:


If you want to make a theme which is compatible both with Moodle 1.5 and 1.6 you should test the existence of the page_doc_link function. Otherwise you'd get a call to undefined function error.

if (function_exists('page_doc_link')) {

The Navigation Bar

For better accessibility and more flexible visual design, the xhtml structure of the navbar (sometimes referred to as the breadcrumb trail) has been changed to an unordered list.

The » character has been converted to an image with empty 'Alt' text - see #Resizable Icons.

The sideblocks

The sideblock heading is now <h2>, and is immediately followed by a Skip block N link to assist screen-reader users. The text for this link has class "accesshide" to hide it in graphical browsers, though you can tab through the link and rollover with a mouse for a title.

The table enclosing each sideblock has been replaced with an unordered list <ul>, with rules in the standard theme layout style-sheet to switch off margins and bullets (list-style-type). Legacy class names ('list', 'r0', 'c0') have been maintained, and <span> replaces table cells <td>. The original icons are hard-coded using <img>, with empty alt attributes (they may be styled as background images in a future release to increase flexibility).

The questions

Documentation about the changes to follow... (--Urs Hunkler)

The Image borders

Previously Moodle added a 1 pixel wide black border to all user images, since 1.6 this is not done. If you wish to retain such a black border (or a green, red or blue border) you can add it via css. Old user images will retain their black border if you are upgrading from a previous version but there is a script (userpix/upgrade.php) that can be run by an admin to process all images and remove the border.

Resizable Icons

To improve accessibility, a number of characters which are confusing in their current context are being replaced by images, for example '>' on the Forums Search button is spoken by Screen-reader software as "greater" ("search" or "go" is more appropriate). These images (and other icons in the future) are resizable with the text using Ctrl+Mouse Wheel in Firefox and Internet Explorer 6 (to some extent).

The images have a class "resize", are prefixed with "r_" and are designed to be 1em square (or a multiple of; based on the letter M at default font size). Naturally, the pixels become visible as you resize, though this can be mitigated by making the 'real' image 2ems, or 21 by 23 pixels.

Currently resizable (Symbol/ Actual size/ File/ Notes):

  • » 2em /pix/a/r_breadcrumb.gif, Breadcrumb separator.
  • > 2em /pix/a/r_go.gif, Search forums block, button.
  • < 1em /pix/a/r_previous.gif, Mini calendar block, previous month link;
  • > 1em /pix/a/r_next.gif, Mini calendar block, next month link;

Note, if your theme style sheet redefines font-sizes you will need to re-style the "resize"-classed icons — use em units.

What is new in the Moodle 1.6 standard theme?

The following pages give you an overview of the changes in the header, footer and the CSS files from the actual 1.5.x to 1.6. When you open the linked pages you will see all changes made in that file.

You can add these changes to your theme header, footer and CSS files to update them for Moodle 1.6.

These html pages show only those parts of the files which are different, not the whole file. The line numbers of the 1.5 and 1.6 files will help you locate the areas. If you need to apply the changes to completely different files, you may search for the old (1.5) property in your files and replace it with the new/changed one.

I will update these files with any changes regularly (every day or when changes are made - when possible) until Moodle 1.6 is released.

--Urs Hunkler 03:49, 13 March 2006 (WST)

Moodle 1.6 has been released for some time now. The state of the comparison is 28 June 2006. There is no need to update the files any more.

-- Urs Hunkler 18:19, 28 June 2006 (WST)

See also