Another WordPress Admin Header Tweak

What do you think?

Related posts

1. Tweaking WordPress Admin Header
2. Squeeze the Header of the New WordPress 2.7 Dashboard
3. WordPress Dashboard UI Idea #3

Here is how my admin area currently looks like:

WordPress admin header redesigned

Ideas behind this redesign

1. You know the title of your blog very well, therefore it is unnecessary to make it so large.
2. If you have several blogs, it is important to be able to distinguish in which admin area you are currently in. To do so, we make the background color of the blog title different for each blog (green, in the screenshot above).

Result: saved 50 pixels of vertical space

How to achieve this on your blog

Install the Admin CSS plugin.

Go to Settings › Admin CSS and add this CSS:

#wphead h1 a { background:#186F00; border-color:#030;  }

#wphead { height:0; background:none; float:right; }
#wphead img { display:none; }
#wphead h1 { font-family:"Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif; font-size:11px; line-height:15px; float:left; margin:0 0 -3em 0; padding:1.2em 1.75em 0 0; position:relative; overflow:visible; font-size-adjust:none; border-right:1px solid #ddd; }
#wphead h1 a { color:#fff; display:block; float:left; -moz-border-radius:1em; -webkit-border-radius:1em; padding:3px 1em 4px; border-width:1px; border-style:solid; font-weight:bold; }
#wphead h1 a:hover { background:#333; border-color:#000; color:#fff; text-decoration:none; }
#wphead h1 span { display:none; }
#wphead-info { float:right; margin:0.15em 1.25em -10em 0.5em; position:relative; }
#icon-index { margin-top:0.9em; }
#user_info { font-size:0.88em; }
#user_info a:link { color:#666; }
#screen-meta-links { margin:0; float:right; margin-right:44em; }
#wpbody ul.folded { margin:0; padding:0.75em 1em; }
#themeselector { position:relative; bottom:-2em; right:210px;  }
#adminmenu { margin-top:1em; }
p.search-box { margin:0.5em 0 -0.5em 0; }
.wrap h2 { font-style:normal; font-size:1.75em; padding-top:0.5em; }
.wrap h2.long-header { width:40%; }

Limitations imposed by the current HTML structure

It is worth noting that the horizontal order of the items in the header is very limited due to the current HTML structure of the page – blog title, favorite actions and user links are placed inside #wphead while page title and screen options are inside #wpbody, which is below it.

Update: My WordPress Design Tweak Entry

This is how I would like the admin header area to look like, if it would be possible to change the underlying HTML structure. Notice that I have renamed Screen Settings to Panels and placed it into a pill button together with Help.

Suggestions for improving WordPress Admin Header

What do you think of this tweaked design?

Let me know, leave a comment.

Related posts

1. Squeeze the Header of the New WordPress 2.7 Dashboard
2. WordPress Admin Header Design Tweak, Take Two
3. Replace WordPress Login Logo With Your Site’s Name and Link

Now when it is one minute away from the prime-time, I applaud Jane, Matt and all the designers and developers behind the overhaul who carried out the work in such a transparent and feedback driven way.

For me it is the new icon-only-slide-right navigation bar that makes the whole administration section work so much better than I could have imagined. All the administration sections are only one click away. Navigation takes up only 40 pixels of the cheap vertical space and thus saves much of the expansive vertical area where things get done. The result is truly amazing and it makes me wonder if anyone really knew it will turn out to be this good.

However, you know it wouldn’t be me if there wasn’t a suggestion to make, which is — squeeze that header. Or graphicly speaking, turn this:

Original WordPress 2.7 layout

into this:

WordPress 2.7 with squeezed header area

Why do it

Because you know the title of your blog. You know where to get help. You know what Firebug is and you can type CSS just as you type blog posts.

How to achieve it

Install Admin CSS or any other plugin that allows to amend CSS of the dashboard. Apply the following CSS rules:

#wphead { height:0; background:none; float:right; }
#wphead img { display:none; }
#wphead h1 { font-family:"Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif; font-size:11px; line-height:15px; float:left; margin:1em 0 -3em 0; padding:0; position:relative; overflow:visible; font-size-adjust:none; }
#wphead h1 a { color:#fff; display:block; float:left; background:#21759B url(../../../wp-admin/images/button-grad.png); -moz-border-radius:1em; -webkit-border-radius:1em; padding:3px 1em 4px; border:1px solid #21759B; }
#wphead h1 a:hover { background:#21759B; color:#fff; text-decoration:none; }

#wphead-info { float:right; margin:0 1.25em -10em 0.5em; }
#user_info { font-size:0.88em; }
#user_info a { color:#666; }
#screen-options-link-wrap { padding:0; margin-left:0.25em; }
#screen-options-link-wrap a.show-settings { width:1px; color:transparent; margin:0; background-position:right bottom; }
#wpbody ul.folded { margin:0; padding:0.75em 1em; }
#themeselector { position:relative; bottom:-2em; right:210px;  }
#screen-meta-links { margin:0 0 0 1em; float:left; }
#screen-meta a.show-settings { padding:0 10px; }
#contextual-help-link-wrap { display:none; }

.wrap h2 { font-style:normal; font-size:1.75em; }
.wrap h2.long-header { width:40%; }
p.search-box { margin:0.5em 0 -0.5em 0; }

And don’t forget to refresh the page to see the changes.

Related posts

1. Tweaking WordPress Admin Header
2. WordPress Admin Header Design Tweak, Take Two
3. Replace WordPress Login Logo With Your Site’s Name and Link