Over the last few weeks I have been dreading the redesign of the bankwide registration form.  This task has met with a lot of frustration while researching how to "style" the community builder form for joomla.  There isn't a lot of good information out there, so I decided to write one.  As always this tutorial assumes that you have a basic grasp of HTML, CSS and can use Firebug in firefox.

First, start by creating your web form style, being lazy I used the web 2.0 form style generator. I then used firebug to determine the location of the css file governing the form fields.  With your favorite editor open /components/com_comprofiler/plugin/templates/default.css (assuming you are using the default template)

Here is what the form looked like before:

Horrid, right?  Firebug informed me that the styles were defined in two places:

Around line 14, I changed the default to:

.titleCell, .captionCell , table.content_table td.titleCell, table.content_table td.captionCell {
font-weight:bold;
text-align:    left;
vertical-align:top;
padding:3px 3px 4px 6px;
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 16px;
color: #337FD0;
}

Then around line 33, I changed the default to:

.fieldCell input, .fieldCell select {
margin-top:0px;
margin-left:0px;
vertical-align: top;
border: 1px dotted #f5f3fb;
background: url('/none') no-repeat #f5f3fb;
font-family: tahoma, helvetica, sans-serif;
font-style: bold;
font-size: 17px;
color: #454743;
}

To add the effect of the current field having a different background color, I added:

.fieldCell input:focus {
border: 2px solid #000000;
/** remember to change image path **/
background: url('/none') no-repeat #FFFFFF;
color: #454743;
}

The result:

That's it - a much more painless solution than I thought it would be, soon I will take on the icons and other style elements.

That's it, '