---
title: Squeeze the Header of the New WordPress 2.7 Dashboard
date: 2008-11-15T03:58:50+00:00
modified: 2020-05-06T09:32:43+00:00
image:: https://kaspars.net/wp-content/uploads/2008/11/wordpress-27-dashboard.png
permalink: https://kaspars.net/blog/minimize-wordpress-2-7-dashboard-header
post_type: post
author:
  name: Kaspars
  avatar: https://reverse.kaspars.net/gravatar/avatar/92bfcd3a8c3a21a033a6484d32c25a40b113ec6891f674336081513d5c98ef76?s=96&d=mm&r=g
category:
  - Development
  - WordPress
post_tag:
  - User Interface
---

# Squeeze the Header of the New WordPress 2.7 Dashboard

[![Minimized header area of WordPress 2.7](https://kaspars.net/wp-content/uploads/2008/11/wordpress-27-dashboard.png?strip=all&quality=90&resize=971,534 "Minimized header area of WordPress 2.7")](https://kaspars.net/wp-content/uploads/2008/11/wordpress-27-dashboard.png)I *love* the new WordPress 2.7 dashboard design even despite all the [bad](https://kaspars.net/blog/web-critique/645-wordpress-27-vertical-navigation/) [things](https://kaspars.net/blog/wordpress/600-wordpress-27-administration-ui-wireframes/) 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](http://jane.wordpress.com/ "Jenifer, information architect behind the WordPress dashboard redesign"), [Matt](http://ma.tt "Chief developer of WordPress") and [all the](http://automattic.com/about/ "Team of Automattic") [designers and developers](http://comox.textdrive.com/pipermail/wp-hackers/ "developers enthusiasts and members of wp-hackers mailing list") 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](https://kaspars.net/wp-content/uploads/2008/11/wordpress-27-add-new-post-before.png?strip=all&quality=90&resize=1037,513)](https://kaspars.net/wp-content/uploads/2008/11/wordpress-27-add-new-post-before.png)Original WordPress 2.7 layoutinto this:

[![WordPress 2.7 with squeezed header area](https://kaspars.net/wp-content/uploads/2008/11/wordpress-27-add-new-post.png?strip=all&quality=90&resize=1037,542)](https://kaspars.net/wp-content/uploads/2008/11/wordpress-27-add-new-post.png)WordPress 2.7 with squeezed header area### Why do it

Because you know the title of your blog. You know where to get [help](http://wordpress.org/ "At wordpress.org and Google"). You know what [Firebug](http://getfirebug.com "The ultimate tool for web designers") is and you can type CSS just as you type blog posts.

### How to achieve it

Install <a href="" title="Modify WordPress administration CSS using Admin CSS plugin">**Admin CSS**</a> 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.