Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

av Mauno Korpelainen -
Antall svar: 11

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... big grin

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

Stylist

Gjennomsnittlig vurdering:Useful (1)
Som svar til Mauno Korpelainen

Re: Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

av Joseph Thibault -
Bilde av Particularly helpful Moodlers Bilde av Plugin developers Bilde av Testers
Mauno, bravo. Thank you for making me the happiest Moodler ever by providing the 1st Transformers based Moodle theme. ;)

I think the personalization/customization is pretty awesome. Having 1 theme that's so flexible is a great option to engage students (and with myMoodle have a more central role I think this is even more important).

-Joe
Som svar til Joseph Thibault

Re: Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

av Mauno Korpelainen -

This is just a start - the first ideas that came to my mind when I downloaded some of those free logos.

You could customize all parts of moodle - these examples have just different logos, background images and a couple of css variations in css files.

For production sites / schools people need of course the "official theme" but it is also possible to allow students to customize some parts of their themes with user preferences (from given options) - select non standard fonts, icon sets, some custom layouts with some external stuff as well (not necessarely from moodle itself) and so on.

Or in editor (tinymce) I have alredy tested adding math plugins and we could for example use these yui user preferences to render a different "Transformers 2 editor" as a part of "Transformers 2 theme" and use there a Transformer sticker plugin that is not visible in any other theme... Moodle 2 makes such pluggable features possible, they are just not yet properly documented. smile

Som svar til Mauno Korpelainen

Re: Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

av Mary Evans -
Bilde av Core developers Bilde av Documentation writers Bilde av Peer reviewers Bilde av Plugin developers Bilde av Testers
This is ground breaking news! I love it!!! It is so reminiscent of my attempt to style a blog last year using this tutorial.

The background pre-sets you have added to this theme are so easy to install, and does give a new dimension to Moodle. You have done a brilliant job Mauno.

Mary
Som svar til Mauno Korpelainen

Re: Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

av Navin Dutta -
Great Job Mauno!!! smiler I got busy in my work after starting themato project but your work on this inspires me to get back on it once again smiler This is amazing!!! smiler

Cheers!!

Nave
Som svar til Mauno Korpelainen

Re: Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

av Nadav Kavalerchik -
Bilde av Core developers Bilde av Plugin developers Bilde av Testers Bilde av Translators
A M A Z I N G !!!

I really like to write something but i am too much over whelmed!

Thank you smiler
Som svar til Mauno Korpelainen

Re: Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

av Chad Outten -
Bilde av Testers

Totally awesome work, Mauno. Thanks for sharing. It might be a sign of a misspent youth, but I love the Mario Bros theme (logo 9)! stort smil

Som svar til Chad Outten

Re: Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

av Mauno Korpelainen -

Thanks Chad,

I just noticed that I have not upgraded those files for a long time.

It was really fun to test different backgrounds 3 months ago and after that I made some testing with font selector and other layouts but that downloadable zip package is not using the latest code - there were also some tiny IE issues etc and Sam H. made a couple changes to core themes that changed also my themes layout in IE7.

I will try to check my current test PC files during the coming week and send a new theme package with some other cool stuff included smiler

The main reason why I did not upgrade my files before Chrstmas was that there were some interesting discussions about mobile theme support and I was waiting the new details from OU people because I wanted to make a fully functional layout switcher for all screen witdhs from mobiles to large screens but wanted to wait possible core code changes ( where mobile detection could be made in directly library files, not in custom theme )

Som svar til Mauno Korpelainen

Re: Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

av Chad Outten -
Bilde av Testers

Ok, Mauno. Thanks for the info & look forward to your update.

Som svar til Mauno Korpelainen

Re: Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

av Andrew Golightly -

HI Mauno,

This theme looks great. Did you upload the new files? I did a search in the Moodle themes... and came up with no results when searching for your name.

thanks,

Andrew

Som svar til Andrew Golightly

Re: Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

av Mauno Korpelainen -

Hi Andrew,

and I am sorry for a late answer - I missed your post...

It's amazing how quickly days go... I have been busy with all kinds of other "projects" like http://moodle.org/mod/forum/discuss.php?d=182627&parent=794991#p797056

Ugraded standalone Stylist will be downloadable as soon as I have finished documentation of our new moodle 2 math plugins in http://moodle.org/mod/forum/discuss.php?d=182627 - at the latest in September.

Som svar til Mauno Korpelainen

Re: Stylist - with 15 preset styles, 4 color variations, custom settings and user preferences

av Kim Estes -

Is this project active any more? Would love to have it for Moodle 2.4 ???