Skip to main content

Table of Contents

Creating skins

Applicable to Theme UI-Kit applications

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.

  1. In the header of Dev Studio, click Create User Interface Skin .

  2. In the Label field, enter a meaningful name for the skin.

  3. Define the skin's inheritance:

    • To inherit settings from a different skin, select the Inherit component formats and mixins from an existing skin check box, and then enter the skin name.
    • To prevent the skin from inheriting settings, clear the Inherit component formats and mixins from an existing skin check box.
  4. Specify the context for the skin record.

  5. Click Create and open.

  6. On the Base settings tab, in the Overall font field, define the default font for the application.

  7. Define the general formatting for the application:

    • If your skin uses inheritance and you want to import general styles from the parent skin, ensure that the Inherit from parent check box is selected.
    • If your skin does not use inheritance or if you want to override the parent formatting, configure the styles manually.

      For more information, see Configuring skin base settings manually.

  8. On the Included styles tab, select the check boxes representing the UI components whose formatting you want to define in the skin.

    You can also us the Support presets field to select one of the standard sets of components.
  9. Click Save.

Define style formats and mixins for your skin. For more information, see Component style formats and Mixins.
  • Configuring skin base settings manually

    Use custom skin settings to quickly define the general appearance of your application, including font formats, backgrounds, and padding. You can configure settings that are entirely custom, or if your skin uses inheritance, import some settings from the parent, but override others.

  • Optimizing skins

    Improve the performance of your application in browsers by optimizing skin rules. Skin rules create the CSS for your application, and when you reduce their size and complexity, the application can download and process the CSS file more efficiently.

Related Content

Did you find this content helpful?

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us