Layout and Branding


This article describes Classic branding: check out the Fluid Branding Section in this updated Tools 8.55 post.

Understanding the capabilities and limitations of the PeopleSoft Interaction hub is important when considering how to design the layout of your system.  In previous posts, we have looked at some samples of how we have built our portal to suit our needs and took a deep dive into security configuration.

In this next post, I'd like to discuss PeopleSoft Interaction Hub Branding.  This topic is actually quite encompassing as it will tie together many aspects such as HTML Templates, CSS, Role Based Security, Anonymous Access and adding Images to PeopleSoft.  At the end of this post, I'd like to provide some configuration examples we used to enable branding for two different roles: a Guest Role, and an Authenticated User Role.  For additional reading, this document from Oracle was also useful: Configuring a Contemporary User Experience


What we got working

A side by side comparison of two branding Branding Themes we have implemented


From this example (which is very small, recommend opening it in a new window), we can see the following differences:

Left: Guest AccessRight: Authenticated Access
Removed Main MenuTop Bar: Main Menu: CSS Change White on Red
Larger LogoSmaller Logo
Removed Header BackgroundHeader Background: Welcome Link | Home | Signout Link added 
Footer: CSS Change White on RedSame Footer Used
Invisible: cookie information to set load balancing for NetscalersInvisible: Javascript information to load Google Analytics Tracking


HTML Layout
HTML Layouts in the PeopleSoft Interaction Hub, are the one spot where a Portal Admin has the most control of look and feel of the system.  In PeopleSoft IH 9.2 R2, editing the layout has a little trick to it:

First you will need to see which layout your are currently using

  • via: Main Menu > Portal Administration > Branding > Assign Themes
  • Click Details of the default theme
  • Click Details of the Homepage Header (note for steps below)
  • Click Details of the HTML Layout ID (note for steps below)
  • Click the Search Glass beside HTML Object Name
  • Click the Edit Button

It is important to learn how you would go about adding code in here: if for example you wanted to add google analytics tracking to a web page, you would paste it into the head.  We have more options via this interface:



  1. Go to Main Menu->Portal Administration->Branding->Define Elements->Enable HTML Layouts
  2. Search and select the HTML Layout ID (should be noted in step above)
  3. Select row 51Custom HTML %51
  4. Click the magnify glass beside HTML Object Name, Click the Edit button, and add the following code between and at the bottom of the first <script tags>
    • %bind(:51)
  5. Click okay, this should save your change.
  6. Save the layout.
  7. Go to Main Menu->Portal Administration->Branding->Define Headers
  8. Search and select Home Page Header ID (should be noted in step above)
  9. Add a new effective dated row
  10. Go to the HTML area tab. 
  11. Enable Custom HTML %51, specify HTML source as external, click HTML area and paste the tracking code. [Go to www.google.com/analytics .  Sign in using a Google Analytics account. Go to the Admin  tab. Click the drop down arrow under Property to create a new property. Specify the web site name, the URL, the Industry Category and the Reporting Time Zone. Click Get Tracking ID. Copy the tracking code that is generated and paste]
  12. Save

There are a couple benefits of doing this:

  • You can use a specific template for multiple header IDs 
  • Header IDs are effectively dated, thus changes you make can easily be reverted back, the layout isn't and you should be careful when making changes.  Just clicking the OK button will save the layout when you are editing it.


CSS

CSS is another broad way the Peoplesoft Interaction Hub can be modified. Referring to our examples above, you can see that we updated the header/footer/menu fonts to be white, and made some small changes to the Pagelets to make them more modern.  (see Jim's PeopleSoft Journal for more tips on how to do this.)

We are still using application designer to modify our CSS, but I believe in IH 9.1 R3 there is a way to get around this without App Designer.

Below are instructions on how we modified the CSS on a new branding theme for the Tangerine Style Sheet.

In App Designer, Goto File-> New -> Stylesheet
  • Select "Free Form Sub Style Sheet". Click OK.
Input the following CSS:


.PSHEADERHYPERLINKWHITE{

color: #E8E8EE;

text-decoration: none;

}



.PSHEADERHYPERLINKWHITE:hover{
color:white;
}

.PTPAGELETHEADER{
background-color:#EEE !important;
color:#990033 !important;
}

.EPPBRFTRTOP{
background-color:#C0C0C0;
}
.EPPBRFTRTEXT{
color:#E8E8EE;
background-color:#990033;
}

.pthnavbaropen{
background-color: #5C5B5B !important;
}

.eppbr_top_bar{
background-image: url('%Image(MCM_TOP_MENU)');
}

.eppbr_header_bg {
border-bottom: none !important;
}

.pthnav a, .pthnav span, #pthnavbc a, #pthnavbc span{
color:#BABABE;
}

