Understanding Fluid Styling

The layout of all page elements in a fluid application is controlled by free from style sheets using CSS 3.0 standards. This is one of the most critical differences to consider when comparing classic applications to fluid applications. With each control that you add to a page, PeopleTools automatically applies a style class to that control structure, and that style class enables that control to behave and render successfully on a fluid page.

In some cases, a single style class creates a change in behavior, color, or look and feel of a page element. In other cases, depending on the control, a structure of multiple style classes are applied to create the behavior and look and feel of a control. It is critical that before you attempt to override any delivered default styles that you observe the structure of the control in the HTML source of the rendered page so that you can gain insight into the elements involved in the control’s structure and the styles that are currently being applied, not to mention the order in which they are applied.

When the system applies a style, by default or override, the style is applied to the container in which the control resides, and those styles apply to all elements in that container, which includes the structure of the control, the label, the field, and so on. In a fluid application, you do not apply a style to discreet elements, such as just to the label for instance.