Skip to main content

This is documentation for Caché & Ensemble.

For information on converting to InterSystems IRISOpens in a new window, see the InterSystems IRIS Migration Guide and Migrating to InterSystems IRIS, both available on the WRC Distributions pageOpens in a new window (login required).

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;
 }         

Copy code to clipboard

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

FeedbackOpens in a new window