Customizing WordPress 2.5 Login Screen

I have downloaded and tested the new WordPress 2.5 on my local WordPress install. I immediately checked the WP login page to see if my post about Customized WordPress Login screen will still be compatible. But it’s not. There’s no login-bkg-tile.gif and login-bkg-bottom.gif files, only logo-login.gif. I was able to customize it by simply editing the logo-login.gif. I also made necessary changes on login.css and color-fresh.css found in wp-admin/css.

Here’s the default WordPress 2.5 login screen

WordPress 2.5 Login Screen

And here’s the customized WordPress 2.5 Login screen for my hometown’s website.

Customized WordPress 2.5 Login Screen

Here are the steps on how I was able to customize the WP 2.5 login screen above. Before you make any changes, make sure you have a backup copy of login.css and color-fresh.css so you’ll have a fresh copy when you are lost and stucked.

How to customize the header logo to suit your site.

• Open Adobe Photoshop and edit your logo or header. The default WordPress logo have 292×66 dimension. If you want to have a bigger logo, you can do so but you’ll have to change the height and width of h1 a and the width of #login elements in the login.css file, based on the dimension of your header.
• Save your logo or header as logo-login.gif

How to customize the form and the submit button

• Open the color-fresh.css
• Change the background-color: #eaf3fa for .login form with the color of your choice. For my example above, the background color is #F2C581 for the login form
• Change the background-color: #cee1ef; color: #246; border-color: #80b5d0 of #login form .submit input to your preferred color. I used #3B70B5, #F5E8D8 and #A66E6F respectively for the submit button.

And since I still want the look of my previous Customized WordPress Login screen, I decided to incorporate it in the new WP login screen.

Here’s what it looks like.

And here’s what I’ve changed in the CSS files.

For login.css

• Edited background with header.gif in h1 a as seen below. The header image I used here is similar to the login-bkg-tile.gif, which I used previously except that I cropped the image to 390×125.

h1 a
{
background: url(../images/header.gif) no-repeat;
width: 390px;
height: 125px;
.....
}

• Added background image login-bg.gif with 390 width in the #login element. Again, the background image I used here is similar to the login-bkg-tile.gif, except that the color is changed, and the image is cropped to produce 390×5 dimension. I used the background property repeat-y so the background image will be repeated all throughout.

#login {
background: url(../images/login-bg.gif) repeat-y;
width: 390px; margin: 3em auto;
}

• Changed the margin to 15px; in the #login_error, .message

#login_error, .message {
margin: 15px;
.....
}

• Changed #nav properties and added footer image footer.gif. The image used here is similar to login-bkg-bottom.gif in the older WP versions with the color changed to suit the site.

#nav { clear:both;background: url(../images/footer.gif) center bottom no-repeat;
margin: 0; padding: 16px;
}


Changes in color-fresh.css

• Changed the background-color property of the.login form element, and added margin.

.login form {
margin:15px;
background-color: #D3ADAC;
}

• Changed the background-color, color and border-color of #login form .submit input

#login form .submit input {
background-color: #A66E6F !important;
color: #F5E8D8;
border-color: #A66E6F;
}

• Added new property margin to #login #login_error so the login error will be centered on the screen.

#login #login_error {
margin:15px;
}

I also googled for Plugins for WordPress 2.5 login screen and found 2. Surprisingly, these plugins are inspired by the Custom Login Plugin by Ben Gillbanks.

• Plugin Name: Custom Admin Branding
  Description: Allows you to brand your WordPress install for clients. Display custom images for the login screen, admin header and footer. Also includes a custom admin color scheme stylesheet that can be activated from your user profile.
  Author: Josh Byers
• Plugin Name: Branded Login Screen
  Description: Display upgrade protected custom background images for the WordPress login screen. Great for branding.
  Author: Kerry Webster (based on work by David Airey & Ben Gillbanks)