My daffodil bulbs have sprouted. An early sign that this terrible winter will end?

I spent most of Saturday (coughing and) creating a new Moodle theme. IE is the bane of any web development. Our new theme has boxes and backgrounds with rounded corners. Simple as with Firefox, just use -moz-border-radius which is a preview of the upcoming CSS3 border-radius property.

But to support rounded corners in a cross-browser way, requires the use of background images. (There’s also a Javascript solution, but I didn’t go that way.) And for a fluid block you need six divs to hang them off, two for the left corners, two for the rest of the top and bottom, and two for the sides. The technique is described by Roger Johansson – see “customising_custom_corners_and_borders“.

A Moodle theme doesn’t let you change the content of a page, only style it what’s already there with CSS (and add a header and footer, and change some settings). Fortunately Moodle 1.9 has introduced an experimental theme setting called customcorners along with the new custom_corners theme by Urs Hunkler. When “$THEME->customcorners = true;” is set in the theme’s config.php it adds extra divs needed to Moodles blocks which can then be styled to give them curved corners.

However we also want curved corners on the side block list item backgrounds. Moodle doesn’t give us any extra divs here, but this is where I get really dirty. There are already two divs here .c0 is intended to hold an icon and .c1 is meant to hold the link. Instead I style .c0 as the top of the rounded box and .c1 as the bottom still containing the link. The box is a fixed width, but will expand down as needed. For side bar links this limitation is fine.

A tip for anyone doing a new Moodle theme: Moodle themes are normally built upon the standard themes with the inherited CSS split over many files. A mistake I made early on was trying to copy those files across to my theme and change the properties I wanted to customise. Much easier is to inherit them with the old properties and then override them in your own custom CSS style sheet file.

I got this all going, then tried it out with IE6… owch! Even though this is all standard CSS IE has some weird problems. I’ve worked around them without really knowing why IE failed, or why my solutions worked, but at least I got something which is almost cross-browser.

• IE doesn’t handle compound class selectors like .class1.class2, don’t know why, but I had to stop relying on these
• For some reason I had to set the margin on the body again, no big deal
• IE left a tiny gap between the top and bottom halves of my side bar backgrounds. Set margin-top: -3px; on .c1 to fix that.
• The custom_curves theme uses margin to inset the top of a border from the top left corner. IE didn’t like that, so I changed it to padding, and for some reason that works.
• I’d used GIFs with transparency for the corners thinking they would work for IE, but I still had bits of the side borders showing under the corners. Changed the background-color for the corners to white to hide that.

There’s still more work to do on the theme, mostly just chosing which blocks we want to put borders on.

Some blocks have title tab and I move the title into that. That’s so ugly I don’t want to talk much about it, but it uses position:relative and z-index. The biggest problem is selecting which header goes with which block.

When I get it all finished hopefully I’ll be able to share it for others to use. I’ve also said I would share my Wordpress and MoinMoin themes when I got them tidied up :-\. I’d like to publish my Mercurial source repository too. Just haven’t had time to get that sorted yet. If you were interested in getting this Moodle theme, please leave a comment, it will motivate me to publish it.

Saw my first Avondale spider.

The so-called Avondale spider, Delena cancerides, is an introduced Australian huntsman spider. The first specimens were found in 1924, probably arriving in imported wood used for railway sleepers. Although large and fearsome-looking, it is quite harmless. In South Australia the species is quite common, and some people encourage them to live in their houses to control insects.

Delena cancerides is nocturnal, hiding in dark, dry places during the day. Around houses they hide in attics, under corrugated iron, behind pictures and in sheds and garages.