Skins help you style the graphic elements of your interface, such as borders and backgrounds, separately from the content. This approach ensures greater consistency, promotes reuse, and provides you with tools to make quick changes to the graphic design of your application.
The skin holds the presentation settings for your application or your portal, but includes no content, only the rules that govern how that content is styled. This approach helps you save time while building your UI, because no matter what components you use, or how many times you change their configuration, the application always draws presentation settings from the skin as a single source.
By default, a portal points to the skin that is specified in the application, which ensures that all portals in your application have the same look and feel. You can associate each of your portals with a different skin, but having a single skin for the entire application is the best practice. If you do not specify a skin for your application, the application defaults to the pyEndUser skin.
You can use skin inheritance to pass down settings from a parent skin to a dependent skin. For example, a bank application can use a skin that defines the shape, color, and font for the buttons. If the bank's mortgage division uses a different color in branding, you can create a skin for the mortgage division that defines the color of the button but inherits the rest of the settings, including the font and shape, from the parent.
When to use a CSS helper class instead of a skin
If the skin in your application has many sets of settings that define the same type of a component, and these sets vary only slightly, you might benefit from using Cascading Style Sheet (CSS) helper classes to adjust layouts and cells. For example, you can use standard CSS helper classes to center elements or change their standard margins.
For more information, see CSS helper classes.
- Updating the Cosmos theme in your application
Build your application by using the latest UI tools. By ensuring that the Theme Cosmos ruleset is up to date, you provide your application with a modern and responsive interface.
- Managing Cosmos UI settings in case designer
Adjust the Cosmos-based user interface of your application to the needs of your organization. By changing Cosmos settings, you can control case-level fields and case behavior to make the interface cleaner or more informative, according to your preferences.
- CSS helper classes
CSS helper classes are snippets of code that introduce minor formatting changes to your UI. If your application has many formats of the same type, and these formats vary only slightly, using CSS helper classes can save you development time by limiting the number of customized skin formats.
- Uploading custom font files
Ensure that your user interface meets the branding requirements of your company by adding new fonts to Pega Platform. Your custom font files can comprise standard fonts or icon fonts, which you can then add to the default icon set for your application.
- Login screen customization
You can customize the appearance of the login screen and other screens that unauthenticated users access, to maintain design consistency with your company's style guidelines.
- Best practices for styling your application
Build a visually appealing and intuitive UI by ensuring that you have well-defined and comprehensive presentation settings in your application.
- Creating skins
Build a vivid interface that matches the branding requirements of your business with less effort. By keeping all presentation settings in the skin, you can define a single source of styling information for your application, and ensure a consistent interface that is convenient to update and maintain.
- Specifying a skin for your application
Define a unified look and feel for your application by linking a skin to an application. A skin ensures that all portals within an application derive UI settings from a single source, which helps you maintain a consistent interface that is easy to update.
- 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.
Mixins are reusable style patterns that define the typography, border, and background styles of UI components in your application. By using mixins, you can ensure consistency across the user interface, maximize re-use, and minimize future development effort.
- Creating a custom style
You can specify a custom style on the Advanced tab of the Properties panel. You must enter the custom style name.
- Attaching a CSS to the skin
Add custom CSS settings to your skin to make it consistent with existing branding for your business. If you have a CSS sheet that you want to reuse, you can attach it to the skin of your application.
- Skin inheritance
Skin inheritance helps you reuse design patterns between skins. By setting up inheritance relations between skins, you can adopt a tiered approach to styling that reduces development effort on similar applications.
Previous topic Styling your application with design systems Next topic Best practices for styling your application