Cascading stylesheets

Cascading style sheets (*.css) define the appearance (colors, fonts, etc.) of the client pages when viewed in a web browser. Default CSS files are provided for the Cúram client application in the WebContent/WEB-INF/css folder. Never update the default CSS files. Override particular styles or add new styles by creating new CSS files in one of your application components.

The underlying HTML and CSS source code used to style the Cúram user interface is not documented and no guarantee is made about its stability across Cúram releases. Therefore, any customization based on that HTML and CSS might be lost as new releases are taken on. The customizations may have to be re-applied by analyzing the HTML and CSS again. You can view the source code by using browser developer tools.

Any CSS file located in the component/<some-component> folder or subfolder is automatically concatenated into the custom.css file. The custom.css file is included on all pages in the Cúram client application.

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 can override the default. This takes precedence over the Cúram style because custom CSS is included on the page after Cúram's default CSS.

.field .label {
        color: red;
       }

Another customization technique is 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 a span element is generated as a child of the .label element in the Cúram application. It is possible to create a new rule that is specific to this span. The complete customization will now look like this:

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

Note: Some UIM elements support the STYLE tag, which allows specific styling to be added to any instance of that element. This styling will always override the styling in CSS files. For more information, see UIM reference.

Application-specific CSS

CSS can be specific to the application being viewed. The id of the application (.app file) currently being viewed is added as a class on the BODY element of each HTML page, allowing you to add application-specific styling to that page.

For example, a System Administrator views the SYSADMAPP application. The following CSS is an example of CSS specific to that application:

.SYSADMAPP .field .label {
         color:red;
      }

Browser-specific CSS

CSS can be specific to the browser used to view the web page. Internet Explorer specific CSS files can be created in any folder in a component. A naming convention suffix is used to distinguish between versions of Internet Explorer.

_ie.css: This file will be included in all versions of Internet Explorer.

Note that developers should continue to strive to use the same CSS on all browsers. Internet Explorer specific styling should only be used as a last resort.