Moodle in English: Kubrick

or...

How I learned to stop worrying and love the asymetric two-column layout

I'm working on a port of the popular Wordpress theme Kubrick. As you can see from the attached screenshot (a work in progress) or from the Wordpress Kubrick test site, two of the features that set this apart from most Moodle Themes are the thin fixed width (740 pixels) and the two-column layout.

This started off as something of an experiment but I must say it's going surprisingly well. Moodle's flexibility continually amazes me. However, I think I'm going to have to make some changes to Moodle to make this work as it should and was wondering if anyone else had played around with two column layouts?

For the time being the two questions on my mind are:

can you force all sideblocks to one side or the other via an Admin setting or via PHP code in your theme?
failing that, does anyone know why the empty left column of sideblocks grows larger in edit mode? (not the right column, where the Blocks menu turns up, but the empty side)

the manifesto

Besides being a pleasant theme to look at, there's a few serious reasons why I'm porting this theme:

there's a world of open source themes out there, waiting for the artistically challenged to steal/leverage them
my colleagues were worried that from a pedagogy/usability point of view, the course content was being usurped by sideblocks coming before them in the natural order of reading (which is left to right for English).
the wide screens of text were bugging me because of their lack of readability. This theme should be closer to the line length of an average novel or textbook.
many themes have sideblocks that are visually imposing beyond their level of importance. You can see this clearly but comparing my current screenshot (with big black headings left over from a previous theme) and the standard Kubrick side-column which is quite unobtrusive. I will also take this opportunity, if it is possible, to remove many of the sideblock icons which I think are superflous.
easy customisation. The Kubrick theme has taken the weblogging world by storm partly, I think, because it's major 'feature', the header, can be customised with ease, and the rest of it is quite subtle so people don't mind that part looking the same as many other sites.

Average of ratings: -

Re: Kubrick

by Colin Campbell - Tuesday, 7 June 2005, 6:28 PM

The Spartan simplicity of this design has a great deal in its favour, and I have a certain amount of sympathy with the manifesto too. I'm looking forward to further developments on this and hope my enthusiasm provides some warm encouragement to your efforts.
Or as one might say on the streets of Glasgow;
Pure dead brilliant idea!

Average of ratings: -

Re: Kubrick

by Urs Hunkler - Tuesday, 7 June 2005, 7:17 PM

Hi David,

great approach. Your learning environment based on Moodle is going to get a quit individual look and feel. The "Kubrick" approach just using CSS and no images is very interesting. Are you going to make your theme as "light" as the "Kubrick" startpage?

"Moodle's flexibility continually amazes me."

The main approach during my rework off the Moodle 1.5 CSS and XHTML hooks was to reach this flexibility. Great that you say this big amount of work was worth while

For courses in 2 column layouts you better create new course format files. I have had some trouble with a two column layout because the "social", "topics" and "week" formats use different column width. To use 2 column formats instead of misusing 3 column formats is the better way.

I am really looking forward to your solution. Urs

Average of ratings: -

Re: Kubrick

by John Papaioannou - Wednesday, 8 June 2005, 8:22 AM

Hi David, I 'll try to answer your two original questions as best I can...

1. Can you somehow force blocks to one side?

This is a slightly tricky question...

