Lighten up the admin header and footer

[jane]

I'd like to lighten up the admin header to make the backend feel nicer. The current header is a little heavy, and the darkness is really a carryover from previous designs. Attached is a mockup from johnonolan of the UI group. This ticket is just to change the css of the header and footer to be the same shade as the header bars for the dashboard modules. This should be done in both the gray and blue admin styles. After this ticket is closed, we might want to look at changing the 'visit site' button to be a link instead of a button, as the button looks a little weird.

[jane]

Lighter header comp

[nacin]

I saw this on the UI blog and definitely liked this one. I know we're going for contrast, but the button and drop-down seem a bit too dark. Also, if made a little lighter (but dark enough to be still fine accessibility-wise), changing the button to a link might not be necessary. (Unless of course there are other reasons for it.)

Also, we need to make sure the text and link colors are different in "Howdy, admin | Log Out" -- looks like they're the same in the mockup.

[jane]

@nacin: agreed that we'll probably want to revisit the button and link colors as well, but figured would have a ticket just to get the background lighter first, since that was a discrete task, and the arguments over shade variations for buttons etc can go on a long time. :) Planning to check in with MT on the buttons.

[johnonolan]

Agreed on buttons - I'll do some work on that this week.

RE development of the bars: This new bg is now moving away from the previous block-colour and is using a subtle gradient + two built in 1px borders (top and bottom). I've created a 1px by 46px PNG8 image which I'll attach after this message, this should fit inside the exact dimensions of the current #wphead.

This can repeat-x both for both bars, however #wphead will require an additional border-bottom:#fff 1px solid; to complete the look :)

Hope that's all ok!

[matveb]

@johnonolan: can you also upload the WordPress logo you used in the mockup? I can then build a quick first patch for it.

[johnonolan]

Hi Mat, coming right up - give this one a try, hopefully the quality on the gif transparency won't be too harsh.

[dd32]

I'm finding the attached background image is -too- light, Ideally to me it should be a darker shade than the metabox handles for a start.

The favourite actions dropdown will need a change of tone too i think with this.

The only other "problem" i see with it, is that the Selected menu item also clashes a bit, I find the dark menu item against the rather light header just too much of a contrast change.

As for the footer, Its virtually invisible with this at present..

See attached screenshot. As for the colour choices of the text, I've chosen #464646 as thats the logo colour.

[johnonolan]

Hi Mat, yeah there are several things not quite right in that screenshot - I think it'll probably be easier if I have a go at a patch for this myself so that I can fix some of these issues as they come up.

Keep in mind that this ticket does not include the buttons - those are still to be finalised.

[johnonolan]

This is my first ever patch - so I'm hoping I've created the diff file correctly.

[johnonolan]

Looks like that went ok. Relevant image files coming up for /wp-admin/images/

If I've done anything wrong in the way I've submitted the patch then please let me know for future reference!

[johnonolan]

BG image for header and footer

[johnonolan]

Replacement WP logo for header

[johnonolan]

Screenshot of working patch

[nacin]

Replying to johnonolan:

If I've done anything wrong in the way I've submitted the patch then please let me know for future reference!

You don't need to worry about the compressed files. We'll handle that anyway on commit, and it keeps the patches small and neat.

[matveb]

Replying to johnonolan:

Looks like that went ok. Relevant image files coming up for /wp-admin/images/

If I've done anything wrong in the way I've submitted the patch then please let me know for future reference!

I could not apply your patch because it was looking for this file path: Users/john/Documents/wordpress-trunk/wp-admin/css/colors-fresh.css

I am uploading a new diff based on yours. Check if this works for you.
I also changed the user_info links to #111 instead of #000.

[johnonolan]

Full patch for this ticket added above, this includes main admin header/footer bg, admin header favorites menu, deletion of visit site button (RIP), and login header bg. Also cleaned up some of my own code from the last version of the patch.

Details of images (so far just for the primary "fresh" color set)

DELETE:
wp-admin/images/fav.png
wp-admin/images/visit-site-button-grad.gif

ADD:
wp-admin/images/admin-header-footer.png
wp-admin/images/login-header.png

REPLACE:
wp-admin/images/fav-arrow.gif
wp-admin/images/wp-logo.gif

Image files to follow (ignore all other images in this ticket up until this point)

[johnonolan]

Removed accidental line deletion from previous patch on line 1355 of wp-admin.dev.css

[johnonolan]

The alternate colors don't break with this patch - so feel free to do some tire-kicking. I have an updated patch with the alternate colors ready, but (in short) I think it's painfully ugly and inconsistent, so I'm going to run that one by the UI group first!

[ryan]

(In [13824]) Ligten header and footer for gray color scheme. Props johnonolan. see #12586

[ryan]

Committed so everyone can have a look.

I'll do the file deletions once we're settled.

[nacin]

(In [13826]) Remove one-pixel white bottom border off new light gray header. After some discussion, mainly due to screen options/help tabs. see #12586

[iammattthomas]

patch for updated logo

[iammattthomas]

New WP logo for header

[iammattthomas]

Worked with Ben Dunkle to get a redrawn WordPress logo that's sharper and better complements the WP admin icons. wp-logo.png replaces wp-logo.gif in /wp-admin/images/.

[nacin]

(In [13842]) New WP logo for admin header. Props Ben Dunkle and Matt Thomas. see #12586

[johnonolan]

Replying to nacin:

(In [13826]) Remove one-pixel white bottom border off new light gray header. After some discussion, mainly due to screen options/help tabs. see #12586

Hold off on this - tabs are currently under revision by TECannon for the UI group to better complement the new header bg color. I think they're going to solid white - which will blend with the white border.

[nacin]

(In [13843]) New WP logo for admin header. Props Ben Dunkle and Matt Thomas. see #12586 (checks in images for [13842])

[nacin]

Replying to johnonolan:

tabs are currently under revision by TECannon for the UI group to better complement the new header bg color. I think they're going to solid white - which will blend with the white border.

We can add it back if it works, no problem there.

