Style Sheets and JavaScript Objects

Levels at Which Style Sheets Can Be Applied

Style sheets are associated with different definitions throughout the system. Certain definitions require a style sheet, whereas one or more style sheets are optional for others. Moreover, different style sheet types are allowed with different definitions.

The following table summarizes the locations where style sheets can be attached for classic components:

Level # Comments

System default

1

Standard or free form.

Practically speaking, the system default style sheet should be a standard style sheet that is compatible with the selected theme family. The system style sheet should be comprehensive and define both layout and style aspects of all user interface elements. Typically, you would select one of the three delivered layout style sheets:

  • PSSTYLEDEF

  • PSSTYLEDEF_SWAN

  • PSSTYLEDEF_TANGERINE

Additional system style sheets

0 – n

Standard or free form.

Component

0 – n

Standard or free form.

Component-level style sheets can be added by the component’s developer, by the portal administrator, or both.

Page

0 or 1

Standard or free form.

Page-level style sheets can be specified by the component’s developer only.

Theme

0 or 1

Free form only.

Skin

0 – n

Free form only.

While multiple skins can be associated with a theme definition, only one skin (or no skins) can be in effect per assignment (portal or user attribute).

The following table summarizes the locations where style sheets can be attached for fluid components:

Level # Comments

System default*

0 or 1

Standard or free form.

If no style sheet is defined at the system level, PSSTYLEDEF_FMODE is used by default.

Component* or page*

0 – n

Standard or free form.

Component-level and page-level style sheets can be added by the component’s developer through PeopleCode.

Theme (global override)

0 or 1

Standard or free form.

* Theme definitions include the optional capability to associate mapped theme style sheets to base style sheets on a per node basis. You can create 0 – n mappings. If a base style sheet with a mapped theme style sheet is specified, then the mapped theme style sheet will be loaded directly beneath the base style sheet where the base style sheet is used.

Loading Sequence

At run time, the generated HTML includes style sheets and JavaScript objects in a specified sequence. Style sheets (or more specifically, the specific style classes defined in those style sheets) override any style class definitions of the same name loaded earlier in the sequence. Therefore, you can use theme and skin style sheets to overlay your branding look on top of styles defined at the system or component level.

Classic Components

For classic components, style sheets and JavaScript objects are loaded in the following order:

  1. PSSTYLEDEF_REQ (automatically loaded by default for all classic components).*

  2. System default style sheet.*

  3. Additional system-level style sheets in the order defined.

  4. Additional system-level JavaScript objects in the order defined.

  5. Component-level style sheets in the component developer list in the order defined.

  6. Component-level style sheets in the portal administrator list in the order defined.

  7. Component-level JavaScript objects in the developer list in the order defined.

  8. Component-level JavaScript objects in the portal administrator list in the order defined.

  9. Page-level style sheet.

  10. Theme style sheet.

  11. Skin style sheet.

* A required style sheet that is always loaded. All other style sheets are optional.

Fluid Components

For fluid components, style sheets and JavaScript objects are loaded in the following order:

  1. System default style sheet* (and its mapped theme style sheet if specified).

  2. Component-level or page-level style sheets (and their mapped theme style sheets if specified) added by the component developer through PeopleCode.

  3. Component-level JavaScript objects added by the component developer through PeopleCode.

  4. Theme-level global override style sheet.

* A required style sheet that is always loaded. All other style sheets are optional.

Related Topics