The WordPress login page comes with it’s own CSS, but the design is not appealing and it is branded – learn how-to brand the WordPress login page here. The next thing you may want to do in order to customize the login page is to override the CSS.Here is what the WordPress login page looks like by default:

WordPress Login Page

CSS Template

This is what the CSS would look like:

body.login {} body.login div#login {} body.login div#login a {} body.login div#login a:hover {} body.login div#login h1 {} body.login div#login h1 a {} body.login div#login form#loginform {} body.login div#login form#loginform p {} body.login div#login form#loginform p label {} body.login div#login form#loginform input {} body.login div#login form#loginform input#user_login {} body.login div#login form#loginform input#user_pass {} body.login div#login form#loginform p.forgetmenot {} body.login div#login form#loginform p.forgetmenot input#rememberme {} body.login div#login form#loginform p.submit {} body.login div#login form#loginform p.submit input#wp-submit {} body.login div#login p#nav {} body.login div#login p#nav a {} body.login div#login p#backtoblog {} body.login div#login p#backtoblog a {}

WordPress Function

If you wanted to add the CSS through a function, add the following to your theme’s functions.php file:

 // Custom WordPress Login Page CSS 
function custom_login_page_css() { echo '<style type="text/css"> body.login {} body.login div#login {} body.login div#login a {} body.login div#login a:hover {} body.login div#login h1 {} body.login div#login h1 a {} body.login div#login form#loginform {} body.login div#login form#loginform p {} body.login div#login form#loginform p label {} body.login div#login form#loginform input {} body.login div#login form#loginform input#user_login {} body.login div#login form#loginform input#user_pass {} body.login div#login form#loginform p.forgetmenot {} body.login div#login form#loginform p.forgetmenot input#rememberme {} body.login div#login form#loginform p.submit {} body.login div#login form#loginform p.submit input#wp-submit {} body.login div#login p#nav {} body.login div#login p#nav a {} body.login div#login p#backtoblog {} body.login div#login p#backtoblog a {} </style>'; } add_action('login_head', 'custom_login_page_css');

The Potential Result

This is what the WordPress login page looks like for one of my travel sites:

Customized WordPress Login Page

Click on the image above to make it bigger.