Question

Crestone Technology
MX
Last activity: 12 Apr 2016 13:56 EDT
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:
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:
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:
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:
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.
Conclusion
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?