Making your signup page match your theme

By default, the signup page users get directed to is made to integrate into the default theme. As the site admin of the best new blog host on the block, you’re probably going to pick another theme so you can stand out in the crowd. With soem themes, the signup page looks horrible. While others have debated back and forth about how best to hack the wp-signup.php page or add in hooks or whatever, I’m here to tell you the dead-simple way.

If you look closely at the wp-signup.php file, you will see that all the guts of the signup form are wrapped in a div. This div is given the class attribute of “widecolumn” and an id of “content”. Because in the default theme, these attributes exist.

It’s likely whatever theme you’ve chosen (unless it’s a Kubrick mod) doesn’t have this class or id in its own stylesheet.

I like to do minor edits right on the server, so surf on in to your file manger and the style.css file of the theme you’ve chosen for your main blog. It doesn’t matter where you’ll add this bit, but I like to put it either at the very end with any other additions I might want, or near the main content div that may already exist. Check to see what the main content area is called.

Add this:

.widecolumn {
width: 450px;
}

You can tweak that width if needed.

If your theme has named the main content area div something other than “content”, then this is the bigger reason why the signup page doesn’t match your theme very well. Look in the stylesheet for something called “main” or similar. You can also find the name of this div by looking in the theme’s index.php.

When you’ve found it in the stylesheet, copy it, paste it right underneath and rename the copy to an id of “content”. Save your changes. Have a look at the signup page and note any small spacing issues. Tweak the stylesheet as needed, now that you know what to fiddle with.

Tweet This Post