UPDATED: The solution is to use login_head if you need to overwrite – @Jevuska
After updating to WP 4.5 my styles to customize the login page do not overwrite the default WP styles. Here’s my code:
function my_login_logo() { ?>
<style type="text/css">
.login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/assets/images/logo.png);
padding-bottom: 30px;
width: 297px;
height: 64px;
background-size: 297px;
}
.login form {
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.4);
box-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.login label {
color: #333;
}
.login #nav a {
color: #007CAD;
}
body, html {
background: #fff;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );
1 Answer
@Kevin, here a couple options how to overwrite css for login page.
Via login_enqueue_scripts
If you use this hook, you need to create css file the same path with functions.php
, say login-style.css
, add your code inside, change your property background-image like this background-image: url(assets/images/logo.png);
( make sure your path correct ), and add your function with wp_enqueue_style
in functions.php
. We use login
as handle of login-style.css
, and it will put your css after default WP styles.
add_action( 'login_enqueue_scripts', 'my_login_logo' );
function my_login_logo()
{
wp_enqueue_style( 'login-custom-style', get_stylesheet_directory_uri(). '/login-style.css', array('login') );
}
Via login_head
Since you have php code inside your css, by use this hook, your inline css code will be put after default WP styles.
add_action( 'login_head', 'my_login_logo' );