#pthnavbc a{
color:#E8E8EE !important;
}

a.pthnavbcanchor:hover, #pthnavbc li.pthnavbarfldr a:hover, #pthnavbc li.pthnavbarcref a:hover, a.pthnavbcanchor:active, a.pthnavbcanchor:focus, #pthnavbc li.pthnavbarfldr a:focus, #pthnavbc li.pthnavbarcref a:focus {
color:#E8E8EE !important;
}

#pthnavcontainer {
background-image: url('%Image(MCM_TOP_MENU)') !important;
}
#pthnavbca_MYFAVORITES{
color:#E8E8EE;
}
#ptpgltbody_row_ADMN_RSS_READER_HMPG{
padding:5px;
}
#pthnavbca_PORTAL_ROOT_OBJECT{
color:#E8E8EE;
}
#ptpglts .ptpagelet .ptpageletheader {
  border-radius: 0 0 0 0;
}
.pspage #selsrchgrp {
  border-radius: 4px 0 0 4px;
}
#ptpglts .ptpagelet .ptpageletheader {
  border-radius: 0 10px 0 0;
}


  • note '%Image(MCM_TOP_MENU)' can be uploaded via Main Menu > PeopleTools > 
     Portal > Branding > Branding Options - Image Tab
  • Click Save.  Call the sheet: 'CUST_FREE_FORM_CSS'
Goto File-> New -> StyleSheet.
  • Select "Standard Style Sheet". Click OK.
  • Right Click the Parent Icon 
  • Click Style Sheet Properties
  • Set Parent Style Sheet to EPPBR_TANGERINESTYLEDEF
  • Enter a description of the sheet. Click OK.
Goto Insert->Sub Style Sheet
  • Select 'CUST_FREE_FORM_CSS' ~ this should import the Free Form Sheet, into the Main Sheet that links with EPPBR_TANGERINESTYLEDEF.
  • Click Save. Call the sheet: 'CUST_CSS_FRESH'. Save all elements to a Project:
Goto File -> New -> Project
  • For each item CUST_BR_HEAD, CUST_BR_LOGO and CUST_CSS_FRESH press F7 to put them in a project.  
Goto File -> Project Properties and add the Description:  Branding Definitions
Goto File -> Save Project, CUST_STYLE_SHEET


You should be able to see the stylesheet via: Main Menu > Portal Administration > Assemble Themes.



Branding Profiles & Security

The ability to assign different users different branding themes is also beneficial, especially for guest access: It is very unlikely a guest would need something like the Main Menu.

PeopleSoft offers a good flow when going through the steps to implement branding.  The Main Menu is organized via Main Menu > Portal Administration > Branding:


  1. Define Elements ~ IE HTML Layouts (see google analytics example above)
  2. Define Headers 
  3. Define Footers
  4. Assemble Themes ~ Put Header / Footer / CSS (see above example) together
  5. Assign Themes ~ Assign a theme to a specific role, such as a guest.


Below is a sample configuration to set a new custom theme for a different user type.

Goto:  Portal Administration - Branding - Define Elements - Enable HTML Layouts
Add New Value: CUST_HEADER_LAYOUT_GUEST
    • Layout type: Header
    • Description: Header Layout
      • Description: Custom Header Layout
    • Click Add New HTML
    • Add the following:

