Close popover
Elliott Davis (Elliott.Davis)
Crestone Technology
Certified Lead System Architect
Crestone Technology
Elliott.Davis Member since 2013 27 posts
Crestone Technology
Posted: March 21, 2016
Last activity: April 12, 2016

How can I figure out which part of a Pega skin applies to a given element on screen?

It used to be difficult to code HTML to match a color I see somewhere on my screen. Then people wrote nifty little tools such as ColorPick EyeDropper. EyeDropper allows me to click anywhere on my screen and get the hex code for the color in that pixel.

I have the same sort of challenge when I try to set a style in a Pega skin. I was recently asked to change a style setting in the work object bread crumb trail. I opened my application skin and looked at the options:

skin options.png

I also looked at the Mix-In options. None of them was an obvious match. I tried a few and didn't figure it out.

So, my question: given a part of the UI, how I can I determine where to set applicable styles in my Pega skin?

My next step was to work backwards from the name of the style.

- I right-clicked on the bread crumb trail and did "View Source"

- found that the relevant style is "iconArrowHorizontal"

- searched in PRPC (Rules and Data / All Content / Contains / All Applications

Results from that search:

where is iconArrowHorizontal defined.jpg

I tried making changes to a couple of those, without results. I considered the issue that, if the style is defined in several rules, which one takes precedence? To find out which file is taking precedence, I tried making silly changes like setting the background color in some styles to a rather bold shade of pink, also without result. If the rules all had the same name, then presumably this would be a simple question of rule resolution. Given the five different CSS files named above, I do not know how to determine the order of precedence.


Now I have two questions:

1) as I asked above, given an element I see in the UI, how I can I determine where to set the style(s) for it in my Pega skin?

2) given a style that is defined in several rules, how can I determine which one takes precedence?

User Experience
Moderation Team has archived post,
Close popover This thread is closed to future replies. Content and links will no longer be updated. If you have the same/similar Question, please write a new Question.