PeopleSoft skills will allow consultants and learner to gain more knowledge and adapt to the success of PeopleSoft – gaining edge in configuration and PeopleSoft implementation.
If you have been to one of my PeopleSoft user experience sessions, you have likely seen a good handful of interesting CSS ideas in my designs. Ever wanted to implement some and need a few pointers? Here is a little Q&A that I hope you find useful.
Q: How do you keep a PeopleSoft or content provider stylesheet from overriding your Interaction Hub (portal) pagelet styles?
A:Higher specificity. I make sure my styles have a more specific CSS selector than the delivered CSS selector. This is actually pretty easy because the delivered CSS selectors for pagelet elements (ptpageletheader, ptpageletbody, ptpgltlabel, etc) just use class names. To make your selector more specific, just include .ptpagelet in front of your selectors. Here is a sample from one of my free formed stylesheets:
The delivered selector is .ptpageletheader. I make my CSS selector more specific by adding #ptpglts .ptpagelet to the selector.
Q: How did you make the pagelets on your green/grass theme have a semi-transparent background?
A: There are actually a couple of ways to accomplish this. I created this theme back before rgba support in IE, so the approach I took was to create a 2x2 pixel PNG image with a semi-transparent background. I then set that to be my pagelet's background. Here is an example:
PeopleSoft Skills
144 members
Description
PeopleSoft skills will allow consultants and learner to gain more knowledge and adapt to the success of PeopleSoft – gaining edge in configuration and PeopleSoft implementation.
10 PeopleSoft Interaction Hub CSS Tricks
by Malvina Mainer
Feb 17, 2014
If you have been to one of my PeopleSoft user experience sessions, you have likely seen a good handful of interesting CSS ideas in my designs. Ever wanted to implement some and need a few pointers? Here is a little Q&A that I hope you find useful.
Q: How do you keep a PeopleSoft or content provider stylesheet from overriding your Interaction Hub (portal) pagelet styles?
A: Higher specificity. I make sure my styles have a more specific CSS selector than the delivered CSS selector. This is actually pretty easy because the delivered CSS selectors for pagelet elements (ptpageletheader, ptpageletbody, ptpgltlabel, etc) just use class names. To make your selector more specific, just include .ptpagelet in front of your selectors. Here is a sample from one of my free formed stylesheets:
#ptpglts .ptpagelet .ptpageletheader { border-radius: 10px 10px 0 0; }The delivered selector is
.ptpageletheader. I make my CSS selector more specific by adding#ptpglts .ptpageletto the selector.Q: How did you make the pagelets on your green/grass theme have a semi-transparent background?
A: There are actually a couple of ways to accomplish this. I created this theme back before rgba support in IE, so the approach I took was to create a 2x2 pixel PNG image with a semi-transparent background. I then set that to be my pagelet's background. Here is an example:
#ptpglts .ptpagelet td.ptpageletbody { background: url("opacity-bg.png") repeat scroll 0 0 transparent; }Today we can reduce our downloads and accomplish this much more easily using the rgba color syntax:
#ptpglts .ptpagelet td.ptpageletbody { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5); }Q: How did you create rounded corners for your pagelets?
A: I used the border-radius CSS attribute: