Skip to main content

Component styles (custom style formats)

Suggest edit Updated on April 11, 2020

Use the Component styles tab to define the presentation of components by creating custom style formats. After you define style formats, reference them on property panes for sections, harnesses, and controls.

Before you create a custom style format

If your application has many style formats of the same type, such as inline or stacked formats, and these formats vary only slightly, you might benefit from using CSS helper classes instead of creating custom style formats. Applying a CSS helper class to a layout or cell saves development time, reduces maintenance work (by limiting the number of customized skin formats), and improves the consistency of your application's look and feel. By avoiding the introduction of unnecessary static content, you also improve your application's initial loading time. For more information, see CSShelper classes.

Style formats

You can define style formats for the following components:

GeneralLayoutsControlsReports
Skin form — Components tab — General — PageSkin form — Components tab — Layouts — ContainersSkin form — Components tab — Controls — LabelsSkin form — Components tab — Reports — List view
Skin form — Components tab — Layouts — Screen layoutstabsSkin form — Components tab — Controls — Text inputs & Formatted textSkin form — Components tab — Reports — Column filter
Skin form — Components tab — General — Panel Setcustom button formatsSkin form — Components tab — Controls — DropdownsSkin form — Components tab — Reports — Paging bar
Skin form — Components tab — General — Action areaSkin form — Components tab — Layouts — Layout GroupsSkin form — Components tab — Controls — Radio buttons 
Skin form — Components tab — General — Button areaSkin form — Components tab — Layouts — Dynamic layoutsSkin form — Components tab — Controls — Check boxes 
Skin form — Components tab — General — Modal dialogsSkin form: column layoutsSkin form — Components tab — Controls — Autocomplete 
Skin form — Components tab — General — Overlaysgridslinks 
Skin form — Components tab — General — WizardSkin form — Components tab — Repeat-row/columnsbuttons 
Skin form Components tab General ErrorsSkin form — Components tab — Layouts — Legacy layoutsSkin form — Components tab — Controls — Smart tip and Smart info 
Skin rule Custom Skin form — Components tab — Controls — Menus 
  Skin form — Components tab — Controls — Split/menu button 
  Skin form — Components tab — Controls — Rich Text Editor 
  Skin form — Components tab — Controls — Charts 
Skin form — Components tab — Controls — Multi Select

  • General components styles

    Learn about the presentation of general components in custom style formats.

  • Component styles for layouts

    Learn about the presentation of layouts in custom style formats.

  • Component styles for controls

    Learn about the presentation of controls in custom style formats.

  • Component styles for reports

    Learn about the presentation of reports in custom style formats.

  • Skin rules

    Use the skin to specify the presentation of your content. You can style all presentation elements of your interface in the skin, including typography, borders, backgrounds, layouts, and UI placement and alignment. By defining presentation attributes in the skin, you separate the content that is defined in sections and harnesses from its presentati

  • Creating a skin

    Create a skin to specify the presentation aspects of your application.

  • Accessing a skin

    Skin rules are part of the User Inteface category. A skin rule is an instance of the Rule-PortalSkin Rule- classes Rule-PortalSkin rule type.

  • Specifying a skin for your application

    The best practice is to associate a single skin with your application.

  • Upgrading a pre-7.1 skin

    You can upgrade a pre-7.1 skin.

Did you find this content helpful? YesNo

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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