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.
What are we customizing?
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 Color Scheme
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.
The Result
And their you have it! Here are a few shots of our results, pretty nice isn’t it?
Have some feedback? Leave a comment
Pingback: Branding your WordPress Admin Panel :: WPLover
Finally! Someone explains something about admin customitzation.
Thanks Ross.
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.
http://pressingpixels.com/wordpress-custom-admin-branding/
Looks like a pretty slick plugin, I will take a look at it and write a review. Thanks Josh.
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!
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).
Pingback: Personalizza il pannello admin di wordpress | Italian webdesign
Pingback: Useful Links (14/11/2008) | Apramana
@panjur not sure what you mean?
Pingback: Wordpress: personalizzare il pannello di amministrazione : cssblog.it
Pingback: What I’ve been reading - James Padolsey
Pingback: WordPress Individuell - das eigene Logo » Andreas Isaak
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!
Cheers!
xxoxo
I made with photoshop animated myspace pictures.
have a look at them:
http://tinyurl.com/62x3b5
Thanks a lot for your website
thank you.
INTERFERENCE FOREIGN TRADE web environment
We offer all products with the best service initiatives, improving the quality of service the products you ihtal web environment provides a detailed way. Category dedicated to the product range with the desired structure, providing convenient access to products from our web site to review the order or request for information from the contact form to reach us
Anzer Honey produced in Turkey and the world, his wife does not have precedents wild flowers covering flora that has the English-German scientists to do research 450-500 varieties in flowers, 80-90 in their many endemic flowers Anzer alone to grow and flower of the bee honey collected continue to trouble World famous Anzer honey flower is healing diseases.
Partly with the first week of June, with snowdrops in snowy regions and greens in the spring at the first step, Anzer, amazing beauty move the peak in July, starting in June and complete in August. In the last week of June to the eyes and flowers in the middle of August until the honey bee who will complete.
Depending on climate conditions Anzer first or second week of August is the right (the harvest), which action is taken with honey from the hive. The impact of weather conditions, the meadow of the (of grass), depending on early appraisal of the variability of supply is the amount of honey production. Very few, or even ever have been a year.
Does not grow on trees so only Anzer Anzer honey of Anzer region should be included in the pollen of flowers growing endemic otherwise Anzer honey is not true. To understand whether the fake fish Anzer pollen analysis is done for.
Anzer honey or other sugar to the external additives are not. Anzer honey without heat treatment is provided. Temperatures above 40 ° C `s and the pollen of Fish neutralized the enzyme that can be put into cold Sağım yapılmaktadır.Anzer honey bread and honey for breakfast is not normally consumed. Anzer honey is usually consumed with a view to healing diseases ..
Hacettepe University in Ankara Anzer honey warranty registration of a calf can be analyzed.
Anzer honey to the grandson of the Ottoman Empire, since the drug was used as is. Anzer honey as a paste strength of the Ottoman Sultans were given. Anzer honey of the healing source of many diseases.
video klip download sites thanks
actual nevs sports thaks…
Verry Good Post Thanks Admin
Thank you for writing this post. It’s exactly what I was looking for.
INTERFERENCE FOREIGN TRADE web environment
We offer all products with the best service initiatives, improving the quality of service the products you ihtal web environment provides a detailed way. Category dedicated to the product range with the desired structure, providing convenient access to products from our web site to review the order or request for information from the contact form to reach us
Thank you for writing this post. It’s exactly what I was looking for.
verry good…
Live sport on tv available in the UK via terrestrial, satellite and cable television – Sky Sports, Setanta Sports, BBC, ITV ……
у вашего сайта прикольный диз, сами верстали?
родословная украина
Pingback: Building An Interactive Web Site - The Starting Stages
http://www.louisvuittonoutlet2001.com
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!