Every theme for WordPress has at least two webforms- one for “search” and one for “comments.” Though it can be a bit of a challenge, making those two webforms blend nicely with the theme you’ve customized is, at least to some degree, possible.

Web Form styling is one of those areas that is a quagmire of conflicting information, since the w3 spec appears to say forms can be styled, and indeed form elements have lots of style hooks, but the reality when tested in the real world is not what you expect. Most of the problems stem from the fact that many of the elements in webforms are controlled by the Operating System GUI, in combination with how the browser used with that Operating System presents that form element. Stated simply- a button looks different in almost every single OS/browser combination, and the level of control you have styling that button differs just as much between the different OS/browser combinations. For instance, Safari and Camino users in Mac will, for the most part, see the exact same capsule shaped white/gray button, no matter what you define in your css. A background color/text color combo that works in almost any other OS/browser doesn’t give you anything but that same white/gray capsule shape with black print in Safari or Camino. The good news is you’ll always get a workable button even if it looks blah.

This section will focus on what actually WORKS. We’ll look at what can be done to style forms in WordPress– which style attributes applied to which form elements will actually give you some sort of customization in almost all OS/browser combinations (with the possible exception of Safari/Camino, and, in one case, Opera.) Results will vary, but with a bit of care you can have your forms looking spiff, if not quite identical, crossplatform. There are also some “caution” signs along the way, areas where, though they can be styled, you will want to watch the results carefully in as many browsers as possible. We’ll be looking at the particular form elements used in the Kubrick Default template that control the “search” and “comments” forms. For a complete rundown on how the different OS/browser combinations treat the styling of form controls these two articles are very thorough- do check out the links to the screenshots, it is a revelation, and the basis for the information presented here.

Styling Form Controls
Styling Even More Form Controls

The Search Form

In the Kubrick Default theme there are three hooks upon which you can hang searchform styles. Open the searchform.php file and take a peek at what you have to work with, then open style.css and get to work (save a backup!) If you’re using another theme, simply open the searchform.php and see what ids have been defined for you, and use those as your style hooks.

The first hook you’ll see in searchform.php is the form tag with id=”searchform”. In your stylesheet, which in this and most themes is named style.css, you can use #searchform to define a width for your form, a background color and/or image, and borders. With width, I suggest you use a percentage, and remember it’s a percentage of the container the form sits within, not of the page! In the case of Kubrick it’s a percentage of the width of the sidebar. You can also define padding and margins if you wish, though you should do so with care. Since the searchform is most often placed in the sidebar, the width of the sidebar will contain the searchform, and padding/margins may conflict with this in the theme, and maybe even make the layout “break”. Do save a backup of the original stylesheet, and test drive your style changes early and often if you’re hanging margins and padding on this particular style hook. In many themes simply centering the form does the trick. You can try using a percentage width, ie 94%, and then define margin left and margin right as 3% each.

Since there is more than one form in most WP blogs, it is best to define the form styles using the searchform id rather than the form tag, especially since the search form and the comments form reside in different places in the layout, and what works for one might not be so good for the other, especially if you decide on a different color background for your sidebar. In #searchform you can also define font-family, text-decoration, and font size/font weight. Do keep in mind that though you want to customize your forms you also want them to be recognizable as forms. Deviating too far from “normal” is not a good idea when it comes to your forms. Be kind to your visitors.

Searchform style hook number two is in the input type=”text” tag, which has an id=”s” hook upon which to hang your styles. This input tag is the actual box within which people type search terms. In your stylesheet you can define styles for #s such as background color, (text) color, font-family, font-weight, and more. Safari will not recognize background color or (text) color, and will always show the text input box as white with black text. All browsers seem to support font-weight declarations, and all seem to respect font-family. IE5Mac and Safari do not recognize text-align declarations. Though all browsers seem to do SOMETHING about font size when defined in percentages, results vary an amazing amount from browser to browser and OS to OS, so my suggestion is to leave font size set at the default. Padding can be used here, but here also I suggest you use the default, since those results also vary widely. You can define margins and a width for this hook, but do be careful and test drive often since this is an area where variations between browsers can be vast. Width is best defined as a percentage, and should show as a percentage of its wrapper, which is #searchform.

