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 Access	Right: Authenticated Access
Removed Main Menu	Top Bar: Main Menu: CSS Change White on Red
Larger Logo	Smaller Logo
Removed Header Background	Header Background: Welcome Link | Home | Signout Link added
Footer: CSS Change White on Red	Same Footer Used
Invisible: cookie information to set load balancing for Netscalers	Invisible: 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 51, Custom 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.