In this tutorial we will analyze the more complex aspects of using CSS to configure the look and feel of your website and FORMfields forms. In addition, we will demonstrate how to change the background color of the elements in FORMfields that use images.

FORMfields uses invisible tables to display elements such as the HeaderField, SectionTitle, Title and Menus. This is done so that each element can be dynamically resized based on its content. Thus, the graphics for elements can be designed once and then used all over a website and displayed in different sizes. For example, you can extend the length of the label in a HeaderField and the width of this HeaderField will automatically increase without the overall HeaderField image becoming distorted.

In the following example, we will elaborate on how a HeaderField is displayed using an invisible table and explain the different sections of the table. A HeaderField displayed with the default.css template (selectable through FORMgen) looks like:

And if you could see the table borders of the HeaderField, they would look like:

As you can see there are 9 sections or cells in the HeaderField table: Header1TopLeft, Header1TopMiddle, Header1TopRight, Header1Left, Header1Middle, Header1Right, Header1BottomLeft, Header1BottomMiddle and Header1BottomRight. In this particular example, the sections for Header1Left and Header1Right could be repeated or stretched vertically without distorting the overall image. Furthermore, the Header1TopMiddle, Header1Middle and Header1BottomMiddle sections could be stretched horizontally without distorting the overall image. Because of this, the contents of the HeaderField, currently "Example HeaderField Label," could be wider or higher and the overall HeaderField image would adjust appropriately. This is something to keep in mind when designing a new look and feel for FORMfields elements that function this way.

In the next example, we will demonstrate how to implement a new look and feel for the HeaderField. The following is how our new HeaderField will look after we create new section images and insert the appropriate CSS:

Here's how it works. First, we use a graphics program like Adobe Photoshop to draw a HeaderField like the one above. Then we break it up into the 9 sections mentioned above and save each section as a separate PNG file. We also save a 1 pixel by 1 pixel image of the background color to use as the background image of the webpage. We do this because each web browser renders colors differently and therefore it is the only way to ensure that the page background matches the background of the FORMfields element across all web browsers. We recommend using PNG images because the PNG image file format is supported by all major browsers and doesn't get distorted each time you save it. Of course, you could use any other image file supported by your browser like: jpg, gif, jpeg, etc..

Here is how we break out the New HeaderField image into the 9 sections mentioned above:

Next, we define the CSS needed to associate our new images with the HeaderField sections and also set the new dimensions of the HeaderField sections:

Then, we just create a HeaderField as we normally would and it will look like the New HeaderField image above.

For your convenience, we have bundled the entire New HeaderField example into a zip file. To run this example, please download the New HeaderField example, unzip it, upload all the files to any location on your website and then use your web browser to visit headerFieldNew.php.

Special Note: Please recall from Using CSS to Format the Look and Feel of Your Form - Part 1, that Internet Explorer 6 doesn't support transparent PNGs (and GIFs are too distorted for professional grade images of this type) therefore all images must contain the appropriate background color. So, if you are thinking about changing the background color of a rounded FORMfields element, you will have to change the background color of all the section images in this FORMfields element.

Most of the other FORMfields elements, including the Section Title, Horizontal and Vertical Menus and Messages use invisible tables in a way similar to that explained above. The best way to understand the CSS for these elements is to locate the CSS of the element in a template like FORMfields/styles/blueMidnight.css. For your convenience, we will now list a series of images that should help you graphically understand how some of the more involved FORMfields elements are broken up.