For starters, the block positions are dictated by the page_base derived class which describes the course (it's page_course). Now, we could definitely put some infrastructure in there which allows the page code to defer the decision to the theme, it's definitely possible.

What is slightly worrying is that if you switch e.g. from a two-column-side theme to a one-column theme, then transferring all blocks from the hidden column to the remaining one would require, hm, some evil hackery. wink

Of course, we could just let them "become lost".

Well, that's all I can think of against. It's doable. I can devote some time to putting the functionality in 1.6 dev if you want and there are no concerns about it from other people, then we can see how it goes.

2. Why does the side column grow when editing is on?

This is easy: because otherwise hidden blocks wouldn't be shown. And I don't want to go into much detail here, but this cannot be changed because it would then compromise the upgrade path of people with incompatible old-style blocks installed.

Cheers!
Jon

Average of ratings: -

Re: Kubrick

by David Scotson - Wednesday, 8 June 2005, 7:24 PM

Thanks for looking into the problem.

I've come up with my own slightly half-baked solution using CSS hackery: I've told both the left-column and the left arrow for moving blocks to that column to display:none. This means that as long as you move all blocks to the right hand side before you switch themes, that you can't move them to the left accidentally, which is good because the left column is itself entirely invisible.

Maybe a super-secret Admin command to 'move all blocks to left/right' might be handy for such themes?

Average of ratings: -

Re: Kubrick

by Urs Hunkler - Tuesday, 14 June 2005, 2:58 AM

Jon, I notice a growing demand for 2-column course layouts. It would be great, if Moodle could support 2-column layouts natively with the appropriate 2-column course formats. The formats for 2-column blocks left and 2-column blocks right must been added then. The problem with CSS hacks would not be necessary any more. On the admin page or on the themes page as an additional theme option there should be a parameter to decide for 3-column and 2-column pages with sideblocks left or right.

Perhaps this parameter could go into the theme config.php. Moodle could then automatically use the appropriate course formats.

The longer I write the clearer I see the picture and the more I like it

What do you and David think?

Urs

Average of ratings: -

Re: Kubrick

by Ger Tielemans - Tuesday, 14 June 2005, 3:30 AM

For two years we worked with hard coded 2-column Moodle(before the blocks came in.)

With blocks it is even more simple to have a 2 column view... (default in config, easy change in the database : We even created with /dbadmin/fft.php from the CVS a simple edit-view on blockinfo in the table course for each course: 37,35,3,2,4,19,60,6

BUT NOW WE ARE MOVING BACK TO THE 3-COLUMN APROACH:

left column: general menu, general settings and cues (admin, people, Calendar, the last news,recent, upcoming...)
center core: mainstream resources & activities
right column: core-supporting resources & tools (my files block, html-block, rss)

Average of ratings: -

Re: Kubrick

by John Papaioannou - Tuesday, 14 June 2005, 11:21 PM

Urs, I 'm not sure that the two-columns options should be part of the course format. We would then need two-columns weeks, two-columns topics, two-columns social and you can see that it would be a pain to extend this design in the future.

On the other hand, I much prefer making the option part of the theme. As I see it, this has several advantages:

Doesn't confuse the teachers with many "course format" options which aren't really ways of organizing the content, but rather of presenting it.
Totally encapsulates the complexity in the page class, which is the least probable piece of code to be changed/extended by people. Themes and course formats, on the other hand, are being created by the community and we want this creation to be as easy as possible.
Backward compatibility is maintained, if you use such a theme in an old installation of Moodle, then simply the two-columns restriction will not be honored but everything will work.
We could later make a "theme configuration" screen. From there, you would have the option to easily configure some settings like the expand/collapse block functionality, two or three columns in your theme and things like that. Furthermore, this could be done on a site-wide basis (admin) or on a course basis (teacher).

And the more I write, the more I think that this discussion should be moved somewhere more visible. wink

Average of ratings: -

Re: Kubrick - preview release

by David Scotson - Wednesday, 8 June 2005, 7:55 PM

Here is a sneak peek at my Kubrick theme port for anyone interested.

I have done zero testing on IE, so it may well explode, though apart from the various rough edges it appears to hold together relatively well in Firefox and Safari.

Note that if you don't move your sideblocks over to the right-hand side before selecting this theme they will (or at least should) disappear completely until you change theme again.

I'd love to hear about problems or suggestions, with screenshots where appropriate, particularly from anyone using IE, or Opera on handhelds. There's still a bit of work to be done so your input is welcomed.

(It needs Moodle 1.5 and the standard theme installed too, if that's not obvious)

kubrick.zip

Average of ratings: -

Re: Kubrick - preview release

by Helen Foster - Wednesday, 8 June 2005, 8:19 PM

The homepage looks pretty much identical using Opera 8 and Firefox 1.0.4 on Windows XP - cool! big grin

Here's a screenshot from Opera using small-screen rendering to simulate a handheld (please note that the site title is white on white thoughtful

Average of ratings: -

Re: Kubrick - preview release

by David Scotson - Wednesday, 8 June 2005, 11:42 PM

Very interesting! I'll have to install Opera for Mac and Linux and check this out. I didn't think it was that easy to simulate small screen rendering.

I'm intrigued as to why the sideblock icons show up, if everything is working as planned they should be hidden. Do you happen to have a screenshot of a standard theme to compare with?

Average of ratings: -

Re: Kubrick - preview release

by Helen Foster - Thursday, 9 June 2005, 12:18 AM

Here's a screenshot of formal white:

Attachment moodle_formal_white_opera_ssr.jpg

Average of ratings: -

Re: Kubrick - preview release

by W Page - Wednesday, 8 June 2005, 9:14 PM

Hi David!

I have a Moodle site I am working on that I do not want to publish yet therefore the header is missing in the image below. I looked at the Kubrick theme in IE. I noticed the letters/words in the course description were not spaced properly.

WP1

Average of ratings: -

Re: Kubrick - preview release

by David Scotson - Thursday, 9 June 2005, 5:57 PM

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.

Average of ratings: -

Re: Kubrick - preview release

by W Page - Thursday, 16 June 2005, 4:42 AM

QUOTE
"...What version of IE and Windows are you using?" David Scotson

Hi David!

Sorry I did not get back to you sooner. I am using IE6 on Win98SE.

WP1

Average of ratings: -

Re: Kubrick

by Mark Little - Wednesday, 8 June 2005, 8:51 PM

Nice theme... It works well in IE...

They only thing you must do before you use the theme is to remember to move all your blocks to the left, otherwise you are stuck.

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

Thanks

Average of ratings: -

Re: Kubrick

by David Scotson - Thursday, 9 June 2005, 5:42 PM

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.

Average of ratings: -

Re: Kubrick - preview release #2

by David Scotson - Monday, 13 June 2005, 11:35 PM

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)

kubrick.zip

Average of ratings: -

Re: Kubrick - preview release #2 screenshot

by David Scotson - Monday, 13 June 2005, 11:40 PM

A screenshot.

Average of ratings: -

Re: Kubrick - preview release #2 screenshot

by John Papaioannou - Tuesday, 14 June 2005, 11:09 PM

Screenshot looks very very nice! Fantastic work, David! approve

Average of ratings: -

Re: Kubrick - preview release #2 -quiz screen

by Chris Neaves - Wednesday, 15 June 2005, 12:32 AM

Hi John
Great work, I know its work in progress but they column layout doesnt seem to agree with the quiz screen I have attached a before and after screen shot. Because the quiz results and html blocks dont move laterally on the screen they disappear. Just something you may want to add to you list...

Average of ratings: -

Re: Kubrick - preview release #2 -quiz screen

by David Scotson - Wednesday, 15 June 2005, 3:40 AM

I've never seen that Quiz Results block or the Blocks editing on button either. Is this an optional add-on or have I simply not being paying attention?

At the moment the entire left-column, and anything it contains, is hidden with a CSS rule. If there are specific important things that need to be visible in the left hand column, I could put in a list of exceptions (so let me know if you spot anything), but I'm guessing that you might be able to just move the block over to the right hand side instead.

Average of ratings: -

Re: Kubrick - preview release #2 -quiz screen

by Chris Neaves - Wednesday, 15 June 2005, 8:44 AM

I think this is the only place in Moodle where the block cannot be moved left / right with the click of a icon or link.... And of course a lot of people like us live for the use of the quiz module in moodle, but if you are working out a method to make this theme a 3 column layout then there is no need to worry about this hiccup.

Chris

Average of ratings: -

Re: Kubrick - preview release #2 -quiz screen

by Joseph Rézeau - Friday, 9 September 2005, 1:36 AM

Hi Chris

I'm using Moodle 1.5 and I don't see any problem with moving the Quiz results block to the left and to the right column (see attached screen dumps where the move right & move left icons are clearly visible).

Which means that this Quiz block should not be a problem for using the Kubrick theme.

Joseph

Average of ratings: -

Re: Kubrick - preview release #2 -quiz screen

by Joseph Rézeau - Monday, 12 September 2005, 9:50 PM

Hi Chris and David,

I have to correct my previous mail blush . I did not understand that you were talking about the Quiz Resuts & HTML block(s) which can now optionally be displayed when a Quiz starts (idem with an optional HTML block in the Chat module).

I think those options appeared with version 1.5.

Those blocks are correctly displayed (in the left-column) in the current version of the Kubrick theme, see attached screen dump.

Joseph

PS Would be a good idea to start a new thread to collect the problems (& workarounds) of 2-column themes a la Kubrick for Moodle?

Average of ratings: -

Re: Kubrick - preview release #2 -quiz screen

by John Papaioannou - Wednesday, 15 June 2005, 9:48 AM

David,

It's possible in Quiz and Chat. There's a corresponding $CFG->allowblocksinactivites (or something) setting which controls the possibility to do it. And no, you can't move them because those pages only have blocks on the one side.

You could probably just

body#course-view #left-column {
display: none;
}

and not have side effects.

Average of ratings: -

Re: Kubrick - preview release #2 -quiz screen

by David Scotson - Wednesday, 15 June 2005, 6:19 PM

That seems to do the trick quite elegantly.

Does the appearance of this extra column have anything to do with why the #footer is within the central column (or sometimes missing completely) within Quiz?

Normally this would just make Moodle subtly lopsided but this theme assumes that the #footer comes after everything else.

Actually, looking at Chat it seems okay, so it must just be a Quiz thing, though the actual Chat window itself gets added to my long list of pages using frames that look rotten with the Kubrick theme.

Average of ratings: -

Re: Kubrick - preview release #2

by Karl Peltomaa - Thursday, 16 June 2005, 4:44 AM

Hi David,

Nice work on porting Kubrick to Moodle. Before Moodlers adopt the stylesheet, I thought everyone ought to know that although the Kubrick renders a pretty page - it also introduce problems. I have used it for a web log and found that it breaks in an ugly way when you increase the font size. If you use Firefox, hit CTRL++ a few times and watch what happens. Compare this to for instance the moodle.org home page.

Those who must accommodate students with disabilities should be careful adopting fixed width style sheets. The creators of CSS, Lie and Bos recommend the use of relative units (such as ems or percents) which allow the containing boxes to grow with increasing font size. The graphic designer who made Kubrick used pixels to achieve full control over the visual effects and rendering of pages using his style sheet. The result looks pretty, but one needs to keep in mind that it is not accessible out of the box. I look forward to see what results you get with your Kubrick-ized Moodle.

Average of ratings: -

Re: Kubrick - preview release #2

by David Scotson - Thursday, 16 June 2005, 6:03 PM

I'm actually quite interested in in the accessability side of web design, though I'd put myself in the real world accessibility camp with people like Joe Clark, so I'd probably quibble with broad statements like 'x is not accessible' (for who? in what way? why?) and would hate for people to think they can't use this theme for accessability reasons when the real world impact would be probably (in my humble opinion) be a net positive for usability and accessibility.

As far as I can tell, only those with a need for the largest of print and who also own rather large screens but don't use a browser (or an OS) with an adequate zoom function are likely to have any trouble with this theme's fixed width, and even then it's not an insurmountable barrier, like for example web pages that break completely if you don't have javascript enabled or text that is embedded in images (like many moodle theme's logos) that can't be read by the non-sighted unless you remember to add appropriate alt tags.

On the other hand, forcing all blocks to the right makes life a lot easier for those with audio browsers and phone/pda browsers as they get to the main content faster without having to scroll past/listen to various blocks each time. The thinner reading columns makes it easier for everyone but may be particularly useful for those with reading difficulties and the re-implementation of tabs makes it easier for those with poor motor skills to hit the target links.

So I would encourage anyone planning to use this theme to weigh the pros and cons and consider their audience.

Average of ratings: -

Re: Kubrick - preview release #2

by Chardelle Busch - Monday, 20 June 2005, 11:20 PM

Hi David,

I ran across this theme a couple of days ago and I got so excited. I love it. I had gotten rid of the icons in blocks a long time ago by commenting them out of every block--didn't know you could do it with CSS. The first thing I did was shorten up the header and I've got it set up just fine (1.5), but a couple of minor things I've noticed:

The footer isn't high enough to accommodate the performance stuff so it breaks the background in IE, but I don't want that anyway so just deleted it.

The help pages bring up the background image which makes it too wide for the window, requiring side scrolling. I'm not sure where the width of the help windows is defined. Any ideas how to fix this?

I'm happy to get rid of the jump to menu from the header, but I do miss not having the loggedinas in the header. I've tried adding it but adding "echo menu" brings up the jump to on subsequent pages and I don't want that. I tried adding loggedinas as a function of the header in weblib but couldn't get it to work. Do you know how I can add it to the header on all pages?

The biggest problem is chat. Did you get it to work? In IE it wants me to download the users.php file, and in FF I get the following message in the right frame:

XML Parsing Error: syntax error Location: http://trainingandcoachingcenter.com/mod/chat/gui_header_js/users.php?chat_sid=xW9OxSgMKFoQfTQo02bhbzl7RiRb8rfC Line Number 2, Column 45:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1<br />

The SCORM module also uses frames and things are really funky. I'm going to try to work with that to see if I can get it to work better, I'll let you know what I come up with.

And lastly, I don't have a way to test this with dialup, so I was just curious, do all of the jpeg files slow things down much?

Thanks so much!

Average of ratings: -

Re: Kubrick - preview release #2

by David Scotson - Tuesday, 21 June 2005, 6:08 AM

Thanks for the feedback Chardelle, I'll do my best to sort out any problems you encounter. Here's some quick responses.

I tried a quick fix for the footer thing in preview release #3 (I've been ignoring it as it only shows up in debug mode, and then only on Internet Explorer) but I've not yet tested it in IE
The help pages are probably the same problem as the frames. Basically anything that isn't a full size web page is going to look silly with a giant header. Shouldn't be too hard to fix just some special case rules in the CSS. I'll probably just hide the header for the frames, and perhaps create a mini-header for the help. (Though to be honest I'll probably also file bugs asking for many of the uses of frames to be done away with as soon as possible too. Frames rub me the wrong way for all sorts of reasons.)
I take it you've spotted the 'logged in as' link in the footer? There is a bit of a dearth of options when it comes to what you can include in the headers and footers without hacking around in the PHP guts of Moodle. My standard, but slightly unsatisfying, CSS hack is to display: none things I don't want to see and this seems to work if you place the echo $menu within appropriately targettable container (e.g. div class="hidden"). You could even specify it so that the language menu and the login info appear but not the jump menu or any other combination. It would be nice to be able to specify the exact location of language and login info separately though. (A devious part of my brain is thinking that you could echo $menu twice with appropriate classes and hide the parts separately but that's definitely getting further into ugly hack territory, especially as display: none doesn't always apply to certain accessibility tools).
note that the display: none hack, which I also used for the menu icons, doesn't actually stop the images etc. being downloaded, it just stops them being displayed. So for performance and clarity your commenting out solution is actually better though it is more work, and it's what I'm working towards generally rather than constantly downloading and then hiding things with CSS.
I can't really explain why the Chat isn't working, I've perhaps broken something important in the header? The right frame comes up blank for me in Safari but I'll look into it.
I don't really use SCORM much. Do I need a SCORM (learning object?) in order to test it? Where would I get one?
I've not tested on dialup yet. There's also various web page optimising tools that will measure download size in a more objective manner and give and idea for comparison, though I've not used those either. I'm guessing the theme is fairly lightweight by Moodle theme standards. There aren't that many images and the original Kubrick theme images are actually very well compressed by the original author. Some are smaller than the enrolment key icon for example. Also the fact that they are mostly background images should mean they can load in the background (appropriately enough) without delaying layout of the page. The other images aren't as small (though by no means large) but I'll see what I can do to compress them further once they are finalised. The theme should work without images too for anyone who likes there themes to be really minimalist.

Average of ratings: -

Kubrick - preview release #3

by David Scotson - Tuesday, 21 June 2005, 5:05 AM

A third sneak peek.

improvements in this version

new tabs
even less outlined boxes and horizontal rules
stripey logs
the return of the grey side column
a few Internet Explorer fixes (still far from pixel perfect)

upcoming

fixing pages with frames
calendar CSS
trawling through the less common modules and patching them up (where necessary)
better commenting in the CSS so people can see what's going on and steal individual features of the theme
rewriting the manifesto (see first post)
recruiting help to find bugs in the more obscure corners of Moodle on various platforms
writing up/fixing all the various bugs/issues I tripped over in the process of creating this
3 column version

The grey right-column was an original feature of Kubrick that I didn't think could be done with Moodle for various subtle reasons but I managed to figure out a slightly wacky CSS hack to make it work. This will almost certainly cause problems somewhere but it works on the versions of Firefox, Safari and Opera that I've tested so I'll cross that bridge when I come to it.

Comments and descriptions of problems are welcome (with screenshots and browser/OS details if possible, thanks!).

kubrick.zip

Average of ratings: -

Re: Kubrick - preview release #3

by David Scotson - Tuesday, 21 June 2005, 5:17 AM

obligatory screenshot

Average of ratings: -

Re: Kubrick - preview release #3

by Darren Smith - Tuesday, 21 June 2005, 5:33 AM

Surrrr...weeeet!

I am downloading it now. Move over corporate theme ....

Apparently my mac laptop is on order tongueout

EDIT: Dunno if it's just me but I lost all of the blocks on the left when I switched to this theme.

Problem is, they must still be somewhere are they don't appear in the add blocks list.

Firefox + XP

Average of ratings: -

Re: Kubrick - preview release #3

by David Scotson - Tuesday, 21 June 2005, 6:11 AM

Yes, that's kind of the point! If you really want to use this theme you need to move all blocks over to the right before you turn the theme on. I'm hoping there will be an easier way to do this in the future but for now it's a manual task.

Check out the start of the thread for the reasons behind this.

Average of ratings: -

Re: Kubrick - preview release #3

by Chardelle Busch - Tuesday, 21 June 2005, 12:06 PM

Hi David,

Well I didn't pay attention that the performance stuff only showed up in debug. As for the loggedin, I'll try to figure out what you said tomorrow wink

. I love the new zebra stripes!!!!

As for SCORM, I'll email you a zipped package that works in 1.5. When you add it as a scorm, set the width of the frame to 570 and then it actually looks fine in FF, it hangs over the background some, but that's fine with me. The problem is with IE--the frames show through and it just doesn't look okay at all. SCORM does have it's own stylesheet if that helps any.

Oops, just noticed you don't have an email posted, maybe you can email me, or I think maybe you can download a SCORM from the demo course or maybe the exchange?

And here's a tip Darren, if you've already created a course and forgot to move your blocks, just delete the theme, the course will be a mess, but at least you can move your blocks to the right, then re-upload the theme. (Can you tell I did this a couple of times already?)

Average of ratings: -

Re: Kubrick - preview release #3

by David Scotson - Tuesday, 21 June 2005, 5:10 PM

I've unhidden my email address (I only hid it to test something to do with the potential for anonymous postings and forgot to change it back) so I'll have a look at the SCORM if you send me it.

I was wondering why you needed to delete the entire theme, but I see now that if your admin blocks were on the left hand side, then switching themes back is going to be tricky. I should really put a more obvious warning about this in the theme selection info.

You could probably just type in the address for the theme selection page, even if you can't see the link to click it .i.e. add:

/theme/index.php

onto your Moodle's URL.

I've also attached a version of the theme that demonstrates the login/jump menu hack I was talking about. This theme has $menu in the header, which dictates where the 'logged in as' link, language menu and jump to menu appear (they don't all show up at once, but they do appear in the same place).

