Moodle in English: Themes in 1.5

Themes in 1.5

by Martin Dougiamas - Wednesday, 26 January 2005, 2:13 AM

Well, work is moving fast now on the themes in Moodle 1.5!

Building on Urs Hunkler's work (see developer wiki for copious detail) and ideas from several of you (David Scotson!), here's a quick summary of what's happening:

Every page in Moodle now has a unique CSS id based on the script path (eg mod-forum-discuss), and scripts within each directory have a specific class (eg mod-forum).
The 'standard' theme is being reworked by Urs separating all the files into fonts, colors, layout and mozilla extensions. I've turned it a fairly plain white theme (reminds me of iPods ). This is the new default for new installations (bye Moodle orange!)
This theme is now ALWAYS used (it's called by print_header now), even when you have a custom theme. All non-standard themes can override any styles they want to re-define (this is analagous to how language packs work). This makes upgrades much easier, since in many cases overrides won't be necessary. Even custom themes for older versions will probably work OK if you don't mind a bit of post-modernism (as Urs called it ).
The $THEME variables defined in config.php are obsolete - I'm going through ripping them out - help welcome!
Inline styles are being removed.
Tables are being simplified where possible.
FONT tags are getting removed where they get in the way.

If you're testing or working with Moodle 1.5 please switch to the "standard" theme and help us identify troublespots where things look funny, or where we need more "hooks" to access certain objects in the page with CSS. Anything bright green is caused by old $THEME variables ... I will have just not got there yet.

Some other theme surprises are coming...

Average of ratings: -

Re: Themes in 1.5

by Dan Marsden - Wednesday, 26 January 2005, 3:14 AM

Hi Martin,

is it possible to move this line in the header.html file of the themes:
<?php echo $meta ?>
to after
<link rel="stylesheet" type="text/css" href="<?php echo $styles ?>" />(or alternatively, place the call for the stylesheet above the call for the $meta) - this would allow an activity/module to include it's own stylesheet overriding the standard Moodle theme....

...just a thought....

Dan

Average of ratings: -

Re: Themes in 1.5

by Urs Hunkler - Wednesday, 26 January 2005, 4:42 PM

Hi Dan,

with the DIV and ID hooks in the Moodle 1.5 page framework you can do what you want. For example the discussion page in the forum will look like:

HTML
HEAD
BODY id="mod-forum-discuss" class="mod-forum"
  DIV id="page"
    DIV id="header"
    DIV id="nav-bar"
    DIV id="content"
      DIV class="forum-content"
    DIV id="footer"

All CSS properties starting with

".mod-forum" will individually change the design of all forum pages, e.g. ".mod-forum .content {background-color: silver}" will set the background of all forum pages to light gray.
"#mod-forum-discuss" will only change the design of the forum's discussion page, e.g. "#mod-forum-discuss .content {background-color: silver}" will set the background of the discussion page in the forums to light gray.

Do you think these possibilities will work for your needs?
Urs

Average of ratings: -

Re: Themes in 1.5

by Martin Dougiamas - Wednesday, 26 January 2005, 5:34 PM

On the other hand, it makes sense for site themes to be able to override any styles "embedded" within the code of a module ...

Average of ratings: -

Re: Themes in 1.5

by Dan Marsden - Thursday, 27 January 2005, 3:50 AM

CSS files are supposed to be cascading right? - the site theme overriding, removes this feature of CSS.
Giving a specific example of how this might be used - Blog.

We want to allow users to specify a CSS file through a user preference to allow customisation of their blogs. - so if the site theme overrides this, then letting a user choose a css file won't work as intended.

Dan

Average of ratings: -

Re: Themes in 1.5

by Martin Dougiamas - Thursday, 27 January 2005, 9:14 PM

I'll think about this because I am also thinking about user (and course) themes, and I'm not sure yet if I like the idea of users having that control over how others see their blog page / user profile.

The whole thing can rapidly turn into an ugly mess.

Average of ratings: -

Re: Themes in 1.5

by Ray Lawrence - Thursday, 27 January 2005, 10:23 PM

Couldn't this also lead to difficulties with remote support of the "...click on the bule link which says xyz", "I don't have any blue links..." variety?

Average of ratings: -

Re: Themes in 1.5

by Martin Dougiamas - Thursday, 27 January 2005, 10:57 PM

Indeed. The ones I'm thinking about are all optional, and the precedence is described in the "Template preferences" section of this oldish spec sheet.

Average of ratings: -

Re: Themes in 1.5

by Dan Marsden - Friday, 28 January 2005, 4:00 AM

good point. We don't want to give the ability for users to create themes. but we want them to be able to select one from a list. Complete control of themes needs to be the site admins role.

We want to foster an environment that allows students to feel like they "own" their blog, allowing them to personalise it with themes seems like an easy way to partially accomplish this. - Let the students have some fun with it! - not allowing them to see it as "Just another thing added to their course load!"

Also, customisation of the look of a blog is something that all blog software I'm aware of currently does. - we don't want people to say - "I can do it with blogger.com, why can't I do it with moodleblog?"

although we do need to be careful that it doesn't turn into an "ugly mess!" - would you prefer it if the site admin was able to specify which Moodle Themes were available for the blogs?

Dan

Average of ratings: -

Re: Themes in 1.5

by Tony Hursh - Monday, 31 January 2005, 2:51 AM

It'd be nice to allow users to select an "ultra-lightweight" theme if, say, they were looking at the Moodle site with a small-screen PDA or possibly some kind of assistive technology.

We're planning to do some research using Moodle with wireless PDAs in the near future.

Actually, the standard orange Moodle theme isn't too bad on a wireless PDA, but there are some things that would improve the experience.

Average of ratings: -

Re: Themes in 1.5

by Martin Dougiamas - Monday, 31 January 2005, 3:38 AM

What things would improve the experience? I'm guessing you're referring to the page layout tables ...

Have you tried the new "standard" white theme on a PDA by any chance?

New things in CVS: themes can have "parents" which get included after standard but before the main theme. Also, a new theme chooser/previewer that uses iframes.

Average of ratings: -

Re: Themes in 1.5

by Tony Hursh - Monday, 31 January 2005, 4:13 AM

What things would improve the experience? I'm guessing you're referring to the page layout tables ...

Yep. Probably the most helpful thing would be to switch from a three-column to a two-column layout for PDAs. Having blocks on the left side means that you have to do a lot of horizontal scrolling to see the center content.

Have you tried the new "standard" white theme on a PDA by any chance?

Nope, but I will.

This sounds like it's going to be awesome.

Average of ratings: -

Re: Themes in 1.5

by Urs Hunkler - Monday, 31 January 2005, 8:16 AM

Hi Tony,

your dicussion appealed me to try something. I like working with pdas and was always wondering, if it's possible to arrange the content of an LMS to fit on the small screen. Why not give it a try:

For a new course format called "pda" I changed the course table from 3 columns to 3 rows. All page elements are arranged beyond each other, starting with the blocks of the left "column" on top, followed by the content and ending with the blocks of the right "column".
With the theme "orangewhitepda" I introduced a fixed width layout with 240 px width (can be changed), so that much of Moodles content fits onto a pda screen. Many of Moodle's activities are still broader, but perhaps they can be made fitting.

I was positively surprised, that those relatively fast made changes could produce an somehow acceptable result on my Sony PDA. I think it's worth to go on with the pda approach. If you want to try I attach the test course I made to start optimizing the CSS for the "quiz" and for the "glossary".

I've put the course format and the theme into the CVS. Please tell me, if these changes take you further.

Good luck
Urs

pda-20050131-0038.zip

Average of ratings: -

Re: Themes in 1.5

by Tony Hursh - Monday, 31 January 2005, 8:25 AM

Thanks, Urs. I'll check it out!

Average of ratings: -

Re: Themes in 1.5

by Tony Hursh - Monday, 31 January 2005, 12:02 PM

Yes, that layout works quite well on my Palm with the browser I normally use.

I had about 4 browsers on there, but sadly the trial period has expired on the others, so I was only able to check it on the one.

Thanks!

Average of ratings: -

Re: Themes in 1.5 - in a Mobile Phone

by Jens Gammelgaard - Monday, 31 January 2005, 5:05 AM

wink Hello Mobile Folks!

I use my 3G mobile phone even with a Moodle version 1.4.3 theme, that works so well, that studying a MBA wouldn't couse blindness. I can only imagine what huge layout you should be able to get out of a PDA big grin .

So when I am in the train Moodle stands for Mobile Object-Oriented Dynamic Learning.

But, for those folks that 'only' have xhtml browsers in their mobile device, I am sure they will really look forward for the 1.5 themes, regarding the xhtml structure.

BR
Jens

Average of ratings: -

Re: Themes in 1.5 - in a Mobile Phone

by Timothy Takemoto - Monday, 31 January 2005, 10:07 AM

Can you phone handle cookies?

Average of ratings: -

Re: Themes in 1.5 - in a Mobile Phone

by Jens Gammelgaard - Monday, 31 January 2005, 3:15 PM

Hello Timothy!

Since you operate in the 3G country nr. 1 (Japan) then I am not surprised to hear that you are the first to be curious on this topic. wink And I feel it is an honor to give you an elaborated answer:

This is what my phone supports so far:

Browsing of HTML content Images, including GIF, JPEG, PNG, TIFF and BMP formats Bookmarks and folders History Configurable cache JavaScript Cookies and cookie management Forms Security via HTTPS (if supported by the device), basic authentication HTTP, HTTPS, mailto, FTP, and gopher URLs Viewing of ZIP, Microsoft Word, Microsoft Excel, Corel WordPerfect and Adobe PDF documents Viewing of images at their full size or scaled to fit the device's screen width Optical character recognition for faxes and scanned documents Easy to use with no horizontal scrolling required Support for Unicode and many character encodings

BR
Jens Gammelgaard

Average of ratings: -

Re: Themes in 1.5 - in a Mobile Phone

by Timothy Takemoto - Tuesday, 22 November 2005, 5:17 PM

You have a very cool phone.

Average of ratings: -

That "skins" thing I don't get

by Amy Bellinger - Sunday, 30 January 2005, 8:28 AM

Kids get it though, WinAmp skins, AIM icons. Seems dumb to me, and I'm with you, I'd tend to deny the privilege to student users. I see Dan's point about student blogs, though. They'd probably love it...

Hey Martin, where would you like comments on the 1.5 themes. I set up a dev site today and would like to help if I can. Call me shallow, but the looks of a thing are important to me. I haven't been active in testing and don't know how you like things done. Just post here? I suppose you've noticed or others already have pointed out the vestigial orange in the calendar. You'd prefer seeing a list after a thorough going-over?

Tell me how what kind of help will help most, what kinds of things to look for, which modules haven't been looked at much at all, etc.

Average of ratings: -

Re: That "skins" thing I don't get

by Martin Dougiamas - Sunday, 30 January 2005, 1:05 PM

Yes, thanks, Amy, it'd be very helpful if you post lists of things here.

Orange calendar borders - gone

Average of ratings: -

Re: Themes in 1.5

by W Page - Wednesday, 26 January 2005, 4:35 AM

QUOTE: Martin D
"I've turned it a fairly plain white theme (reminds me of iPods

). This is the new default for new installations (bye Moodle orange!)"

