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. Setting width on this is tricky. If the column that forms sidebar.php is a fixed width, then define a width for searchform that is just a bit narrower than the column it resides in and in the same dimension type, so if the column is 150px wide, make your searchform 146px. If the column width is defined in ems, use ems. 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. When you test, remember to look at your theme in different browsers and with different browser defined font sizes to make sure it doesn’t break your layout. In Firefox it’s view/textsize/increase (do this at least three times!), in IE6 it’s view/textsize/largest.

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 pixels if the column it resides in is a pixel-fixed width, and as percentage or em in a fluid width column. Match the way width is defined on this with the way it’s defined on the column it resides in.

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. It’s best not to define a width on this at all, since it’ll then be as wide as the text that fills the button, no matter what browser-defined font size the user picks.

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. You’re better off defining width on each of these layout elements, and using the width unit used for the column within which the form resides, which, in the case of the Kubrick Theme, is the widecolumn class (.widecolumn in the css) and which in its default configuration is defined as 450px.

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.

Other Form Elements

Some of the plug-ins you can use with WordPress require the use of a form with a dropdown box. There are limits to how you can style a dropdown box, mostly related to font. Two things you need to be aware of. Styling width, as with the text boxes, will be easier if you use the width unit that has been used to define the column in which the dropdown box will reside, so if its a fixed width column defined in pixels, use pixels to define the width of your dropdown box. To allow the box to stretch in height depending on the browser-defined font size it’s best to define a line-height in ems on your dropdown box. If you don’t, the height of the box will remain short no matter how tall the font size grows, which is pretty awful! Start with 2em, then experiment in different browsers and with different browser defined font sizes until you’re happy with it.

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!

This entry was posted on Thursday, June 16th, 2005 at 10:00 pm and is filed under WP Stuff. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.