Included styles

Use the Included styles tab of the Skin form to select components to be supported in your application and to specify additional style sheets for the application.

Component CSS support

Select the check box next to a component that you want to support in your skin. When building an application, support only those components that you plan on using in the application. This will reduce the size of the static content (Cascading Style Sheet files) in your application and thus improve application loading time.

Any components that you exclude on this tab are not displayed on the Component styles tab.

For more information, see Excluding unused components from the CSS file.

Select the Include legacy CSS for applications built prior to Pega 7 check box to include support for legacy components and environments. Legacy support includes support old controls such as tabs or accordions. Do not select this check box when creating a new application.

Avoid adding custom style sheets to your skin. If you are currently using a custom style sheet:

  • For custom or non auto-generated controls, you can add these styles to the skin rule as custom styles. See Skin rule — Custom.
  • To create additional styles for layouts and controls, such as grids, tabs, buttons, and links, you can create new style formats in the skin rule.

Adding a custom style sheet

If you choose to add a custom style sheet to the skin:

  1. Click Add style sheet and enter the file name.
  2. Click the Open icon to create a new file.
  3. Click Save and note the caution regarding maintainability.

The order in which you enter style sheets is significant; the bottom style sheet is applied last. Select the number beside the file name and drag and drop to re-order additional sheet sheets.

To delete a style sheet from a skin, select the style sheet that you want to delete and click the delete icon.