The language menu can be turned off in config settings, and the last entry in kubrick.css stops the jump menu from displaying in the header so all you see is the 'logged in as' link wherever you position the $menu in the header. I just stuck it under the heading, the blue text on a blue background doesn't really work that well, but hopefully this demonstrates the idea at least.

kubrick.zip

Average of ratings: -

Re: Kubrick - preview release #3

by Darren Smith - Tuesday, 21 June 2005, 5:23 PM

You could probably just type in the address for the theme selection page, even if you can't see the link to click it .i.e. add:

/theme/index.php

I went to /admin/ and changed themes that way. You can then move blocks and change back.

Average of ratings: -

Re: Kubrick - preview release #3

by Chardelle Busch - Wednesday, 22 June 2005, 10:57 AM

I suppose you could probably go directly to the url for a course settings page too, if you've set the theme for a course. I hadn't thought of that. That's the problem I had--I have separate themes for each course, and of course the admin block is on the left so you can't access the course settings. But deleting the theme and then re-adding it wasn't a big deal.

I sent you a scorm module David. And I'll try the latest theme code.

Average of ratings: -

Re: Kubrick - preview release #3

by Chardelle Busch - Wednesday, 22 June 2005, 1:28 PM

Okay, yes if you have changed your course settings to the new theme without moving left blocks first, then go to yoursite.com/course.edit.php?id=(the course number)--I'm really so dumb.

