Skip to main content

Creating style formats

Suggest edit Updated on December 13, 2021
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.For example: 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.For example: 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.For example: 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? YesNo

Have a question? Get answers now.

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

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