Skip to main content


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

Creating style formats

Updated on November 15, 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.

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