Thanks David, I have the loggedinas on the front page now. You know, the gradient course view section content background--reminds me of miniblinds

.

I do like the new tabs (or non-tabs really), because the moodle tabs really don't do well on top of a colored background.

One thing I noticed, the calendar block content is aligned to the right instead of centered--where would be the best place to change that?

Average of ratings: -

Re: Kubrick - preview release #3

by David Scotson - Wednesday, 22 June 2005, 5:44 PM

One thing I noticed, the calendar block content is aligned to the right instead of centered--where would be the best place to change that?

I think that may be an optical illusion.

The blocks are all left aligned but the actual content is pushed in by about 15 pixels more than the heading so that you can scan down and easily see where a new block begins.

Because the Calendar block is rather big and square, taking up the entire space allotted, it looks like it is aligned right, rather than aligned left against a slighly inset margin.

Calendars is something I'm looking at right now so it's probably best to hold off on making any changes to them yourself, though I'm not really sure I can do much about it without deviating from the original Kubrick look. Though I am trying to come up with a thinner Calendar so that might solve it.

Average of ratings: -

Re: Kubrick - preview release #3

by Chardelle Busch - Wednesday, 22 June 2005, 10:25 PM

Oh, of course, the calendar block content is just following the block padding blush

.

As for the view of scorm modules. It looks like what is happening in IE, that isn't happening with mozilla, is that the page is getting pushed over to the right, but the header isn't. I tried making a few changes to #page so it would behave like the header but, as you can tell, I really don't know what I'm doing when it comes to CSS. And, of course, the module is displayed in the page so maybe that's the difference. I also noticed that the top line in the scorm navigation (in a table in playcorm.php) does not break in IE whereas it does in FF, so it pushes the frame even further to the right. The scorm module has it's own styles page if that would help any. Here's a screenshot.

