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:
- Go to Main Menu->Portal Administration->Branding->Define Elements->Enable HTML Layouts
- Search and select the HTML Layout ID (should be noted in step above)
- Select row 51, Custom HTML %51
- 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>
- Click okay, this should save your change.
- Save the layout.
- Go to Main Menu->Portal Administration->Branding->Define Headers
- Search and select Home Page Header ID (should be noted in step above)
- Add a new effective dated row
- Go to the HTML area tab.
- 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]
- 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:
- Define Elements ~ IE HTML Layouts (see google analytics example above)
- Define Headers
- Define Footers
- Assemble Themes ~ Put Header / Footer / CSS (see above example) together
- 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> </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>
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:
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 instead of just a space.)
- Click Ok
- Click edit items for Header Bar One %6 (ensure the label uses instead of just a space.)
1
|
Link to Sign out
|
Login
|
PSHEADERHYPERLINKWHITE
|
- 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).
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
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.
