Giving The Dashboard Some Style

In the past I've posted similar tutorials which show how to customize the WordPress dashboard header and changing just the logo and color, but that's boring stuff.

You've probably seen these types of posts a million times all over the web. There's no other tutorial that I've been able to find which shows you what this one does. You may be able to understand why if you knew that the Stylesheet used for the WordPress dashboard has 3,242 lines of CSS code most of which contains hundreds of CSS selectors that have one single style attribute applied to them. So when you do the math, that equals a long list of selector attributes which you'd need style in order to completely alter the WordPress dashboard.

Despite the fact there were only 2 comments on the post from a couple weeks ago trying to find out how many people were interested to learn how to style the WordPress dashboard completely to match their sites theme, I've decided to make this tutorial. I checked out the page visits to that post and there were a number of people that were visited the page, but were just too lazy to post a comment since it wasn't an actual tutorial. So this is somewhat of interest to people I think just from that.

If you'd like to get an idea of how gigantically huge the Stylesheet really is, when you're logged into your WordPress dashboard and view the page source. In the source code near the top you should see a line that has something like this http://YOUR_SITE.com/wp-admin/load-styles.php?c=1&dir=ltr&load=theme-editor,global,wp-admin&ver=07053e9e82227a5c19c6d2ad36944788. This is what is loading the Stylesheet for WordPress dashboard

Just How Much You Can Change?

This is a screenshot of how I styled the New2WP.com dashboard. You can see it looks a lot like the frontend of the site.

Some Things Your Should Know

Before getting started I want to point out that this is only just a guide which you should use as a reference. If you do not know CSS very well, this may not be the best thing for you to try out at this point. If you do something that makes your dashboard screwed up, it is easy to fix, however. You would just need to remove the style attributes which you applied that screwed it up (like if something became hidden, or whatever).

One thing that I did learn from doing this is that there are many thing that will be unreadable if you choose to use a dark background color for the body of the dashboard. Doing that will mean you'll probably have to find out how to style each individual plugin options page, or several other things.

The Stylesheet for the dashboard is quite extensive, and there are many different parts which you may have not been aware of which are styled with CSS. If you think about just how many plugins there are for WordPress, then consider how many people create them, who all write code in a different way, it's easy to understand how quickly it can become a complicated situation. Many people create dashboard pages, or option pages based on the default style of the dashboard. That means you'd have to override all of their style attributes as well. So just take that into mind when doing this.

A List Of CSS Attributes For The WordPress Dashboard

This is not a complete list of ALL the attributes in the Stylesheet, just what I've come to learn about using Firebug's selection feature. It is how I was able to find specific elements of pages which I wanted or needed to style. Some were needed because of another change I wanted to make. The dark background color of the #wprap caused me to need to change several other things, and more than I had the time to do. So I changed the background back to the color #CDCDCD which is just a light gray. I suggest you don't use a dark background, you'd be better off trust me.

• a, a:hover - This is for all links in the dashboard
• #wpbody - The body of the dashboard
• #wpwrap - The wrapper which holds both the navigation and main page content
• #wpwrap div - Any div element within the wrapper
• #header-logo - For changing or styling the logo in the header
• #wphead - The section along the top of the dashboard
• h1#site-heading a - The title heading text that's displayed in the header next to the logo
• .wrap h2 - All H2 headings in the main content of the wrapper. They have a text-shadow
• #wphead-info #user_info - Right side of header, top right of the dashboard
• #adminmenu, .folded #adminmenu - The left nav menu, and folded
• #adminmenu a.menutop - Top menu item links
• #adminmenu li.wp-has-current-submenu ul li a - Menu items that have submenu
• #adminmenu .wp-submenu li.current - Current page menu item
• #adminmenu .wp-submenu li.current a - Current page menu link
• .inner-sidebar, .has-right-sidebar .inner-sidebar - Sidebar on right side of pages
• #message - The message box which displays when you make an update or change
• .highlight,.highlight a -
• #footer - Entire footer section
• #footer-left a - Left side of footer text
• table - Any table element within the wrapper
• table a, table a.span - Links within tables and links in table spans

For those that just skipped down to here

You really should do you're research before you go and add this to you're site. I've talked about some important things above, and you would be better know some of what I mentioned if you plan to completely change your WordPress dashboard.

Applying Your Stylesheet To The WordPress Dashboard

The easiest way I found was to use Firebug to select the elements, and then edit or add styles to see how it will look. Then I'd add what I've changed, and what selector I made the change to, to the Stylesheet I created in a function that adds the styles to the head of the dashboard. So you will need to create a Stylesheet for your function. Here's the one I created so you can see what it looks like.

Note: Some of these things may not work if you're using WordPress 3.0. For earlier versions however, you should be able to use these for you're WordPress dashboard.

