SA-29127

Summary

Changing container expand / collapse icons in skin not working.

Error Messages

Not Applicable 

Steps to Reproduce

Change the Expand / Collapse icon image in a sklin rule.

Root Cause

The expand / collapse icon configuration is not currently completely integrated into the skin rule and using the user defined icons requires some customisation of CSS files.

Resolution

There are a few things going on here that are impacting this icon setting.  There is a separate CSS file referenced on the skin rule called py-icons (for the UI-Kit version of the skin) as shown below.  If you are not using a UI-Kit based skin then the CSS is called px-pega-default-icons. The steps below are specifically based on the UI-Kit version.  They might not work using a non UI-Kit version please let me know (the changes should be similar).



This py-icons css has some styles in it that are defining the standard, out of the box expand / collapse icons, and also suppressing the user defined icons.
 
In the py-icons CSS on line 935 is a background-image style that is supressing the display of these icons (it is configured as a back ground image).  To allow the defined icons to display you need to remove this style.  The highlighted width style is used as the width for the user defined icon, but is not currently set in the skin rule.  If you specify an icon then you will need to also tweak this width style.



However, in removing the background-image style you will see that the standard icons remain included, and the user defined ones appear next to them as shown below where I have used some standard case icons.



To stop these from appearing you need to remove the styles on lines 263 and 264 as highlighted below.



In summary, the 3 changes required are:
 

1. Remove the default Expand and Collapse icon. 
2. Remove background-image: none; for Expand and collapse icon. 
3. Adjust the icon width as per the image chosen for icon.