Personalizing the WordPress login page
After having linked up a list of the most original and creative WordPress login pages in the October article of the editor’s favorites, we asked ourselves: why not personalize the login page for Your Inspiration Web? And, above all else, why not take advantage of the opportunity to explain to our readers how to, with just a few modifications, make this page eye-catching and appropriate to its website’s style?
So, after Sara drew the new graphics in Photoshop, in this article I’ll explain how I worked up the code and integrated the various graphic elements to personalize our community login page.
Before and after: graphics
The graphic changes are beyond obvious: from the classic WordPress login panel, devoid of color and just a bit bare, to a new page, much livelier and with the colors of the new Your Inspiration Web theme: red, orange, yellow. The WordPress logo has been substituted by the logo of our community and other details, like the header bar and the button have been adapted with new colors.
The image at the top is meant to recall the graphics present in the blog header, in order to make everything more visual and to associate the login page to the community itself.
From Photoshop to code: exporting the various sections
Before we start working on the code, let’s look at the various graphic elements that will make up the personalized login page. First of all, we have the upper part of the login panel. The dimensions of this image, we’ll call it “header.gif”, are 562px wide by 310px high.
Next we have the lower part of the login panel, whose rounded corners will end the form. We’ll call this image “footer.gif”, it’s 562px wide and 40px high.
The final image that we’ll need deals with the shading on the Login button. We’ll use the same dimensions as WordPress’ default blue shading, 5px by 30px and we’ll create an image (called “bg.button.gif”) with shading that goes from light orange to dark orange.
Now that we have all the graphics needed to personalize the WordPress login panel: let’s start to work on the code.
Preface
We’ll work with the following files: “wp-login.php” (in the main WordPress folder), “login.css” and “colors-fresh.css” (both in the “css” folder, inside the “wp-admin” folder).
Page background
To give the main page a specific background color, we’ll add the following line of code to the file “login.css”:
html {background:#7a0203!important;}
We’ll also add the background color to the Body Tag, as shown below:
body {background:#7a0203;border-top-width:30px;border-top-style:solid;font:11px Georgia, Verdana, Arial, "Bitstream Vera Sans", sans-serif;}
Once we’ve finished the changes to the background color, we can start working on the graphics.
How to add a main background image to the login page
After having opened the file “wp-login.php” , we’ll look for the lines of code that load the top part of the login page (lines 72, 73 and 74 in WordPress 2.8.6).
The important lines are:
<body>
<div id="login"><h1><a href="<?php echo apply_filters('login_headerurl', 'http://wordpress.org/'); ?>" title="<?php echo apply_filters('login_headertitle', __('Powered by WordPress')); ?>"><?php bloginfo('name'); ?></a></h1>
Note that the heading H1 contains the WordPress logo and we’ll add the following line of code immediately below the Body Tag:
<div id="header-login"></div>
In the stylesheet “login.css” we’ll add a rule associated with the new ID “header-login”. In this manner, we can load the desired background image, as shown below:
#header-login {width:562px;height:310px;margin:0 auto;background:url('../images/header.gif') no-repeat top center;}
In the “images” folder (in the “wp-admin” folder) we’ll add a copy of the background image: “header.gif”.
Personalizing the panel body
We next personalized the panel box by modifying its size and background color, using the following css rule:
#login {width:400px;margin:0 auto;background:#600202;}
Personalizing the lower part of the login panel
To finish up the graphic part of our login panel, we’ll personalize the section containing the form, modifying its dimensions and adding a personalized background image placed at the bottom (we’ll also copy the image “footer.gif” to the “images” folder). Here’s the specific code:
form {width:368px;margin:0px auto 0 auto;padding:16px 16px 80px 16px;font-weight:normal;background:#600202 url('../images/footer.gif') no-repeat bottom center;}
Now our login page has a completely new look, we’ll just do a few touchups here and there, and we’re all set!
Final touches
We’ll modify the field color to go with the new scheme:
#user_pass, #user_login, #user_email {font-size:24px;width:97%;padding:3px;margin-top:2px;margin-right:6px;margin-bottom:16px;border:1px solid #e5e5e5;background:#fde5ac;}
We’ll change the gradient of the “Login” button by adding the Background property to the existing css rule and copying the image “bg.button.gif”to the “images” folder:
#login form .submit input {font-family:"Lucida Grande",Verdana, Arial,"Bitstream Vera Sans",sans-serif;padding: 3px 10px;border:none;font-size: 12px;cursor: pointer;text-decoration: none;margin-top: -3px;-moz-border-radius: 11px;-khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 11px;text-shadow: rgba(0,0,0,0.3) 0 -1px 0;background:url('../images/bg.button.gif') repeat-x left top !important;}
We’ll specify the margins, size, and background color of any error messages that might be displayed:
#login_error, .message {margin:0 auto 10px auto;border-width:1px;border-style:solid;padding:12px;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;width:300px;}
We’ll also change the label color so they match the new style of our form:
label {color:#f9af4f;font-size:13px;}
Lastly, we’ll change the top border color of the login page by opening the style sheet “colors-fresh.css” and changing the rule “body.login” as follows:
body.login {border-top-color: #500000;}
With this final touch our work here is done: if you’re even just a bit curious to see the final result, take a look at our login page online!
Conclusion
As you’ve seen, with a bit of imagination and a few code modifications we personalized our blog login page, making it eye-catching and original. Remember that often the little “accessories” – a creative 404 page, a favicon, a unique login page – make the difference in a web project.
What do you think? In your projects have you chosen to, or been asked to, work on these details or do you prefer to just stick to standard pages?
*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia
The Author
Related Posts
You may be interested in the following articles:
17 comments
Trackback e pingback
-
Personalizing the WordPress login page | Your Inspiration Web | WordPress News
[...] Visit link: Personalizing the WordPress login page | Your Inspiration Web [...] -
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by yiw: RT @YIW Personalizing the WordPress login ... -
florystyka
Check this out... Here are some of the sites we recommend for our visitors...
How do you deal with the updates? I mean you’ll loose the work done on the wp-login.php each time you update…
Hi Dario and welcome to Your Inspiration Web.
As for the changes to the style sheet, you could create a new style sheet and put here all the modified rules and then link this style sheet in the page “login.php”.
As for the page “login.php”, I believe there is not much to do: you could store a backup copy of the file and restore it in case it has not undergone any change with the new version of wordpress.
In the case of amendments to the login.php page by wordpress upgrade, you have to redo the process which is still a very rapid job: all you have to do is to add two divs.
Thanks Nando,
I thought that was the case but at the same time had to ask
Glad to have joined so thanks for the welcome.
why even bother touching the wp-login.php file when you can customize it from within the functions.php file ? that way any updates to the core files will not even effect the theme login page
Excelent!!!!
I think your blog post was actually a great kick off to a potential series of write ups about this topic. A lot of bloggers pretend to comprehend what they’re talking about when it comes to this topic and generally, nearly no one actually get it. You seem to understand it however, so I think you should take it and run. Thank you!
you can become an SEO Expert by just studying those tips from SEO Forums and testing the methods with yourself,`;
Thank’s a lot Nando
I like your snippet
Fantastic website. I will want a bit of time to absorb the points!
Thank you for making the sincere attempt to speak about this. I feel very robust approximately it and want to read more. If it’s OK, as you acquire extra intensive wisdom, might you mind adding more articles very similar to this one with more information? It could be extremely helpful and helpful for me and my friends.
I am a frequent visitor to this site and I love the design and very rich content but it always loads so slow and this sometime keeps me from coming back. I think with host gator you would not have loading issues and you can save 25% off a purchase at hostgator by entering this coupon code at checkout: BIGGENIUSCODE
What’s the original font of the wordpress login called? The one you write in when you type in your username (looks a bit like arial but thinner letters and larger). I want to use it for my writings.
Dear Yourinspirationweb,
Cool Post, Life is full of appointments. Some are important ones and some are not. Most of us do not take it seriously when we are late for some appointments. We often hear these common excuses, for example, “It is alright, I’m just running a few minutes late”, or ” Other people will be late, I’m ok”, or ” just a phone call away if I’m late”, etc.
Kindest Regards
Hi,
I use a lot of wordpress customisation and think this is a crucial step after customising the style of the rest of a website. At http://coffeemarketing.co.uk we tend to take the login form and place it on other parts of the site rather than use the wp-login page.