Cheers!
I made with photoshop animated myspace pictures.
have a look at them:
http://tinyurl.com/62×3b5
Thanks a lot for your website
xxoxo
If you are like me, you find Wordpress to be a perfect fit as a CMS for small sites. Despite the fact that it originated as a blogging platform, it is flexible enough for simple pages or complex functionality and editing.
I have found that many clients like the nice subtle touch of branding their wordpress administration panel. There used to be a plugin that made this process easier but it doesn’t seem to work with the latest versions of wordpress. Luckily this process is simple even with out it.
By default, in wordpress 2.6+ there are two spots that the Wordpress logo shows up. At the footer in the administration panel, and the login / logout page.

The first step is easy, we simply need to find those images and change switch the logo to our own. This is merely a matter of downloading the images, altering them, then re-uploading them to the server.
Both images are located in the /wordpress/wp-admin/images directory, you are looking for:
logo-ghost.png and logo-login.gif
They look like this:

Let's start with the login page. Open up logo-login.gif in your favorite image editor.
At this point all you have to do is replace these files with a copy of your logo. To keep things in proportion relative to the rest of the design, I recommend that you keep the width the same size as the original (290px) but you could make the image taller and still have a nice login page composition.
Once you are finished, save your file and upload it back into your /wordpress/wp-admin/images directory.
If you save the file with different dimensions you will need to do some minor editing to the CSS to ensure all of the logo is visible. This can be done via the following:
Download and open /wordpress/wp-admin/css/login.css
You are looking for this code:
h1 a {
background: url(../images/logo-login.gif) no-repeat;
width: 292px;
height: 187px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;
}
Simply alter the width and the height to match the dimensions of the file you just saved.
Save your changes, upload, and navigate to your login page to see your new logo in all of it’s glory.
The next step is to alter the footer logo which resides on every page in the administration panel. For this logo I recommend keeping the dimensions the same, as their is not a whole lot of room to tweak the size.
Simply open up the file in your image editor of choice, drop your logo in and save. (Make sure you save it as an index color png for consistency.)
If you did want to alter the size you will likely want to login to your admin panel and see how it looks. The logo we changed is a background image so there is a chance no alteration will be needed.
If the logo looks off, you will need to open up /wordpress/wp-admin/colors-classic.css or /wordpress/wp-admin/colors-fresh.css (depending on what color scheme you are using) and find the following CSS:
#footer {
background: url(../images/logo-ghost.png) #464646 no-repeat 20px 10px;
color: #999;
}
the 20px and 10px alter the background position of the logo. You can tweak and play with those until the logo looks like it is placed correctly. If the logo is larger than the footer you will most likely have to give #footer a height: ###px; equal or greater than the size of your logo.
The last step is to alter the color of your administration panel to fit the colors of your brand. You can do this by editing the same style sheet we just downloaded (/wordpress/wp-admin/colors-class.css or /wordpress/wp-admin/colors-fresh.css). I recommend altering the colors-fresh.css file so you can always switch back to default if necessary.
This is simply finding the colors and changing the hex codes in CSS. Hopefully you know enough about CSS where I don't have to spell out every step. However the main areas you will likely want to edit are:
#adminmenu
#sidemenu
#wphead
#rightnow and
.tablenav
I found it easiest to do a search and replace for specific colors and background colors, otherwise you could spend quite some time hunting through the CSS.
And their you have it! Here are a few shots of our results, pretty nice isn’t it?



Cheers!
I made with photoshop animated myspace pictures.
have a look at them:
http://tinyurl.com/62×3b5
Thanks a lot for your website
xxoxo
Again a great post! it would be also great to tweak the whole log in form and its background but i guess that requires a lot of effort to do that!
@panjur not sure what you mean?
We only change the images, dont we.
Customizing the login form (wp-login.php) is better done with a plugin, so that it doesn’t get overwritten when user updates. Check http://www.binarymoon.co.uk/2007/07/wordpress-tips-and-tricks-custom-login-page/
Same comment goes for customizing inside the wp-admin area. A plugin is dead easy to do (just output some CSS).
I use the pressingpixel admin plugin too, its great. i think this is one case where using a plugin is a better idea, because otherwise upgrading your wordpress will wipe out your changes. This is a great article though!
Looks like a pretty slick plugin, I will take a look at it and write a review. Thanks Josh.
If you are looking for a plugin solution, I created a plugin a while back that does what the article talks about but also lets you customize the header with your logo as well. Photoshop templates are included.
Finally! Someone explains something about admin customitzation.
Thanks Ross.
on January 3, 2009
thank you.