10 Comments
I have downloaded and tested the new WordPress 2.5 on my local WordPress install. I immediately checked on 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 suite 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 aand the width of#loginelements in thelogin.cssfile, 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: #eaf3fafor.login formwith 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: #80b5d0of#login form .submit inputto 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.gifinh1 aas 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. - Added background image
login-bg.gifwith 390 width in the#loginelement. 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-yso the background image will be repeated all throughout. - Changed the
marginto 15px; in the#login_error, .message - Changed
#navproperties 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 suite the site.
h1 a
{
background: url(../images/header.gif) no-repeat;
width: 390px;
height: 125px;
.....
}
#login {
background: url(../images/login-bg.gif) repeat-y;
width: 390px; margin: 3em auto;
}
#login_error, .message {
margin: 15px;
.....
}
#nav { clear:both;background: url(../images/footer.gif) center bottom no-repeat;
margin: 0; padding: 16px;
}
Changes in color-fresh.css
- Changed the
background-colorproperty of the.login formelement, and added margin. - Changed the
background-color, colorandborder-colorof#login form .submit input - Added new property margin to
#login #login_errorso the login error will be centered on the screen.
.
login form {
margin:15px;
background-color: #D3ADAC;
}
#login form .submit input {
background-color: #A66E6F !important;
color: #F5E8D8;
border-color: #A66E6F;
}
#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 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)
Customized WordPress Login » Amor’s Blog on April 8, 2008 at 7:10 am
[...] Update: I was also able to customize the new WP 2.5 login screen. [...]
Skylar Sinclaire on April 9, 2008 at 10:53 am
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
Reply
Yen on April 9, 2008 at 9:35 pm
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!
Reply
rino on April 9, 2008 at 10:51 pm
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
Reply
amor on April 9, 2008 at 11:02 pm
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.
Reply
Marlene on April 10, 2008 at 5:01 am
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.
Reply
Amor on April 11, 2008 at 10:09 pm
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
Reply
WordPress 2.6 Upgrade » Amor’s Blog on July 18, 2008 at 2:25 am
[...] customized login screen for WordPress 2.5 (in login.css and color-fresh.css) were overwritten after the upgrade to Tyner so I had to [...]
Camper on December 3, 2008 at 7:49 pm
Wordpress Guru ka na ha :d
Camper´s last blog post..Not a good day!
Reply
Amor replied on December 3rd, 2008 at 9:57 pm
haha! hindi naman, css lang naman kasi ang binago eh.
Reply