That mean Martin! evil

WP1

Average of ratings: -

Re: Themes in 1.5

by Bernard Boucher - Wednesday, 26 January 2005, 5:22 AM

Hi,
speaking about Moodle orange, what about using that Moolde logo or a similar one?

Bye,

Bernard

Average of ratings: -

Re: Themes in 1.5

by Genner Cerna - Wednesday, 26 January 2005, 8:32 AM

By the way Martin its nice to see, if the blocks are join together. Saw a Sample in the forum somewhere looks better.

Nice theme... go 1.5!

Average of ratings: -

Re: Themes in 1.5

by Urs Hunkler - Wednesday, 26 January 2005, 4:45 PM

Hi Genner,

you will be able to control the distance between the blocks by CSS.

Urs

Average of ratings: -

Re: Themes in 1.5

by Amy Bellinger - Friday, 28 January 2005, 1:09 PM

Cell-specific padding, too?

Average of ratings: -

Re: Themes in 1.5

by Urs Hunkler - Friday, 28 January 2005, 3:50 PM

Hi Amy,

if the blocks use lists, then cell-specific padding could be possible too. If you are interested please look at the Discussion about Blocks.

Urs

Average of ratings: -

Re: Themes in 1.5

by Martin Dougiamas - Wednesday, 26 January 2005, 5:23 PM

