Skip to main content

Table of Contents

Skin form — Components tab — General — Custom styles

You can specify a custom style on the Advanced tab of the Properties panel. You must enter the custom style name.

  1. Click Add item.
  2. Type a Style Name that describes the purpose, rather than the style, using lowercase characters and hyphens, as needed. Note the primary category of purpose first, for example, ".marker-form-error", not FormErrorMarker_DivWhite". custom_ is prepended to the class name that you specify.
  3. Define the style in the CSS field and click the Gear icon to open the Style Editor.

    To edit an existing custom style, click in the row that you want to edit and click the Gear icon to open the Style Editor.

You must type the name custom_ classname on the Advanced tab of the cell properties panel to use this custom style.

As a best practice, refer to CSS files, classes, and identifiers using lowercase and hyphens. Hyphens improve readability, the semantic value of the item, and match the syntax of CSS attributes, for example, margin-left. Avoid articles and conjunctions, such as the, and, or, if, etc.

To delete a custom style, select the style and click the delete icon.

When customizing layout styles, it is a best practice to define a custom style in a skin and not inline styles within the layout's properties panel. When you save a section that contains an inline style, a guardrail warning appears and you have the option to use the Remove Inline Style command button.

Skin rules

  • Component styles (custom style formats)

    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.

Did you find this content helpful?

0% found this useful

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 Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us