Can’t customise login page, despite !important

OK, I have solved this after an hour or so of messing around. Unfortunately, you cannot override the CSS settings of the login page. Instead, you need to add some script to your theme’s functions file, and then create a new, specific stylesheet for the login page. I’m not the world’s best coder and the following could be tidied up, but this works. Here are the steps:

1. In your child theme folder, create an ‘images’ folder
2. Upload an icon to replace the standard WordPress icon
3. In your functions.php file, add the following. This swaps the WP icon for yours and makes it link to your homepage:
   

/** CHANGE WP LOGO AT LOGIN **/
function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/jficon.png);
		height:120px;
		width:120px;
		background-size: 120px 120px;
		background-repeat: no-repeat;
        	padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Your Website's Title';
}
add_filter( 'login_headertext', 'my_login_logo_url_title' );

4. Change the sizes/padding above to your image accordingly, and change where it says ‘Your Website’s Title’ to your own description or title

5. Now we want to override the default CSS for the login/registration/lost password page, so underneath the above code in your functions.php file, add:

//Replace style-login.css with the name of your custom CSS file
function my_custom_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
}

//This loads the function above on the login page
add_action( 'login_enqueue_scripts', 'my_custom_login_stylesheet' );

6. Create a ‘style-login.css’ file and add it to the root of your child theme.

7. Add the following CSS to this file and upload:

body.login {background-color: #5c5c5c;}
body.login div#login h1 a, body.login div#login h1, body.login div#login p#nav {background-color: #fff;}
body.login div#login h1 {padding-top: 20px;}
body.login div#login h1 a {margin-bottom: 0;}
body.login div#login form#loginform {margin-top: 0; background-color: #fff; border:none;}
body.login div#login p#nav {margin-top: 0; padding-bottom:20px; font-size:0;}
body.login div#login p#nav a {font-size: 20px;}
body.login div#login p#backtoblog a {color: #fff;}
body.login .wp-login-lost-password::before{content: "\a"; white-space: pre;}
body.login .notice {margin-bottom: 0;}
body.login div#login form#registerform, body.login div#login form#lostpasswordform {margin-top:0; border:none;}
body.login div#login p#nav a.wp-login-log-in::after {content: "\a"; white-space: pre;}

What this does:

Changes the background colour of the login/registration/lost password page.

Keeps the main elements of these forms in a white background

Increases the ‘Registration’ and ‘Lost Password’ link sizes

Puts these two links on separate lines

Cunningly removes the pipe character between these two links by making the font size zero and then changing the link font size back to normal!

I’ve kept the ‘return to your website’ link at the bottom separate and changed the colour to white. You could make this div white, remove the padding and make it look part of the main form but I prefer it this way.

The language change option at the very bottom is irritating as this sits in its own 100% width div. There could be a way of making the background white and making it the same width as the rest of the form so everything sits on a white background, but I’d lost the will to live at this point.

Hope this helps someone looking to do something similar.

This is what it will look like.

Hi there,

Good to know that you have figured it out. Thanks for sharing what you are doing here.

Kind regards,
Herman ??