Skip to Main Content
Return to Navigation

Understanding Style Sheets and Style Classes

This section discusses:

Overview of Style Sheets and Style Classes

Style sheets are definitions that store margins, spacing, fonts, borders, color and other layout settings for particular elements of a page. When you use a style sheet, the system applies the predefined layout settings or style classes to every page in an application. By storing all page layout settings in a style sheet definition, you eliminate the need to redefine the same settings for each page separately, you can quickly reconfigure and apply new settings, and you maintain a consistent appearance throughout the application.

In PeopleSoft applications, a style sheet is a definition, like a record or page definition, that you create and maintain in PeopleSoft Application Designer. A style sheet is a standalone definition that you can upgrade, delete, rename, and so on.

You define style sheets by using the Fixed Form and Free Form tabs.

In this example, you see the Fixed Form tab, which you access to insert style sheets, sub style sheets, free form sub style sheets, or style classes into a definition:

Image: Style sheet definition showing the Fixed Form tab

This example illustrates the fields and controls on the Style sheet definition showing the Fixed Form tab. You can find definitions for the fields and controls later on this page.

Style sheet definition showing the Fixed Form tab

In this example, you see the Free Form tab, which you access to enter text when you create a free form sub style sheet. For standard style sheets and sub style sheets, use this view to examine or copy the text that is generated by the style sheet definition:

Image: Style sheet definition showing the Free Form tab

This example illustrates the fields and controls on the Style sheet definition showing the Free Form tab. You can find definitions for the fields and controls later on this page.

Style sheet definition showing the Free Form tab

Note: For standard style sheets and sub style sheets, the Free Form tab text is read-only.

Note: Administrators can create HTML definitions (including JavaScript definitions) and free form style sheets, and upload images through portal branding pages (PeopleTools, Portal, Branding Objects), without requiring access to Application Designer. While the administrators cannot directly view or update the definitions created in Application Designer from the branding pages, definitions created with the portal branding pages can be viewed and edited in Application Designer. When creating a new definition using the portal branding pages, if the administrator uses an existing definition name of the same type, the system displays a prompt to overwrite an existing definition when saved. For more information on the portal branding pages, see Creating and Maintaining Portal Branding Objects.

Style Sheet Types

 

You can create three style sheet types using PeopleSoft Application Designer:

  • Standard style sheet

  • Sub style sheet

  • Free form sub style sheet

Standard Style Sheet

This is an example of a standard style sheet:

Image: Example of a standard style sheet

This example illustrates the fields and controls on the Example of a standard style sheet. You can find definitions for the fields and controls later on this page.

Example of a standard style sheet

Standard style sheets are the primary organizers for working with style sheets and style classes. Standard style sheets are containers that can include sub style sheets, free form sub style sheets, and style classes in any combination; however, standard style sheets cannot contain other standard style sheets.

Standard style sheets can inherit style classes from other standard style sheet definitions through the Parent Style Sheet property. The parent style sheet propagates all of its style classes to the child style sheet. Only standard style sheets can have parent style sheets and be used as parent style sheets.

Sub Style Sheet

This is an example of a sub style sheet:

Image: Example of a sub style sheet

This example illustrates the fields and controls on the Example of a sub style sheet. You can find definitions for the fields and controls later on this page.

Example of a sub style sheet

In the same way that PeopleTools supports subrecords, you can define sub style sheets. The primary purpose of sub style sheets is to organize and reuse style classes. You can insert sub style sheets into standard style sheets as well as into other sub style sheets. Sub style sheets neither have parent style sheets nor can be used as parent style sheets.

To use sub style sheets, you must insert them into standard style sheets.

Free Form Sub Style Sheet

This is an example of a free form sub style sheet:

Image: Example of a free form sub style sheet

This example illustrates the fields and controls on the Example of a free form sub style sheet. You can find definitions for the fields and controls later on this page.

Example of a free form sub style sheet

Free form sub style sheets are text-based sub style sheets that enable you to take advantage of Cascading Style Sheets - Level 2 (CSS2), AJAX, and DHTML features. With a free form sub style sheet, you can create the style sheet in a third-party editor and then copy the style sheet text into the Free Form tab of the free form sub style sheet. On free form sub style sheets, the Fixed Form tab is grayed out because free form sub style sheets do not support inheritance or aggregation. Free form sub style sheets cannot have parent style sheets nor can they be used as parent style sheets.

Note these important points regarding the use of free form sub style sheets:

  • Like other sub style sheets, to use free form sub style sheets you must insert them into a standard style sheet or into a sub style sheet that is part of a standard style sheet.

  • When creating free form style sheets, style class names must be identical to the PeopleTools default style class names.

    If you replace the default style sheet or override the page style sheet with a style sheet that includes only free form text, the free form sub style sheet must define and include all default style classes used by the application. Unexpected results will occur in both PeopleSoft Application Designer and PeopleSoft Internet Architecture pages if a default style class is missing.

  • At runtime, style classes in free form sub style sheets take precedence over PeopleTools-formatted style classes of the same name.

Note: Free form sub style sheets are supported in PeopleTools release 8.50 and later. If you attempt to import a free form sub style sheet into an earlier release, the free form sub style sheet imports as an empty standard style sheet.

Style Classes

 

Access a style class dialog box.

Image: PSEDITBOX style class properties dialog box

This example illustrates the fields and controls on the PSEDITBOX style class properties dialog box. You can find definitions for the fields and controls later on this page.

PSEDITBOX style class properties dialog box

Standard style sheets and sub style sheets comprise standard style classes. The style class determines the visual properties of pages and page controls by controlling a broad range of characteristics, including font size, spacing, alignment, border width, font weight, and color.

Style classes in different style sheets are independent of each other. You can copy existing style classes and paste, or insert, them into any style sheet. However, the most efficient way to share style classes across multiple style sheets is to group style classes into sub style sheets.

Default Style Classes

Default style classes are the PeopleTools style classes that the system explicitly associates with a page element, such as the page, each page control type, page control labels, and so on. PeopleSoft applications use the default style classes to render the page and all page elements at design time and at runtime, unless you specify a style property override.

See Overriding Default Page Style Properties.

Note these points about default style classes:

  • If you change an attribute of a default style class, the change affects every occurrence of the page element throughout an application, except the instances that do not use the default style.

  • The application style sheet (or any page level override) must include all default style classes for the system to render pages correctly at design time and at runtime. The default style classes can be accounted for in standard or free form format in any combination. However, unexpected results will occur in both PeopleSoft Application Designer and PeopleSoft Internet Architecture pages if a default style class is missing.

Note: PeopleTools style sheets include all default style classes. You should not modify any PeopleTools style sheets or the attributes of default style classes.

Most default style class names enable you to easily identify the page element with which they are associated. For example, PSEDITBOX is the name of the default style class for all edit box page controls. When you examine a specific edit box control, the value in the Style field, however, is not the name of the default style class. The Style field value of ***Use Default Value*** identifies any page element using its default style class.

This product documentation includes a topic that lists and describes the default style classes.

See Default Style Classes.

Custom Style Classes

This list includes some examples of custom style classes:

  • Creating new PeopleTools style classes, inserting them into standard style sheets, and using them as style overrides to create unique pages in an application.

  • Creating and inserting override style classes that supplant style classes inherited from a parent style sheet.

  • Overriding page style classes with non-default, existing PeopleTools style classes.

  • Creating free form style sheets that reconfigure one or more default style classes.