Customizing the Form Styles

Zen components use Cascading Style Sheets (CSS) to control their styles. Components have their own default styles. You can override these styles by providing your own CSS style definitions. There are a number of different places that you can place style information in your Zen application to override default styles across your entire application, individual pages, or individual components. In this case, we will place the style information in HomePage.cls to override the default styles only on this page.

We will add some CSS style definitions to the HomePage.cls XData Style block to customize the form's styles. Add the CSS style definitions shown below to the existing style definitions in the HomePage.cls XData Style block:

XData Style
{
<style type="text/css">          
 
...

/*fieldSet styles*/
.fieldset{
     background: #FFFFFF;
     border: solid 5px #C5D6D6;
     color: #000000;
     font-size: 1em;
     font-family: arial;
}
/*text control styles*/
.text
{  
    font-size: .8em;
    font-family: arial;
    color: #000000;
    background-color: #ffffff;
    padding: 2px;
    border: solid 1px grey;
    margin-right: 0px;
    margin-bottom: 0px;
    height: 25px;
}
/*dataCombo styles*/
.comboboxInput  {
    font-size: .8em;
    font-family: arial;
    color: #000000;  
    padding: 2px;
    border: solid 1px grey;
    margin-right: 0px;
    margin-bottom: 0px;
    height: 20px;
 }         

These style definitions set the styles for, respectively, the fieldSet, text, and dataCombo components.