Hi all,
moodle 2 theme engine has some hidden "features" that did not exist in moodle 1.9 themes. Encouraged by tiny "yui tricks" that Sam H. added to Splash theme I made some further testing with user preferences as a part of my math plugin tests (see mathematics tools forum) and as a "by-product" started to test implementing javascript (mootools & jQuery) based Gantry framework (created by RocketTheme) to Moodle Themes. It worked ok, but moodle has chosen yui and implementing several javascript engines over another is not reasonable so I made new tests with core theme engine and same kind of ideas as Gantry based themes use.
I thought it's time to share some of those ideas - and hopefully you give back a dozen more...
So I created a test theme that has 15 presets (in this theme you select logo which is actually a preset) inside one theme and users can select each preset like they select different themes as a user preference which is stored to database (I had 25 presets but took 10 away for a start). Each preset can use another user preference, color (red, blue, green and "site"), which could be as well called a substyle etc. The idea is the same as in Splash theme, but here "site" takes colors from site (theme) settings. Most of the css is in one file preset.css but I had to use separately chosen css file 1-15.css (loaded only once) for html backgrounds which is not the same as body background, all other elements can be styled with body classes in preset.css if you wish.
One of the ideas that RocketTheme often uses is png alphatransparency (the thing that does not work in IE6...) and theme has a couple of shadows and overlays created with transparent pngs - I added some demo/test files to theme folder overlays (used Adobe Firework alphatransparency filter for those images). the basic idea of overlays and shadows is that you can set background colors and browser takes a combination of background color and alphatransparent png images which gives a totally different effect compared to gif transparency.
This is just the first step for modifications, I am planning to add next font families and layout selections to user preferences (final theme should be usable with all screen resolutions from mobile phones to wide screens), current theme is using a modified 960 grid.
And all kinds of wild ideas are welcome - what could different activities look like etc
You can see an online demo in http://korpelainen.net/m20t (this is also an editor plugin test site so it has an editor selector visible in user preferences but the site is otherwise not open for public testing) and you can download current demo theme from http://korpelainen.net/stylist.zip and credits from header images and backgrounds go to:
Backgrounds from BackgroundLabs.com are free for personal, educational or non-commercial purposes.
Backgrounds from http://scrap-e-blog.blogspot.com/ are free blogger backgrounds for public use.
Header logos: http://www.smashingmagazine.com/2008/03/05/blog-headers-for-free-download/
A couple of BackgroundTube.com headers...
Almost forgot: Fugue Icons are licensed under a Creative Commons Attribution 3.0 license.
Edit: and note that even if the color selector is there actual css for separating presets with classes like .stylist-blue ... or .stylist-blue.stylist-1 ... has not yet been done - but can be done...