Cascading Style Sheets

It is 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 than manually setting properties at the Form model level. You can control some layout and font properties using the form model Property tabs.

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 are 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 using 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 is loaded prior to the loading of the form. To load an external CSS file in a form:

  • Place the CSS resource within the Presentation Resources special folder.
  • Select the root of the form by either clicking in the background of the canvas or selecting the root node in the Outline view.
  • Select the "External Resources" Properties view.
  • Click the (plus) button to add a reference to the CSS.
See Scripting for lists of the built-in static and dynamic CSS classes.
Note: Internet Explorer 8 and 9 have a limitation on the number of CSS files that can be loaded by a webpage. Due to this limitation, some of the custom forms with additional CSS may not render as expected.

Best Practices

Follow these best practices for better stylistic consistency and code reuse.

  • Use .TibcoForms in class selectors.

    The root node of each form specifies the TibcoForms class. You can then write CSS selectors that are specific to Forms and that do 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 ensures that the highlight class gets applied only to elements within a form.

  • Share CSS between forms.

    You can share the same CSS between multiple forms to avoid duplication. Just add a reference to the shared CSS from one or more forms.

  • Avoid introducing new custom CSS classes if the desired styling can be achieved through selectors using the built-in CSS classes.

    For more information, see CSS Classes.

Examples

A vertical pane might make use of a set of classes such as: 

pane pane-vertical
    pane-label
    pane-content
        component control-textinput required
            label
            tf-container
                widget-text
                hint
        component control-date
            label
            tf-container
                widget-date
                hint

The following selectors may be useful:

.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 of controls and panes in horizontal panes nested within vertical panes.