Squeeze the Header of the New WordPress 2.7 Dashboard

Minimized header area of WordPress 2.7

I love the new WordPress 2.7 dashboard design even despite all the bad things that I have previously said. Back then it was only a prototype and probably even the core developers didn’t have a clear and complete picture of how it is going to look and work in real-word environment.

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
Original WordPress 2.7 layout

into this:

WordPress 2.7 with squeezed header area
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.

6 Comments

  1. deuts says:

    what if you have of plenty of blogs? You’ll need that header to double check that you’re on the right blog where you want to make your changes.

  2. Kaspars says:

    deuts, in that case you could make the background color of blog’s title button (in the top right corner) different for each site by specifying #wphead h1 a { background:#color; color:#fff; }

  3. Ozh says:

    Same as deuts. Previously I’ve always *reduced* the height of the header, but never remove it.

    As for the icon only menu, at first I thought “wow, awesome”, but quickly I found it a bit unusable and you still have to scroll down a lot if you have a lot of plugins.

  4. Kaspars says:

    Ozh, I completely understand the reasons why you and deuts prefer to have the header area up there. I have only one blog so it works for me without it.

    Have you thought about writing a plugin that splits the second level menu items in two columns in case there are too many of them to fit in vertically without scrolling?

  5. Ozh says:

    Kaspars, no, I updated my Admin Drop Down Menu for 2.7 to keep things horizontal as they’ve been till now. I really prefer it this way.

  6. Ovidiu says:

    @ozh:
    is the current version already 2.7 ready?

Leave a Reply to Ozh Cancel reply