The most challenging of the three search form style hooks is input type=”submit”, with the id=”searchsubmit” hook upon which you can hang styles by using #searchsubmit in your stylesheet. This is the “submit” button. Buttons are where browser support varies the most, though styling a button will always give you a workable button, even if the style isn’t supported in a particular browser. All browsers except Safari and Camino seem to support background-color and (text) color, though the buttons will look very different from one browser to another. For some reason Opera changes the button shape if you apply a background color. Opera Mac and Win, Safari, and Camino do not support any border styling on buttons. All browsers except Safari support font-family and font-weight.

The Comments Form

Though there are more style hanging hooks in the comments form, you’ll most likely use shorthand css to group them together, at least you will if you want all text boxes styled with the same colors/fonts/etc. Open comments.php and scroll down around 3/4 of the way to where the form tag opens. You’ll see the following form elements identified by id: commentform (the whole form), author, email, url, comment, and submit. All but the first and last ones are text entry areas. You can group them in your css file, and define all four at the same time. This will allow you to give all the text elements a uniform look, and shorten your css. The id=”commentform” is the wrapper for the whole form (#commentform in the css.) As with the #searchform, you can style this with either a background color or image, you can add borders, and you can change text color, font-family, font weight, text decoration, etc. The width can also be specified, though percentage is recommended, since strict pixel widths (or character widths in the html) can sometimes break a layout by overhanging the sidebar.

One thing you can define in the html, rather than the css, is the number of rows the comment box will stretch to. This defines the amount of text people can enter. That tag is id=”comment” in the comments form of the comments.php file.

The submit form field is the same type of submit button you styled in the search form. The same issues and rules apply, and the same problems may occur crossbrowser.

The Finish Line

The last thing to do is check every page of your newly customized theme in every browser you have (you should have at least three- IE6, Opera 8, and Firefox 1.X on Windows, FF or Camino, O, Safari, and IE5 on Mac) and see if your changes look presentable (if not identical!) in all your browsers. Validate your page at http://w3.org, both the xhtml and the css and fix any errors. Then post to the Support forum at WordPress and ask for browser checks in the systems and browsers you don’t have. You passed? CONGRATULATIONS! You’ve customized your WordPress Forms!

Kickass-Squawk! Wordpress Theme from Kickass Web Design is now available for download. I’m making it available under the Creative Commons License- some rights are reserved. You may freely use this theme providing the comment section in the top of the style.css file remains intact, and providing the link to http://kickasswebdesign.com remains intact and visible in the sidebar.

Same day edit– Woohoo! Vicki has my theme up and running already and she’s tweaked it wonderfully! Check out POV, her WP blog!

Boo, that amazing harley panhead purr going all the while, eskimo kissed me awake this morning. All is right in my world.

Though I’ve managed to function over the last couple weeks, there was an essential ingredient missing. Call it a hole in my heart. I found it hard to really concentrate and focus, even easier than usual to procrastinate, and just . . . just, well, b l a h . My perpetual smile was gone.

Yesterday after Boo’s return I was walking around singing all day. My smile is back. And I have a feeling I’ll get stuff done a lot easier now.

I know that people who don’t have animals have a hard time understanding. They only seem to see the muss, fuss and bother involved. They don’t know the comfort, and they’ll never know that unconditional love.

Hairball cleanup is a very small price to pay.

He’s more black and gray than black and white, he’s missing a few left whiskers, he’s limping slightly, and has a funny dazed look about him, he’s at least a pound or two lighter, but he’s HOME! As I was getting ready to leave this morning at 4AM I heard a very distinctive Elmer Fudd “Hewwo?” right outside the door. Syd, the dog, went ballistic, barking and yelling, and I got to the window just in time to see a familiar black and white behind take off into the bushes. After hushing Syd up I went outside alone and sat next to the bushes by the hole in the fence just calling Boo’s name softly– and he came.

Finally, a story with a happy ending.

I think I’m gonna lock Boo in the bathroom with earplugs in when I make a certain phone call to the vet . . .

A virtual missing-pet support group. Who would have thought such a thing could be? Thank you all. If he does make his way home I’ll be shouting it from the rooftops. Nothing yet. The window is still cracked open and the screen up.