Moodle in English: Moodle 2.0 themes and z-order

Moodle 2.0 themes and z-order

by Tim Hunt - Monday, 25 October 2010, 10:20 PM

I have had a number of bug reports in the quiz, where some things (like YUI pop-ups) got hidden behind other things with the wrong z-order.

Bascially, it seems that everyone wants 'their' stuff on top, no matter what, so we are getting into an arms race.

I think we need some simple guidelines, so that things always come out in the right order. Something like:

In general, you should almost never need to specifiy z-order in your CSS. the normal order of elements in the page should take care of matters. However, if you cannot avoid using z-order, pease follow these guidelines:

Content for this particular page should use z-orders below 100 (however, this is one place that z-order should really never by needed).
Things like navigation pop-out menus, for example in blocks and themes, that need to appear on top of the rest of the page, should use z-order of 500.
Pop-up JavaScript dialogues, for example confirmations, should use z-order 1000.
Help balloons should use z-order 2000.

I just made up those categories of thing and z-order numbers. Someone who knows more than me should improve this.

Average of ratings: Useful (1)

Re: Moodle 2.0 themes and z-order

by Mary Evans - Monday, 25 October 2010, 11:39 PM

I think you mean z-index Tim?

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

The z-index property is supported in all major browsers.

Value	Description
auto	Sets the stack order equal to its parents. This is default
number	Sets the stack order of the element. Negative numbers are allowed
inherit *	Specifies that the z-index should be inherited from the parent element

* No versions of Internet Explorer (including IE8) support the property value "inherit".

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Tim Hunt - Tuesday, 26 October 2010, 5:08 AM

Yes, sorry, I meant z-index. I think my point is still valid though.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mary Evans - Tuesday, 26 October 2010, 6:28 AM

Yeah! It is...however I wasn't knocking your thoughts on this topic, Tim, I was just clarifying it for others who perhaps don't understand the logic behind the z-index ordering system.

I have a problem with one of my Moodle Themes where some small image elements have planted themselves on top of a dropdown menu, but it only happens in IE. It's oviously one of those things that will continue to puzzle designers, and frustrate users when the ordering gets out of control. As no matter what index number I choose for the menu the image still gets on top!

Cheers

Mary

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Frank Ralf - Tuesday, 26 October 2010, 3:24 PM

Hi Tim,

This is a reasonable suggestion and should be moved to Moodle Docs IMO.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Tim Hunt - Tuesday, 26 October 2010, 7:11 PM

I think our knight is shining armour, Sam Hemmelryk, is going to come charging in, sweep up these proposaly, and not only finish them and put them on Moodle docs, but also implement them throughout the Moodle 2.0 themes.

Sam is also grappling with the problem that the CSS layout we are using for Moodle 2.0 cannot cope with wide content like deeply nested forum threads, and big tables like the gradebook. They just get truncated becuase the layout relys in a critical way on overflow: hidden. If you can provide any insight, please add your suggestsion to Development:Themes_2.0_overflow_problems.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Urs Hunkler - Wednesday, 27 October 2010, 4:30 AM

@ http://docs.moodle.org/en/Development:Themes_2.0_overflow_problems

I added another proposal to introduce an admin theme for all admin/settings pages as a second theme used parallel to the "nice" theme.

For example WordPress and Drupal handle the difficult to solve very different needs for admin pages and content pages by using two themes.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Tim Hunt - Wednesday, 27 October 2010, 5:03 AM

Thanks for the input. It would be really, really nice if we could stick with a 2, 1, 3 theme and make it work.

The problem with an 'admin' theme, or even an 'admin' layout used for just some pages in a theme is that it does not just affect admins. There are pages that teachers (some) use frequently like the gradebook and quiz report that have very wide tables, and really the only good UI is a horizontal scroll-bar on the page. Those are really part of the course, and so the 'admin' layout needs to look almost identical to the normal layout, or it will seem very werid.

And, when it comes to a deeply nested forum thread, where, at the moment, the reply starts disappearing, that affects students too.

How would your suggestion deal with those situations?

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Wednesday, 27 October 2010, 6:38 AM

In my opinion that suggestion about different layout for admin pages is not so bad - it is very easy to implement to any core theme (layout/admin.php) with

'admin' => array(
       'file' => 'admin.php',
       'regions' => array('side-pre'),
       'defaultregion' => 'side-pre',
   ),
