Setting Style Properties

Access the Component Properties dialog box and select the Style tab.

The Style tab enables you to apply custom style sheets and JavaScript at the component level as part of your branding configuration.

Note:

In addition, the Component Branding page can be used to specify custom style sheet objects and JavaScript objects in addition to those specified here in Application Designer. For more information on this PeopleTools branding feature, see Portal Technology: Branding Classic Components.

This example illustrates the fields and controls on the Component Properties dialog box: Style tab. You can find definitions for the fields and controls later on this page.

Component Properties dialog box: Style Tab
Field or Control Description

Component Style Sheet Objects

Create the “developer’s list” of style sheets applied to this component. The developer list refers to the style sheets added on the Style tab by a developer using Application Designer. Use the Add drop-down list to add style sheets to the list.

Custom Style Sheet Objects

Displays style sheets applied to the component by a portal administrator using the Component Branding page (PeopleTools, Portal, Branding, Component Branding). The portal administrator list is read-only in Application Designer.

Classic Plus

Select for this component to display with fluid-like styling, which is also referred to as classic plus.

If your end users are interacting with both fluid and classic components, having classic components and fluid components display with similar styling creates a more uniform experience.

This component property takes effect only when the Theme Style Type has been set to either Classic Plus or Classic Plus Pre 858 on the Branding Systems Options page. The Branding System Options page setting enables classic plus at the system level, while selecting this property enables classic plus display for the individual component.

See Portal Technology: Configuring Branding System Options.

PeopleTools and PeopleSoft applications deliver numerous components pre-configured for classic plus display. Refer to the product documentation for your PeopleSoft applications for a list of delivered classic plus components. For a list of delivered PeopleTools classic plus components, see Portal Technology: PeopleTools Components Delivered as Classic Plus.

If you enable this property, you will first need to test, and possibly adjust page layout so that pages and page elements display as desired in classic plus. See the following section, Reworking Components for Classic Plus Display.

Component JavaScript Objects

Create the “developer’s list” of JavaScript objects applied to this component. The developer list refers to the JavaScript added on the Style tab by a developer using Application Designer. Use the Add drop-down list to add JavaScript to the list.

Note: JavaScript is stored in HTML definitions.

Custom JavaScript Objects

Displays style sheets applied to the component by a portal administrator using the Component Branding page (PeopleTools, Portal, Branding, Component Branding). The portal administrator list is read-only in Application Designer.

Add

For the Component Style Sheet Objects list and the Component JavaScript Objects list, use the Add drop-down list to add objects to the lists.

Move Up

To adjust the order of the listed branding objects, use Move Up to move the object toward the top of the sequence.

Move Down

To adjust the order of the listed branding objects, use Move Down to move the object toward the bottom of the sequence.

Note:

The list of style sheet objects and JavaScript objects entered on the Style tab in Application Designer, referred to as the developer list, is separate from the list entered through the Component Branding page, which is the portal administrator list. The system loads the objects in the developer list before the portal administrator list.

Note:

The Style tab applies only to classic components. It does not appear for fluid component definitions.