Cheesetoast » login http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.10 Customize the WordPress Login Screen CSS http://www.cheesetoast.co.uk/customize-wordpress-login-screen-logo-css/ http://www.cheesetoast.co.uk/customize-wordpress-login-screen-logo-css/#comments Mon, 01 Oct 2012 15:42:24 +0000 http://www.cheesetoast.co.uk/?p=861 Here's a useful little code snippet that you can use to edit the Wordpress login screen styling without altering the core CSS files. In this example I'll demonstrate how to replace the Wordpress logo on the login page. Continue reading

The post Customize the WordPress Login Screen CSS appeared first on Cheesetoast.

]]>
Here’s a useful little code snippet that you can use to edit the WordPress login screen styling without altering the core CSS files. In this example I’ll demonstrate how to replace the WordPress logo on the login page.

Open up your functions.php file and paste this function:

function my_custom_login_logo() {
echo '<style type="text/css">
.login h1 a { 
background-image:url('. get_stylesheet_directory_uri() .'/images/your_logo_file.jpg) !important;
background-size: 145px 62px !important;
}
</style>';
}
add_action('login_head', 'my_custom_login_logo');

To set the background image url I’ve used the function get_stylesheet_directory_uri(), which retrieves the stylesheet directory of the current theme/child theme. You should always use the dynamic WordPress functions to locate files, as opposed to using a static address.

Since this styling code is called before the default WordPress CSS for the login page I’ve used the !important property to ensure that it’s not overwritten. This apples to any other changes you decide to make.

For reference, here’s the default styling for the login page header anchor:

.login h1 a {
background-image:url('../images/wordpress-logo.png?ver=20120216');
background-size:274px 63px;
background-position:top center;
background-repeat:no-repeat;
width:326px;height:67px;
text-indent:-9999px;
overflow:hidden;
padding-bottom:15px;
display:block
}

Good luck customizing your own login screen.

The post Customize the WordPress Login Screen CSS appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/customize-wordpress-login-screen-logo-css/feed/ 0