WordPress: Redesigning the login dialog

Here’s how the login dialog of my blog looked like a few days ago:
WordPress default login dialog

It’s the standard login dialog and well looks very standard… I thought that since I moved from Blogger to WordPress over 6 months ago it was time to also get a login page fits to the blog UI style and looks more personalized than that.

You cannot directly influence the login dialog by adding a few CSS instructions in the stylesheet of your theme. But you can work in the theme functions (functions.php) to enhance the dialog.

First I wanted to replace the WordPress logo by my own logo. Of course you need to first create a cool logo. I didn’t spend too much time on this but I think the ouput is fine. Then you need change the URL of the header background in the login dialog. This is done by enqueuing some CSS when the login dialog is shown. This is done by adding the following to functions.php:

function benohead_login_redesign() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri() ?>/images/benohead.png);
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'benohead_login_redesign' );

Note that I use get_stylesheet_directory_url to get the URL of my theme because it’s a child theme. Using get_template_directory_uri() or get_bloginfo(‘template_directory’) would return the directory to the parent theme.

We’ll keep extending the function benohead_login_redesign() with more CSS as we advance in our redesign.

The login dialog now looks like this:
WordPress login logo changed

Second I wanted to change the URL you are taken to when clicking on the logo. It goes to wordpress.org by default but I wanted it to point to my blog (otherwise changing the logo would make no sense). This can be done by adding the following to the bottom of functions.php:

function benohead_login_headerurl() {
	return get_bloginfo('url');
}
add_filter('login_headerurl', 'benohead_login_headerurl');

It basically adds a filter used when you click on the header, which replaces the standard URL by the URL of my blog. No screen shot here since there’s nothing to see.

Change it to a dark theme

Since I’m using a dark theme for the blog, I also wanted to have the login page go along those lines, so I changed the background color by adding the following to the CSS in benohead_login_redesign():

        html body.login {
            background-color: #0B0B0B;
        }

It then looked like this:
WordPress login dark

Now the background color is fine but the links at the bottom are not really readable anymore with these text shadows. Let’s remove them:

        .login #nav, .login #backtoblog {
            text-shadow: none;
        }

Now it does look better:
login dark without text shadows

But the dialog itself in the middle is much too bright and should also become darker:

	.login form {
	    background-color: #2B2B2B;
        }

Here’s how it looks like:
WordPress login all dark

Nicer buttons

I wanted to use some nice buttons provided by amazingweb GmbH. They have a nicer shape than the original buttons and elegant and simple effects on mouse hover and when clicked:

	html body.login div#login input#wp-submit.button-primary {
	    display: inline-block;
	    vertical-align: middle;
	    text-align: center;
	    font-family: Helvetica, Arial, sans-serif;
	    font-size: 11px;
	    -webkit-border-radius: 3px;
	    -moz-border-radius: 3px;
	    -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	    -khtml-border-radius: 3px;
	    border-radius: 3px;
	    padding: 5px 15px 5px 15px;
	    width: auto;
	    height: auto;
	    border: none;
	    text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0px;
	    text-decoration: none;
	    color: #b4b4b4;
	    background: -webkit-gradient(linear, left top, left bottom, from(#00547A), to(#21759B));
	    background: -moz-linear-gradient(top, #00547A, #21759B);
	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff00547A, endColorstr=#ff21759B);
	    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff00547A, endColorstr=#ff21759B)";
	}
	html body.login div#login input#wp-submit.button-primary:hover {
	    color: #b4b4b4;
	    background: -webkit-gradient(linear, left top, left bottom, from(#00648A), to(#2185AB));
	    background: -moz-linear-gradient(top, #21759B, #2185AB);
	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff21759B, endColorstr=#ff2185AB);
	    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff21759B, endColorstr=#ff2185AB)";
	}
	html body.login div#login input#wp-submit.button-primary:active {
	    color: #b4b4b4;
	    background: -webkit-gradient(linear, left top, left bottom, from(#21759B), to(#00547A));
	    background: -moz-linear-gradient(top, #21759B, #00547A);
	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff21759B, endColorstr=#ff00547A);
	    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff21759B, endColorstr=#ff00547A)";
	}

Now this button does look good:
WordPress login new button

Fixing the remember me alignment

Don’t know whether it disturbs anybody else but the alignment of the box and text for the remember me check box just drives me somehow crazy, so I needed to change it right away:

	html body.login div#login form#loginform p.forgetmenot label input#rememberme {
	    vertical-align: baseline;
	}

Now the screenshot:
WordPress remember me realigned

Adapting the registration dialog

Then I noticed that there was still some work to do on the registration dialog:
registration dialog before changes

Here I needed to change two things: change the background color of the message at the top and change the text color below the Email text box (which almost couldn’t be seen):

	html body.login div#login form#registerform p#reg_passmail {
	    color: #777777;
	}
	html body.login div#login p.message {
	    background-color: #2B2B2B;
	    border-color: #777777;
	    color: #777777;
	}

This dialog now looks like this:
registration dialog after changes

Adapting the error dialog

When you enter the wrong credentials an error message is shown in the login dialog:
login error message before changes

And I also wanted to make a few changes:

	html body.login div#login div#login_error {
	    background-color: #2B2B2B;
	    border-color: #FF7777;
	    color: #FF7777;
	}
	html body.login div#login div#login_error a {
	    color: #FF7777;
	}

Here’s how the error message looks like now:
login error message after changes

Conclusion

With these few changes I could dramatically change the look of the login page. That’s one of the things I love about WordPress. It’s so easy to modify anything and even though these kind of things could actually break in a new version of WordPress, it is really rarely the case.

Alternatives to this method are to modify the WordPress PHP files directly (which you should avoid at all costs) or create your own login page and link it. You should opt for the latter only if you need to make such dramatic changes that the method described here cannot be used. And you’ll have to basically implement a copy of the login dialog and will not automatically get fixes when a new version of WordPress is released.

So to summarize, as long as you do not want to completely change the dialog and it’s functionality, you should stick to this method which is easy, relatively upgrade-proof and effective.

Leave a Reply

Your email address will not be published. Required fields are marked *