Skip to main content


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

Attaching a CSS to the skin

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Add custom CSS settings to your skin to make it consistent with existing branding for your business. If you have a CSS sheet that you want to reuse, you can attach it to the skin of your application.

  1. In the navigation pane of Dev Studio, click Records.
  2. Expand the User Interface category, and then click Skin.
  3. Open the skin that you want to edit.
  4. On the Included styles tab, expand the Additional style sheets section.
  5. Click Add style sheet, and then click the Open icon.
  6. On the New tab, provide the label for the CSS sheet, and then click Create and open.
  7. On the newly created tab, provide the CSS for the skin:
    • To upload an existing sheet, click Upload file, and then navigate to the target file.
    • To define the CSS settings manually, in the text field, enter the CSS code.
    Tip: In the code, you can use the formats that are defined in mixins. For example, your CSS code can reference the color of the urgent mixin by using the variable $mx-urgent-color. You can access the full list of mixin variables and their values by clicking ActionsView mixin variables on the skin tab or use autocomplete if you are developing the CSS file in Pega Platform.
  8. Click Save.
  9. On the skin tab, in the Additional style sheets section, in the field that you added, select the newly added CSS sheet.
  10. Click Save.

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