Modifying Push Buttons in SWAN Style Sheets

This section provides an overview of push buttons in the SWAN style sheet and discusses how to:

  • Create SWAN style sheet push button images.

  • Customize SWAN push buttons in HTML areas.

PeopleSoft applications provide the PTPUSHBUTTON free form style sheet as part of the SWAN style sheets. You can edit all properties in the PTPUSHBUTTON style sheet to change the look and feel of the classic yellow push button. Like sliding door tabs, push buttons expand and collapse to accommodate the button text, and the buttons come with a left and right image. The left image is associated with the <a> element, and the right image is associated with the <span> element. The <span> element contains text and font properties for the button. The PTPUSHBUTTON free form style sheet overrides the existing properties provided in the PSPUSHBUTTON style class in the PSSTYLEDEF_SWAN style sheet. You edit push buttons similarly to the way that you edit sliding door tabs.

All the steps for altering sliding door tab images are the same as for sliding door buttons. Do not alter the size of a button because doing so willaffect the way the background position is defined for the button.

If any custom-defined push buttons in HTML areas appear in the yellow button background, you can change them to look like the SWAN push button style. To customize SWAN push buttons in HTML areas:

  1. Open the HTML area that contains the push button you want to modify.

  2. Locate the <input type=button.../> tag.

  3. Following the <input type...> tag, insert the following tags: <a class=’PSPUSHBUTTON’><span> ... </span></a> .