How to configure custom CSS in Pega skin rule?

User Experience
, ,
1

How to configure custom CSS in Pega skin rule?

2

Hi @Satya K,

This is the AI generated answer, I have customized

Here are the step-by-step configuration steps to add custom CSS in a Pega Skin rule:

:wrench: Steps to Configure Custom CSS in a Pega Skin Rule#### :white_check_mark: Step 1: Open the Skin Rule

  1. Launch Dev Studio.

  2. Go to Records → User Interface → Skin. or Application → skin

  3. Open your application’s skin rule (e.g., SmartDisputeSkin, BankAppSkin).

:white_check_mark: Step 2: Navigate to the “Additional styles” Tab

  1. Inside the Skin rule, click on the tab labeled “Included styles”.

  2. This section is for adding inline custom CSS.

  3. Under the Additional style sheets add the new css file. label name, webwb, file format css

:white_check_mark: Step 3: Add Your Custom CSS Code

  1. Paste your custom CSS code into the text area.
    Example:

  2. /* Custom header style for dispute case views */
    .dispute-header {
    background-color: #002b45;
    color: #ffffff;
    padding: 12px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 2px solid #0099cc;
    }

    /* Custom primary button */
    .btn-dispute-primary {
    background-color: #0070d2;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: 600;
    }

    .btn-dispute-primary:hover {
    background-color: #005bb5;
    }

    /* Styling for alert messages */
    .alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border-left: 5px solid #ffeeba;
    padding: 10px;
    margin-bottom: 10px;
    }

:white_check_mark: Step 4: Save the Skin Rule

  1. Click Save.

  2. Check in if your application is in a version-controlled environment.

:white_check_mark: Step 5: Apply CSS Classes in UI Rules

  1. Open the Section rule where you want to apply styles.

  2. Select the layout or control (e.g., Dynamic Layout, Button).

  3. Go to the Presentation tab.

  4. In the “Custom CSS class” field, enter the class name you defined in your CSS.

    • Example: custom-header, custom-btn-primary.

:white_check_mark: Step 6: Test in the UI

  1. Launch the user portal or the section preview.

  2. Verify that the custom styles are applied.

  3. If not visible, clear browser cache or use Live UI → Refresh Section.

:brain: Optional: Include CSS from a Text File

If you prefer to manage CSS separately:

  1. Create a Text File rule:
    Records → Technical → Text File

  2. Add your CSS there.

  3. In the Skin rule → Included styles tab, add your Text File rule.

I hope it works,

Thank you