Average of ratings: -

Re: Kubrick - preview release #3

by David Scotson - Thursday, 23 June 2005, 12:23 AM

Try adding left to this line in image.css:

#page           { background: #fff url("kubrickbgwide.jpg") repeat-y top; border: none; }

to give this:

#page           { background: #fff url("kubrickbgwide.jpg") repeat-y top left; border: none; }

This seems to stop things falling apart as much when I simulate the large content by setting #content width to 1000 pixels in Firefox.

And the following line stops the iframe from being having an invisible background which distractingly shows a two-tone bacgkround if the SCORM itself doesn't set a color and it's width spills over the border.

td.top iframe{ background-color: #fff; }

Warning: not tested on windows/IE yet!

You also seem to have a large amount of padding on the left hand side, earlier versions of Kubrick had this but the more current ones have very little padding, that would help fit more content in the central column.

I really like your header image, you should think about extending the sky right up to meet the top of the page (and maybe get some sand dunes for the bottom?). I think that would fit more with your customisation than the standard Kubrick corners.

Average of ratings: -

Re: Kubrick - preview release #3

by Chardelle Busch - Thursday, 30 June 2005, 11:03 PM

Hi David,

Just wanted to follow up on the too wide problem above--I fixed it--but did not need to change the background transparency of the iframe.

One little thing, have you noticed that the links (and the date) in the forum posts-- in FF, they only have color on hover, and in IE some of them are always grey. This discuss this topic links work fine. Any ideas?

Average of ratings: -

Re: Kubrick - preview release #3

by David Scotson - Thursday, 30 June 2005, 11:13 PM

With the hover thing, I know in theory what's happening, but am finding it difficult to get hold of various Microsoft OS and browser combinations to check these things out in practice.

Basically, you can put a hover effect on anything in most browsers. I've used this so that secondary information within forumposts are greyed out and not competing for attention with the main content until you hover over them, when they are darkened and the contrast increased to make them more readable.

In IE you can only apply hover effects to hyperlinks. I was originally going to just leave the text in their hover ('on') state but Urs reminded me that you can use javascript in a .htc file to simulate the same kind of hover effect in IE. The effect can be processor intensive, particularly on long pages, so I've tried to target it as narrowly as possible. If it only works sometimes, then I've probably targetted it too narrowly in some way.

I'm trying to get Virtual PC set up again (I upgraded to Mac OS X Tiger and the Virtual PC update to make it work again on this OS only came out this last week) which should make it easier for me to carry out such tests and iron out the niggly problems with IE.

I'm glad you got the SCORM working. I never actually got your SCORM to load (something about a manifest) but the test SCORM I found on the web loaded and worked okay apart from the transparent background issue.

Average of ratings: -

Re: Kubrick - preview release #3

by Chardelle Busch - Friday, 1 July 2005, 11:38 PM

Hello again David,

Did you ever figure out the popup window problem? (My last problem to solve) Would there be a way to have the popups (e.g., help and messaging) open with a wider width? I've tried several things but haven't been successfull, for example I tried changing the popup javascript in lib/javascript.php and have tried changing window widths in the code, for example messaging/index.php. But no success. Any ideas?

Thanks

Average of ratings: -

Re: Kubrick - preview release #3

by David Scotson - Saturday, 2 July 2005, 4:10 AM

There's two parts to the solution:

I accidentally deleted some PHP logic from header.html, which meant that the header was being printed on every page. Now it only outputs the header if $home or $heading are true.
There are a few places that need their background images, colors and widths adjusted in the CSS. I've got the following code at the end of my CSS, but I've perhaps missed a few places:


#help,
#message-index,
#mod-chat-gui_header_js-users,
#mod-chat-gui_header_js-chatinput {
    width: 90%;
    padding: 0 20px;
    margin: 0;
    background: #fff;
}