in theme config.php and admin.php can use any grid system ... not only Holy Grails.

Applications like MS Word or Adobe Acrobat Reader have different layout buttons so one possible solution could be to add a simple layout switcher with yui user preferences ("full width mode" vs "block mode") or the same switcher could be used to change different variations of layout. On my test site I have used such a switcher for changing preset styles, editors and font family, changing layout using bodyclass and corresponding css for grid widths & layout divs does not cause a lot extra pain.

This nesting issue is a little complex - in my opinion we should not use right blocks at all if nesting goes to the right or if we need to use right blocks like here in moodle.org we should not use nesting at all

But we are lucky to have that menu with "Display replies flat..." option.

In wide reports scrollbars are ideal - and in some cases it migh be reasonable to remind users from using too big images with simple css that limits width of images - for example

.somewrapper img {max-width:100%;width: expression(this.width > 600 ? 600: true);}

that sets image width to maximum 600px in IE6 and to max width of div somewrapper if we use other browsers than IE6 but we could as well use that evil javascript in editor where people usually add those huge images and with a custom plugin ask/make sure that user understands that the image width/height is far too big BEFORE he/she even manages to add those images.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Urs Hunkler - Wednesday, 27 October 2010, 3:36 PM

The second theme for all admin and settings pages is seen by admins and teachers. An admin theme for all administrative work - all pages on which you change settings or edit content - has not only the advantage to offer a different page layout but also to signal with it's different look that the user needs to take extra care for what she does because she is editing/changing something.

Students never see the admin theme. That means that some pages like the user profile are displayed different to admins/teachers (admin theme) and students (presentational theme).

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Urs Hunkler - Wednesday, 27 October 2010, 3:44 PM

The forum is another beast and needs some careful thinking. The most important step will be to remove the tables.

Nesting could be done with much smaller indents. Or could be handled with no indent at all but a color scheme from light to dark, following the rainbow or something similar. Or a mixture of both.

IMO deeply nested forum threads are pain to follow. May be the actual nesting concept is weird.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Wednesday, 27 October 2010, 5:59 PM

One option is also to use tiny icons for nested posts - "pins" - over each reply so that pins and nested posts are actually flat (display:block)

For example phpBB is using different colours for replies but it is sometimes hard to distinguish the difference between colours that are very similar.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Thursday, 28 October 2010, 10:31 PM

I tested some optional ways to render nesting and current code does not give many options... however one more solution is to use minimal nesting (forum post divs are using margin for div .path-mod-forum .indent), borders and alpha-transparent png-images. With one css row

