Defining the location of the CSS file in types.xml

In your types.xml file, add a 'css' child element to the 'resource' element defining your document type. Within the element, write the absolute URI where the CSS file can be found (it can be on the filesystem, in the repository, or wherever you want it). Below is the configuration for the default backend template.

<resource name="text" label="types:cms.types.label.text" i18n:attr="label">
  <schema>context://types/text/text.xsd</schema>
  <template>context://types/text/text.xml</template>
  <layout>context://types/text/layout.xml</layout>
  <bl>context://types/text/business_logic.xml</bl>
  <i18n>context://types/text/i18n</i18n>
  <css>context://types/text/text.css</css>
</resource>

Defining the style in the CSS file

At the location you just specified in types.xml, create a CSS file. You can look at the HTML source of the editor form (check http://localhost:50000/editing/cf2/showForm/templatename/path/to/your/xmlfile.xml) to see which default CSS classes are defined for the various elements.

The example CSS file defines the style for some of the default classes.

body
{
  font-family:verdana,arial,helvetica;
  font-size:0.8em;
}

tr.row-odd {background-color:#C8D4E2;}
tr.row-even {background-color:#DDE5EE;}

td.column1,td.column2{padding:5px; }
td.column1{width:150px;}
td.column1{font-weight:bold;}

.demoMessages{
  clear:both;
  color:#2268DD;
  font-size:12px;
  font-weight:bold;
  text-align:left;
  padding-bottom:3px;
  padding-left: 5px;
  margin-bottom: 4px;
}

.demoValidationMessages{
  clear:both;
  color:red;
  font-size:12px;
  font-weight:bold;
  text-align:left;
  padding-bottom:3px;
  padding-left: 5px;
  margin-bottom: 4px;
}

Using custom CSS classes

In the layout file, you can add a @class attribute to any widget element. The style for this class can be defined in the same CSS file you specified in types.xml.