Themes

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).

My next theme is called colorbox and it simply colors an entire block with a single base color.

As you can see from the screenshot I've chosen to work in shades of gray, simply because it is less to think about at the moment. To translate it into a standard monochrome color-scheme, like you see on Moodle.org, you can simply transpose the white-gray-black color range into pale yellow-orange-brown or whatever colors you wish to use.

The tricky part of this style is the following lines (found at the bottom of style.css):

.sideblock thead,
.sideblock tbody,
.sideblock tr,
.sideblock th,
.sideblock td,
.sideblockmain,
.sideblockmain table,
.sideblocklinks {
    background-color: transparent;
}

.sideblock {
    background: #eee;
 }

This ensures that the color of the base isn't overlapped by the background color of tables and table cells layered on top of it. In this case, it is actually unnecessary, except for the added clarity it gives, since you could just set all the areas to the same shade. However if you were to apply a gradient or patterned background image then transparency would be essential to allow it to show through properly.

The theme also demonstrates a different approach to titles, as rather than being boxed off from the section it titles, the title text is indicated merely by its size and position relative to rest of the block. If you make titles large enough (and you may even consider shortening the titles in the language pack to allow for bigger text e.g. administration -> admin), then fairly low contrast colors will suffice and using`text-transform' to make them all lowercase can give a fairly modern look:

.sideblockheading {
    font-size: 20px;
    color: #aaa;
    background-color: transparent;
    text-transform: lowercase;
}

My fuzzybox theme (which was named for now defunct historical reasons) shows a slight variation on colorbox. As well as the merely cosmetic change of using a darker background, it also shows letter spacing and centered text, which while it sounds simple actually needs some non-obvious CSS trickery in this case.

Screenshot

The interesting CSS is as follows:

.sideblockheading div {
    width: 100%;
    text-align: center;
    letter-spacing: .2em;
    font-size: 12px;
    text-transform: uppercase;
    padding-top: 8px;
    padding-bottom: 3px;
}

You have to target the div and set it's width to 100% or else the text-align will have no effect as these two shots demonstrate. Both have the text centered, and the div outlined in red.

before

and

after

Another thing to notice is the padding that has been added to the top and bottom of the div with the title in it. This is a nice example of making something stand out, not by making it bigger or brighter but by clearing some space around it.