Support Article

Custom skin level Changes are not reflecting on UI

SA-33661

Summary



Custom skin level changes are not reflecting on UI because of external style sheets were included from PRPC 6.x.

This is not happening for all the rules, only those rules which are overridden at style sheets.

Removing these css files from custom skin rule, shows the page with expected style.


Error Messages



Not Applicable


Steps to Reproduce



1. Customize the skin rule.
2. Add external css(modifying the button) to the custom skin rule.
3. Access the application's page showing control (say button).
Actual behavior: Button appears in different style, that is, having rectangular and thick border.
Expected behavior: Button to appear in custom style, that is, having round edge and thin border.


Root Cause



Custom styles were getting overridden.

Resolution



Perform the following local-change:

Add the external css files to the custom harness and enable or check ‘Generate Harness specific CSS’ option. Refer the below screenshot:


While above setting resolved most of the custom styling related issues, below are few of them with resolution:

Issue-1: custom style not been applied to the button on the Advanced Search page.

The custom style were applied correctly to the HomePage.

Resolution: The harness used for HomePage did not use any custom external css file. However, an external css file was used for AdvancedSearch page. Removing this resolved the issue.

Issue-2: Color of titlebar is different for PRPC 6 and Pega 7 application.
Resolution: The custom skin had customized this attribute and hence color of the titlebar was different in Pega 7 application.

Issue-3: Space between search field and table with title bar is more compared to PRPC 6 application.

Resolution: Spacing and any additional styling can be handled through css as per the business requirement and product does not limit users for such customization.

Additionally, there was a major change made to the product from PRPC 6 to Pega 7. Use of HTML5 and CSS3 being one of them to support latest browsers like Internet Explorer 11 and Chrome.

Refer
https://pdn.pega.com/upgrading-harnesses-contain-custom-css-and-javascript-render-html5-document-type wherein this article describes how to upgrade harnesses containing custom CSS and JavaScript.

Use skins/mixins instead of the external css files which will help in terms of consistency across the application.

Refer https://pdn.pega.com/pegatube/pega-72-update-whats-new-user-experience which shows Pega 7.2 new feature, that is skin inheritance.

Refer https://pdn.pega.com/using-mixins-skin-drive-consistency-and-efficiency on using mixins in the skins.

Published February 14, 2017 - Updated February 28, 2017

Have a question? Get answers now.

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