Wordpress admin login restyling

Feb27th
2008
••

I recently restyled the login page for Wordpress. I like it a lot better actually, plus it has the bonus of matching my site. Odds of me redoing the whole admin panel are slim, very slim, but I learned a couple things doing it so I’ll talk about it.

A simple modification to the wp-login.php and this addition will work without and future modifications.

<link href="http://tugbucket.net/wp-admin/%3C?php%20bloginfo%28%27template_url%27%29;%20?%3E/admin2.css" rel="stylesheet" type="text/css" />

will return:
<link rel=”stylesheet” href=”http://www.tugbucket.net/wp-content/themes/walking/admin2.css” type=”text/css”>

Not bad. Simple. A nice idea if you are going to build multiple themes. That way the new CSS file is located in the current themes folder and no hunting around for it. Some basic CSS and a few new images and presto!

body.login {
background: #2D0505 url(layout/newbodybg.jpg) top left repeat-x;
}

body.login a:link, body.login a:visited, body.login a:active  {
color: #BE2109;
text-decoration: underline;
}

body.login a:hover {
color: #FAA48E;
text-decoration: underline;
}

#login {
background: url('http://www.tugbucket.net/wp-content/themes/walking/layout/loginintop.gif') no-repeat top center;
height: 505px;
padding: 12px 0 0 0;
}

#login form {
background: transparent;
padding: 22px 50px 25px;
}

#login #login_error {
background: #2D0505;
border: 1px solid #FFF8DB;
color: #FFF8DB;
}

#login h1 a {
padding: 0 0 40px 0;
}

For just the login screen, that’s all had to do. I didn’t have to do some of it either. I got a little anal over a few pixels. Feel free to have a look.