Open topic with navigation

TIBCO Business Studio™ - BPM Edition 5.4.0

# 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 might 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 might 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 might 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.

Did you find this helpful?

Yes No
Great!
Thanks for taking the time to give us some feedback.
Sorry about that

Why wasn't this helpful? (check all that apply)

Could not find what I was looking for
Instructions confusing or unclear
Instructions did not work

Want to tell us more?

Please select at least one option or provide details about the issue!!

Error occurred while submitting feedback.

Error2 occurred while submitting feedback.

TIBCO Business Studio™ - BPM Edition

Copyright © 2015-2023. Cloud Software Group, Inc. All Rights Reserved.