Skip to main content


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

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

Links may not function; however, this content may be relevant to outdated versions of the product.

Skin rules

Updated on April 5, 2022

Use the skin to specify the presentation of your content. You can style all presentation elements of your interface in the skin, including typography, borders, backgrounds, layouts, and UI placement and alignment. By defining presentation attributes in the skin, you separate the content that is defined in sections and harnesses from its presentation. This ensures greater consistency and promotes reuse.

You can Specifying a skin for your application, ensuring that all portals are presented in the most consistent manner.

Mixins and style formats

The skin is comprised of mixins and style formats.

  • Mixin —A reusable typography, border, or background style, or combination of these styles, that you can use when defining other mixins and style formats for components. Define mixins on the About mixins in the skin.

  • Style format —You can define style formats for components, such as dynamic layouts, or controls, such as buttons and links. You can define multiple style formats for each component, for example, numerous button style formats. Define style formats for components on the Component styles (custom style formats); reference the style formats in property panels for sections, harnesses, and controls.

    To create a fully extensible skin, define mixins and use them to define other mixins and style formats for components. You can create multiple style formats for many components. If necessary, you can create Creating a custom style and attach additional style sheets.

When to use a CSS helper class instead of changing a style format

If your application has many formats of the same type, such as inline or stacked formats, and these formats vary only slightly, you might benefit from using CSS helper classes. Applying a CSS helper class to a layout or cell saves development time, reduces maintenance work (by limiting the number of customized skin formats), and improves the consistency of your application's look and feel. By avoiding the introduction of unnecessary static content, you also improve your application's initial loading time.

To analyze your existing formats, review the My Formats section on the Component styles tab of the Skin form.

For more information, see CSShelper classes.

Skin references

Skin rules are associated with an application and a portal. A portal can refer to the skin specified in the application or to a different skin. Setting the portal skin to use the skin associated with an application means that all portals in an application can use a single skin. This enables greater reuse and consistency across your application.

If you do not specify a skin for your application, the default end user skin is applied.

To view the skins in use by the current and built-on applications and the access groups and operators that use them, see Accessing a skin.

Skin inheritance

Skin inheritance allows formats and mixins of a parent skin to be passed down to a dependent skin. You can add a parent skin or set skin inheritance when you create a new skin.

  • Skin rules

    Use the skin to specify the presentation of your content. You can style all presentation elements of your interface in the skin, including typography, borders, backgrounds, layouts, and the placement and alignment of elements.

  • Keystores

    A keystore is a file that contains keys and certificates that you use for encryption, authentication, and serving content over HTTPS. In Pega Platform, you create a keystore data instance that points to a keystore file.

  • Creating a skin

    Create a skin to specify the presentation aspects of your application.

  • Accessing a skin

    Skin rules are part of the User Inteface category. A skin rule is an instance of the Rule-PortalSkin Rule- classes Rule-PortalSkin rule type.

  • Specifying a skin for your application

    The best practice is to associate a single skin with your application.

  • Excluding unused components from the CSS file

    To reduce the size of the Cascading Style Sheet (CSS) file for an application, you can exclude unused components from the CSS. By reducing the size of the CSS file, you improve the loading time of the application.

  • Overriding disabled inherited screen layout formats

    To limit the size of the Cascading Style Sheet (CSS) file and improve application loading time, some inherited formats for screen layouts are disabled by default. You can override these defaults.

  • Finding all sections that use a specific format

    On the Component styles tab of the Skin form, you can find all the sections that use a specific format. This makes it possible to predict how changes to a format will affect screens throughout your application.

  • Component styles (custom style formats)

    Use the Component styles tab to define the presentation of components by creating custom style formats. After you define style formats, reference them on property panes for sections, harnesses, and controls.

  • About mixins

    Use the Mixins tab to define mixins. A mixin is a reusable style pattern.

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

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

  • Skin inheritance

    Skin inheritance allows formats and mixins of a parent skin to be inherited by a dependent skin. The formats inherited by the dependent skin do not have to be explicitly defined in the dependent skin but will defined by formats in the parent skin. When a format on the parent skin is modified, the dependent skin automatically inherits those changes

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

  • Base Settings

    The Base Settings tab sets the style for container or layout selected in the component styles tab.

  • More about Skin rules

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

  • Viewing generated Java code of Access When rules

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.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us