While you can control some layout and font properties via the form model Property tabs, it is also possible to specify additional CSS classes that are applied to form components at the form, pane, and control level. This approach provides more flexibility and opportunities for reuse of style information above manually setting properties at the Form model level.
The General property sheet for the form, panes and controls includes an input box to specify the CSS class for the given component. The value can be either a single value, or a space-separated list of CSS classes. When the component is rendered in the web page, the CSS classes specified here will be added to the HTML along with other built-in CSS classes. The value of the CSS class for a form, pane or control can also be updated via bindings, computation actions, or set via the API.
The Resources property sheet for a form allows one or more external CSS files to be referenced from the form. When added as an external reference, the CSS will be loaded prior to the form being loaded. To load an external CSS file in a Form:
See Scripting for lists of the built-in static and dynamic CSS classes.
The root node of each form will specify a class TibcoForms. This allows one to write CSS selectors that are specific to Forms and will not conflict with other elements on the page. For example, suppose you have a CSS class
highlight that you apply to a pane. The corresponding CSS rule may be written as follows:
.pane-vertical .hint Applies to hints within vertical panes
.control-date .label Applies to labels of Date controls
.pane-vertical .required Applies to required controls within a vertical pane
.pane-vertical .pane-horizontal .label Applies to the labels in horizontal panes nested within vertical panes.