.path-mod-forum .indent {margin:1px;padding:0;border:1px solid #000;background:transparent url([[pix:theme|overlays/ol-2]]) 0 0;}

in custom theme the result looks like this:

Example 1

and with a little longer posts and different alpha-transparent png image like this:

Example 2

After 100 replies in chain this method has lost 100 x 2px = 200px in width but usually we have only few posts in chain and we reply to different people and replies.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Thursday, 28 October 2010, 10:38 PM

For example Adobe Fireworks has a good filter for creating/converting any background images to alpha-transparent png overlay images, found from Fireworks menu Filter > Other > Convert to Alpha

IE6 does not support alpha-transparency but it will show everything gray anyway...

In this example theme I have set everything transparent by default - if those forum post tables need some background (for example white) it can be done with other css for table backgrounds (until they vanish from forum posts )

My purpose was mainly to give a demo about those forum post boxes with overlay backgrounds that change darker when chain goes on...

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Thursday, 28 October 2010, 11:05 PM

And with non-transparent background for post tables

.path-mod-forum .indent table {background:#eee;}

and again different background image result looks a little cleaner. Those background images should actually be lighter if we have lots of replies.

Example 3

Average of ratings: Useful (1)

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Friday, 29 October 2010, 12:37 AM

Alpha-transparent png images do of course support all colours and mixtures of different background images - everything does not need to be grey like in previous examples. And left & right margins do not need to be the same, borders can have different widths and styles etc

In any case 30px margin for intend is too big in core themes.

Example 4

Average of ratings: Useful (1)

Re: Moodle 2.0 themes and z-order

by Urs Hunkler - Wednesday, 27 October 2010, 5:23 PM

To support understanding how the presentational and admin theme combo work I open a demo Moodle installation for a short time (probably this week).

You may go to http://chameleon-theme.unodo-design.com/ and enter as "teacher" or "student" with "Admintheme1!". The teacher sees the admin theme, the student not.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mary Evans - Wednesday, 27 October 2010, 6:21 PM

Urs are you going to put this in as a Moodle Tracker item for development, as I think it is a good idea, and worth exploring.

I like the idea of the separate Admin/Teacher theme, it works well in your demo.

Cheers

Mary

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Urs Hunkler - Monday, 1 November 2010, 4:34 PM

Mary, thanks for your positive feedback.

I don't think it's worth to create another dead end tracker issue - I have a lot of experience with dead end tracker entries.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mary Evans - Monday, 1 November 2010, 7:12 PM

Don't lose heart Urs.

Do you remember earlier this year I set up this discussion thread Moodle 2.0 - Page Layout, and of the ensuing discussion re CSS mark-up. As a result you set up a DEMO site where you kindly tried out the fluid layout I was working on as a a base for my Moodle 2.0 Themes, which was based on the percentage layout from Mike's Holy Grail site?

I keep trying to design a theme using base/canvas as parent themes, but I hate the set up, it's so fixed, so I keep coming back to my original theme 'cafelite' for Moodle 2.0 which uses the percentage layout, and it works beautifully, like sliding doors.

I was wondering if this latest issue, with the forum nesting problem, might work better with a percentage layout?

Mary

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Wednesday, 27 October 2010, 9:04 PM

Urs,

I liked your admin theme demo too but in my opinion each theme should have customizable admin pages (if needed) because all themes can have custom settings and therefore I prefer admin layout - not separate admin theme.

I give you one example: colour picker is a nice admin setting but in core themes each colour picker is in a different row which makes theme settings quite long if you want to allow theme users to define several colours in theme. In custom admin layout it is easy to add both custom css and custom javascripts to change the whole layout - attached a screenhot (scaled) how things look in standard theme and 960px grid theme (admin settings can be changed even in mobile devices with 100% one column layout when we use flexible layout - not stable Holy Grails grid).

Admin layout

Average of ratings: Useful (1)

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Wednesday, 27 October 2010, 9:30 PM

And in fact each theme can have several front page layouts, several general layouts and several admin layouts according to some selector like mobile browser detection, screen width detection (requires javascript), user preferences. I have been working on a theme that will be very flexible in every aspect and all 3 main layout files start with mobile detection and lead to mobile layout files or "normal layout files - after that I have so far set default layout grids that can be changed with user selection but I could as well allow javascript (jQuery) to change layout according to screen resolution.

I had 2 main reasons for starting to test flexible layouts: graphs and editor layouts. Current core tinymce looks the same in all themes and has some difficulties to fit on small screens & even if I have set the maximum width of jsxgraphs to 600px they can have overflow with right blocks on small screens - if screen is less than 1000px wide - and therefore I usually stack both "left and right blocks" to the left...with layout files.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Sam Hemelryk - Wednesday, 3 November 2010, 4:30 PM

Hehe can't wait to see that one Mauno

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Wednesday, 3 November 2010, 7:46 PM

I will publish the final version once all of these main changes to base theme and core themes are pretty stable - and I have checked that all layouts work on all activities like they should. Some activities like Quiz and Chat with some activity based css are rather "unpleasant cases" for "multi-layout-themes"

The main idea is actually simple: all mobiles should by default use 1-column layout but other layouts can also use this same 1-column layout or other 100% layout (full width layout) with user selection (user preference). Right now it looks like I am going to use different full width layout for wide screens - 240px width full width and 1600 px full width require some different solutions

Anyway for example the frontpage.php divides code to 2 main files frontmobile.php and frontnormal.php that continue separating layouts and css with simple bodyclasses like .layout-0 (mobile) and .layout-1 (default blocks left, other content right) and if no user preferences are detected mobiles will use layout 0, other devices 240px block wrapper (left) and other content in 720px div right with 960 grid. Default layout could of course be 1-2 100% layout (for example 25% - 75% with 0 margin and 0 padding to support also IE in wrapper divs without extra IE hacks and inside main wrappers we can use what ever extra wrappers) or any other layout grid - I have just set the default layout to 1-2 960px grid. Attached example frontpage.php.

frontpage.php

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Urs Hunkler - Monday, 1 November 2010, 4:40 PM

When Moodle would offer defined layout pages (1, 2 or how many may be necessary) which are used only for admin and settings pages, your approach and the admin theme approach could easily be implemented.

But I did't see the consequent implementation of layouts used only for admin/settings pages. May be the problems discovered lately and the work Sam is doing leads to rethinking and implementing these layouts.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Urs Hunkler - Monday, 1 November 2010, 4:31 PM

Just to inform you - as announced I closed the site again.

It's again interesting to see how interested the Moodle people are in design oriented proposals.Two persons checked the admin theme - non of the developers did.

Mauno is working hard on forum proposals. He offers proposals worth considering. Who notices?

IMO the best solution is a very flexible page structure - based on that designers can create solutions for their special tasks. Searching for the one solution fitting all situations will fail.

I'm curious how flexible the reworked forum page structure will be.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Monday, 1 November 2010, 5:37 PM

Well I suppose (with school maths) that Mary was the first one and I was the second...

I have already tested on my local install a theme that has a yui layout switcher (in addition to other user preference switchers) that can be used on any page of moodle (with that theme). Ideally most pages should have a layout that does not require any switchers but one interesting idea is seen in action in http://www.vbulletin.com/forum/ on the top right corner (my current user preference switcher - the red box with menus - is not yet ideal, I like more these buttons etc but testing with user preference menu is so much easier than changing core files layout).

Example

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Sam Hemelryk - Wednesday, 3 November 2010, 4:27 PM

Hi Urs,

As Mary said don't lose heart.

I certainly think people are interested, look at where is thread has gone in just a week.
Personally for me as a developer time is my biggest enemy especially at the moment with Moodle 2.0 due for release and so much still going on or to be done.
I keep a close eye on theme's forum, it is in fact the one forum I keep an eye on, but lately I have only been reading, not posting. I would love to have more time to actually engage in the discussion that go on in the forum but that hasn't been the reality lately. Either way don't feel like things that go on here fall on deaf ears, hell even if no developers take interest or are around to see there is always someone who is keen to know, keen to see.

You are right in noting that the one solution, the one perfect solution, doesn't exist! No matter what structure a theme uses it is not going to fit everyone's needs.
The base theme is just one theme though, and we have tried to keep the layout of the page completely separate from the content of page so that people can come in and redesign a theme's layout from scratch, I would like to think it is possible to achieve anything with the new system in Moodle 2, but yes it probably could be easier.

As for the reworked forum structure it is just the forum posts that have been reworked and unfortunately it isn't all that exciting basically it is just a translation from tables to a div structure that I tried to keep backwards compatible. However as mentioned below all modules (or at least most I think) are going to be looked as part of the move towards Moodle 2.1.

Cheers
Sam

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Saturday, 30 October 2010, 10:28 PM

Tim,

I have been thinking this forum overflow during the past few days and after Mary's post http://moodle.org/mod/forum/discuss.php?d=161298 I realized that there is a really simple solution - like admin report solution.

Forums do not need blocks - really.

I checked some forum programs and some of them use 100% one-column layout all the time which looks actually much cleaner that forum posts with blocks around.

We can use Navigation (bar or menu) and perhaps Dock or show right blocks on demand with a simple switcher (hide/show blocks) but default layout on forums could be simple one column layout.

And at the bottom of each post we could have a tiny icon or link to the top for long discussions (some where near Show parent link ) to avoid scrolling - and to allow easy access to navigation at the top

Average of ratings: Useful (1)

Re: Moodle 2.0 themes and z-order

by Sam Hemelryk - Wednesday, 3 November 2010, 3:47 PM

Hi Mauno,

It's a good thought, in fact Martin raised something similar for the report layout which we nearly went with during our discussions on this topic.
His idea was to use the entire browser width for the content and then position the blocks below the content and have them docked by default.
In the end we didn't go with it because we managed to work out a 2,1 layout for the base theme.

Despite going in a direction this is of course something that can still be done within a theme if a theme designer so desired. It wouldn't be so easy to do it for just the forum module however you could certainly do it for all modules, or I suppose for the whole theme in fact if you wanted.

Just for interest sake I've attached a theme I'm working on in my spare time. It uses a single block region (I called it something crazy like region-bar) that gets translated into a fixed position bar at the bottom of the screen that looks a little like the program bar on a mac.
That single bar shows icons for blocks and then when you mouse over the block it display in an overlay like the dock does.
This way there are absolutely NO blocks within the page flow on a any page within Moodle and of course
The theme is still very much in it's early days and presently it only works in Firefox 3+ and Chrome I think.
I should add I had to remove several icons to get it below the 100kb file size limit.
Anyway I think it is probably a prime example of how to overcome all horizontal scroll issues AND claim back all the screen real-estate for actual information.

If you (or anyone for that matter) decide to check it out let me know what you think. I'm thinking with a bit more work I'll look to submit it to contrib.

Cheers
Sam

moola.zip

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Wednesday, 3 November 2010, 7:05 PM

Than You, Sam!

I checked your theme and even as "half-finished" the idea of "bottom-dock", region-bar, is interesting and cool

On my 100% (mobile style) layout) I planned to place possibly existing blocks to to bottom with simple grid wrapper that stacks divs (blocks) by default horizontally to to bottom after content so that on wide screens blocks are vertically positioned, on typical laptops they may be on several rows (see the screenshot - in such layout caps between blocks are a tiny problem because my block divs have width 240px but height depends on block content - and on mobiles where screen width is less than 480px all blocks are in one column (or if window is resized to width less than 480px)

This overlay problem is a really complex issue but I am sure that after several trials and tests core themes of moodle will have a layout solution that solves all current layout overflow problems.

Blocks

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Wednesday, 3 November 2010, 7:20 PM

One part of this big issue is also that many files of current moodle are using in css

white-space:nowrap;

which is good if you want to keep all content on the same row but at the same time it creates some overflow problems in report tables since nowrap option means that sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line and the text continues on the same line until a <br /> tag is encountered.

On the other hand with default css (or white-space:normal; ) sequences of whitespace would collapse into a single whitespace but text would still wrap when necessary.

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Sam Hemelryk - Wednesday, 3 November 2010, 3:28 PM

Hello all,

My appologies for not having replied earlier, I have been focusing my efforts on producing a patch for MDL-25032 as per http://docs.moodle.org/en/Development:Themes_2.0_overflow_problems and whilst I have been reading what is going on I have been getting back to the task at hand rather than taking the time to reply.

Thank you to everyone for the ideas on the proposal and for the thoughts on how we could better handle situations where content is going to overflow horizontally... and of course how we could improve forum layout.

In regards to the proposal I added a chosen solution section the other day which outlines the start of what I am working on for the tracker issue.
We choose to go with a new report layout in the end. It needed to be different from the admin layout because it is something we only ever want to use on pages that really need it such as reports.
The big advantage to this is that of course it can be altered on a theme by theme basis. For base it is a 2,1 layout that works cross browser and allows the main contents of a page to extend beyond the browsers width, and when it does the browser produces a horizontalo scroll bar, which as Tim pointed out is the most accesible way to handle it.
At the same time I've fixed up most of the core themes in the patch except where noted on the tracker issue.

As for thoughts on the forums solution, I love where the discussion has gone! Unfortunatly the solution I have put forward is no where near as exciting. It is basically a translation of the table structure to a div structure where all we gain is the ability to handle overflow of forum post content in a better manner and hopefully have a little more flexibility/control over display and design.
Don't worry about all the thoughts and effort that has being put in here being lost, the main focus for Moodle 2.1 is redevelopment/improvement of modules within Moodle. I know Martin has some fantastic things planned there and I know as part of that process we will be looking at what has been said in the forums about each module and creating a proposal for improving/developing the module. During this time I am sure that this will be given all the attention it deserves.

I think I've read through this entire thread at least twice now, there are so many things being discussed and going on here I am sure there are ideas and points I have missed. So I am going to go through once more and reply specifically to posts where I've got something to add. Yell at me if I miss anything.

On a side note I have just posted a patch on MDL-25032 now and commented to the effect of the patch there. It is the purposed solution put into effect.

Cheers
Sam

Average of ratings: -

Re: Moodle 2.0 themes and z-order

by Mauno Korpelainen - Friday, 5 November 2010, 2:35 PM

Sam,

Big Thanks for your recent changes - scrollbars help a lot...

That forum post intend is still a problem - if you switch your screen resolution to 1024 x 768 px and visit some long posts with 100 or more replies you can see what happens with current indent - for example http://moodle.org/mod/forum/discuss.php?d=96160 and scroll down...

Screen

Average of ratings: -