How To Edit Wordpress Login Page

The following blog article was written by: Sabrina Sabino on June 26, 2011.
Last revised by: Sabrina Sabino on July 5, 2011.

Wordpress Default Login Page

If you want to further personalize your WordPress blog or CMS you could always edit the WordPress login’s default page. To get there, you have to go to http://www.yoursite.com/wp-admin, so the files you need to edit are located in the wp-admin folder in the main directory.

If you want to change its style, the file you’re looking for is at ‘wp-admin/css/login.css’. Here, you can change the width, height and other attributes of the login box. page background, etc.

For example, if you want to change the width of the login box you should find the default CSS code:

#login{width:320px;margin:7em auto;}

If we increase the width to e.g. 800 pixels, the CSS code should be edited to:

#login{width:800px;margin:7em auto;}

This should result in a considerable longer login box.

Edited Login Box Width

Similarly, we can also change other attributes such as background colour or even background image. For example, locate the code for body:

body{padding-top:30px;font:11px "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;}

As there are no background attribute, we can add this, and then link it to an image. Images can be stored in the wp-admin/images folder.

body{background: url(../images/islands.jpg) repeat;padding-top:30px;font:11px "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;}

With the following result:

Edit WordPress Login Background

You can also remove objects you don’t want, for example the ‘back-to’ link to your front page:

Remove 'Back To' Link

Its ID is #backtoblog and its default code is:

#backtoblog{position:absolute;top:0;left:0;border-bottom:#c6c6c6 1px solid;background:#d9d9d9;background:-moz-linear-gradient(bottom,#d7d7d7,#e4e4e4);background:-webkit-gradient(linear,left bottom,left top,from(#d7d7d7),to(#e4e4e4));height:30px;width:100%;}

You don’t have to delete anything, simply include:

display: none;

…and it will disappear. You can always bring it back by deleting the display attribute. There we have it, several ways to edit the WordPress login page.