I have no plans to change the Moodle logo - I like it as it is and IMO brands are not something that should be messed with too much. You're welcome to make one for your own site if you really feel it's necessary but please don't distribute themes with modified logos.

WP, there will still be an orange theme in the distribution (under a different name like "standardorange" or "original") but it just won't be default.

Average of ratings: -

Re: Themes in 1.5

by W Page - Wednesday, 26 January 2005, 6:53 PM

QUOTE: Martin D
"WP, there will still be an orange theme in the distribution (under a different name like "standardorange" or "original") but it just won't be default."

Martin not mean

WP1

Average of ratings: -

Re: Themes in 1.5

by Bernard Boucher - Wednesday, 26 January 2005, 9:39 PM

Martin,
sorry i didn't want to modify Moodle logo only "match" its colors with the theme!

Bye,
Bernard

Average of ratings: -

Re: Themes in 1.5

by Martin Dougiamas - Thursday, 27 January 2005, 9:11 PM

Yeah, I know, but well, the colour is really part of the identity IMHO.

Average of ratings: -

Re: Themes in 1.5

by Tony Silva - Saturday, 14 January 2006, 11:41 AM

Hi Martin,

The Moodle logo is known the world over to look the way it does on your site -- I wouldn't think of changing it, but I would be inclined to replace it with a text link if it clashed with my theme.

I was looking at the Joomla! logo manual earlier this evening and they defined a policy (as much as open source anything can have a true policy) for the display of their mark. Essentially, you either do black & white, halftones, or display it in its true colors (or flat versions thereof). Perhaps you could authorize a standard B&W Moodle mark and a halftone mark. Either of these would work on any site for those who wish to use it.

Blessings,

Telejoke

Average of ratings: -

Re: Themes in 1.5

by John Gone - Friday, 4 February 2005, 9:22 AM

This is likely the wrong place for this but I just wanted to add a link to MSN as it's scripted in Strict XHTML 1.0 and CSS 2.0 and is table-less.

Will wonders never cease..?

Average of ratings: -