Change Colour Of Login Page

I believe that the background colour of the Login Page (that has the WordPress logo on it) is #f1f1f1. Can you tell me please how to change it to #006699?

See screenshot.

Thanks very much!

  • James Morris
    • WordPress Enthusiast

    Hello Mary,

    I hope you are doing well today.

    This can be accomplished quite easily. If you check out the following link from the WordPress Codex, there's a great deal that can be customized on the login page: https://codex.wordpress.org/Customizing_the_Login_Form

    You would need to have some custom CSS like:

    body.login {
    background: #006699;
    }

    My recommendation is to place any customizations in mu-plugin so that if you change themes your changes are retained.

    Alternately, you could just install our easy-to-use Ultimate Branding plugin which has a module for customizing the CSS of the Login page.

    I hope this clarifies a bit.

    Best regards,

    James Morris

  • Mary
    • Wisp of the WP Loop

    I'm not sure how to make a mu-plugin with just CSS so I put the code in my Custom CSS plugin but it didn't work.

    I've tried Ultimate Branding and had some conflicts so would prefer to do this without the plugin if possible. I have also paid for Login Styler which would do it. Just trying to reduce the number of plugins when what I want to do is small.

    I didn't really understand the Codex but will keep reading and hopefully figure it out.

  • James Morris
    • WordPress Enthusiast

    Hello Mary,

    I certainly understand wanting to keep the plugins down to a minimum. The mu-plugin I suggested is 13 lines and essentially a add_action hook like what you would add to your theme. I've went ahead and created this for you and uploaded it to GitHub. You can download it here: https://gist.github.com/JRMorris77/aa30aaaa5f44052bcdb641af6a15fe4a

    To set this up, just upload the custom-login.php file to wp-content/mu-plugins/. The plugin will be automatically activated.

    In the interest of giving you a quick preview, this is the code in the file:

    <?php
    // This changes the color of the login page
    function hook_css() {
        ?>
            <style>
                body.login {
    				background: #006699;
    			}
            </style>
        <?php
    }
    add_action('login_enqueue_scripts', 'hook_css');
    ?>

    I hope this clarifies a bit.

    Best regards,

    James Morris

  • Mary
    • Wisp of the WP Loop

    James, you are more than AMAZING!!!! Thank you SO MUCH!!!! It works perfectly!

    Oops! I just noticed that now I can't see the writing for Lost Password and back to Christian Gays.

    I tried adding
    p#nav {
    color: #fff;
    }

    but it didn't work. How do I make the text white please?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.