Skip to main content


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

Configuring skin base settings manually

Updated on February 7, 2022

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.

For example, a banking application that is designed specifically for senior citizens can use larger default fonts, but the same overall styling as the regular application

  1. In the navigation pane of Dev Studio, click Records.

  2. Expand the User Interface category, and then click Skin.

  3. Open the skin that you want to edit.

  4. If your skin uses inheritance, in the Base settings tab, clear the Inherit from parent check box.

  5. Define the custom formatting for UI components:

    Note: The preview on the right side of the window reflects the changes you make to the base settings.
    1. In the Typeface setting section, define the font that the application uses for UI elements whose styling is not defined in the skin.

    2. In the Base heading tag styles section, define the styling for headings in the application by clicking the Heading arrow and selecting a mixin.

    3. In the Background section, define the appearance of the background in the application by selecting a mixin or by specifying the formatting manually.

    4. In the Layout section, define padding for the application.

  6. To add CSS-based formatting to UI components, perform the following actions:

    1. In the Typeface setting or Background sections, expand the Additional styles node.

    2. Click Add additional styles, and then define the CSS attribute and value pair that you want to use to format the component.

      For example: To change the default font color to blue, in the Typeface settings section, in the Attribute field, enter color, and set the Value field to blue.
  7. Click Save.

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