We Are Communication Architects

Building brand awareness through content creation and community engagement.

January 9th, 2012

Custom WordPress Login – Part 2

In case you missed the first part of this unexpected series, check out Customize your WordPress Login page from a few months ago. Those instructions are still valid, the only thing we are doing different is adjusting the stylesheet.

The release of WordPress 3.3, like all WordPress updates, brought a lot of good new features. One unexpected product of the upgrade was a bunch of customized WP login screens I had developed looked broken. So what gives? We need to be more specific. Overall I try to be as generic with my style classes as I can, so I can more easily reuse code and also to keep the stylesheet as small as possible by not being overrun by selector overkill. It usually works out pretty well when you’re styling your own stuff but not as well on elements already being styled by another source like a plugin. Or in this case core styles.

When you need to tweak the styles of elements like these you want to leave the original styling alone. What’s the first rule of WordPress? Don’t hack core files. What’s the second rule of WordPress? Don’t hack core files. Plugins and themes you download should get the same treatment so when you upgrade any of them your files don’t get overwritten. What I like to do is append any of my styles to my main stylesheet. Usually I’m not doing big additions to the stylesheet so a separate stylesheet doesn’t seem worth an extra HTTP request. For this specific example a separate stylesheet does make sense because you don’t need to load your main stylesheet in the admin area. So what do we do when the element is getting styled after our main stylesheet loads? We get more specific. Using Chrome Inspector or FireBug we can find out the structure being used to style an element.

So let’s look at the old login styles I had in there and then the new styles that fixed the issue after upgrading.

.login {background: url(../images/bg-body.gif) repeat-x top center;}
form {border: 1px solid #ededed; background: #e60035 url(bg-form.jpg) no-repeat; width: 275px;}
#nav {padding-top: 8px;}
.login #nav a {font: bold 12px Adobe Garamond, Georgia, serif; text-decoration: none}
h1 a {width: 266px; height: 84px; background: url(../images/logo.gif); padding: 0; margin: 0 0 15px 27px}
label {color: #ededed;}
input {background: #fff;}
body.login {background: url(../images/bg-body.gif) repeat-x top center;}
.login form {border: 1px solid #ededed; background: #e60035 url(bg-form.jpg) no-repeat; width: 275px;}
.login #nav {padding-top: 8px;}
.login #nav a {font: bold 12px Adobe Garamond, Georgia, serif; text-decoration: none;}
.login h1 a {width: 266px; height: 84px; background: url(../images/logo.gif); padding: 0; margin: 0 0 15px 27px}
.login label {color: #ededed;}
.login input[type=text] {background: #fff;}

The styles I had in there before just weren’t specific enough. By adding the .login class before almost everything made them more specific than the core styles and restored my styles.

About the Author
Pete Schiebel is the lead front-end developer for the Platforms team, described by some here as the "front end MacGyver" for how he works to make sure client projects look and function as advertised. Follow him on Twitter @sneakepete.

Filed in CSS, Development, WordPress

Comments are closed.