Skip to main content

Table of Contents

Creating style formats

Applicable to Theme UI-Kit applications

Build reusable styles that define the visual presentation of UI components in your application. By associating style formats with controls and sections, you can quickly adapt the appearance of your UI to the branding requirements of your company, and maintain a consistent, user-friendly interface.

For example, you can create a separate format for all the OK buttons in your application to make your interface clearer and more intuitive.

  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. On the Component styles tab, on the right side of the window, click the Menu icon.

  5. In the components list, click the UI component for which you want to create a style.

    In the Controls section, click Buttons.
  6. On the My Formats tab, click Add new style.

  7. In the Create a new format window, provide a meaningful name and a description for the format, and then click Submit.

    In the Format name field, enter OK button. In the Usage annotation field, enter Used for styling OK buttons.
  8. In the settings pane in the middle of the window, define the style format.

    To create a green OK button with bold text and no borders, perform the following steps:
    1. In the Text node, select Specify styles, and then set the Font weight setting to Bold.
    2. In the Border node, set the Left border and Right border settings to none.
    3. In the Background node, set the Color setting to #008000 (green).
  9. 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