About Skin rules
About  New  Mixins  Components  CSS  History

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 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 define a single skin for your application, ensuring that all portals are presented in the most consistent manner.

About 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 Mixins tab in the skin.
• Style format — 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 Components tab; 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 custom styles and attach additional style sheets.

Access the individual component skins by clicking the downward triangle icon next to the component name on the Component styles tab. You can define style formats for the following components:

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. See Skin form — Completing the Components tab.

Where referenced

Beginning with Pega 7 Platform, skin rules are associated with an application and a portal. A portal can now 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.

Select Designer Studio > User Interface > Portals & Skins to view the portals in use by the current and built-on applications, their associated skins, and the access groups and operators that use them.

Completing the rule form

Define the Overall Font and mixins for the skin on the Mixins tab. See Skin rules — Completing the Mixins tab.

Reference mixins when defining style formats for Components. Create multiple style formats and custom styles as necessary. See Skin form — Completing the Components tab.

Access

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

To access a Skin rule, do one of the following:

• Use the Records Explorer to list all skins available to you. Click the skin name to open the skin.
• Select Designer Studio > User Interface > Portals and Skins to view all the skins available in the system, as well as portals in use by the current and built-on applications, their associated skins, and the access groups and operators that use them. Click the skin name to open the skin.
• In the Records Explorer, expand the User Interface > Skin category. Double-click the skin you want to open.

	Atlas — Standard Skin rules
	Skin form — Completing the Components tab Using the UI Kit ruleset
	Skin rules — Completing the Mixins tab

User Interface category

Open topic with navigation