Friday, November 15, 2013

10 PeopleSoft Interaction Hub CSS Tricks

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 .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:

#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:

#ptpglts .ptpagelet .ptpageletheader {
  border-radius: 10px 10px 0 0;
}

I set the top left and right radius on the ptpageletheader class and the bottom left and right radius on the ptpageletbody CSS class.

Q: How do you make some pagelets have a transparent background while others have a color or image as a background?

A:Some pagelets, such as the accordion, look better with no header, border, or background. Through Pagelet wizard (or the new 8.53+ Pagelet Branding), you can hide the border and header, but you can't change the background. The technique I use is to first create, save, and add the pagelet to a homepage. Next, I find the pagelet's ID in HTML (firebug is very helpful for this). With the ID in hand, I write a custom CSS selector, setting the background to transparent. Here is an example:

#ptpglts #ADMN_COMPANY_DIRECTORY_IMG.ptpagelet td.ptpageletbody {
  background: transparent;
}

Q: How do you make the drop-down menu's bar semi-transparent?

A: Set a semi-transparent background on #pthnavcontainer. You can either use a semi-transparent image or RGBA colors. Here is an example. As with other examples, use a highly qualified selector (specificity) to ensure your selector wins over the delivered CSS selector.

body.PSPAGE #pthnavcontainer {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
}

Q: How do you set a background image for the entire PeopleSoft page?

A: Set a background image on .PSPAGE like this:

body.PSPAGE {
  background: url("background-photo.jpg") repeat fixed 0 0 transparent;
}

Make sure that:

  • Your background image size extends far beyond the expected page size so the image doesn't repeat.
  • You use the fixed attribute so your image doesn't have to extend passed the scrollable area of a page.
  • Your chosen background doesn't make transactions difficult to read.

Q: How do you make the main header area's background show through the transaction area?

A: There are a couple of ways to accomplish this. If you are OK with a semi-transparent appearance, then the easiest way is to add the following to your role based branding header's CSS:

#ptifrmtgtframe {
  opacity: 0.9;
}

This will make the transaction area semi-transparent. This includes the buttons, text, and every other element within the transaction area. A value of .9 seems to be opaque enough to view the entire transaction area while still allowing a small amount of the background to show through. Just for fun, use Firebug or Chrome tools to try smaller values. Once you get down to .5, the transaction area should be noticeably transparent.

Q: How do you set a background for just the pagelet region of a homepage?

Set a background image on the #ptpglts element. Here is an example:

.pspage #ptpglts {
  background: url("my-favorite-background.jpg") repeat fixed 0 0 transparent;
}

Q: How do I center the pagelet area and reduce the size to something like 1024 pixels wide?

A: As long as you are using a browser other than IE 8 (PeopleSoft 8.53- requires IE Quirks mode), you can do this using the margin auto CSS centering technique. Here is an example:

.pspage #ptpglts {
  margin: 0 auto;
  width: 1024px;
}

Q: How do you round the right top and bottom corners of the SES scope drop-down in the global search area of the header?

A: The SES search scope drop-down has the ID selsrchgrp. Here is some CSS that rounds the right side of the search scope drop-down. Since this drop-down is paired to a text field that has the same height, I only round the right side, not the left side.

.pspage #selsrchgrp {
  border-radius: 4px 0 0 4px;
}

21 comments:

hendryk said...

You can also use !important in your CSS to make sure it will not be overridden.

Jim Marion said...

@hendryk, yes you can. If CSS is specified on the element rather than in a stylesheet, !important is pretty much your only option. I use it as a last resort.

Peoplesoft Thief said...

Jim,

I have added the code in a custom freeform style sheet and added the freeform style sheet to psstylereq.

"#ptpglts .ptpagelet td.ptpageletbody {
background: none repeat scroll 0 0 rgba(255, 0, 0, 0.5);
}"

My pagelet's cells were not reflecting with background red color. I doubt, it may be due to default style sheet overriding. Could you suggest any thing I have missed.

Peoplesoft Thief said...

Jim,

I have added the code in a custom freeform style sheet and added the freeform style sheet to psstylereq.

"#ptpglts .ptpagelet td.ptpageletbody {
background: none repeat scroll 0 0 rgba(255, 0, 0, 0.5);
}"

My pagelet's cells were not reflecting with background red color. I doubt, it may be due to default style sheet overriding. Could you suggest any thing I have missed.

Jim Marion said...

@PeopleSoft Thief, I'm just checking... does your CSS include the quotes that are in your comment? I assume not, but just confirming.

When you open Firebug, can you see your CSS? That will tell you:

1. If your content is in fact downloaded and included

2. If the browser matched your selector

3. If some other CSS is overriding your CSS

Jim Marion said...

@PeopleSoft Thief, just for fun I ran your sample in Firebug just to see what would happen. As I would expect, it set the background of every ptpageletbody. This makes me wonder about whether your CSS is showing up and if it is getting overridden. Firebug can help you find that too.

Here is my Firebug JavaScript to test your selector:

var list = document.querySelectorAll("#ptpglts .ptpagelet td.ptpageletbody");

for (var item of list) {
item.setAttribute("style", "background: none repeat scroll 0 0 rgba(255, 0, 0, 0.5);");
}

Peoplesoft Thief said...

@Jim,

Thanks a lot for your response. How was your weekend.

No, I didn't added quotes in the styles. I have given the quote to mention, that is what added to the free form style sheet.


1. If your content is in fact downloaded and included

I think it does downloaded, because we could see red color at loading time (the pagelet body space) and after that, it replaces with default colors.