<html dir="%Direction" lang="%LanguageISO"> 
<head> 
%bind(:21) 
<title></title> 
<!-- title is generated by Tools--> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<!--system generated HTML %bind22, %bind23,  %bind24,  %bind25, %bind26, %bind27--> 
<script type="text/javascript" src="%bind(:22)"></script> 
<script type="text/javascript" src="%bind(:23)"></script> 
%bind(:24) 
%bind(:25) 
%bind(:26) 
%bind(:27) 
<!--%bind16, %bind17--> 
<link rel="stylesheet" href="%bind(:16)" type="text/css"> 
<link rel="stylesheet" href="%bind(:17)" type="text/css"> 
%bind(:64) 
<style type="text/css"> 
.eppbr_header_bg { 
background-image: url('%bind(:41)'); 
background-repeat: repeat-x; 
border-bottom: 1px solid #C9CED5; 
z-index:-1; 

.eppbr_pers_bg { 
background-image: url('%bind(:42)'); 
background-repeat: repeat-x; 
z-index:-1; 

.eppbr_header_bg td.pthdr2sep { 
width:0px; 
font-size:1px; 


#EPPBR_PTHDRSRCH_CONTAINER #pthdrSrchIcon {margin-top:0px;} 
*html #EPPBR_PTHDRSRCH_CONTAINER #pthdrSrchIcon {margin-top:2px;} 
#EPPBR_PTHDRSRCH_CONTAINER #pthdr2srchpromptdiv_GBL {margin-top:-2px;} 
#EPPBR_PTHDRSRCH_CONTAINER #pthdr2tdadvsrch{margin-left:2px;} 
*html #EPPBR_PTHDRSRCH_CONTAINER #pthdr2tdadvsrch{margin-left:4px;} 
</style> 
%bind(:61) 
</head> 
<body style="margin:0;"> 
<div style="visibility: hidden; height: 0;"> 
<table class="eppbr_top_bar" border="0" cellspacing="0" cellpadding="0" width="100%" summary=""> 
<tr> 
  <td align="%AlignStart"><!--menu-->%bind(:62)</td> 
  <td>&nbsp;</td> 
  <td align="%AlignEnd" width="10" valign="top"><!--bar two %bind7-->%bind(:7)</td> 
  <td width="10"><!--padding--></td> 
</tr> 
</table>
</div>
<table class="eppbr_header_bg EPPBRLAYOUTTABLE" width="100%" height="40" border="0" cellpadding="0" cellspacing="0" summary=""> 
  <tr > 
<td colspan=4><!--padding--></td> 
    <td nowrap width="10" valign="middle" align="%AlignEnd" valign="top"><!--bar one %bind6-->%bind(:6)</td> 
<td width="5"><!--padding--></td> 
  </tr> 
  <tr> 
    <td width="10"><!--padding--></td> 
    <td nowrap width="124" valign="middle" align="%AlignStart">%bind(:31)</td> 
    <td nowrap valign="middle" align="center"><!--search objects %bind2-->%bind(:2)</td> 
    <td nowrap width="10" valign="middle" align="%AlignEnd" valign="top"></td> 
    <td width="10"><!--padding--></td> 
<td width="5"><!--padding--></td> 
  </tr> 
  <tr> 
    <td colspan=6 height="5"><!--padding--></td> 
  </tr> 
</table> 
<table class="eppbr_tab_bg EPPBRLAYOUTTABLE" style="margin-top: 4px;" border="0" cellspacing="0" cellpadding="0" width="100%" summary=""> 
<tr> 
  <td align="%AlignStart" valign="bottom"><!-- homepage tabs -->%bind(:5)</td> 
  <td align="%AlignEnd" style="display:none;"><!-- My Links -->%bind(:1)</td> 
</tr> 
</table> 
<table class="EPPBRLAYOUTTABLE" border="0" cellspacing="0" cellpadding="0" width="100%" summary=""> 
<tr> 
  <td align="%AlignStart" style="padding-%AlignStart:5px;"><!--bar three %bind8-->%bind(:8)</td> 
  <td align="middle" width="100%"><!--Add to Fav URL-->%bind(:63)</td> 
  <td align="%AlignEnd"><!-- pers -->%bind(:4)</td> 
</tr> 
</table> 
<!-- system generated HTML %bind28--> 
%bind(:28) 
<!--system generated HTML %bind29, %bind30--> 
%bind(:29) 
%bind(:30) 
<!--system reserved elements HTML %bind19, %bind20--> 
%bind(:19) 
%bind(:20) 
</body> 
</html>

    • the removal of %bind(:66) elements (there by default) will remove the main menu.
    • Add a name and description.  Press Okay to save
    • Press Save
    • Configure the following Branding Elements as Follows:
      ID
      Select
      Required Element
      Element Name
      1
      x

      My Links %1
      2


      Search Options %2
      3
      x

      Homepage Help Display %3
      4
      x

      Personalization %4
      5
      x

      Tab Display %5
      6
      x
      x
      Header Bar One %6
      7
      x

      Header Bar Two %7
      8
      x

      Header Bar Three %8
      9


      Header Bar Four %9
      10


      Header Bar Five %10
      11


      Header Bar Six %11
      12


      Header Bar Seven %12
      13


      Header Bar Eight %13
      14


      Header Bar Nine %14
      15


      Header Bar Ten %15
      16


      Alternate StyleSheetURL %17
      17
      x
      x
      StyleSheetURL %17
      18
      x
      x
      Page Style Class %18
      19
      x
      x
      System Reserved Element %19
      20
      x
      x
      System Reserved Element %20
      21
      x
      x
      System JavaScript/HTML %21
      22
      x
      x
      System JavaScript/HTML %22
      23
      x
      x
      System JavaScript/HTML %23
      24
      x
      x
      System JavaScript/HTML %24
      25
      x
      x
      System JavaScript/HTML %25
      26
      x
      x
      System JavaScript/HTML %26
      27
      x
      x
      System JavaScript/HTML %27
      28
      x
      x
      System JavaScript/HTML %28
      29
      x
      x
      System JavaScript/HTML %29
      30
      x
      x
      System JavaScript/HTML %30
      31
      x
      x
      Custom Image %31
      32


      Custom Image %32
      33


      Custom Image %33
      34


      Custom Image %34
      35


      Custom Image %35
      36


      Custom Image %36
      37


      Custom Image %37
      38


      Custom Image %38
      39


      Custom Image %39
      40


      Custom Image %40
      41
      x

      Custom Image URL %41
      42
      x

      Custom Image URL %42
      43


      Custom Image URL %43
      44


      Custom Image URL %44
      45


      Custom Image URL %45
      46


      Custom Image URL %46
      47


      Custom Image URL %47
      48


      Custom Image URL %48
      49


      Custom Image URL %49
      50


      Custom Image URL %50
      51
      x

      Custom HTML %51
      52


      Custom HTML %52
      53


      Custom HTML %53
      54


      Custom HTML %54
      55


      Custom HTML %55
      56


      Custom HTML %56
      57


      Custom HTML %57
      58


      Custom HTML %58
      59


      Custom HTML %59
      60


      Custom HTML %60
      61


      Scope Search Options %2
      62


      Global Search Option %2
      63
      x
      x
      CSS Override %61
      64
      x
      x
      Hover menu %62
      65
      x
      x
      IFrame Favorite URL %63
      66
      x
      x
      RTL style sheet %64
    • Save Again
                                                                                                                                                                                            Next GoTo:  Portal Administration - Branding - Define Headers 
                                                                                                                                                                                            Add A New Value: CUST_HEADER_GUEST
                                                                                                                                                                                              • Description: Custom Header
                                                                                                                                                                                              • Select the HTML Layout ID: CUST_HEADER_LAYOUT
                                                                                                                                                                                            • Select the Images Tab, enter the following information:

                                                                                                                                                                                            Enabled
                                                                                                                                                                                            Image Source
                                                                                                                                                                                            Image Object Name
                                                                                                                                                                                            x
                                                                                                                                                                                            Custom Image %31 
                                                                                                                                                                                            CUST_LOGO
                                                                                                                                                                                            x
                                                                                                                                                                                            Custom Image URL %41 
                                                                                                                                                                                            CUST_HEAD
                                                                                                                                                                                            x
                                                                                                                                                                                            Custom Image URL %42 
                                                                                                                                                                                            PT_HNAV_MENUBAR_BG 

                                                                                                                                                                                            • Click the Bars Tab
                                                                                                                                                                                              • Enable %6 and %8
                                                                                                                                                                                              • Click edit items for Personalization%4
                                                                                                                                                                                              • Add the following (ensure the label uses &nbsp; instead of just a space.)
                                                                                                                                                                                            • Click Ok
                                                                                                                                                                                            • Click edit items for Header Bar One %6 (ensure the label uses   instead of just a space.)

                                                                                                                                                                                            Seq
                                                                                                                                                                                            Type
                                                                                                                                                                                            Label
                                                                                                                                                                                            Style Class
                                                                                                                                                                                            1
                                                                                                                                                                                            Link to Sign out
                                                                                                                                                                                            Login
                                                                                                                                                                                            PSHEADERHYPERLINKWHITE 

                                                                                                                                                                                            • Click Ok
                                                                                                                                                                                            • Click edit items for Header Bar Three %8
                                                                                                                                                                                              Seq
                                                                                                                                                                                              Type
                                                                                                                                                                                              Label
                                                                                                                                                                                              Style Class
                                                                                                                                                                                              1
                                                                                                                                                                                              Text From Dashboard Link

                                                                                                                                                                                              PATRANSACTIONTITLE pthp2perslinks ptdboardtitle 
                                                                                                                                                                                            • Click The Special Elements Tab
                                                                                                                                                                                            • Enable Global Search Options%2 and Tab Display %5
                                                                                                                                                                                            • Edit Options on Tab Display:
                                                                                                                                                                                              Type
                                                                                                                                                                                              Style Class
                                                                                                                                                                                              Image Object Name
                                                                                                                                                                                              Active Tab Style 
                                                                                                                                                                                              pthomepagetabactive 

                                                                                                                                                                                              Inactive Tab Style 
                                                                                                                                                                                              pthomepagetabinactive 

                                                                                                                                                                                              Active Left Cap Image 

                                                                                                                                                                                              PT_HOME_TAB_ACTIVE_LEFT_CSS 
                                                                                                                                                                                              Inactive Left Cap Image 

                                                                                                                                                                                              PT_HOME_TAB_INACTIVE_LEFT_CSS 
                                                                                                                                                                                              Active Right Cap Image 

                                                                                                                                                                                              PT_HOME_TAB_INACTIVE_RIGHT_CSS 
                                                                                                                                                                                              Inactive Right Cap Image 

                                                                                                                                                                                              PT_HOME_TAB_INACTIVE_RIGHT_CSS 
                                                                                                                                                                                            • Click the Image Attributes Tab
                                                                                                                                                                                              Type
                                                                                                                                                                                              Height
                                                                                                                                                                                              Width
                                                                                                                                                                                              Additional Attributes
                                                                                                                                                                                              Inactive to Inactive Tab Image 
                                                                                                                                                                                              25
                                                                                                                                                                                              4
                                                                                                                                                                                              valign="top" 
                                                                                                                                                                                              Inactive Right Cap Image 
                                                                                                                                                                                              22
                                                                                                                                                                                              2
                                                                                                                                                                                              valign="top" 
                                                                                                                                                                                              Active Left Cap Image 
                                                                                                                                                                                              22
                                                                                                                                                                                              2
                                                                                                                                                                                              valign="top" 
                                                                                                                                                                                              Inactive Left Cap Image 
                                                                                                                                                                                              22
                                                                                                                                                                                              2
                                                                                                                                                                                              valign="top" 
                                                                                                                                                                                              Active to Inactive Tab Image 
                                                                                                                                                                                              25
                                                                                                                                                                                              4
                                                                                                                                                                                              valign="top" 
                                                                                                                                                                                              Active Right Cap Image 
                                                                                                                                                                                              22
                                                                                                                                                                                              2
                                                                                                                                                                                              valign="top" 
                                                                                                                                                                                              Inactive to Active Tab Image 
                                                                                                                                                                                              25
                                                                                                                                                                                              4
                                                                                                                                                                                              valign="top" 
                                                                                                                                                                                            • Click Save (you may need to go back and re-adjust the height / width after save)

                                                                                                                                                                                            Goto Portal Administration - Branding - Assemble Themes
                                                                                                                                                                                            • Add a new value: MCM_BRANDING_THEME_GUEST
                                                                                                                                                                                            • Set the following attributes
                                                                                                                                                                                            • Set Effective Date before the Assign Themes Date (in 2013).
                                                                                                                                                                                              Status as of Effective Date
                                                                                                                                                                                              Desc
                                                                                                                                                                                              Home Page Head
                                                                                                                                                                                              Target Page Head
                                                                                                                                                                                              Home Footer
                                                                                                                                                                                              Style Sheet
                                                                                                                                                                                              Menu Nav
                                                                                                                                                                                              Active
                                                                                                                                                                                              McMaster Guest Branding Theme
                                                                                                                                                                                              CUST_HEADER_GUEST
                                                                                                                                                                                              CUST_HEADER_GUEST
                                                                                                                                                                                              CUST_FOOTER
                                                                                                                                                                                              CUST_CSS_FRESH
                                                                                                                                                                                              CUST_MENU
                                                                                                                                                                                              Also, ensure"Database Default Theme" is unchecked
                                                                                                                                                                                            • Click Save.
                                                                                                                                                                                            Goto Portal Administration - Branding - Assign Themes
                                                                                                                                                                                            • In assign Themes to roles, add the following:
                                                                                                                                                                                              • Priority: 200
                                                                                                                                                                                              • Theme ID: CUST_BRANDING_THEME_GUEST
                                                                                                                                                                                              • Role Name: CUST_GUEST
                                                                                                                                                                                            • Click Save.