CSS Blocks

CSS Blocks

by David Scotson -
Number of replies: 8

I had a go at rewriting the Blocks code without using tables for layout. I'm quite pleased with the results and would like to get it into 1.5 if possible. To that end I would appreciate folks giving it a try and reporting any problems/suggestions.

I've attached a zip file with a replacement for the current blocks directory (remember to back up the old one) with an updated superclass for the block infrastructure and a few of the individual blocks have been subtly rewritten too, in order to minimise unneccassary tables.

Average of ratings: Useful (1)
In reply to David Scotson

Re: CSS Blocks

by David Scotson -

Of course those new CSS blocks will look rather odd without the corresponding CSS files. I've attached the theme I've been using to develop them.

The aim of this theme was to maintain the look and feel of standard xhtml to a great degree. I did however adjust the sideblock link lists to take advantage of the new CSS styling and provide some accessability benefits, following instructions found on Dunstan 's weblog at 1976design.com

It's a work in progress so comments on this theme are also welcome (I've not yet begun to tackle IE-related problems, e.g. the Calendar block breaking at larger text sizes). Also, ignore any purple patches you see, that's an unrelated experiment.

Average of ratings: -
In reply to David Scotson

Re: CSS Blocks

by David Scotson -

I've attached a file with just the block related .css declarations in case anyone wants to try customising their current theme to work with these types of blocks (You'll still have to change all the colours etc. and note that I've moved all the relevant images into the theme directory, you can copy these images from the theme.zip attached above).

You can also check out our test site to see it in action, unless we're mucking around with other things at the time, though most of the interesting changes are invisible until you view source.

Average of ratings: -
In reply to David Scotson

Re: CSS Blocks

by Urs Hunkler -
Picture of Core developers

Hi David,

purely great work wink

I downloaded your files, put them in my local Moodle 15 installation and changed the CSS. Have a look. It's nice and quite promissing styling your blocks with CSS.

One thing I found: Entered text is not shown in the "Main Menu"

Keep on going.
Urs

Average of ratings: -
In reply to Urs Hunkler

Re: CSS Blocks

by Ian Usher -

David / Urs / Anyone,

This all sounds very good to me! I'm happy to spend time doing mindless, repetitive CSS-related tasks if necessary, so please let me know if I can help in any way.

Ian.

Average of ratings: -
In reply to Ian Usher

Re: CSS Blocks

by Urs Hunkler -
Picture of Core developers

Hi Ian,

thank you very much for offering your help. In the very moment we are experimenting with the code and the CSS. So there are no rules after which you could work. Please follow the threads here and when we are at the point, that the code can be tested it will be very helpfull when you join in and give your feedback.

Thank you.
Urs

Average of ratings: -
In reply to David Scotson

Re: CSS Blocks

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Great stuff - as long as you can make this work on every browser that supports CSS then I'm very keen to see if you and Urs can get this into 1.5, too.
Average of ratings: -
In reply to Martin Dougiamas

Re: CSS Blocks

by Urs Hunkler -
Picture of Core developers

Hi David,

will you accept the challange? You will build a door to advanced CSS and XHTML for Moodle and I can't wait to go through this door to see how Moodle will look behind it wink

Martin, you write "every browser that supports CSS" - what browsers do we have to focus on and which have to just be able to display the pages? Can you please show us an actual browser statistic from moodle.org and perhaps an average of your hosted Moodle installations? Can others who host Moodle please show their browser statistics too. This would give a base to decide which way to go.

Martin, what would you propose? Is this kind of "experiment" easy to handle in the main branch of the CVS or should it be better done in a separate branch of the CVS?

Urs

Average of ratings: -
In reply to Urs Hunkler

Re: CSS Blocks

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Basically I mean CSS1, I think - that's probably a good baseline to try and keep things looking "nice" on. This covers Mozilla, Opera, Safari, IE, and Konqueror and even Netscape 4 (though that is surely in the rubbish bin of history now).

In lower-capability browsers (including mobile phones, jaws, etc), these lists should degrade to normal lists anyway (which is the point of course) ... so we're only talking about keeping things pretty.
Average of ratings: -