A finishing touch I often add to WordPress sites is a custom login logo. After updating to version 3.4 recently, I noticed the logo had become stretched and distorted:
It turns out this issue is caused by WordPress 3.4’s new support for higher-resolution (or “retina”) displays in the admin panel. To ensure the new graphics appear at the correct size on all devices, background-size attributes have been added to the core CSS. As your custom logo is likely not the same size as the WordPress logo, all that’s needed is to set background-size to auto – making the updated function:
function custom_login_logo() {
echo '
<style type="text/css">
.login h1 a {
background-image:url('.get_bloginfo('template_directory').'/images/login_logo.png);
background-size:auto;
}
</style>
';
}
add_action('login_head', 'custom_login_logo');
And there it is! All fixed.