add_action('admin_head', 'custom_colors');
function custom_colors() {
   echo '<style type="text/css">
		a{color:#fff;text-shadow:none;}
		#wpbody{color:#dee5ed;}
		#wpwrap{color:#5a6173;}
		#wpwrap div{color:#000;}
		#header-logo{background-image:url('.get_bloginfo('template_directory').'/images/YOUR_LOGO.png)!important; height:76px; width:272px; margin-top:0px;}
		#wphead{background:#5a6173 url('.get_bloginfo('template_directory').'/images/REPEATING_BACKGROUND_IMAGE.png)repeat-x!important; height:83px;}
		h1#site-heading a{font-family:Palintino Linotype;color:#7BCC02; display:none;}
		#templateside span{color:#fff;}
		#templateside a{color:#b7d918;}
		#adminmenu a.menutop{color:#999;text-shadow:0 1px 0 #FFF;}
		#adminmenu .wp-submenu a{color:#b7d918;background:#182431!important;}
		#adminmenu li.wp-has-current-submenu ul li a{background:#000!important;}
		#adminmenu .wp-submenu li.current, #adminmenu .wp-submenu li.current a{color:#cdcdcd; background:#61730D top left no-repeat;text-shadow:0px 1px 2px #182431!important; font-family:"Palintino Linotype"; font-size:14px;}
		#message{background:#182431;color:#b7d918!important;}
		#excerpt,.attachmentlinks{height:10em;}
		#footer,#footer-upgrade{background:#182431;color:#cdcdcd;}
		#footer #footer-left a{color:#b7d918;}
		.wrap h2{color:#fff;text-shadow:0px 1px 0px #000;}
		.highlight,.highlight a{padding:2px 4px;border-left:3px solid #E6DB55;background:#182431;color:#b7d918!important;}
		.inside a{color:#21759B;}
		.postbox{color:#000!important;}
		table{color:#333;}
		table a, table a.span{color:#21759B;text-shadow:0px 1px 0px #fff;}
</style>';
}

There are a couple images which have .get_bloginfo('template_directory').' preceeding them. This is getting the image from your theme images directory. The images I used here are to replace the logo and to make a repeating background for the header.

You just need to make a function like that, and add it to your functions.php file, or another file for custom scripts file that is included in functions.php.

Another Way

You could make your life easier and just make a Stylesheet file, that you enqueue in your function. This is how you would do the same thing as above.

function custom_colors() {
	wp_enqueue_style( TEMPLATEPATH . '/css_path/to/stylesheet.css' );
}

a{color:#fff;text-shadow:none;}
#wpbody{color:#dee5ed;}
#wpwrap{color:#5a6173;}
#wpwrap div{color:#000;}
#header-logo{background-image:url('.get_bloginfo('template_directory').'/images/YOUR_LOGO.png)!important; height:76px; width:272px; margin-top:0px;}
#wphead{background:#5a6173 url('.get_bloginfo('template_directory').'/images/REPEATING_BACKGROUND_IMAGE.png)repeat-x!important; height:83px;}
h1#site-heading a{font-family:Palintino Linotype;color:#7BCC02; display:none;}
#templateside span{color:#fff;}
#templateside a{color:#b7d918;}
#adminmenu a.menutop{color:#999;text-shadow:0 1px 0 #FFF;}
#adminmenu .wp-submenu a{color:#b7d918;background:#182431!important;}
#adminmenu li.wp-has-current-submenu ul li a{background:#000!important;}
#adminmenu .wp-submenu li.current, #adminmenu .wp-submenu li.current a{color:#cdcdcd; background:#61730D top left no-repeat;text-shadow:0px 1px 2px #182431!important; font-family:"Palintino Linotype"; font-size:14px;}
#message{background:#182431;color:#b7d918!important;}
#excerpt,.attachmentlinks{height:10em;}
#footer,#footer-upgrade{background:#182431;color:#cdcdcd;}
#footer #footer-left a{color:#b7d918;}
.wrap h2{color:#fff;text-shadow:0px 1px 0px #000;}
.highlight,.highlight a{padding:2px 4px;border-left:3px solid #E6DB55;background:#182431;color:#b7d918!important;}
.inside a{color:#21759B;}
.postbox{color:#000!important;}
table{color:#333;}
table a, table a.span{color:#21759B;text-shadow:0px 1px 0px #fff;}

This should be enough to get you started. Remember that Firebug is a great way to learn what changes what so any other things you try to change would be best tested using that.

Any Questions?

Just let me know below in the comments.

NOTICE:

If you chose to use this guide as an aid in customizing your WordPress dashboard, it is essential to keep in mind that this is in no way a fool-proof or exhaustive tutorial for dashboard customizations. This is NOT an official WordPress tutorial or styling guide. Before using this guide to customize your WordPress dashboard, therefore, know that any unwanted or unexpected errors/issues on a site that may result from following all or part of this guide are the sole responsibility of the individual who made the changes to that site.