Custom login CSS style
The WordPress login screen is pretty bland and sometimes you just want something different. Or maybe you just don’t want to remind your users that you’re using WordPress all the time. Add this to your functions.php file:
/* custom login style */
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/assets/css/custom-login.css" />';
}
add_action('login_head', 'custom_login');
this will add your own stylesheet to the login page. In this case, my stylesheet lives in ‘mytheme/assets/css/custom-login-css’. Then create a CSS file and change it as you see fit. My latest looks like this:
/* Custom Login Styles */
html {background:url(../images/default_large.png)} /* Page background. Can't use the body tag for this! */
h1 a { /* Title image (The "WordPress Logo"). Remember to update the height and width your image's dimensions */
background:url(images/default_large.png.none) 0 0 no-repeat;
width:415px;
height:70px;
}
body.login {border-top-color:#dff4fc;} /* Top bar background color */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;} /* Link effects in top bar */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;} /* Rollover link effects in top bar */
form {
border-radius:0;
box-shadow:none;
}
div.updated, .login .message, .message{
background-color:yellow;
border-radius:0;
}