Support Article

Changing container expand / collapse icons in skin not working

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.
Suggest Edit

Published October 23, 2016 - Updated October 8, 2020


0% found this useful

Have a question? Get answers now.

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