PeopleSoft Branding

Here's one way to change your PeopleSoft Portal Header from this

to something like this

I was grateful I discovered @peoplesoftwiki's great post about PeopleSoft Branding. It meant that this post wouldn't have to be quite as long. Because as it turned out I followed the same steps as @peoplesoftwiki (extending Application Package PT_BRANDING and overriding the Branding Package on PeopleTools Options page.) I went one or 2 steps further it seems so I'd like to expand on that.

Before I begin, I need to tell you the main assumption I made. We are moving to PeopleTools 8.50 and we have decided to use the new Swan style. This is important as there is code in PT_BRANDING methods that is wrapped in if statements checking whether the style = "swan". That meant I only had to focus on making changes to items where this was true.

And one more thing before going any further: configuration good, customisation bad. (Though I don't always follow that mantra.)

Application Package
So just like @peoplesoftwiki, I extended PT_BRANDING. I made a few changes, including:
  1. adding new methods to get data out of the system that I wanted to display in the Portal Header
    • setGreeting, to prefix the Users greeting as set in Personalize Content with the description of the Environment as set in PeopleTools Options
    • getOxfamLinks, to read and labels and links from the message catalog (labels being the message, and the links being the explanation text) to be displayed along the top of our branded portal.
  2. replacing calls to the delivered HTML Definitions that formed the basis of the Portal Header. Those 3 methods and the HTML defintions are
    • getIframeHeaderHTML - PT_IFRAME_HDR_SWAN
The changes made to the methods getIframeHeaderHTML, GetExpPasswordHdrHTML and GetPortalUniHeaderNNS were all very similar, so I'll just go in to details for the method getIframeHeaderHTML. I basically left the code all the same, except for adding calls to my new methods setGreeting and getOxfamLinks and another call to get some more text from the message catalog and a call to the GetPortalHomepageURL() function to retrieve the Homepage URL.

HTML Definition
To make use of all this, I would either need to change the delievered HTML definition or create my own. So I created my own by opening the delivered PT_IFRAME_HDR_SWAN and doing a Save As to create OXF_IFRAME_HDR_SWAN. By doing this I had complete control over the HTML I wanted displayed. The main change I made was to the pthdr2container <div>, changing it from

<div id="pthdr2container">
<div id="pthdr2logoswan"> </div>
<div id="pthdr2greeting">
<span class="greeting">

<ul id="pthdr2links">
<div id="pthdr2container">
<div class="oxfblend">
<div id="pthdr2logoswan"
onclick="javascript:window.location='%bind(:27)';return false;">

<div id="pthdr2greeting">
<span class="oxfps">%bind(:26)</span>
<span class="oxfgreeting">%bind(:15)</span>
<ul id="oxfhdrlinks">
<ul id="pthdr2links">
<span>%bind(:17) </span>
<div id="oxfheaderLine3">
<div class="clearer"></div><!--Important - ensures floats
are contained-->

The main changes were adding new <div> oxfblend, oxfheaderLine3 and clearer, new <span> oxfps and oxfgreeting and new <ul> oxfhdrlinks. I also removed %bind(:16), the search box, which we didn't think made any sense to have in the Portal Header.

To make all these new elements on the page look any good, I had to update the Stylesheet. PSHDR2_SWAN held all the styles to control the Portal Header. For example, it defined the style pthdr2logoswan which has the background image as the Oracle Logo. Well we wanted to use the Oxfam Logo so I made a copy of PSHDR2_SWAN to create OXF_HDR2_SWAN and I made my changes to that.

Remember, configuration good, customisation bad. So I copied PSSTYLEDEF_SWAN to create OXF_STYLEDEF_SWAN. And in OXF_STYLEDEF_SWAN, I replaced PSHDR2_SWAN with OXF_HDR2_SWAN. When you switch to the new swan style, you update Default Stylesheet on PeopleTools Options to PSSTYLEDEF_SWAN. I instead switched it to OXF_STYLEDEF_SWAN.

I had to create 4 image definitions in App Designer. Each of these are referenced in the stylesheet OXF_HDR2_SWAN as background images for 4 different elements.

Bringing it all Together
So here's how it all works together. The PT_BRANDING extended Application Package (with new methods) calls the new HTML Definitions. Updated or newly created bind parameters are passed to the custom HTML Definition to generate the content of the Portal Header. The new stylesheets and images provide the formatting for the Portal Header HTML. What you can come up with is only limited by your imagination.


  1. hi Neil,
    Thanks for this great post. As a web development newbie,I do have a question here.
    The original PT_headerbg_swan image is actually repeated on x-axis and this ensure the background image go with the browser windows. Could you tell me how you combine all 4 background image and achieve the same result?

  2. Hi Eric,
    Thanks for the note.

    In my example above, the OXF_HEADER_L2 image is similar to the PT_HEADERBG_SWAN image. Just as delivered, this image is the background image for the pthdr2container div. The image has the dark screen strip at the top with the light green below it. (I'm probably pointing to it in the incorrect place because as I explain below the image is being hidden by another image. Read on..)

    Because I used my own version of the PT_IFRAME_HDR_SWAN HTML Definition, I was able to introduce new divs. The oxfblend div is one, and that has a background image of OXF_HEADER_L2_BLEND. That image has the dark green strip along the top, starts at the left as white, blends to the light green at the right and is probably 400-500 pixels wide.

    So this means the light green is repeated horizontally in a parent div for the entire width of the users screen. But the "white to green" is an image in a child div with a set width (in this case less than the screen resolution.)

    The other image - OXF_HEADER_L3 - is the background image for the oxfheaderLine3 div (which I also introduced.)

    BTW, I take no credit for designing this layout. I copied it from another web application already in use at Oxfam. But the idea of using an image to make things rounded in the corners (for instance) but then using a repeating image (or just a colour set in the css) for the body of the thing (like a button) seems to be quite common in web applications.

    To get a handle on divs and positioning, check out this little tutorial that I found extremely useful: http://www.barelyfitz.com/screencast/html-training/css/positioning/

    Hope this helps,


  3. Wonder full, I admire your thoughts., "What you can come up with is only limited by your imagination. "


  4. This really helped. I was late to this page.