First, open your theme’s ‘function.php’ and add the following code at the bottom of the file, above the closing php tag. This code attaches an action to your login page which inserts a link to a new CSS file contained in your theme’s directory named ‘custom-login.css’.
/* CUSTOM LOGIN PAGE */
function custom_login() {
if($_SERVER[SCRIPT_NAME]=="/wp-login.php"){
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-login.css" />';
}
}
add_action('login_head', 'custom_login');
/* END CUSTOM LOGIN PAGE */
Save and close your theme’s ‘fucntion.php’ file.
Now you need to create a file named ‘custom-login.css’ in the root of your theme’s folder (‘wp-content/themes/YOURTHEME/custom-login.css’). Open the file and paste the following css:
/* WordPress Custom Login Styles */
/* WEB FONTS */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700,400|Roboto+Condensed:400,700);
/* ###################################################################
Master link properties
################################################################### */
a:hover, a:active, a:focus {
color: #fff !important;
}
/* ###################################################################
Body properties / top half of page background color
################################################################### */
body {
font-family:'Lucida Sans Unicode',Verdana,Arial,Helvetica,sans-serif !important;
background:#fff !important;
border:none !important;
height:100% !important;
}
/* ###################################################################
Bottom half page background color
################################################################### */
html {
background:#fff !important;
}
/* ###################################################################
Logo above login form
################################################################### */
h1 a {
/* UNCOMMENT TO ADD CUTOM LOGO IMAGE
background: url(http://www.yourdomain.com/path-to-image) no-repeat center top;
*/
width:0px !important;
height:0px !important;
text-indent: -9999px !important;
overflow: hidden !important;
padding-bottom:5px !important;
display: block !important;
}
/* ###################################################################
Back to blog link bar
################################################################### */
.login #backtoblog{
position: fixed !important;
top: -16px !important;
left: -16px !important;
padding: 13px 0 0 18px !important;
background-color: #42230a;
border-bottom: 1px solid #7e6040;
height: 37px !important;
width: 100% !important;
white-space: nowrap;
}
.login p#backtoblog a:link, .login p#backtoblog a:visited {
/* Link effects in top bar */
color:#fff !important;
font-size: 1.3em !important;
outline: none !important;
text-shadow: none !important;
}
.login p#backtoblog a:hover, .login p#backtoblog a:active {
/* Rollover link effects in top bar */
color: #fff !important;
text-decoration:underline !important;
}
body.login {
border-top-color:#dff4fc !important; /* Top bar background color */
}
/* ###################################################################
Login form
################################################################### */
#login, #registerform, #lostpasswordform {
margin: 0 auto !important;
position:relative !important;
width: 367px !important;
top: 35px !important;
}
#login .message, #registerform .message, #lostpasswordform .message{
margin: 0 0 30px 0 !important;
padding: 10px !important;
border-left: 7px solid #c42c00 !important;
border-top: 1px solid #ccd0d4 !important;
border-right: 1px solid #ccd0d4 !important;
border-bottom: 1px solid #ccd0d4 !important;
color: #444 !important;
background: #f7f7f7 !important;
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}
form#loginform, form#registerform, form#lostpasswordform {
/*remove the following two lines if you do not wish to incorporate a form background image */
background: url(http://www.schiffner.com/wp-content/themes/schiff-responsive/images/login/login_form_bg.jpg) no-repeat left top #fff !important;
background-position: -13px 0 !important;
padding: 75px 0 0 0 !important;
margin: 0 0 0 0 !important;
box-shadow:none !important;
-moz-box-shadow:none !important;
-webkit-box-shadow:none !important;
-moz-border-radius: 10px !important;
-khtml-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
border: 1px solid #282461 !important;
}
#loginform input[type=text].input, #registerform input[type=text].input, #lostpasswordform input[type=text].input, #loginform input[type=password].input, #registerform input[type=password].input, #lostpasswordform input[type=password].input, #registerform input[type=email].input{
border: 1px solid #292464 !important;
background: #f7f7f7 !important;
width: 320px !important;
margin: 0 0 10px 22px !important;
}
#loginform #wp-submit{
background: #282461 !important;
margin: 15px 24px 22px 0 !important;
}
#registerform #wp-submit{
background: #282461 !important;
margin: -5px 24px 15px 0 !important;
}
#lostpasswordform #wp-submit{
background: #282461 !important;
margin: 5px 24px 15px 0 !important;
}
#loginform, #loginform label, #lostpasswordform, #lostpasswordform label, #registerform, #registerform label, #lostpasswordform, #lostpasswordform label{
font-size: 1.1em !important;
color: #282461 !important;
margin: 0 0 0 22px;
}
#registerform #reg_passmail{
margin-left: 25px !important;
}
#registerform .g-recaptcha{
margin: 10px 0 15px 32px !important;
}
.login .button.wp-hide-pw {
right: 25px !important;
}
.login p.forgetmenot {
margin-left: 25px;
}
.login .forgetmenot label {
margin: 0 !important;
}
/* ###################################################################
Navigation links under login form
################################################################### */
#nav{
position: relative !important;
clear: both !important;
position: relative !important;
top: 20px !important;
color:#282461 !important;
font-size: 1.1em !important;
text-shadow: none !important;
text-align: center !important;
}
.login #login #nav {
color: #282461 !important;
}
.login #login #nav a {
color: #282461 !important;
text-decoration: none !important;
}
.login #login #nav a:hover {
color: #282461 !important;
text-decoration: underline !important;
}
This CSS serves as a starting point for your custom creation!
You might have noticed all the !important’s throughout the above CSS. This is because this CSS does not replace the stock login page’s CSS. Rather, the contents of the your new ‘custom-login.css’ are included on the login page in addition to the stock login CSS. When we declare a duplicate style we need to make sure WordPress uses OUR style, thus the !important overrides.
Without modification, the above example code will produce a customized login page that look like this:
For my application I decided against a custom logo and instead applied a background image on the login form. You may wish to remove the background image and add the logo back in. The necessary lines are commented in the above CSS.