2. If the browser matched your selector

We are using IE8 and while using selctor we could not find the newly added styles

3. If some other CSS is overriding your CSS

We could not find newly added styles even by striked.

I've developed some pagelets using navigation collections and I am digging to have a transparent background images for each pagelets .

Tried with below code

#ptpglts #pageletID.ptpagelet td.ptpageletbody {
background:url(image URL); background-repeat:repeat-y;
background: transparent; !important
}

Peoplesoft Thief said...

Hi Jim,

When I uncheck the style EOPP_SCSECTIONCONTENT at selector I could see my background Image.

Thanks,
Sasi

Peoplesoft Thief said...

Hi Jim,

When I uncheck the style EOPP_SCSECTIONCONTENT at selector I could see my background Image.
Thanks,
Sasi

Brent Sanford said...

Do you have a solution to border-radius not working in IE 9? I've found solutions on other sites, but not sure how to apply them PeopleSoft

Thanks.

Jim Marion said...

@Brent, I used to use the jQuery Corner plugin, but have since given up on older versions of IE in favor of Graceful Degradation. I do not think a website or page needs to look exactly the same in every browser. Function? Yes. Have the same abstract design? Yes. Do no harm. Don't penalize those that can support a better user experience. Flipping that around, don't penalize those that can't support a better user experience. Meet each browser in the decade it desires.

Kenny Choi said...

Hi Jim

I have the following CSS code in my Custom Pagelet XSLT:

.sorting_desc {
background: transparent url(%Image(PT_SRT2DN_SEL)) no-repeat center right;
}

It is a little triangle next to the header text which indicates the sorting order of a column.

It works in the Pagelet preview (Pagelet Wizard > Step 5) but not working on Homepage.

Do you have any idea why it doesn’t work on Homepage? Thank you!

Kenny

Jim Marion said...

@Kenny, first, I'm surprised it works in Pagelet Wizard preview. You are using Meta-HTML, which isn't supported in Pagelet Wizard... yet (I keep asking for it). Instead, you need to use the PeopleSoft PSIMG XML tag along with some special XSL. The special XSL is documented in a blog post here.

The PSIMG tag creates an IMG tag with a src attribute based on the IMG app designer ID. This is in contrast to the background approach you are using. I don't believe there is a delivered solution for referencing app designer images without an IMG tag. For that, I use my own Meta-HTML parser and display format, a portion of which is described in my PeopleTools Tips book.

Kenny Choi said...

Hi Jim

I finally get it to work and would like to share with you:

.sorting_asc { background: transparent url(%NodePortalURL(ERP)EMPLOYEE/ERP/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_IMAGE?ID=PT_SRT2UP_SEL) no-repeat center right; }

Thank you!

Jim Marion said...

@Kenny, %NodePortalUrl is not delivered. How did you come by this Meta-HTML tag? Did you create a Meta-HTML display format from my chapter? %NodePortalUrl is a Meta-HTML tag I created and have in my custom Meta-HTML display format.

I forgot about the branding iScripts. That would be the delivered way to accomplish this. I have those documented here.

Kenny Choi said...

Hi Jim

Yes, the %NodePortalUrl is not delivered. It is the custom transformation which can make the migration easier.

I implemented a jQuery plugin – dataTables to my Pagelet in order to improve the “sortability” and “searchability”. However, the dataTables delivered CSS doesn’t inline to the PeopleSoft style. Therefore, I need to customize the CSS to make the dataTables looks similar to a normal PS Pagelet.

The branding iScripts work perfect in my case. Thank you for your documents!

Ken Florman said...

I am implementing the interaction hub and am wondering the best way take off the "Main Menu" link across the bottom of the header via a security role. We only want to show it to our Super Users.

Jim Marion said...

@Ken, that is a good question. I don't believe you can remove the "Main Menu" link based on role. I believe that as long as you have access to menu items, you will have that link. And if you remove access to all menu items, then you would basically remove access to the PeopleSoft application, and then what would be the point?

An alternative is to use CSS to hide the menu in a particular theme. Then you use role based branding to assign that theme to users. Themes have weight, so you could make the default theme be the one with the hidden menu and then make a super user role and theme and assign that to the super users (progressive enhancement).

I wouldn't think there would be any security concerns with this approach because you aren't giving users access to anything they don't already have. If some hacker figures out how to use Firebug or IE developer tools to change the menu to display: block, then that just gives the user another navigation path. True security would involve removing permissions at the component level, and that would remove the items from the menu.

Thomas Lyon said...

Themes have weight, so you could make the default theme be the one with the hidden menu and then make a super user role and theme and assign that to the super users (progressive enhancement).

Steve Fradlin said...

Jim,

How do you prevent Portal CSS from beaning overwritten by content provider CSS.

I added this to my custom FreeForm Sub Style Sheet in Portal.
.EOPP_SCSECTIONCONTENT {
border-style:none;
}
.EOPP_SCSECTIONFOLDER {
border-style:none;
}
I don't want to customize Content provider CSS.

Jim Marion said...

@Steve, ah yes... that is a frustrating problem. There are two solutions. One I recommend, and one I use as a LAST resort. I recommend using a stronger selector. Notice that my selectors above have multiple items in the CSS path. For example: #ptpglts .ptpagelet .EOPP_SCSECTIONCONTENT. The most qualified selector wins. You just have to make your selector more specific. PeopleSoft delivered CSS only uses a single path class selector. Just add one more item to your selector and you win.

The one I don't recommend is adding !important after each declaration. It works, but it basically eliminates all future attempts to override that definition.