Using Zen Mojo
Using Style Sheets
[Home] [Back] [Next]
InterSystems: The power behind what matters   
Class Reference   
Search:    

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%;'
    ...
    }
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:
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:
  3. Styles defined within the page class. These styles are evaluated in the following order:
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.