Skip to main content


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

Creating skins

Updated on December 13, 2022
Applicable to Theme Cosmos 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 CreateUser InterfaceSkin.
  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 checkbox, and then enter the skin name.
    • To prevent the skin from inheriting settings, clear the Inherit component formats and mixins from an existing skin checkbox.
  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 checkbox 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 checkboxes 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.
    You can also circumstance the skin rule. For more information, see Creating a rule specialized by circumstance.
What to do next: 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.

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