The performance guys have been hammering hard on the overlay... So yeepee it is very close to usable now! So go and first install this patch http://drupal.org/node/615130#comment-2399984 or maybe a later one in this issue that might be even faster.
Still some issues remain: If you click through admin screens a lot, the overlay gets on your nerves. Why is this?
1. this one is easy: in Firefox a force scrollbars CSS property is missing, hence the overlay jumps a bit horizontally which is more visible than in other designs because of the heavy contrast between overlay background and condent area. Class added in this patch, and (surprisingly first) I had to add it to Garland. So one cannot control non-core themes. This is likele to be less of an issue with sites that have more content and users, as content-lists and similar won't be as short and always exceed the window.
2. This is way trickier but also more fun: The contrast is too heavy. While the strong black-white-effect between overlay background and content area looks sexy at first look, it puts strain to your senses when you use it more. So I propose remove some of the pretty and make it more every-day-usable by making the background brighter towards a middle-grey.
Have been playing with options, a starting point may be the visible setting in the patch to sett the background color to #555 and raising the opacity to 0.85. Personally I'd go even farther and try the also included #666 and opacity 0.9.
Also left in the original setting for comparison. To compare, best just outcomment unwanted settings. File is: modules\overlay\overlay-parrent.css
The background looks not quite as pretty, and a bit more "dirty" with the lighter grey, but what is being discussed a lot is the every-day usage of the overlay, and for such this might be much better.
This - killing several problems with one stroke - also solves some other UI problems for me: The Close button now stands out much more and is easier findable, which has been an issue in some user tests I performed.
Also the top toolbar stands out more, which also was an issue, because people hardly clicked there, maybe thinking it was not part of the active interface, whatever.
Whatever this comes up to: let's start playing around whith color and opacity of the overlay. There is lots of room for improvement with this oh-so simple trick IMHO.
To really compare keep clicking around in the admin area for some time, then the solution hopefully begins to shine :)
| Comment | File | Size | Author |
|---|---|---|---|
| overlay-lighter-background.patch | 1.07 KB | eigentor |
Comments
Comment #1
yoroy commentedCare to share a screenshot?
Comment #2
dries commentedI played with this patch and, at least for now, I still prefer the darker background (i.e. without the proposed patch). The original feels cleaner and less noisy to me. Reducing the background color makes things a bit messier, which puts strain on my senses.
Comment #3
eigentor commented@Dries you may be right. I noticed when playing around that it reduces focus. Still gotta try out more.
@yoroy will do.
What helps is putting the width of the overlay to 85% (like it once wlas) through this width is hardcoded into the javascript (eek)
Comment #4
jensimmons commentedAnyone considering the opacity on this overlay should think about the fact different computers render contrast/color very differently. Whatever is decided needs to look good on several machines, not just the one you are looking at. Look at it on a PC and a Mac. On a desktop screen and a laptop screen. On a new machine, and on older ones....
Comment #6
jensimmons commentedSo the above patch changes the background color from #000 to #555 and the opacity from 0.7 to 0.85. Basically making the dark grey background a medium grey and making that background less transparent, covering up the website more.
I don't like this change either. It muddies things up — making it harder to see the website in the background.
If a change were to be made, I would leave the background color at #000, and change the opacity from 0.7 to 0.65. This simply makes that dark grey background a bit more transparent — lightening things up (if the theme is a light colored one), and making the website show up a bit more. It's a subtle difference, just 5% lighter. I wouldn't make it much lighter than this.
Also, this should be tested with a dark theme. Right now I bet we are all looking at it with Garland in the background. A dark theme will have a different effect.
Comment #7
yoroy commentedleft current, right proposed in the patch:
Not a fan either but haven't used overlay extensively yet. now that the performance patch is in probably a lot more, but so far I don't really see problems with the current contrast/transparency ratios.
Comment #8
Bojhan commentedSadly, as I tried this patch too - I am here to agree with yoroy and Dries that the tone change is not looking all to well. Marking this won't fix.