Skip to main content


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

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Creating a custom style

Updated on April 5, 2022

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

Use lowercase letters and hyphens to refer to CSS files, classes, and identifiers. Hyphens improve readability, the semantic value of the item, and match the syntax of CSS attributes, for example, margin-left. Avoid articles and conjunctions.

  1. Click Add item.

  2. In the Style Name field, describe the purpose, rather than the style.

    Specify the primary category of purpose first, as in this example:

    .marker-form-error

    The prefix custom_ is prepended to the class name that you specify.

  3. Define the style in the CSS field. Click the Gear icon to open the Style Editor. You must enter the name custom_ classname on the Advanced tab of the Cell Properties panel to use this custom style.

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

Result:

When customizing layout styles, it is a best practice to define a custom style in a skin rather than specify inline styles in the Properties panel for the layout. 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 button.

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

  • Included styles

    Use the Included styles tab of the Skin form to select components to be supported in your application and to specify additional style sheets for the application.

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

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

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.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us