Skip to main content


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

Component style formats

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Component style formats help you customize the appearance of your user interface by storing information about the appearance of specific UI elements, such as layouts, error messages, or buttons. You can assign style formats to layouts or controls, and when you update the style format, the appearance of the associated UI element changes automatically.

For example, you can use the Strong style format on all the OK buttons in your application. If you decide to change the color of the button, you need to update only the Strong format, and the change spreads automatically to all the buttons that use it.

Style formats are grouped by the UI element that they define. The same component can have many style formats, and Pega Platform already includes a number of predefined formats that you can use in your application. While the out-of-the-box styles for different UI elements often share generic names, such as Strong, Standard, or Simple, each represents a different format that you must edit separately.

You can decide which formats to add to your skin, and remove the formats that you do not need. Removing or disabling unused formats helps improve performance by optimizing CSS at run time. If your application has many style formats of the same type that vary only slightly, you might also consider using CSS helper classes instead of creating custom style formats. Applying a CSS helper class saves development time, reduces maintenance work, and improves the consistency of the UI.

The Component styles tab in the skin editor
The style formats tab includes a component menu, a list of formats, and a preview.
  • Creating style formats

    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.

  • Styling a layout

    Customize the appearance of your interface by attaching style formats to layouts. Layout style formats contain settings that define the look of section elements such as borders, backgrounds, and text. By using out-of-the-box or custom style formats throughout your application, you can create a consistent user interface with less effort.

  • Styling a control

    Customize an application to match the branding requirements of your business by changing the look of the interactive elements of the user interface. You can modify an application at run time by attaching format styles to individual controls, such as buttons or text fields.

  • Removing style formats

    Improve the performance of your application by removing style formats that you no longer need. Because the CSS for the application is sourced from the skin rule, you can reduce the CSS file size by removing unused style formats, which then improves load times.

  • Finding sections that use a specific format

    Predict how the change that you want to introduce to a style affects screens throughout your application by generating a list of all sections styled with a specific format. With this tool, you can quickly identify sections that use the same style format.

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