Posts made by David Scotson

Moodle in English -> Themes -> Customising Moodle -> Re: Customising Moodle

by David Scotson -

My second "theme" called skeleton (again attached), takes the opposite tack and highlights the tables that make up the basis of any Moodle theme. Understanding exactly how these tables are made up is vital as they, as the theme name suggests, are the foundation on which you have to build.

If you install the theme you will notice that it looks slightly different from my screenshot. This is because I have added some CSS id's to first add, and then reveal some of the structure underlying a Moodle theme.

To emulate this you will need to add the id's "leftcolumn" "middlecolumn" and "rightcolumn" to the td cell that contains each respective column in the following files:

  • index.php
  • courses/formats/social/format.php
  • courses/formats/weeks/format.php
  • courses/formats/topics/format.php

Once you know where the tables are you have a fairly limited range of options:

  • changing the size and color of the borders on tables and cells
  • changing the padding and margins on tables and cells
  • changing the color of the backgrounds of tables and cells
  • adding images as backgrounds to tables and cells

But by combining these you should be able to create a near unlimited number of interesting looks.

Note that users of the Firefox browser who have installed the Web Developer Extension will be able to apply this table-outlining effect at the touch of a button, and to any website they visit (as well as be able do a variety of other cool and useful web related things).

I've made a couple more changes in case anyone's using this. It now fits in better with moodle theme's and is less Google branded (like Martin's implementation on Moodle.org). It also still acts as a simple Google Search for closed sites, and allows the choice of searching the web with Google.

If you install Firefox and its Web Developer Extension then I believe you can do this yourself.

It has an option called Display ID & Class Details that will show you that information for whatever web page you are viewing.

This page has a screenshot that shows you the effect.

It would be good to try to follow the guidelines for HTML compatible XHTML given here:

http://www.w3.org/TR/2000/REC-xhtml1-20000126/#guidelines

I think they are given roughly in order of importance, though C.12 (unencoded ampersands) always seems to trip people up.

Average of ratings: Useful (1)