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 the placement and alignment of elements.

By defining presentation attributes in the skin, you can separate content (which is defined in sections and harnesses), from its presentation (which is defined in the skin.) 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 mixin is 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 Mixins tab of the Skin rules form in the skin.
  • Style format —Define style formats for components, such as layouts or controls. You can define multiple style formats for each component. Define style formats for components, reference the style formats in property panels for sections, harnesses, and controls. For more information, see Component styles (custom style formats)

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 Skin rule Custom and attach additional style sheets.

Access the individual component skins on the Component styles tab. You can preview style formats as you define them and preview the current skin in a process, portal, harness, UI Gallery, or full Skin Preview. For more information, see Component styles (custom style formats).

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.

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.

Access

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.

When to use a CSS helper class instead of a custom 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 Cascading Style Sheet (CSS) helper classes to adjust layouts and cells. For example, you can use standard CSS helper classes to center elements or adjust their standard margins.

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.

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

  • Mixins tab of the Skin rules form

    Use the Mixins tab to define mixins (reusable style patterns). Mixins can define a reusable typography, border, or background style, or a style that is a combination of these styles. Using mixins helps ensure consistency across your user interface, maximize re-use, and minimize future maintenance.

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