Cascading Stylesheets

Stylesheets (* .css) define the appearance (colors, fonts, etc.) of the client pages when viewed in a web browser. Default stylesheets are provided for the Cúram client application. It should never be necessary to edit these files, you can view them in the WebContent/WEB-INF/css folder. Instead, you can override particular styles or add new styles by creating new CSS files in one of your application components. Any CSS file located in the component/<some-component> folder (or sub-folder) will be automatically concatenated into the custom.css file. The custom.css file is included on all pages in the Cúram client application.

The underlying HTML and associated CSS used to style the Cúram user interface can easily be viewed in a variety of ways, such as using developer tools like the Internet Explorer Developer Toolbar. An example of customization would be to view the CSS used to apply a color to a field's label. The same CSS style can then be added to your custom CSS file and a different color specified. For example, assuming the HTML and CSS has been analyzed and the CSS rule .field.label applies the label color, the following CSS could be used to override the default:

.field .label {
        color: red;
       }

This will take precedence over the Cúram style because custom CSS is included on the page after Cúram's default CSS. Another customization technique would be to create a new rule that is an extension of a Cúram rule. Continuing the above example, a developer analyzes the HTML and sees that within the Cúram application a span element is generated as a child of the .label element. It is possible to create a new rule that is specific to this span, even if Cúram has not done so. The complete customization will now look like this:

.field .label {
         color:red;
      }
      .field .label span{
      color:blue;
      }

The underlying HTML and CSS source code used to style the Cúram user interface is not documented (hence the use of developer tools to view it). No guarantee is made about its stability across Cúram releases. Therefore, customizations as described above or any customization based on analysis of the Cúram application's underlying HTML and CSS may be lost as new releases are taken on. The customizations may have to be re-applied by analyzing the HTML and CSS again.