#help #content,
#message-index #content,
#mod-chat-gui_header_js-users #content,
#mod-chat-gui_header_js-chatinput #content,
#help .generalbox,
#help .generalboxcontent,
#help #footer,
#help #page,
#message-index #page,
#mod-chat-gui_header_js-users #page,
#mod-chat-gui_header_js-chatinput #page {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}

I've uploaded a zip with these changes so you can see how they work, but it's not a real release as I'm right in the middle of mucking around with some image border ideas, new icons and background images amongst other things.

(I also had to take out the .PSD file and a couple of other things to get the zip under the 500KB limit on this forum)

kubrick_2.zip

Average of ratings: -

Re: Kubrick - preview release #3

by Chardelle Busch - Saturday, 2 July 2005, 7:37 AM

Hey David,

Thanks for fixing the duplicate headers thing--much better. And I agree about the icons, I have taken the nuvola set and adapted those for my module icons--they go with this new modern theme so much better. FYI, the f1 and f2 pngs didn't do well on a light background, so I re-exported them as png24 and they are better.

As for the popup windows well.....I don't know. I noticed that the popups take their theme from the home theme, no matter if the course you are accessing them from has a different theme. Would you know of a way to have them take their theme from a particular theme? For example, they work great if the home theme is set to standard. Would it be possible to have them take their theme from the standard theme even if it isn't set to the home theme?

Thx
Chardelle

Average of ratings: -

Re: Kubrick - preview release #3

by David Scotson - Saturday, 2 July 2005, 5:33 PM

I've not really played around with the course theme stuff. There may be a way to check in header.html if you are in a popup, and if so use different CSS for whatever theme you need but I don't know offhand what that PHP would look like.

Average of ratings: -

Re: Kubrick - preview release #3

by Chardelle Busch - Saturday, 2 July 2005, 10:29 PM

Well, the popups don't return a header, if that makes a difference. I was going to try to add something about using the standard theme in the function popup in weblib but here's my problem: I don't know to "hard" refresh a popup window. I can't get them to change to test them.

Average of ratings: -

Re: Kubrick - preview release #3

by Chardelle Busch - Monday, 11 July 2005, 9:03 AM

Hi David,

I wanted to note that your code above for the pages the open for popups works great by adding background image: none; -- then the windows don't have any problems.

I'm not sure how to specify the places, but one place it isn't working is for the messaging "discussion" window (the messaging index does work, but the actual instant messaging window doesn't). I tried these: #message-discussion,
#message-messages, but neither worked. When I view the source for this window it shows html for framesets--so I'm not sure what to do. Any ideas.

Thx

Average of ratings: -

Re: Kubrick - preview release #3

by Matt Cromwell - Friday, 17 February 2006, 11:28 PM

I've tried several times to download the kubric_2.zip attached above and it consistently says that I do not have write access or that the disk is full (but it's my desktop, and I've unpacked 1,000's of .zips on it!).

I'm anxiously waiting for the latest version of this theme and a .zip which I can successfully unpack. Any progress or suggestions...?

MC

Average of ratings: -

Re: Kubrick - preview release #3

by Matt Cromwell - Saturday, 18 February 2006, 6:52 PM

Sorry to reply to my own post. But I tried to unzip the kubrick_2.zip at home and it worked fine. I'm having a great time experimenting with it. So far the other faculty also find it a much more clear, less-busy, and peaceful layout.

I added a dashed line between the topic sections just for creating a clearer separation by adding this code in kubrick.css:

div.summary    {

    border-top: 1px dashed #1B4D8A;

    padding: 5px 0px 10px 0px;

I replaced the <h1>moodle test line from the header.html and added an echo to create a shadow effect for the course title. A screenshot is attached.

My last question is that I want to have a different header image for the #home-header area than the rest of the inside pages. How do I do that?

Thanks for a really satisfying theme!

Average of ratings: -

Re: Kubrick - Where's the administration block?

by Josep M. Fontana - Sunday, 19 February 2006, 4:50 AM

I just selected the Kubrick theme for one of my courses and I note that the administration block has disappeared from the main page of the course!!

Now I cannot even change the theme again because the theme was selected via course settings and that is not accessible anymore. Does anybody have any idea about what is going on? How can I make the administration block come back?

Josep M.

Average of ratings: -

Re: Kubrick - Where's the administration block?

by Art Lader - Sunday, 19 February 2006, 5:08 AM

Hi, Josep,

Can you change the theme selection in the database via phpmyadmin?

Just a thought...

-- Art

Average of ratings: -

Re: Kubrick - Where's the administration block?

by Josep M. Fontana - Monday, 20 February 2006, 12:02 AM

Thanks a lot Art!

It didn't occur to me to do that. You are doing your contribution as a Moodler not only in MoodleDocs

you've been contributing already for a long time in the forums with helpful answers like this.

Josep M.

Average of ratings: -

Re: Kubrick - Where's the administration block?

by Joseph Rézeau - Sunday, 19 February 2006, 5:35 AM

Poor Josep!

You're a victim of the "vanished left column" syndrome in the Kubrick theme... sad Which one are you using? Kubrick or K2?

Anyway, I have analysed the problem and provided a workaround on this very thread here.

If you have access to your Kubrick theme, just add the following lines in the kubrick.css file (right at the end)

.editing#course-view #left-column,
.editing#site-index #left-column {
display:block;
width:auto!important;
}

