Customizing the WordPress Backend
A custom login page is a really nice touch. There are plugins out there that can do this, but why bother when all you need to do is to drop this into your theme’s functions.php file. It will override the default WordPress login css styles and allow you to customize the logo and background. Totally fresh.
<?php
// Customize login styles
function bme_custom_login_styles(){
?>
<style type="text/css">
/* Change login page background - make sure image path is valid */
body.login{
padding-top:75px;
background: #68686B url("<?php echo get_stylesheet_directory_uri(); ?>/images/login-background.jpg") 50% -250px no-repeat fixed !important;
}
/* Custom logo - make sure image path is valid */
body.login h1 a {
background: url("<?php echo get_stylesheet_directory_uri(); ?>/images/logo-login.png") no-repeat top center;
height:100px;
background-size: 106px 106px;
}
#login { padding: 10px;}
/* Change link color & shadow if needed */
#loginform {
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.login #nav a, .login #backtoblog a {
color: #999!important;
text-decoration:none;
text-shadow:none;
}
.login #nav a:hover,
.login #backtoblog a:hover {
color: #fff!important;
text-decoration:none;
text-shadow:#000 1px 1px 0;
}
/* Add shadow to message and login boxes */
.login form, p.message {
-moz-box-shadow: rgba(0,0,0,0.5) 0 2px 8px;
-webkit-box-shadow: rgba(0,0,0,0.5) 0 2px 8px;
box-shadow: rgba(0,0,0,0.5) 0 2px 8px;
}
</style>
<?php
}
add_action('login_head', 'bme_custom_login_styles');
?>