Skip to main content
Previous sectionNext section

Using Style Sheets

This chapter explains how to include and use CSS style sheets in Zen Mojo pages. It discusses the following topics:

Specifying Style Information for Layout Objects

Within a layout graph, you can typically specify the properties that control the CSS class and CSS style for specific layout objects. For example:

    {type:'$ContentPane',key:'layoutContainer-1',style:'width:100%;height:100%;'
    ...
    }
Copy code to clipboard

The details vary by layout object.

Including Style Sheets

A Zen Mojo application can use CSS style sheets, which you can provide in any combination of the following ways:

  • Include the style sheet directly within either the application class or the page class.

    To do so, include an XData block named Style. The following shows a simple example:

    XData Style
    {
    <style type="text/css">
    
    table.tpTable {
             background: green;
             border: 1px solid red;
             font-family: courier new;
           }
    
    </style>
    }
    Copy code to clipboard

    Copy and paste the contents of the style sheet into the XData block, between the <style type="text/css"> and </style> tags.

    If you include the style sheet in the page class, its styles are available to that class.

    If you include the style sheet in the application class, its styles are available to all page classes that use this application class. For Zen Mojo (in contrast to Zen), an application typically has only a single page.

  • Define the CSSINCLUDES parameter of either the application class or the page class. For the value, specify a comma-separated list of CSS style sheets. For example:

    Parameter CSSINCLUDES = "dojo-release-1-9-1/dijit/themes/claro/claro.css,
    dojo-release-1-9-1/gridx/resources/claro/Gridx.css";
    Copy code to clipboard

    Caché assumes any relative paths refer to the directory install-dir/csp/broker. The parameter in the application class affects all page classes that use the application class; the parameter in the page class affects only that class.

    Or, if you are using CSS version 3.0, specify the CSS3INCLUDES parameter in the same way.

Precedence of Styles

When Zen Mojo generates a page, it collects all the CSS style information and applies the information in these sources in the following order. Note that when conflicts exist, the styles that are defined last take precedence:

  1. Styles defined by the CSS files for the Zen component library. The filenames have the form ZEN_Component_*.css.

  2. Styles defined within the applicable application class, if any. These styles are evaluated in the following order:

    • An XData Style block containing CSS statements

    • A reference to an external CSS file using the CSSINCLUDES parameter

  3. Styles defined within the page class. These styles are evaluated in the following order:

    • A reference to an external CSS file using the CSSINCLUDES parameter

    • An XData Style block containing CSS statements

    • Properties within the layout graph. For an individual layout object, these may provide:

      • Simple values for HTML attributes, such as "300" for height

      • Literal CSS statements, such as "color:red; background: yellow;")

      • The name of a CSS style that is defined somewhere in the cascade of styles

To determine the name of the CSS style used in a specific location, use the browser or a suitable add-on tool to inspect the generated HTML directly.