Skip to main content

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

CSS helper classes

Updated on December 13, 2022
Applicable to Theme Cosmos applications

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.

Purpose of CSS helper classes

CSS helper classes carry small amount of formatting information to help you make incremental changes to the look of the UI. For example, the text-italic helper class converts all text in the element to italics. If you want to use an italicized font just a few times in your application, you can apply a helper class to the target element instead of creating a separate component style. This approach reduces the size of the CSS file for the application, which improves the application load time.

Out-of-the-box and custom CSS helper classes

Pega Platform includes a variety of predefined helper classes that you can apply to cells, layouts, or both cells and layouts. To meet your particular business needs, you can also create custom helper classes. For more information, see Reviewing CSS helper class definitions and Creating CSS helper classes.

Skin inheritance

If you want to use predefined CSS helper classes, ensure that your application skin inherits from the pyEndUser skin (for UI Kit applications) or CosmosSkin (for Cosmos applications). Alternatively, you can add the py-common-helper-classes.css file to your application skin. For more information, see Attaching a CSS to the skin.

  • Skins

    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.

  • Updating Theme Cosmos 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.

  • 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.

  • Creating CSS helper classes

    Make quick adjustments to the look and feel of your UI by creating a CSS-based helper class that you can use throughout your application. Helper classes style a single UI element, such as a control, and do not affect the appearance of other elements of the same kind, even if those elements use the same style format.

  • Reviewing CSS helper class definitions

    Save development time and bring greater consistency to the look and feel of your applications by being familiar with the standard Cascading Style Sheet (CSS) helper classes that are available for making minor changes to the behavior or styling of cells and layouts.

  • Adjusting cell styling by using CSS helper classes

    Apply a Cascading Style Sheet (CSS) helper class to a cell to alter its default styling or behavior in a small way, without creating a new skin format. For example, use a helper class to center an element in a cell.

  • Adjusting layout styling by using CSS helper classes

    Apply a Cascading Style Sheet (CSS) helper class to a dynamic layout to alter the default styling or behavior in a small way, without creating a new skin format. For example, use a helper class to apply twice the standard margin to the right side of an item in the layout.

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. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us