Et voila!

For another 2-column, fixed-width theme à la Kubrick, you might look at my own orange chocolate theme.

Enjoy,

Joseph

Average of ratings: Useful (1)

Re: Kubrick - Where's the administration block?

by Josep M. Fontana - Monday, 20 February 2006, 12:15 AM

Thanks very much Josep + h

I added your lines to the kubrick.css file and now everything is OK. Relief!

I was using K2, I think (at least the file I downloaded was kubrick_2.zip).

I have your orange chocolate theme already installed. I downloaded it when I went into your site to check out the exciting work you are doing with regular expressions in the quiz.

Actually, while I'm talking to an expert I might as well ask you about something else. I see that the header in the kubrick theme gets the name of the site (in big letters) and the name of the course (in smaller letters). I can see how you change the size and colors of the letters in this header in the css file, but where do you change the actual contents of the title for the header? Say I want to have something different from the name of the site and the name of the course in my header. What do I have to modify? Thanks in advance.

Josep M.

Average of ratings: -

Re: Kubrick - Where's the administration block?

by Joseph Rézeau - Monday, 20 February 2006, 6:39 AM

Hi Josep,

>while I'm talking to an expert... blush

In the Kubrick (and K2) themes, both names are in the header.html file. The big title (test moodle) is hard-coded. The name of the site and the name of the actual course are both output by using the variable $heading, as shown below (near line 40).

What happens with those php variables is that their output is different according to which part of the site we are on (not so easy to guess).

<div id="header">
<div id="headerimg">
<h1>test moodle</h1>
<div class="description"><?php echo $heading ?> </div>
</div>
</div>

I hope that helps,

Joseph

Average of ratings: -

Re: Kubrick - Where's the administration block?

by Josep M. Fontana - Tuesday, 21 February 2006, 12:24 AM

Good. That does help a lot.

Josep M.

Average of ratings: -

Re: Kubrick - Where's the administration block?

by Julian Whitehead - Sunday, 19 February 2006, 6:01 AM

You can of course enter the admin with a direct url something like:

http://mysite.com/mymoodledirectory/admin

This often helps when things get a little exciting.

Average of ratings: -

Re: Kubrick - Where's the administration block?

by Joseph Rézeau - Sunday, 19 February 2006, 4:46 PM

Hi Julian,
Thanks for this reminder. Let's not forget however that a number of "ordinary teachers" (like myself) do not have admin privileges and so cannot access the Moodle site of their institution this way.
Joseph

Average of ratings: -

Re: Kubrick - Where's the administration block?

by Josep M. Fontana - Monday, 20 February 2006, 12:27 AM

Hi Julian. Thanks for your advice.

I've solved my problems by adding the lines Joseph suggested to the css file. I'm curious to know, though, how I could have solved the problem from the /admin page. As far as I can tell, that would have allowed me to get to the themes management and I could have selected a theme for the site. But my particular problem was that I had selected that theme from within a course.

OK, now I'm thinking while I write. You mean that I could have gone to variables and then turned off the 'allowcoursethemes' option to 'no', right? That would at least have gotten me out of my immediate problem which was to access the administration block.

I wouldn't have been able to go back to 'allowcoursethemes' set to 'yes', though, because the moment I did that, I would loose the administration block again within that course. And, of course, if 'allowcoursethemes' option was set to 'no', I couldn't have switched the theme to another one different from Kubrick from within that course. That was a scary situation.

Josep M.

Average of ratings: -

Re: Kubrick - Where's the administration block?

by Ray Lawrence - Monday, 20 February 2006, 8:16 AM

Josep,

Perhaps another strategy (in the unlikely event that you get into a position of difficulty again big grin

) might be to edit config.php to allow session themes and set a session theme for the course in question to allow you to access the missing course element.

Best wishes

Ray

Average of ratings: -

Re: Kubrick - Where's the administration block?

by Josep M. Fontana - Tuesday, 21 February 2006, 12:23 AM

Thanks Ray,

I hope it is as unlikely as you say

.

Josep M.

Average of ratings: -

Re: Kubrick - preview release #3

by Joseph Rézeau - Thursday, 15 September 2005, 8:51 PM

Hi David,

After some tinkering around with your Kubrick theme I'm glad to announce a CSS solution for the "vanished" left blocks problem.

As mentioned in this thread, one pitfall of the Kubrick theme 2-column design is that if you are changing from a classical 3-column theme and have left some blocks in the left column, then you won't see them because the left column is hidden in the CSS (display:none).

This is especially problematic if it is the Administration block which has been left over in the left column from a previous theme because then it is hidden, which means you can't enter it to change your course settings and change to a standard 3-column theme.

My solution is as follows: in kubrick.css

after:

#course-view #left-column,
#site-index #left-column {
    display: none;
}

add:

.editing#course-view #left-column {
  display: block;
  width:auto;
}

Et voila!

That way, in edit mode, a teacher retains the possibility at all times to view and move leftover left blocks to the right from within the Kubrick theme, but the left-column itself remains hidden at al other times. An added bonus, provided by the width:auto; parameter is that, even in edit mode, the left column will not eat up valuable screen space if if is empty (i.e. after all blocks have been duly moved to the right column).

Joseph

Average of ratings: -

Re: Kubrick - preview release #3

by David Scotson - Thursday, 15 September 2005, 9:39 PM

That's a very clever solution. I'm impressed

Average of ratings: -

Re: Kubrick - preview release #3

by Bhupinder Singh - Saturday, 1 October 2005, 12:37 PM

Hi David,

I am a late joiner to moodle. I saw your scheme. It is cool.

Is it possible to get a final version of the same???

Garry

Average of ratings: -

