David Scotson

I've come across what I think may be a bug while styling the 'tabs' that first (I think) appeared in Glossary but now are used in Quiz and probably a few other areas.

The problem is with tabs that are classed as inactive. All tabs are either active, meaning you can click on them to take you to another tab, selected in which case they are the current tab, are highlighted and aren't linked, or inactive which effectively means you can't click on them as they are not links but is used in two very different situations.

• In Glossary, where you might be waiting for people to add entries for you to approve, the "waiting for approval" tab remains inactive until there is actually something to approve.

• In Quiz there are submenus of tabs. Clicking on the "reports" tab displays another row of three tabs below it. The "reports" tab now becomes inactive as you can't click it, but it is actually closer in kind to selected as it is now a heading for the sub-tabs.

Possibly because of this confusion the standard theme tabs seem to fall between two stools and the inactive tabs look neither particularly disabled, nor particularly highlighted.

Obviously this situation would be even worse if inactive tabs and sub-tabs were combined in one set of tabs.

potential solutions

1. Change Glossary so that it no longer conveys state via the tabs. The "waiting for approval" tab will always be active and if you click on it when there are no pending definitions it will say so. (If some more pro-active notification is needed then just some text saying "x definitions awaiting approval" could do the same job)

2. Change Quiz so that tabs with submenus are classed as something else, selected would probably work but maybe another state entirely would be best to allow for different styling opportunities.

I think either of these alone would fix the problem, but probably both should be implemented. Simply disabling a tab doesn't give that much information. A tab that said "no-one has submitted any definitions yet" gives far more information about how to proceed. Okay, in that example it's fairly obvious but there may be other occasions when a tab is inactive and it's not so obvious what the user should do to change that state of affairs.

Another version of Kubrick for people to experiment with.

Improvements include:

• easy header image replacement (follow instructions in README.html which should also appear if you click the information link on the Theme choice screen)
• a fix for the Opera small screen issues (the use of the CSS background: shortcut without specifying a color seemed to confuse it. There are some interactions with the easy image replacement so it may not be 100% fixed but should be better at least, with further improvements to come)
• a new look for discussion forums. I can't decide if this look is too much or not. I'll add a little spike so that it looks like the avatar is talking in a comicbook bubble style and that will either push it over the edge into overly cute, or make it just right. (I'll probably implement something similar for Glossary too, though that's a bit more complex with multiple formats).
• Note the hover effects on the discussion posts, it's one of my favourite features, and keeps less important info in the background until it's needed.
• a lightweight, no-image version that retains the general look without using any background images (see instructions in README.html).
• a .PSD file to allow greater customisation possibilities for those with Photoshop skills.

ongoing work:

• general improvements to the typography (I'm not sure if this is a bad interaction with the standard theme or not)
• figuring out what the heck happens when you switch to a right-to-left script.
• since most of the work I've done is irrelevant to the two-column look it's probably worth knocking up a three-column version that can leverage that effort.
• making the choice of header text and subtitle more intelligent
• generally tracking down various nooks and crannies where the theme could do better.

Again, I've done only the briefest of testing on IE (I'm aware of a thin white line on the left hand side of the screen and a few other minor cosmetic issues)

A screenshot.

Thanks for the screenshot but I can't seem to replicate this. What version of IE and Windows are you using?

I take it you have an up-to-date 1.5 version of Moodle, with a standard _Standard_ theme and there's no user entered HTML or CSS in the Site description that might be causing this. If not then I'm kind of stumped.

How do u change the size so it fits the whole of screen?

Basically, you don't. The Kubrick theme I'm copying is a fixed width design that is always 760 pixels wide (as opposed to a liquid layout that expands and contracts with screen size).

This means that those with larger screens will just get more whitespace to either side of the central area. Not that I think this is a bad thing. Greater whitespace and thinner text columns were two of the main drivers for choosing this design in the first place.

However, that width of 760 pixels was chosen so that it would fit neatly on screens of 800 pixel width (generally considered the low end of desktop screen resolution). You could, if you wanted to, alter the images used in the theme so that it fitted into the next size up (1024 pixels) but bear in mind this will probably cause trouble for those with smaller screens and create unreadably long lines of text.