Component style formats
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.
- 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.
Previous topic Specifying a skin for a portal Next topic Creating style formats