Re: Kubrick - preview release #3

by Joseph Rézeau - Saturday, 17 September 2005, 1:34 AM

Oops

The workaround given in my previous post was no good.
Here is a correction:
in the Kubrick css,

instead of

#course-view #left-column,
#site-index #left-column {
display: none;
}
write:

body.course#course-view #left-column,
body.course#site-index #left-column {
display: none;
}
body.course.editing#course-view #left-column,
body.course.editing#site-index #left-column {
display:block;
width:auto!important;
}

Joseph

Average of ratings: -

Re: Kubrick - preview release #3

by Barry Mansfield - Saturday, 17 September 2005, 6:33 AM

Thanks for that wonderful fix and all your help Joseph!

Average of ratings: -

Re: Kubrick - preview release #3

by Urs Hunkler - Saturday, 17 September 2005, 6:00 PM

Joseph, why did you post your correction? Your first version is completely sufficient. The ID of an element is the most specific identifier. Did it not work this way in your theme? If not there could be some different points.

In your second version you add the tag name and a CLASS. THis way you specify the one and only body element with 3 identifiers instead of one in your first version. That is not necessary and has the disadvantage to blow up the CSS code. When working with the very complex Moodle CSS we should try to avoid every character we can.

To be more specific than necessary has also the disadvantage in a parent theme environment. If for example someone wants to use your theme as parent and wants to overwrite this property she has to use exactly the same identifiers for the element to change the styling.

Urs

Average of ratings: -

Re: Kubrick - preview release #3

by Joseph Rézeau - Saturday, 17 September 2005, 7:50 PM

Urs, thanks for your patience and pedagogy! wink

The reason I thought I had got my first solution wrong is that I had later on modified it slightly (I had somehow removed the space between .editing# and course-view, and it no longer worked).

I now confirm that - as you point out - my first version does work and is sufficient.

Thanks a lot for all your explanations. I must say that the sheer amount of IDs and classes for some elements in Moodle 1.5 CSS stylesheets is quite daunting. I quite understand that the number of IDs and classes should be kept to a strict minimum in the CSS, in order to avoir blowing up the code.

It might be a good idea to give some examples of when to use and when not to use IDs and classes in the hierarchy when customizing a theme.

Thanks a lot

Joseph

I'm hoping to make my orangechocolate theme (based on a 2-column layout) available very soon.

Average of ratings: -

Re: Kubrick - preview release #3

by Bhupinder Singh - Thursday, 26 January 2006, 10:17 PM

Hi Joseph,

Where can I download KUBRICK.

I am running Moodle 1.5.3

Have not been able to get a source to download the same.

Shall be grateful for your help.

Garry

Average of ratings: -

Re: Kubrick - preview release #3

by Peter DeBruyn - Friday, 27 January 2006, 7:53 AM

In an earlier reply -> by David Scotson - Saturday, 2 July 2005, 04:15 AM, in this post is a zip file called Kubrick_2.zip. I think that is the latest release. I used Edit>find and searched for .zip in my browser to find it. I'm not sure how to set up a link to the exact spot.

Average of ratings: -

Re: Kubrick

by Joseph Rézeau - Friday, 9 September 2005, 3:29 AM

Hi David,

Congratulations on your efforts to develop the Kubrick theme for Moodle & for making it available. I especially like: the 2 column design, the 800x600 resolution taken into account, the overall sleek design.

I am currently designing my own theme, partly based on Kubrick, i.e. using 2 columns and a fixed width design with a body 760 pixels wide.

I have met with problems with some content overflowing out of the fixed 760px width. Some are unavoidable, others are due to current limits (or bugs) of Moodle 1.5 itself. Here is an example (with a workaround).

Glossary -> Add a new entry (Edit)

The two help links (+icons) to the left of the text editing htmlarea block are unfortunately located within a table cell with a "nowrap" attribute. This means that that table cell will always be as wide as necessary to accomodate the longest of the two help links' text. The problem is hardly noticeable in English: Write carefully and About the HTML editor almost fit in, especially at the fairly small font selected for links in the Kubrick theme.

However, in other languages, the translated strings can be significantly longer, e.g. À propos de l'éditeur WYSIWYG in French, which means that the htmlarea block is pushed to the right, overflowing the 760px-wide body... This is not dramatic, but it's not very aesthetic either.

Workaround

First of all, that "nowrap" attribute should not be there in the Moodle code, it's useless and deprecated.

In the meantime, it's possible to over-ride it in the CSS with this simple class coding:

.entrybox td {
white-space: normal;
}

See the result on attached screen dump 2

All the best,

Joseph

Average of ratings: -

Re: Kubrick

by Joseph Rézeau - Friday, 9 September 2005, 8:54 PM

Follow-up to my previous post. As I should have anticipated blush , there are other instances of the dreaded nowrap table attribute in other modules, which cause the same overflow problem on fixed <800px themes...

One radical solution to over-ride the whole bunch of them is:

td {white-space: normal;}

Can anyone report adverse effects of this radical approach?

Forgot to mention my settings in my previous post: Moodle 1.5, MSIE 6 & Firefox on Windows XP.

Joseph

Average of ratings: -

Re: Kubrick : final version for 1.5.3+

by Anil Sharma - Saturday, 10 December 2005, 3:54 PM

Hi !

This post has become really long !

Wondering : Does the theme work for 1.5.3+ ? And which is the final, final download of the last updated version ? If you could just attach the file in reply to this, would be a great help !

Average of ratings: -

Re: Kubrick : final version for 1.5.3+

by Wen Hao Chuang - Wednesday, 26 September 2007, 12:58 AM

Actually, anyone tested this theme with 1.8.x or 1.9 beta? Just wondering. It looks really great!

Average of ratings: -

Re: Kubrick

by John Keyworth - Monday, 29 October 2007, 1:33 PM

Hi there

I'd like to know how to remove the blue header at the top please as i don't need it - our moodle sits in a frameset with the school logo and menu in the top frame, and moodle in the bottom.

Many thanks

John

Average of ratings: -