There was something posted to the wp-testers list about possible back compat issues with body.login styling. Thinking we can move the login-header image to login.css, then just use body, which will enable easier overrides by existing skins. (Fwd'd you the email about it with some notes.)

[johnonolan]

Replying to iammattthomas:

Worked with Ben Dunkle to get a redrawn WordPress logo that's sharper and better complements the WP admin icons. wp-logo.png replaces wp-logo.gif in /wp-admin/images/.

Nice idea - I assumed we required IE6 support, which is why I didn't do this originally.

[johnonolan]

This replaces existing image file of the same name, no patch required

[scribu]

Replying to nacin:

(In [13826]) Remove one-pixel white bottom border off new light gray header. After some discussion, mainly due to screen options/help tabs. see #12586

I'm seeing a one pixel white border at the top. Is that intentional?

[ocean90]

Replying to scribu:

Replying to nacin:

(In [13826]) Remove one-pixel white bottom border off new light gray header. After some discussion, mainly due to screen options/help tabs. see #12586

I'm seeing a one pixel white border at the top. Is that intentional?

Thats because of the background image, it has at the top a white line.

[johnonolan]

Replying to scribu:

Replying to nacin:

(In [13826]) Remove one-pixel white bottom border off new light gray header. After some discussion, mainly due to screen options/help tabs. see #12586

I'm seeing a one pixel white border at the top. Is that intentional?

Yes, there is also a slightly darker grey 1px border at the bottom of bg image. This matches the style used in the main menu on the left - however it did look clearer/better with the 1px white border at the bottom too. We'll be able to finalise this once the UI group has decided on the screen-options tabs next week.

[jeremyclarke]

darker but still light-grey header background gradient

[jeremyclarke]

Screenshot with darker light-grey gradient.

[jeremyclarke]

I'm with dd32 in thinking the current shades are problematic and can definitely be improved by changing the brightness to match the rest of the UI.

The gradient in the site header should match the ones in the screen options tabs and widget headers. They are too similar to not match IMHO.

After this first commit the header is much lighter than the other gradients which actually makes it seem less important. In theory we could change the other gradients to be lighter than they currently are but that seems like the wrong direction to go in. Making the header a bit darker feels a lot better to me, more solid or something, and it won't look empty on low-contrast screens.

I created a darker version of the background graphic including making the white line a light grey instead (lighter than the lightest part of the gradient). Attached as [darker]admin-header-footer.png

Also attached is a screenshot of how the darker gradient looks ( darker-gradient-screenshot.png ). I think it matches the existing gradients pretty well and captures the intent of the original design, which can be seen here compared with the current header and another option in this image by john: ​http://twitpic.com/16mf3n/full

THAT SAID: I am against this mid-grey scheme entirely. The header should be a dark grey gradient to match active sidebar headings.

IMHO the header should not be the same color as the screen options and dashboard widgets (as well as the post metaboxes and visual editor() which share the same gradients), instead it should match the active sidebar section header (i.e. Dashboard for dashboard screen) as shown in the middle example above.

The medium grey gradient is overused in this design and the overall effect is mushy and low-contrast, everything blends together and seems made of the same plastic. Having the dark header makes it stand out more, bracketing the rest of the UI. I think the high-contrast of the old header is one of it's virtues, and I always liked the way it integrated (even though now I admit that it's color doesn't match anything else). FWIW I also think the pure-white favorites menu feels very strange and not button-like, it feels like a text field. With a dark grey gradient we'd be free to use some light grey UI for the favorites menu, preferably the light button style from Save Draft.

This medium-grey approach is also a big change from the old version. Sure its nicer than the 2.9 style, but the amount of difference will be upsetting to users for no good reason. If we used the dark grey of the sidebar headings then the change will be much more subtle and ultimately no one will complain at all. We will just have rebalanced the colors so that they are more harmonious (and added a good-looking gradient and fun logo in the process).

If you look at that twitpic comparison ( ​http://twitpic.com/16mf3n/full ) of the old->dark->light versions I think the middle one is pretty convincing. I'll try to work up a full screenshot to compare the full pages with dark and light gradients in the header and footer.

[iammattthomas]

I think the middle one is quite compelling; it reduces the heaviness of the original header but does help anchor the top of the page. Agreed about the currently-implemented light background "blend[ing] together" and "made of the same plastic." Also agreed about the favorites button currently looking like a text field -- I assumed that was still being worked on.

I don't have any kind of authority here, just offering my opinion, but I'd be in favor of going for something like the middle option jeremyclarke mocked up. Link again for reference: ​http://twitpic.com/16mf3n/full

[nacin]

Replying to iammattthomas:

I don't have any kind of authority here, just offering my opinion, but I'd be in favor of going for something like the middle option jeremyclarke mocked up. Link again for reference: ​http://twitpic.com/16mf3n/full

I do think the light header grows on you, but I'd tend to +1 this. Just a note though, that's from JohnONolan, who mocked that up for the UI group. The UI group chose the light version.

[jeremyclarke]

Alt version of admin with dark header/footer based on john's original variations

[jeremyclarke]

@nacin Yeah I was going to say that it wasn't my original mockup. John was on the right track from the start and both of these options are good, though I think the ui group missed a few important considerations in choosing the light version so I wanted to bring up the issue again.

Above is a screenshot of the admin with a follow through on John's original dark-grey mockup. It matches the active sidebar heading and I think it shows off the value of the darker look.

As nacin said the light version definitely grows on you, but I can't help thinking that the contrast provided by the darker one is worth any downsides it might have.

I made the screenshot by modifying the background image and using firebug for the CSS, so I don't have a patch. I'll try to do that now. The title text was #f6f6f6, the header and footer links are #ffffff and the header and footer non-link-text is #eee. The favorites menu uses the background image from the dashboard widgets and I added some of that text-shadow sauce that makes it all sparkly ;)

I also used the subtle and beautiful WP logo from the ​http://wordpressfoundation.org/ page. IMHO its the nicest WP logo I've seen so far and should be considered for the admin header whether we go with the light or dark version.

I blogged about the situation with screenshots here for anyone who wants a recap:
​http://simianuprising.com/2010/03/27/wordpress-admin-header-redesign-light-or-dark/

And here are direct links to the screenshots for consideration:

Light version: ​http://simianuprising.com/wp-content/uploads/2010/03/darker-gradient-screenshot.png

Dark version: ​http://simianuprising.com/wp-content/uploads/2010/03/screenshot-dark-grey-header.png

Side-by-side(huge): ​http://simianuprising.com/wp-content/uploads/2010/03/wp-header-light-dark-comparison.png

[voyagerfan5761]

Personally I really like Jeremy's version. Coordinating colors and changing the logo worked wonders for me.

[johnonolan]

@jer - In short, you're a bit late to the party on this one. The dark and light versions which you referenced were created, compared and decided upon by the UI goup almost a month ago - and many hours of work have been put in based on those decisions. The shade of grey which dd32 referred to above was also not the one which made it into the latest nightly build.

These sort of things (esp. UI related) aren't really things that you can come in at the last minute on (as you saw myself try to do with the new tabs on the themes page ;) The best thing to do is attend the weekly UI meetings where all these things are discussed, and decisions are made.

If you want to submit mockups - the best place for that is ​http://make.wordpress.org/ui - Where Jane Wells (who has final signoff) will be most likely to see it. Trac is (mostly) for code.

[carlhancock]

Replying to jeremyclarke:

Above is a screenshot of the admin with a follow through on John's original dark-grey mockup. It matches the active sidebar heading and I think it shows off the value of the darker look.

Jeremy, you are rehashing something that has already been debated. What you are proposing was already part of what John mocked up at the very beginning of this process. His original mockups consisted of 3 different header variations (dark, medium and light) and the UI team opted for the light version. I'm not sure what you are proposing that hasn't already been proposed and decided against...

[jeremyclarke]

Replying to ryan:

Committed so everyone can have a look.

Sorry if you guys feel like this is totally settled already but I don't think its too late to review the decision at this point. This was the first commit and it was a draft that has had other criticisms in this ticket. My changes aren't any more significant code-wise than the tweaking that we should be doing either way.

I thought those who weren't at the meeting might like to be reminded of the decision that was made and the option that was decided against, especially those who weren't aware that the change was coming before this initial commit.
People who I've shown this to tend to like the darker one after a minute of convincing, I wanted to see if many other people here might agree.

FWIW John, I liked your designs and am really glad that you decided to put them together in the first place, the options you gave were just so good that I fell in love with one :P Whichever shade ends up in core it will be a big improvement on what was there before.

[jane]

Everyone is right, sort of.

The UI group chose the light header based on the mockups of the three, and there was a lot of design-specific discussion around it that I don't think belongs on Trac. As has been suggested, we have a UI blog and a UI chat now, ostensibly so that development tickets can focus more on implementation and code than on picayune aesthetic details, and so designers can guide design decisions rather than them being made only by developers. The newly contributing designers who have worked on stuff like this should be appreciated. They're not trying to take something away, they're trying to contribute their professional expertise. People who do both should be involved in both.

That said, almost every design change is an experiment. You can't tell from comps how something will feel when it's in use in a live application, and the process is basically make a decision, see how it feels, edit if needed.

I also voted for the lightest header in the UI meeting, and didn't go for the middle one because it was a bit too dark, and picked up the nav on state color, which I looked weird. I've heard from a number of people who didn't like the light one at first, but say it has now grown on them and they like the lightness of it. For me, using it live has made me like it a bit less. The 1px white line is part of it; it makes the application feel unanchored to be separated from the top of the browser window by that line. Another part is that now the on state (for Dashboard, in all the mockups people are doing) is the most prominent thing on the screen, which I find unsettling. Either way I think we should rethink the on-state color; it's darker than it needs to be and looks muddy.

Making the header gradient just slightly darker, like in ​http://simianuprising.com/wp-content/uploads/2010/03/darker-gradient-screenshot.png feels appealing in terms of providing a bit more of a visual anchor. I definitely do not want to go back to the super dark header. And the light header could still be great if we got rid of the white line on top and lightened/changed the on state for the nav. I'm comfortable trying either direction as a next step.

For the record, though, "tend to like the darker one after a minute of convincing" is generally a poor argument: there should be no convincing going on when soliciting unbiased feedback. :)

[johnonolan]

Also for the record - I've made the suggestion that the darker variation of the header could become the new alternate admin color scheme, replacing the classic blue which has a lot of inconsistencies and other issues. (Jane you should have details / screenshots of this in an email)

I think the white border at the top only looked good when in harmony with the white border at the bottom which was stripped out when it went into trunk, so agree that can be nixed if the one at the bottom is definitely going.

[jane]

The white border on the bottom made the screen options and help tabs not flush with the header. In any case, the gap between browser and header makes it feel unanchored.

[johnonolan]

I'll upload a fresh image for that now - we also need a decision on whether IE6 is being supported, if so then the PNG version of the logo + patch shouldn't have been committed.

[iammattthomas]

Replying to johnonolan:

I'll upload a fresh image for that now - we also need a decision on whether IE6 is being supported, if so then the PNG version of the logo + patch shouldn't have been committed.

Alpha transparency is supported in IE6 with a single line of CSS; it's more a matter of needing a patch for IE6 if we're supporting it.

[johnonolan]

Replying to iammattthomas:

Replying to johnonolan:

I'll upload a fresh image for that now - we also need a decision on whether IE6 is being supported, if so then the PNG version of the logo + patch shouldn't have been committed.

Alpha transparency is supported in IE6 with a single line of CSS; it's more a matter of needing a patch for IE6 if we're supporting it.

I've yet to see an IE6 PNG transparency fix that works - but if it can be done then that's good, I think the new version looks excellent.

[cklosows]

I've run into a few issues with this TRAC update when using custom Login Pages. It happens with the body.login being attached to an image. When trying to use a custom background image, I've attached it to the body element.

The issue I'm having is with the order of the cascade in the CSS. The file /wp-admin/css/colors-fresh.css is loading after the /wp-content/themes/themename/custom-login/styles.css.

Personally I'd prefer that any theme based CSS loads after any core based CSS. I know this might cause some issues if the theme designers use style names that resemble the core styles. Anyone else have thoughts?

When I return from work, i'll take a few screenshots with Firebug and Firefox so I can show the differences in the changes that are made.

[markjaquith]

(In [13917]) Update admin-header-footer.png. see #12586. props johnonolan

[johnonolan]

Replying to cklosows:

Nacin has suggested adding the bg image call to login.css rather than colors-fresh.css, would this solve your issue?

[johnonolan]

Moves background image call from colors-fresh.css to login.css in order to allow overwrites.

[johnonolan]

Replaces image of same name. Removes white borders.

[johnonolan]

Updates fav menu to use gradient again, fixes padding.

[johnonolan]

Replaces image of same name. Required for 12586.5.diff

[johnonolan]

Replaces image of same name. Required for 12586.5.diff

[johnonolan]

Replaces image of same name. Required for 12586.5.diff

[nacin]

(In [13967]) Move wp-login.php background from body.login to body selector. props JohnONolan. see #12586

[nacin]

(In [13968]) More admin header improvements. props JohnONolan. see #12586

[nacin]

(In [13970]) Restore arrow used in widgets panel. Doubled as fav-arrow.gif until [13824]. see #12586

[johnonolan]

Replaces image of same name. Gradient adjustment.

[johnonolan]

Replaces image of same name. Gradient adjustment.

[johnonolan]

Replaces image of same name. Gradient adjustment.

[nacin]

(In [13973]) A lighter gradient for the favorite actions menu. props JohnONolan, see #12586

[nacin]

(In [13976]) Fix the sticky footer. hides a scrollbar. see #12586

[jeremyclarke]

tweaked header graphic. slightly darker and smoother than previous version

[jeremyclarke]

Demo of difference between tweaked header bg and previous one

[jeremyclarke]

Looking at the most recent version it seems that the shade of grey in the header is still problematically lighter than the dashboard widget headings, screen option tabs and visual editor chrome. All of them are darker but still too close visually to feel like a seperate shade.

Re-inserting my previous darker version of the light header background image (not my radically different dark one) it seems too dark now. I think the right answer is either a version that is slightly darker than jononolan's or else to make the various other UI elements mentioned lighter to match the new header.

Personally I think matching the existing shade of the other UI elements is a good idea, especially because they are dark enough to be distinct from the inactive sidebar menu headers which are fundamentally different.

There's also obviously a benefit to redoing just one graphic rather than many ;)

My upload admin-header-footer.3.png is lighter than my previous light header and has the lightest version of the gradient that I think still works with the other UI elements:
​http://core.trac.wordpress.org/attachment/ticket/12586/admin-header-footer.3.png

I think if you try replacing the file in /wp-admin/images/ you fill find that it is not objectionable and works well. In the end my graphic and the one in Trunk are very similar, but if you look closely at the comparison graphic (showing the add post page) you'll see how it has a different relationship with the sidebar widgets and visual editor chrome that is more pleasant:
​http://core.trac.wordpress.org/attachment/ticket/12586/header-background-tweaked-comparison.png

I also re-did the gradient itself. The version in trunk right now seems to be suffering from too much lightening and darkening, it has those super-subtle horizontal lines that feel like an optical illusion but aren't. The new version is smooth.

[ianatkins]

To future proof this can we stick with a png logo, with transparency, rendering any future changes to background colour irrelevant. I replace the header image with a custom logo on many of my Wordpress sites. It helps distinguish between many admin areas in many tabs!

If IE6 needs to be supported I can recommend the following script, which works well, and
isn't a CSS hack:
​http://www.dillerdesign.com/experiment/DD_belatedPNG/

[ocean90]

Is someone working on a 'lighter' version of the blue style? Or was it only for the grey style?

[johnonolan]

Replying to ocean90:

Is someone working on a 'lighter' version of the blue style? Or was it only for the grey style?

Only grey - the whole point of the blue is that it's "classic" - so lightening it up would kill the classic-ness :)

[dd32]

I believe this has been finalised for this version?

Please open new tickets for future releases.

[johnonolan]

Reopening to add latest patch converting header and footer to CSS3 gradients with fallback colours in place of images. Requires removal of admin-header-footer.png and fav-top.png

[johnonolan]

As above props to @nacin and @JohnJamesJacoby for the idea

[nacin]

(In [14383]) Use CSS3 gradients for the admin header and footer. Fall back to a solid color for IE. Props JohnONolan, fixes #12586.

[nacin]

(In [14395]) Remove files replaced by CSS3 gradients. IE falls back to solid colors. see #12586.