Copyright © TIBCO Software Inc. All Rights Reserved
Copyright © TIBCO Software Inc. All Rights Reserved


Chapter 3 Tasks : Styling Forms Using Cascading Style Sheets

Styling Forms Using Cascading Style Sheets
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.
Setting CSS Classes
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.
Using an external CSS resource
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.
Best Practices
Use .TibcoForms in class selectors.
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:
    .TibcoForms .highlight {background-color: yellow;}
This will ensure that the highlight class will only get applied to elements within a form.
You can share the same CSS between multiple forms to cut down on duplication. Just add a reference to the shared CSS from one or more forms.
Examples
A vertical pane might make use of a set of classes such as the following:
pane pane-vertical
    pane-label
    pane-content
        component control-textinput required
            label
            container
                widget-text
                hint
        component control-date
            label
            container
                widget-date
                hint
You might make use of the following selectors:
.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.

Copyright © TIBCO Software Inc. All Rights Reserved
Copyright © TIBCO Software Inc. All Rights Reserved