How To Create a Custom WordPress Log-In Screen

WordPress 3.0 is a solid and powerful publishing platform, I like it and really enjoy using it. Using WordPress we can tweak on many area using Plugin or hard coded on our function. Now let’s get started made a Custom WordPress Log-In Screen, original source code on this tutorial made it as plugin. But I prefer to put it in our themes functions.php.

Create a Custom WordPress Log-In Screen - Indianapolis Padlock Girl

First, Open your functions.php and put on this code

function custom_wp_login () {
$url = get_option('template');
$url = $url . '/wp-login.css';
echo '<link rel="stylesheet" href="' . $url . '" type="text/css" media="screen"/>';
}
add_action ('login_head', 'custom_wp_login');

That it, next step is create wp-login.css and put it on your theme folder. To create new wp-login.css you can copy original login.css on wp-admin/css/login.css or you can copy new wp-login.css below

* { margin:0; padding:0; }
body { padding-top:30px; font:11px "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; }
form { margin-left:8px; padding:16px 16px 40px; font-weight:normal; -moz-border-radius:11px; -khtml-border-radius:11px; -webkit-border-radius:11px; border-radius:5px; background:#fff; border:1px solid #e5e5e5; -moz-box-shadow:rgba(200,200,200,1) 0 4px 18px; -webkit-box-shadow:rgba(200,200,200,1) 0 4px 18px; -khtml-box-shadow:rgba(200,200,200,1) 0 4px 18px; box-shadow:rgba(200,200,200,1) 0 4px 18px; }
form .forgetmenot { font-weight:normal; float:left; margin-bottom:0; }
.button-primary { font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; padding:3px 10px; border:none; font-size:12px; border-width:1px; border-style:solid; -moz-border-radius:11px; -khtml-border-radius:11px; -webkit-border-radius:11px; border-radius:11px; cursor:pointer; text-decoration:none; margin-top:-3px; }
#login form p { margin-bottom:0; }
label { color:#777; font-size:13px; }
form .forgetmenot label { font-size:11px; line-height:19px; }
form .submit,.alignright { float:right; }
form p { margin-bottom:24px; }
h1 a { background:url(../images/logo-login.gif) no-repeat top center; width:326px; height:67px; text-indent:-9999px; overflow:hidden; padding-bottom:15px; display:block; }
#nav { text-shadow:rgba(255,255,255,1) 0 1px 0; }
#backtoblog { position:absolute; top:0; left:0; border-bottom:#c6c6c6 1px solid; background:#d9d9d9; background:0; background:0; height:30px; width:100%; }
#backtoblog a { text-decoration:none; display:block; padding:8px 0 0 15px; }
#login { width:320px; margin:7em auto; }
#login_error,.message { margin:0 0 16px 8px; border-width:1px; border-style:solid; padding:12px; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
#nav { margin:0 0 0 8px; padding:16px; }
#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:#fbfbfb; }
input { color:#555; }
.clear { clear:both; }

That’s it, enjoy Create a Custom WordPress Log-In Screen on your own WordPress, thanks for Red Ice Design to make it happen