This content has been archived and is no longer being maintained.

Table of Contents

Article

Using custom style sheets

The appearance of a portal or form is controlled by the style settings in a skin rule. This rule defines the presentation of the content layer, including typography, borders, backgrounds, layouts, and user interface placement and alignment. In most cases, the autogenerated Cascading Style Sheets (CSS) styles set in the skin can meet your design requirements. In situations where you want to present a look and feel that would be difficult to configure by using component styles and mixins, you can add your own CSS files for customization.

You define custom style sheets in text file records that contain your CSS. Like a skin’s CSS styles, the system applies style sheets to the entire content layer.

Adding a style sheet to the skin

Assume that you want to apply a visual filter progid: DXImageTransform.Microsoft.Alpha(Opacity=60)to disabled buttons. You must create a text file record that contains your custom CSS and add it to your application skin rule.

  1. Click the Included styles tab on your application skin rule.
  2. In the Additional style sheets area, click the Add style sheets link to create a row and enter the name of the new style sheet. In this example, the name is disabled_button.
    Style sheet name added to the Additional style sheets area on the skin rule
     Style sheet name added to the Additional style sheets area on the skin rule
The order in which you enter style sheets is important because the bottom style sheet is applied last. To reorder style sheets, select the number next to the file name and drag it to the correct location.
  1. Click the magnifying glass icon at the end of the row to open the Create Text File form.

  2. Keep the default values App Name webwb and File Type CSS, and create the record.

    The Create Text File form for new style sheet
    The Create Text File form for the new style sheet
  3. On the Main tab of the text file form, click Upload File to open the Upload File modal dialog box.

  4. Browse for the CSS file that you created for disabled buttons.​

    CSS file identified in the Upload File modal dialog box
    CSS file in the Upload File modal dialog box
  5. Click Upload File on the modal dialog box. The CSS is shown in the File source area:

    CSS in the File Source area on text file record
    CSS in the File Source area on the text file record
  6. Save the text file and the skin rule.

Test your custom style

To see how the new style looks in the interface, do the following steps:

  1. Open the user form and locate a button control with the Live UI tool.
    Sample button control selected for testing the style sheet
    Sample button control selected for testing the style sheet
  2. Click the Gear to open the properties panel for the button.
  3. Select Always in the Disable list.
    Button disabled to test style sheet
    Button disabled to test style sheet
  4. Refresh the screen. The button is displayed in the style that you added.
    Sample button control after the style sheet has been applied
    Sample button control after the style sheet has been applied

Published July 30, 2015 — Updated February 12, 2016


75% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.