Extended CSS Class Styles
Dashboard Tile Objects
Font Icon CSS Class Styles
The Web Application Framework themes will automatically style your web application according to the style definitions within the selected theme.
You select a theme by setting the cWebApp object’s psTheme property, e.g.:
Set psTheme to "Df_Flat_Touch"
The new Df_Flat_Touch theme defines a set of extended CSS classes that can be applied to individual controls to further modify the look and feel of that control. You apply these extended classes by setting the control’s psCSSClass property, e.g.:
Set psCSSClass to "LabelDetail"
Each extended CSS class is designed to be applied to a specific type of control. The remainder of this section documents each control and the set of extended CSS classes that are available.
Note: Only the Df_Flat_Touch theme supports these extended CSS classes.
cWebApp
LoginBackground
This CSS class can be used to style the entire web application background in a gradient. It is designed to be applied to the cWebApp object while it is displaying the Login view. See the Login.wo view in the Web Order Mobile sample for an example of how to apply this style only when the Login view is displayed.
cWebView
Dashboard
This CSS class is intended to be used in the application’s dashboard view to give the correct spacing to the layout of controls within this view.
LoginView
This CSS class can be used to apply special styling to the controls within the view. It is intended to be used in the application’s Login view to give the login a distinctive appearance.
cWebPanel
HeaderPanel
This CSS class styles the panel like the heading bar at the top of the Web Order Mobile sample.
cWebTabContainer
HeaderTab
This CSS class styles the tabs in a way that is appropriate when the tab container is positioned at the top of a view, i.e., when there are no controls between the tab container and the breadcrumb or application header panel.
cWebList
MobileList
This CSS class styles the list in a way that makes it visually more appealing when used in a mobile drill-down select view. The Web Order Mobile sample uses this style in the cWebList object of every “select” view.
cWebColumn
RowCaption
Use this CSS class to format a column as a row caption. This gives the column text a larger font; it is intended to be used in multi-line rows to make the more important text stand out from the rest of the row.
RowDetail
Use this CSS class to format a column as row details. This gives the column text a smaller font; it is intended to be used in multi-line rows to make the more detailed text smaller, less dominant, and consume less space.
cWebColumnImage
ColImgRound
Use this CSS class to trim the column image into the shape of a circle. This is a visually appealing way to view images in a list on mobile devices. The Web Order Mobile sample uses this style in the SelectSalesPerson.wo view.
cWebColumnButton
WebButtonIcon
Use this CSS class to configure the button for displaying a font icon. Note that this style must be applied by setting the object’s psBtnCSSClass property. Once the WebButtonIcon style is applied, you can select a font icon by adding a font icon CSS class. See "Applying Font Icon Styles" for more information. The Web Order Mobile sample uses this style in the SelectCustomer.wo view.
cWebLabel
LoginWarning
Use this CSS class to style a label for showing a warning message. This is used by the Web Order Mobile sample to style a label for displaying an “Invalid User ID” warning message.
LabelCaption
Use this CSS class to style a label as a view caption. The label should be the first (topmost) control in the view. The Web Order Mobile sample uses this style to give the SelectOrder.wo view a descriptive caption.
LabelTitle
Use this CSS class to style a label as a title to a group of controls. The Web Order Mobile sample uses this style in the Dashboard.wo view.
LabelDetail
Use this CSS class to style a label as a detailed description. The Web Order Mobile sample uses this style to describe the SelectCustomer view.
Previous Topic: Dashboard Tile Objects
Next Topic: Font Icon CSS Class Styles