Skip to main content

Table of Contents

Configuring skin base settings manually

Applicable to Theme UI-Kit applications

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:

    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. Optional:

    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.

      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.

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