The css_xhtml theme is the default theme in WebWork. It provides all the basics that the simple theme provides, plus these additional features:

• Standard two-column CSS-based layout, using <div> for the HTML Tags (form, textfield, select, etc)
• Labels for each of the HTML Tags, placed according to the CSS stylesheet
• Validation error reporting
• Pure JavaScript Client Side Validation using 100% JavaScript on the browser

Wrapping the Simple Theme

The css_xhtml theme uses the wrapping technique mentioned in Extending Themes, also done by the xhtml theme. As such, it is important to understand how the HTML tags are wrapped by a standard header and footer. For example, take a look at the textfield template, text.ftl:

As you can see, the controlheader.ftl and controlfooter.ftl templates are wrapped around the simple template.

CSS XHTML Theme Header

Now let's look at the controlheader.ftl:

The header used by the HTML tags in the css_xhtml theme is somewhat complex. Unlike the xhtml theme, this theme does not support the labelposition attribute. Instead, your CSS rules can define how the layout is done.

Also note that the fieldErrors, usually caused by Validation, are displayed in a div block before the element is displayed.

CSS XHTML Theme Footer

And the controlfooter.ftl contents:

Special Notes

While most of the templates in this theme are self explanatory, there are some templates that should be called out and explained in detail:

• css_xhtml head template
• css_xhtml form template