With WordPress 2.5 out, I have to customize the WP login screen again as my previous How to Customize the WordPress Login screen is no longer compatible with it. 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
. Also made necessary changes on login.css
and color-fresh.css
found in wp-admin/css.
Here’s the default WordPress login screen
And here’s the customized WordPress login screen for my hometown’s website.
Here are the steps on how I was able to customize the WP 2.5 login screen above. As always, 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
- Open Adobe Photoshop and edit your logo or header. The default WordPress logo has 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 thelogin.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 WordPress Login screen, I incorporated it with the new one.
Changes made in the CSS files.
For login.css
- Edited background with
header.gif
inh1 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 propertyrepeat-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 imagefooter.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
andborder-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)
Pingback: Customized WordPress Login » Amor’s Blog
Hello,
My name is Skylar. I just spent some time digging through your great blog and I found it very engaging. I’m contacting you to ask if you are interested in blog post sponsorship.
If you are, please e-mail me back and I will send you pricing details, guidelines and processes. Looking forward to hearing from you.
Kind regards,
Skylar Sinclaire
That’s interesting! I haven’t updated my blogs yet but I will soon..Thanks for sharing your ideas,Amor! Btw, check my blog. I am doing a new contest that you can win for $$$;-)
See yah!
I tried upgrading to WP 2.5 but after more than a day, I still couldn’t log in to my admin panel. A message says database needs to be upgraded. It did say to be patient but I guess I became impatient because I wanted to post on my blog. When I couldn’t wait anymore, I reverted back to 2.3.3 and I did not have any problem at all.
rino’s last blog post…
We are Looking for Volunteers for the 10th Tour of the Fireflies
Skylar, thanks for the info, emailed you already.
Yen, ang dami mong ideas na pacontest ah!, at ang prices, hindi basta-basta huh! 🙂
Rino thanks for the visit and welcome to my blog, I’ve only tried WP 2.5 in my PC thru my local WP install. I didn’t have problems with it naman. I am still waiting for Fantastico. I’m so tamad to update it manually kasi haha.
Amor, mabuti’t nakita mo rin kung paano i-customize ang log-in page sa 2.5, hehee, magaling ka talaga mangbutingting, friend, pagdating sa wp.
Hindi naman masyado friend, interesado lang ako kaya napag tyagaan ko itong login screen na ito, haha! Thank you! 🙂
Amor’s last blog post…
Customizing WordPress 2.5 Login Screen
Pingback: WordPress 2.6 Upgrade » Amor’s Blog
WordPress Guru ka na ha :d
Camper´s last blog post..Not a good day!
haha! hindi naman, css lang naman kasi ang binago eh. 🙂
I am really curious if this would work as smoothly with the new WordPress 3.0 that is going to be released in the following days. Have you tried it with the latest release candidate or do you have any news about that? Thank you.
Yes it will, Albert. I'm testing WP 3.0 in my local install. I also have a forthcoming post about Customizing WordPress login without a plugin. Similar to this but it won't be overwritten after each upgrade.