Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      


Updated on November 15, 2021
Applicable to Theme UI-Kit applications

Skins help you style the graphic elements of your interface, such as borders and backgrounds, separately from the content. This approach ensures greater consistency, promotes reuse, and provides you with tools to make quick changes to the graphic design of your application.

Skin architecture

The skin holds the presentation settings for your application or your portal, but includes no content, only the rules that govern how that content is styled. This approach helps you save time while building your UI, because no matter what components you use, or how many times you change their configuration, the application always draws presentation settings from the skin as a single source.

By default, a portal points to the skin that is specified in the application, which ensures that all portals in your application have the same look and feel. You can associate each of your portals with a different skin, but having a single skin for the entire application is the best practice. If you do not specify a skin for your application, the application defaults to the pyEndUser skin.

Skin inheritance

You can use skin inheritance to pass down settings from a parent skin to a dependent skin. For example, a bank application can use a skin that defines the shape, color, and font for the buttons. If the bank's mortgage division uses a different color in branding, you can create a skin for the mortgage division that defines the color of the button but inherits the rest of the settings, including the font and shape, from the parent.

When to use a CSS helper class instead of a skin

If the skin in your application has many sets of settings that define the same type of a component, and these sets vary only slightly, you might benefit from using Cascading Style Sheet (CSS) helper classes to adjust layouts and cells. For example, you can use standard CSS helper classes to center elements or change their standard margins.

For more information, see CSS helper classes.

  • Viewing test coverage reports

    View a report that contains the results of test coverage sessions to determine which rules in your application are not covered with tests. You can improve the quality of your application by creating tests for all uncovered rules that are indicated in the reports.

  • Creating skins

    Build a vivid interface that matches the branding requirements of your business with less effort. By keeping all presentation settings in the skin, you can define a single source of styling information for your application, and ensure a consistent interface that is convenient to update and maintain.

  • Specifying a skin for your application

    Define a unified look and feel for your application by linking a skin to an application. A skin ensures that all portals within an application derive UI settings from a single source, which helps you maintain a consistent interface that is easy to update.

  • Component style formats

    Component style formats help you customize the appearance of your user interface by storing information about the appearance of specific UI elements, such as layouts, error messages, or buttons. You can assign style formats to layouts or controls, and when you update the style format, the appearance of the associated UI element changes automatically.

  • Mixins

    Mixins are reusable style patterns that define the typography, border, and background styles of UI components in your application. By using mixins, you can ensure consistency across the user interface, maximize re-use, and minimize future development effort.

  • 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.

  • Skin inheritance

    Skin inheritance helps you reuse design patterns between skins. By setting up inheritance relations between skins, you can adopt a tiered approach to styling that reduces development effort on similar applications.

  • Icon fonts

    Use icons to add images to controls. Pega Platform includes a set of icon fonts in the py-icons CSS text file, which is in the UI Kit ruleset. Many of these fonts are used in the standard user portals and forms.

  • Upgrading a pre-7.1 skin

    You can upgrade a pre-7.1 skin.

  • Creating a custom style

    You can specify a custom style on the Advanced tab of the Properties panel. You must enter the custom style name.

  • More about Skin rules

    To ensure uniform styles throughout your application, create and maintain styles through the Skin rule.

  • More about report definition rules

    About the pxRetrieveReportData activity

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us