The Default Styling of the WP Login page
We see this screen everytime we login to a WordPress site, right?
And, if you are like me, you're tired of it and you want it to look custom to fit your project or match the styling of your client's theme? Well, here's how to do just that!
You have the option to change everything you see in the image from the WP logo to background and foreground colors as well as the styling of the inputs.
The Finished Project
In the image below, I changed everything on the page except the WordPress default styling for the alert messages. You can change that too if you truly want! It didn't bother me so I left it. More than likely, I probably just got lazy...
The PHP script must be copied into your functions.php. To keep the functions.php file somewhat small, I created all of the CSS styling for the login page into its own PHP file. I then call that file within the PHP function.
How It's Done
PHP - functions.php
function savvy_login_page_styles() {
require get_template_directory().'/inc/savvy-login-styles.php';
}
add_action( 'login_enqueue_scripts', 'savvy_login_page_styles' );
CSS - savvy-login-styles.php
/* Login Page Custom CSS Styles */
<style>
body.login {
background-color:#3c3331;
font-family:"Sans Serif Pro",Roboto,sans-serif;
}
/* Message Box */
body.login #login_error,
.login .message {
border-left:4px solid #c9ab69;
}
body.login div#login {padding:3% 0;}
/* Path Change */
body.login div#login h1 a {
background-image:url(<?php echo get_template_directory_uri();?>/img/Logo/home_savvy_logo-2.png);
background-size:300px 230px;
height:230px;
width:300px;
}
body.login div#login form#loginform {background:#e2ddd1;}
.login label {color:#3c3331;font-size:14px;}
/* Checkbox Color */
.login form .input,
.login form input[type=checkbox],
.login input[type=text] {
background:#ffffff;
}
/* Check Color */
input[type=checkbox]:checked:before {
content:"\f147";
margin:-3px 0 0 -4px;
color:#c9ab69;
}
/* Login Button */
body.login div#login form#loginform #wp-submit.button.button-primary.button-large {
background-color:#c9ab69;
border-color:#c9ab69;
color:#ffffff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#c4a35a;
background-image:-moz-linear-gradient(top,#c9ab69,#bc9644);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#c9ab69),to(#bc9644));
background-image:-webkit-linear-gradient(top,#c9ab69,#bc9644);
background-image:-o-linear-gradient(top,#c9ab69,#bc9644);
background-image:linear-gradient(to bottom,#c9ab69,#bc9644);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9ab69', endColorstr='#bb9543', GradientType=0);
border-color:#bc9644 #bc9644 #83692f;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
box-shadow:0 1px 0 #a9780d;
}
body.login div#login form#loginform #wp-submit.button.button-primary.button-large:hover,
body.login div#login form#loginform #wp-submit.button.button-primary.button-large:focus {
text-decoration:none;
background-position:0 -15px;
-webkit-transition:background-position .1s linear;
-moz-transition:background-position .1s linear;
-o-transition:background-position .1s linear;
transition:background-position .1s linear;
}
body.login div#login form#loginform #wp-submit.button.button-primary.button-large:hover,
body.login div#login form#loginform #wp-submit.button.button-primary.button-large:focus {
background-color:#bc9644;
}
/* Input Field Focus Color */
body.login div#login form#loginform p > label > input[type=text]:focus,
body.login div#login form#loginform p > label > input[type=password]:focus,
body.login div#login form#loginform p > label > input[type=checkbox]:focus {
border-color:#c9ab69;
-webkit-box-shadow:0 0 2px rgba(160, 136, 83, 0.8);
box-shadow:0 0 2px rgba(160, 136, 83, 0.8);
}
body.login div#login form#loginform p > label > input[type=text],
body.login div#login form#loginform p > label > input[type=password],
body.login div#login form#loginform p > label > input[type=checkbox] {
border:1px solid #D8CDB2;
}
body.login div#login p#nav {color:#c9ab69;margin:24px 54px 0;}
body.login div#login p#nav a,
body.login div#login p#backtoblog a {
padding:6px;
border:2px solid #c9ab69;
color:#ffffff;
-webkit-transition:all 0.5s linear 0s;
transition:all 0.5s linear 0s;
}
body.login div#login p#backtoblog > a {display:block;text-align:center;}
body.login div#login p#backtoblog,
body.login div#login p#nav {
font-size:13px;
padding:0;
}
body.login div#login p#nav > a:hover,
body.login div#login p#backtoblog a:hover {
background-color:#c9ab69;
color:#ffffff;
border:2px solid #e2ddda;
}
</style>