PeopleSoft Enterprise Portal 8.

8
GUI Configuration Tips

Contains: Authors:
PeopleSoft 8.8 Enterprise Portal GUI Hsing Huang and Maria Gummerson
Branding Use Cases PeopleSoft Enterprise Portal Development
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

August 2003
PeopleSoft 8.8 Enterprise Portal GUI Configuration Tips
Comments on this document can be submitted to: [email protected]. We encourage you
provide feedback on this Red Paper and will ensure that it is updated based on feedback received.
When you send information to PeopleSoft, you grant PeopleSoft a non-exclusive right to use or
distribute the information in any way it believes appropriate without incurring any obligation to you.
This material has not been submitted to any formal PeopleSoft test and is published AS IS. It has not
been the subject of rigorous review. PeopleSoft assumes no responsibility for its accuracy or
completeness. The use of this information or the implementation of any of these techniques is a
customer responsibility and depends upon the customer's ability to evaluate and integrate them into
the customer's operational environment.

PeopleSoft Proprietary and Confidential 2

11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Table of Contents
Table of Contents .......................................................................................................... 3

Chapter 1 - Introduction................................................................................................ 5
Structure of This Red Paper ........................................................................................ 5
Related Materials......................................................................................................... 5

Chapter 2 – Overview of Branding............................................................................... 6

Portal Homepage at a Glance ..................................................................................... 6
Portal Target Content Page at a Glance...................................................................... 7

Chapter 3 – Using PeopleSoft Enterprise Portal Branding...................................... 10

Background Information............................................................................................. 10
Enabling Branding.................................................................................................. 10
Using Branding System Elements and Bind Variables........................................... 11
Configuring Branding Headers .................................................................................. 11
Creating a Header.................................................................................................. 11
Step 1 of 4: Generate the Header HTML ............................................................... 11
Step 2 of 4: Identify HTML Syntax That Can be Replaced by System Elements
Provided by Branding............................................................................................. 13
Step 3 of 4: Replace Highlighted HTML Syntax With Corresponding System
Elements (%bind variables) ................................................................................... 18
Step 4 of 4: Configure the Header.......................................................................... 21
Additional Tips on PeopleSoft Enterprise Portal Branding......................................... 23
Using Attributes and Styles .................................................................................... 23
Style Conflicts ........................................................................................................ 24
Menu Navigation .................................................................................................... 25

Chapter 4 – Beyond PeopleSoft Enterprise Portal Branding .................................. 25

Homepage Presentation ............................................................................................ 25
Target Content Page Presentation ............................................................................ 25
Remote Node Branding Header and Footer Presentation ......................................... 26

Chapter 5 - Putting Everything Together .................................................................. 26

Overriding the Three-Column Layout......................................................................... 27
Overriding Pagelet Layout ......................................................................................... 28

Chapter 6 - Frequently Asked Questions .................................................................. 29

PeopleSoft Proprietary and Confidential 3

11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Can I use different templates for different pagelets?.............................................. 29

Can I have pagelets of different colors for different columns on my homepage?... 29
What do I need to do to migrate Branding development to production?................. 29
Can I store and reference images, stylesheets, and JavaScript outside of my
PeopleSoft system? ............................................................................................... 30
How can I change hyperlink colors on homepages? .............................................. 30
How do I change the login, expire, and other WebLogic pages? ........................... 31

Appendix A - 1: PORTAL_UNI_HEADER_NNS in PeopleTools 8.45 ....................... 31

Appendix A - 2: PORTAL_UNI_HEADER_NNS Binds............................................... 32

Appendix B: Customizing Homepage and Pagelet Objects Using Attributes ....... 34

Appendix C: Special Notices...................................................................................... 35

Appendix D: Validation and Feedback ...................................................................... 35

Customer Validation............................................................................................... 35
Field Validation....................................................................................................... 35

Appendix E: Revision History .................................................................................... 35

Authors................................................................................................................... 35
Reviewers .............................................................................................................. 36
Revision History ..................................................................................................... 36

PeopleSoft Proprietary and Confidential 4

11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Chapter 1 - Introduction
This Red Paper is a practical guide meant for a technical audience, including Web and application
developers who implement or maintain applications of the PeopleSoft Enterprise Portal. In this Red
Paper we introduce you to the various features available for modifying the entire look and feel of your
PeopleSoft base portal or PeopleSoft Enterprise Portal.
This document can be used for the following PeopleSoft Enterprise Portal and PeopleTools releases:
• PeopleSoft 8.8 Enterprise Portal
• PeopleTools 8.42.xx through PeopleTools 8.45.xx
For information about previous releases of the PeopleSoft Enterprise Portal (SP1, SP2, or 8.4),
please refer to the Red Paper library and search for Portal GUI Tips Red Papers.

Structure of This Red Paper

This Red Paper provides guidance on modifying the look and feel of the PeopleSoft Enterprise Portal.
It should be used only as a guide. For further details, please consult PeopleBooks.
Keep in mind that PeopleSoft will update this document as needed so that it reflects the most current
feedback we receive from the field. Therefore, the structures, headings, content, and length of this
document is likely to vary with each posted version. To see if the document has been updated since
you last downloaded it, compare the date of your version to the date of the version posted on
Customer Connection.

Related Materials
This Red Paper is not a general introduction to developing with PeopleSoft or making changes to a
PeopleSoft Portal environment. We assume that our readers are experienced Information
Technology (IT) professionals, with a good understanding of PeopleSoft’s Internet and Portal
Architecture. To take full advantage of the information covered in this document, we recommend that
you have a basic understanding of system administration, basic Internet architecture, relational
database concepts/SQL, the PeopleSoft Portal, and how to use PeopleSoft applications.
This document is not intended to replace the documentation delivered in PeopleBooks. We
recommend that before you read this document, you read the PeopleTools- and Portal-related
information in PeopleBooks to ensure that you have a well-rounded understanding of our PeopleSoft
Internet Architecture (PIA) technology.

Note. Much of the information in this document will eventually be incorporated into subsequent versions
of PeopleBooks.

Many of the fundamental concepts related to PeopleSoft development are discussed in the following
PeopleSoft PeopleBooks:
• PeopleTools 8.45 PeopleBook, PeopleTools Internet Technology
• PeopleSoft 8.8 Enterprise Portal PeopleBook
• PeopleTools 8.45 PeopleBook, PeopleSoft Application Designer (Development Tools |
Application Designer)
• PeopleTools 8.45 PeopleBook, PeopleCode Reference (Development Tools | PeopleCode
Reference)

PeopleSoft Proprietary and Confidential 5

11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Chapter 2 – Overview of Branding

A brand is a trademark or distinctive name that identifies a product or a manufacturer. You can
extend the concept of a brand to create distinctive website designs for your organization. The
PeopleSoft Enterprise Portal provides you with the ability to quickly implement a portal with your own
branding, or "look and feel." You can even design several brands and vary their presentation based
upon a portal site or a user’s role. Overall, in the PeopleSoft Enterprise Portal, branding means
configuring a look and feel that includes layouts, images, and styles that you can apply to your portal
homepages and target content pages.
The following branding design elements can be altered:
• Header content, layout, and styles.
• Footer content, layout, and styles.
• Menu navigation images and styles.
• Pagelet header images and styles.
• Homepage body templates, including layout, and styles.
• Target page overall templates.
• Miscellaneous HTML pages; for example, sign-on and sign-off pages.
These alterations can be made using a combination of methods:
• PeopleSoft Enterprise Portal Branding.
Using Branding, you can change header, footer, menu, and overall color scheme based on
database, registry, or roles.
• PeopleTools portal registry attribute configuration.
Using these attributes, you can override the default HTML and image objects that comprise
pagelet header, homepage, and target page templates.
• Customization.
For miscellaneous HTML pages, you must modify the files to achieve the desired look and feel.
The diagrams below illustrate the various aspects of a PeopleSoft Enterprise Portal brand.

Note. The homepage and target pages are processed differently, and there is no need to modify any
PeopleCode or customize database objects to change the portal interface. All modifications can be made
through setup and configuration.

Portal Homepage at a Glance

Figure 1 shows the various parts of a portal homepage. The “Default HTML Object Used” material is
the HTML used to make up the overall look and feel of each section. These objects are listed here
for reference only. Beginning with PeopleTools 8.42, you no longer have to customize the default
HTML objects to achieve your desired look and feel, in most cases. See the “How to Brand” section
in each text box below for details about branding methods that can be used to change the homepage
interface.

PeopleSoft Proprietary and Confidential 6

11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Figure 1

Portal Target Content Page at a Glance

Figure 2 shows the various parts of a target content page using the PeopleSoft Enterprise Portal default target page template.

7
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Figure 2

8
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Branding allows you to configure these design aspects, which wrap the actual portal content: the
header, footer, and navigation menu. You can configure multiple looks and combine them into
themes that you assign per portal site and optionally, per user role.
See PeopleSoft 8.8 Enterprise Portal PeopleBook, “Using Branding”
The remaining aspects of a homepage’s presentation of pagelets are configurable via the portal
registry using the attribute name/value pairs. When you register pagelets and define homepage tabs,
you can assign your own designs. Each portal site can assign different styles to the same pagelet.
Each site can also have distinct designs for its homepage tabs.
See PeopleTools Internet Technology PeopleBook, “Changing the Portal Interface”
Lastly, the design of the target content page is controlled by the content’s source application. For
PeopleSoft applications, the target content page layout is determined by the page definition created
using Page Designer. The target content page layout is incorporated into the template specified in
the portal registry when you register the page (component) as a CREF. Each type of target content
page (a PeopleSoft application page, a third-party application page, a website target page, and so on)
can be registered using a different template, if appropriate.

Note. Each portal site can register the same target content page using a different template, if required.
These complete page templates for target content pages may include a header and menu navigation, or
not. They can be frame templates or not. If no template is assigned to the CREF in the portal registry, a
default portal template is applied.

See PeopleTools Internet Technology PeopleBook, “Designing Portal Templates”

There are miscellaneous pages that can be customized for use across your portal installation by
modifying the following delivered HTML files. However, this Red Paper does not provide details
about these customizations.
• Signin.html
• Expire.html
• Exception.html
• Passwordwarning.html
• Passwordexpired.html
• Sslrequired.html
The following table provides a summary of the Branding methods you should use to perform
PeopleSoft 8.8 Enterprise Portal graphical user interface (GUI) customizations of the listed elements:
PeopleSoft Enterprise Portal Portal Registry Attribute
Branding Configuration
Homepage
Homepage template
Two- or three-column template
Header/footer
Pagelet
Pagelet Style
Action Bar
Header Style
Body

9
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

PeopleSoft Enterprise Portal Portal Registry Attribute

Branding Configuration
Menu
Pagelet Style
Action Bar
Header Style
Body
Navigation
Target Page
Target Content
Page Template
Header
Menu
Pagelet
Header
Body
Navigation

Note. If both PeopleSoft Enterprise Portal Branding and Portal Registry Attribute Configuration are
checked, in general, you can use the portal registry attribute configuration to override the default HTML
objects. If you do not need to override the overall layout and only need to adjust colors and styles, you
can choose to include certain style classes in your branding style sheet. Including these style classes
also gives you greater control of the color scheme based on portal registry or user role, depending on
your Branding setup.

Chapter 3 – Using PeopleSoft Enterprise Portal Branding

A major part of PeopleSoft Enterprise Portal Branding functionality involves creating headers and
footers. The processes to create both elements are basically the same. This chapter provides a step-
by-step example of creating a new header using Branding. The chapter also provides tips on styling
menu navigation and style conflict considerations. The PeopleSoft 8.8 Enterprise Portal PeopleBook
provides more details about using the Branding setup pages.
See PeopleSoft 8.8 Enterprise Portal PeopleBook, “Using Branding”

Background Information
Enabling Branding
Branding code resides in two different application packages/classes. For standard PeopleSoft
Branding, it’s PT_BRANDING:BrandingBase. For PeopleSoft Enterprise Portal Branding, it’s
EPPBR_BRANDING:BrandingBase. When you enable or disable Branding, the system actually
updates the values of PACKAGEROOT and APPCLASSID in the PSOPTIONS table behind the
scenes. You do not need to worry about updating the values manually, but you can view the
application class code for processing details, if you are interested.

10
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Using Branding System Elements and Bind Variables

Branding system elements are simply the bind variables embedded in the HTML that are used for
Branding headers and footers. The bind variables will be replaced with actual values at run time to
generate HTML.
What is a bind variable? The PeopleCode example below shows how dynamic content is embedded
into static content using a bind variable:
HTML.TEST
<a href="%bind(:1)"><img src="/images/home.gif" border=0 ></a>

The value of the bind number can be found in the calling PeopleCode program that binds the object
to the HTML definition.
&HTML = GetHTMLText(HTML.TEST,”www.peoplesoft.com”)

By providing a set of predefined bind variables as system elements, the Branding PeopleCode
program will know how to assemble the HTML syntax according to the system element assigned.
Keep in mind that any changes to the system element number and type are not allowed. You should
also include all non-configurable system JavaScript/HTML %binds, as they reference JavaScript files
(TimeOut warnings, for example), forms, or additional HTML that enable the system to work properly.

Configuring Branding Headers

Creating a Header
In this exercise, we will outline the steps needed to create a new header. For details on how to use
the setup pages to create an HTML layout, header, and footer, see the PeopleSoft 8.8 Enterprise
Portal PeopleBook.
See PeopleSoft 8.8 Enterprise Portal PeopleBook, “Using Branding”
This exercise uses our Planet PeopleSoft intranet header as its goal. The example below is the end
result created of the exercise.

Planet PeopleSoft intranet header

Step 1 of 4: Generate the Header HTML

In this first step, you create the HTML object to be used in the layout setup. PeopleSoft 8.8
Enterprise Portal Bundle #1 delivered this HTML object as the base for creating any new header
for use with Branding.
A. Open PeopleSoft Application Designer and select File, Open, Definition HTML. Enter a
Name value of EPPBR_HDRHTML_BASE.

11
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Open Definition panel

Following is the HTML object text, along with markers designating where you can insert
custom elements:
<html>
<head>
%bind(:21)
<title></title>
<!-- title is generated by Tools-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--system generated HTML %bind22, %bind23, %bind24, %bind25, %bind26,
%bind27-->
<script language='javascript' src='%bind(:22)'></script>
<script language='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">
<style type="text/css">
<!--ADD CUSTOM STYLES HERE-->
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"

marginwidth="0" marginheight="0">

<!--custom HTML begins-->

<!--ADD CUSTOM HTML HERE-->
<!--custom HTML ends-->

<!--system generated HTML %bind28, %bind29, %bind30-->

%bind(:28)
%bind(:29)
%bind(:30)
<!--system reserved elements HTML %bind19, %bind20-->
%bind(:19)
%bind(:20)
</body>

12
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

</html>

B. Select File, Save As and give the HTML object a new name. We will name the example
PLANET_PSFT_HDR_HTML.

HTML Properties panel

C. Copy your custom existing HTML and insert into the <!--ADD CUSTOM HTML HERE-->
section of the HTML object shown above. It is assumed that you have already created the
basic HTML for your interface outside of PeopleSoft.
D. Remove all scripts and functions, if any, from the custom existing HTML you pasted into the
HTML object in step C above. Make note of any additional custom scripts and functions
within the header. Branding will take care of reinserting all delivered scripts and functions.
This is performed by system elements 21 to 30. You will allocate additional system elements
for custom scripts and functions. You can also choose to leave custom scripts and functions
in the HTML object. Keep layout reusability and ease of maintenance in mind when making
this decision.
E. Select File, Save.

Step 2 of 4: Identify HTML Syntax That Can be Replaced by System

Elements Provided by Branding
A. Access your portal in three-tier mode and select Portal Administration, Branding, Define
Elements, Enable HTML Layouts.
B. Add a new value and set the HTML Layout ID to PLANET_PSFT_HDR_LAYOUT.
C. Enter a description, select an HTML Object Name of PLANET_PSFT_HDR_HTML, and
select a Layout Type of Header. A list of applicable Branding elements displays.

13
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

HTML Layouts and Element Selection page (1 of 2)

14
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

HTML Layouts and Element Selection page (2 of 2)

D. Analyze the custom HTML from step 1, according to the element list. To make this task
easier, you may want to use an external text editor, highlighting the syntax you want to be
converted to system elements. In addition, highlight the attributes and styles that go along
with the system elements.
E. The more HTML syntax you move out of the layout HTML object and into system elements,
the fewer changes you will likely need to make to the layout HTML object. For example,
instead of changing the layout HTML object, you can use system elements on the fly to
change the look and feel of a portal header. Using system elements makes your HTML layout
more reusable and flexible.

Identifying potential system elements in your header

F. On the HTML Layouts and Element Selection page, select the applicable system elements
for the header and enter custom labels.

15
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Following is the original HTML. Text highlighted in yellow denotes style class code. Text
highlighted in blue denotes HTML code that you want to convert to system elements.
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr valign="top">
<td valign="top" rowspan="2"><a proxied="false"
href="http://my.company.com/servlets/psportal/peoplesoft8/?cmd=start"><im
g name="logo"
src="http://planetx.peoplesoft.com/planet_content/images/planet/logos/myp
lanetps.gif" border="0"></a>
</td>
<td rowspan="2" width="100%"></td>
<td valign="top" align="right">
<table bgcolor="#ffffff" border="0" cellpadding="0"
cellspacing="0">
<tr valign="top">
<td valign="top" width="87" align="right"><img
src="http://planetx.peoplesoft.com/planet_content/ima
ges/planet/planet_header_corner_fade.jpg" width="112"
height="21" border="0">
</td>
<td bgcolor="#000000" nowrap valign="middle"
align="right"><font color="#FFFFFF"><a
proxied="false"
href="http://my.company.com/servlets/psportal/peoples
oft8/?cmd=start" target="_parent"
class="EBIZ_WHITE_HYPERLINK">Home</a> | <a
href="http://my.company.com/servlets/psportal/peoples
oft8/?url=https%3a%2f%2fptop.only.wip.la%3a443%2fhttp%2fmy.company.com%2fservlets%2fic
lientservlet%2fpeoplesoft8%2f%3fICType%3dScript%26tar
get%3dmain%26ICScriptProgramName%3dWEBLIB_EBIZ_LNK.IS
CRIPT1.FieldFormula.IScript_Dir%26ID%3d0000000001"
target="_parent" class="EBIZ_WHITE_HYPERLINK">Map</a>
| <a
href="http://my.company.com/servlets/psportal/peoples
oft8/?url=https%3a%2f%2fptop.only.wip.la%3a443%2fhttp%2fmy.company.com%2fservlets%2fic
lientservlet%2fpeoplesoft8%2f%3fICType%3dPanel%26Menu
%3dADMINISTER_EBIZ%26Market%3dGBL%26PanelGroupName%3d
EBIZ_CONTACT_US" target="_parent"
class="EBIZ_WHITE_HYPERLINK">Contact Us</a> | <a
href="http://my.company.com/servlets/psportal/peoples
oft8/?url=https%3a%2f%2fptop.only.wip.la%3a443%2fhttp%2fwww.peoplesoft.com"
target="_parent"
class="EBIZ_WHITE_HYPERLINK">PeopleSoft.com</a> | <a
href="javascript:void
window.open('http://my.company.com/servlets/iclientse
rvlet/peoplesoft8/?ICType=Script&amp;target=main&amp;
ICScriptProgramName=WEBLIB_EBIZ_LNK.ISCRIPT1.FieldFor
mula.IScript_Hlp&amp;ID=0000000004',
'Help','width=800,height=600,resizable=yes,directorie
s=no,toolbar=no,menubar=no,location=no,copyhistory=no
');" target="_parent" class="EBIZ_WHITE_HYPERLINK"
style="cursor:help">Help</a> | <a proxied="false"
href="http://my.company.com/servlets/psportal/peoples
oft8/?cmd=logout" target="_parent"
class="EBIZ_WHITE_HYPERLINK">Sign
Off</a>&nbsp;</font>
</td>
</tr>
</table>
</td>
</tr>

16
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

<tr valign="top">
<td align="right" valign="top"><img name="peoplepowertheinternet"
src="http://planetx.peoplesoft.com/planet_content/images/planet/logos/peo
plepowertheinternet.gif" width="390" height="35" border="0">
</td>
</tr>
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr valign="top">
<td valign="top" bgcolor="#B2B2CB"><img
src="http://planetx.peoplesoft.com/planet_content/images/planet/shim.gif"
width="100%" height="1" border="0"></td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr height="100%" valign="top">
<td width="100%" class="STRONG"><!--Begin iclientcomponent: Greeting URL:
http://my.company.com/servlets/iclientservlet/peoplesoft8/?ICType=Script&
ICScriptProgramName=WEBLIB_EBIZ.TEMPLATE_FUNC.FieldFormula.IScript_Greeti
ng--><span>Welcome User</span><!--End iclientcomponent: Greeting -->
</td>
<td align="right" nowrap><!--Begin iclientcomponent: PSFT%20Stock URL:
http://my.company.com/servlets/iclientservlet/peoplesoft8/?ICType=Script&
ICScriptProgramName=WEBLIB_EBIZ.ISCRIPT1.FieldFormula.IScript_PSFT_Stock-
-><span>
<table border="0" cellpadding="0" cellspacing="0" width='100%'>
<tr>
<td nowrap><a
href='http://my.company.com/servlets/psportal/peoplesoft8/?url=http%3a%2f
%2ffinance.yahoo.com%2fq%3fs%3dPSFT%26d%3dt' title='Last updated on
3/12/2003 at ET' class='PSHYPERLINK'>PSFT</a>
&nbsp;&nbsp;15.352&nbsp;&nbsp; <font
color='#008000'>+0.032</font>&nbsp;&nbsp;<br>
<center><font size="1"><a
href='http://my.company.com/servlets/psportal/peoplesoft8/?url=http%3a%2f
%2fplanetx.peoplesoft.com%2fdisclaimer%2fstockquote.htm'>Quote delayed 20
minutes</a></font></center>
</td>
</tr>
</table>
</span><!--End iclientcomponent: PSFT%20Stock -->
</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="20%" height="100%">

<tr height="100%" valign="top">
<td></td>
<td valign="top" class="EBIZ_STDTEXT" nowrap>
<!--======================== BEGIN: PERSONALIZATION
==========================-->Personalize <a
href="http://my.company.com/servlets/psportal/peoplesoft8/?url=http%3a%2f
%2fmy.company.com%2fservlets%2ficlientservlet%2fpeoplesoft8%2f%3fICType%3
dPanel%26Menu%3dPORTAL_PERS_HOMEPAGE%26Market%3dGBL%26PanelGroupName%3dPO
RTAL_HOMEPAGE%26PORTALPARAM_PAGE%3dCONTENT"><img border="0"
src="http://planetx.peoplesoft.com/planet_content/images/planet/content.g
if" align="middle" width="55" height="15"></a> <a
href="http://my.company.com/servlets/psportal/peoplesoft8/?url=http%3a%2f

17
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

%2fmy.company.com%2fservlets%2ficlientservlet%2fpeoplesoft8%2f%3fICType%3
dPanel%26Menu%3dPORTAL_PERS_HOMEPAGE%26Market%3dGBL%26PanelGroupName%3dPO
RTAL_HOMEPAGE%26PORTALPARAM_PAGE%3dLAYOUT"><img border="0"
src="http://planetx.peoplesoft.com/planet_content/images/planet/layout.gi
f" align="middle" width="55" height="15"></a><br>
<!--======================== END: PERSONALIZATION
==========================--> <!--
</td>
</tr>
</table>

Step 3 of 4: Replace Highlighted HTML Syntax With Corresponding

System Elements (%bind variables)
A. Keep a list of the custom HTML you are replacing with bind variables.
• %bind(:31)
<a proxied="false"
href="http://my.company.com/servlets/psportal/peoplesoft8/?cmd=sta
rt"><img name="logo"
src="http://planetx.peoplesoft.com/planet_content/images/planet/lo
gos/myplanetps.gif" border="0"></a>

• %bind(:32)
<img
src="http://planetx.peoplesoft.com/planet_content/images/planet/pl
anet_header_corner_fade.jpg" width="112" height="21" border="0">

• %bind(:33)
<img name="peoplepowertheinternet"
src="http://planetx.peoplesoft.com/planet_content/images/planet/lo
gos/peoplepowertheinternet.gif" width="390" height="35"
border="0">

• %bind(:34)
<img
src="http://planetx.peoplesoft.com/planet_content/images/planet/sh
im.gif" width="100%" height="1" border="0">

• %bind(:6)
<td bgcolor="#000000" nowrap valign="middle" align="right"><font
color="#FFFFFF"><a proxied="false"
href="http://my.company.com/servlets/psportal/peoplesoft8/?cmd=sta
rt" target="_parent" class="EBIZ_WHITE_HYPERLINK">Home</a> | <a
href="http://my.company.com/servlets/psportal/peoplesoft8/?url=htt
p%3a%2f%2fmy.company.com%2fservlets%2ficlientservlet%2fpeoplesoft8
%2f%3fICType%3dScript%26target%3dmain%26ICScriptProgramName%3dWEBL
IB_EBIZ_LNK.ISCRIPT1.FieldFormula.IScript_Dir%26ID%3d0000000001"
target="_parent" class="EBIZ_WHITE_HYPERLINK">Map</a> | <a
href="http://my.company.com/servlets/psportal/peoplesoft8/?url=htt
p%3a%2f%2fmy.company.com%2fservlets%2ficlientservlet%2fpeoplesoft8
%2f%3fICType%3dPanel%26Menu%3dADMINISTER_EBIZ%26Market%3dGBL%26Pan
elGroupName%3dEBIZ_CONTACT_US" target="_parent"
class="EBIZ_WHITE_HYPERLINK">Contact Us</a> | <a
href="http://my.company.com/servlets/psportal/peoplesoft8/?url=htt
p%3a%2f%2fwww.peoplesoft.com" target="_parent"
class="EBIZ_WHITE_HYPERLINK">PeopleSoft.com</a> | <a
href="javascript:void
window.open('http://my.company.com/servlets/iclientservlet/peoples

18
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

oft8/?ICType=Script&amp;target=main&amp;ICScriptProgramName=WEBLIB
_EBIZ_LNK.ISCRIPT1.FieldFormula.IScript_Hlp&amp;ID=0000000004',
'Help','width=800,height=600,resizable=yes,directories=no,toolbar=
no,menubar=no,location=no,copyhistory=no');" target="_parent"
class="EBIZ_WHITE_HYPERLINK" style="cursor:help">Help</a> | <a
proxied="false"
href="http://my.company.com/servlets/psportal/peoplesoft8/?cmd=log
out" target="_parent" class="EBIZ_WHITE_HYPERLINK">Sign
Off</a>&nbsp;</font>

• %bind(:4)
<a
href="http://my.company.com/servlets/psportal/peoplesoft8/?url=htt
p%3a%2f%2fmy.company.com%2fservlets%2ficlientservlet%2fpeoplesoft8
%2f%3fICType%3dPanel%26Menu%3dPORTAL_PERS_HOMEPAGE%26Market%3dGBL%
26PanelGroupName%3dPORTAL_HOMEPAGE%26PORTALPARAM_PAGE%3dCONTENT"><
img border="0"
src="http://planetx.peoplesoft.com/planet_content/images/planet/co
ntent.gif" align="middle" width="55" height="15"></a> <a
href="http://my.company.com/servlets/psportal/peoplesoft8/?url=htt
p%3a%2f%2fmy.company.com%2fservlets%2ficlientservlet%2fpeoplesoft8
%2f%3fICType%3dPanel%26Menu%3dPORTAL_PERS_HOMEPAGE%26Market%3dGBL%
26PanelGroupName%3dPORTAL_HOMEPAGE%26PORTALPARAM_PAGE%3dLAYOUT"><i
mg border="0"
src="http://planetx.peoplesoft.com/planet_content/images/planet/la
yout.gif" align="middle" width="55" height="15"></a><br>

• %bind(:7)
Welcome User

• %bind(:51)
<!--Begin iclientcomponent: PSFT%20Stock URL:
http://my.company.com/servlets/iclientservlet/peoplesoft8/?ICType=
Script&ICScriptProgramName=WEBLIB_EBIZ.ISCRIPT1.FieldFormula.IScri
pt_PSFT_Stock--><span>
<table border="0" cellpadding="0" cellspacing="0"
width='100%'><tr><td nowrap><a
href='http://my.company.com/servlets/psportal/peoplesoft8/?url=htt
p%3a%2f%2ffinance.yahoo.com%2fq%3fs%3dPSFT%26d%3dt' title='Last
updated on 3/12/2003 at ET' class='PSHYPERLINK'>PSFT</a>
&nbsp;&nbsp;15.352&nbsp;&nbsp; <font
color='#008000'>+0.032</font>&nbsp;&nbsp;<br><center><font
size="1"><a
href='http://my.company.com/servlets/psportal/peoplesoft8/?url=htt
p%3a%2f%2fplanetx.peoplesoft.com%2fdisclaimer%2fstockquote.htm'>Qu
ote delayed 20
minutes</a></font></center></td></tr></table></span><!--End
iclientcomponent: PSFT%20Stock -->

B. In the EPPBR_HDRHTML_BASE HTML object in Application Designer, replace the HTML

syntax you highlighted in step 2 of 4 with the bind variable syntax %bind(:XX), for which you
have created associations on the HTML Layouts and Element Selection page.
C. When adding styles, three options are available:
i. If you are using only a few styles and they are not likely to be shared, embed the
styles in the <head> section of the PLANET_PSFT_HDR_HTML object. Paste the
style classes into the HTML object area marked with the following note: <!--ADD
CUSTOM STYLES HERE-->.

19
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

ii. If the styles you are using are reusable, convert them into a PeopleSoft style
sheet and use the style sheet in a theme in which the header will be deployed.
iii. You can also link to an external cascading style sheet, (CSS), as you do when
you are coding normal HTML.
It is more flexible to use PeopleSoft style sheets, as you can achieve a different look and
feel by simply swapping in a different style sheet using the same HTML object or even
the same header.
D. Add custom JavaScript functions/scripts. Two options are available:
i. Use the system elements 51-60 to add additional HTML areas.
ii. Embed the code in the HTML object itself.
E. Save the final PLANET_PSFT_HDR_HTML HTML object.
Following is the final HTML object text:
<html>
<head>
%bind(:21)
<title></title>
<!-- title is generated by Tools-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--system generated HTML %bind22, %bind23, %bind24, %bind25, %bind26, %bind27-->
<script language='javascript' src='%bind(:22)'></script>
<script language='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">
<style type="text/css">
<!--custom style begins-->

.EBIZ_WHITE_HYPERLINK {font-family: "Verdana","Arial","sans-serif"; font-size:

8pt; font-weight: normal; font-Style: normal; font-variant: normal; color:
rgb(255,255,255); word-spacing: normal; letter-spacing: normal; line-height:
normal; white-space: normal;}
.EBIZ_WHITE_HYPERLINK:HOVER {font-family: "Verdana","Arial","sans-serif";
font-size: 8pt; font-weight: normal; font-Style: normal; font-variant: normal;
color: rgb(178,178,208); word-spacing: normal; letter-spacing: normal; line-
height: normal; white-space: normal;}
.EBIZ_STDTEXT {font-size: 10pt; padding-right: 3px; padding-left: 3px}
.EBIZ_STDTEXT_NO_UL {font-size: 10pt; text-decoration: none; }
<!--custom style ends-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<!--custom HTML begins-->
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr valign="top">
<td valign="top" rowspan="2">%bind(:31)</a>
</td>
<td rowspan="2" width="100%"></td>

20
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

<td valign="top" align="right">

<table bgcolor="#ffffff" border="0" cellpadding="0"
cellspacing="0">
<tr valign="top">
<td valign="top" width="87" align="right">%bind(:32)</td>
<td>%bind(:6)</td>
</tr>
</table>
</td>
</tr>
<tr valign="top">
<td align="right" valign="top">%bind(:33)</td>
</tr>
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr valign="top">
<td valign="top" bgcolor="#B2B2CB">%bind(:34)</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr height="100%" valign="top">
<td width="100%" class="STRONG">%bind(:7)</td>
<td align="right" nowrap>%bind(:51)</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="20%" height="100%">

<tr height="100%" valign="top">
<td></td>
<td valign="top" class="EBIZ_STDTEXT" nowrap>
%bind(:4)
</td>
</tr>
</table>

<!--custom HTML ends-->

<!-- system generated HTML %bind28-->
<!--system generated HTML %bind29, %bind30-->
%bind(:29)
%bind(:30)
<!--system reserved elements HTML %bind19, %bind20-->
%bind(:19)
%bind(:20)
</body>
</html>

Step 4 of 4: Configure the Header

A. Access your portal in three-tier mode. Select Portal Administration, Branding, Define
Headers.
B. Add a new value. Enter a Header ID value of PLANET_PSFT_HDR, enter a description, and
select an HTML Layout ID of PLANET_PSFT_HDR_LAYOUT.
C. Three additional page tabs are available: Images, Bars, and HTML Area are displayed based
on the selected layout ID. Go through each tab page to set the values based on Step C-i.

21
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

i. Images: you can move the images into the database or select URL as Image
Source and then specify URL values

Define Headers – Images page

ii. Bars: specify the style classes for the bars and for each individual bar items if
necessary.

Define Headers – Bars page

iii. Note that for the Personalization bar, links are displayed using two images similar
to icons instead of using hyperlink text. We use &nbsp space code to create blank
link labels and specify icon images for the content and layout links to achieve the
same look and feel. The system checks for missing link labels and issues a warning if
it cannot find one. Using &nbsp code is one way around the system check.

Bar Detail page

iv. HTML Area: the system does not support iScripts. We have to convert the iScript
into App Class code (PLANET_APP_PACKAGE:GetStockInfo:GetStockHTML) to
generate the stock quote.

22
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Define Headers – HTML Area page

v. You are now ready to assemble a Branding theme using the header. You can
then assign the theme to any user.

Additional Tips on PeopleSoft Enterprise Portal Branding

Using Attributes and Styles
Once you have an HTML layout ready with the predefined system elements in place, the actual
configuration of headers and footers is quite straightforward. Basically, you are just setting the actual
values for images, HTML, links, and so forth in the header and footer components. To refine your
header or footer through the configuration, set the attribute and style class fields on the header and
footer pages. This will give you greater flexibility to manipulate the look and feel using table data
without changing database HTML objects.
The following table illustrates how data entered on the header and footer definition pages and stored
in the attribute and style class fields is applied when generating the final header and footer HTML. For
example, if you set the Image Attribute field value for the Image system element to valign=”top”, the
HTML placement value will be <img valign=”top”>.
The list of HTML objects used in the process is for reference only. You should be able to achieve
your desired look and feel by changing the style classes and the layout HTML object. We
recommend that you do not change the listed HTML objects below. Any changes will be
customizations and will impact future upgrades.
Element Type Element Field HTML Placement HTML Object/Note
(indicated by XXX)
Image Image Image Attribute <img XXX> HTML.EPPBR_IMGHREF_HTML
HTML.EPPBR_IMGONLY_HTML
Bar Bar Style Class <tr class= XXX> HTML.EPPBR_TABLE_OPENTAG
HTML.EPPBR_TABLE_OPENTAG_NOSTYLE
Bar Bar - Divider Image <td>
Attributes <img XXX>
</td>
Bar Bar - Item Style Class <td class=XXX> EPPBR_ITEM_OPENTAG
<a class=XXX EPPBR_ITEM_OPENTAGTEXT
style="background:transparen
t">
Bar Bar - Item Icon Image <img XXX> EPPBR_IMGSRC_HTML
Attributes

23
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Element Type Element Field HTML Placement HTML Object/Note

(indicated by XXX)
My Links My Links Style Class <td class=XXX> For additional options within the My Links drop-
<select down list box, add the following styles to your
class=”EPPBRSHORTCUTS style sheet and make modifications, if
ELECT”> necessary.
<option EPPBRSHORTCUTSELECT
class=”EPPBRSHORTCUTC EPPBRSHORTCUTCOLLECTION
OLLECTION“>
Search Search Options Item Attribute <table XXX> HTML.EPPBR_SRCH_HTML
Search Search Options Style Class <input class=XXX>
- Text Entry
Box
Search Search Options Image <img XXX> HTML.EPPBR_GOBTN_SAVEWARN
- Search Icon Attributes HTML.EPPBR_GOBTN_NOSAVEWARN
HTML.EPPBR_IMGHREF_HTML
HTML.EPPBR_IMGONLY_HTML
Homepage Help Homepage Style Class and <a class=XXX XXX> HTML.EPPBR_HDR_HELP
Help Item Attributes
Homepage Tab Homepage Tab Style Class and <table class=XXX XXX> HTML.EPPBR_TAB_OPENTAG
Item Attributes
Homepage Tab Homepage Tab Style Class <td class=XXX> HTML.EPPBR_HP_INACTIVE_TAB
- Active/Inactive <a class=XXX
Tab Style style="background:transparen
t">
Homepage Tab Homepage Tab Image Attribute <td XXX>
- Transitional <img XXX>
Images
Homepage Tab Homepage Tab Image <td XXX>
- Top/Bottom Attributes <img XXX>
Images

Style Conflicts
The user homepage usually includes a header, footer, menu navigation pagelet, and a few homepage
pagelets. There are several stylesheet references when the homepage is generated. They are
applied in the following sequence:
1. Stylesheet specified for the homepage pagelets, if any of the displaying homepage pagelets is an
iPage. This is set in the page properties in PeopleSoft Application Designer.
2. Stylesheet defined in the Define Menu Styles component, if the Enterprise Menu pagelet is on the
homepage.
3. Stylesheet defined for the PeopleTools standard header.
4. Stylesheet defined in the theme definition.
You can have conflicting style classes within all of these stylesheets used in the template. For
example, if you have a style class named Big in the first stylesheet and also have a style class named
Big in the fourth stylesheet, there may be conflicting styles in the resulting homepage. Because the
conflicting styles are defined at the same level, the one applied later in the sequence takes
precedence.
In the homepage template, the stylesheet specified in the Branding theme definition always takes
precedence over competing stylesheets. For example, PSPAGE in the default stylesheet
EPPSTYLEDEF includes two pixels for the left margin. To override the left margin, we included
PSPAGE in the blue theme stylesheet EPPBRBLUESTYLEDEF, but changed the left margin to zero.

24
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

You can also have conflicting styles in your target content template. In a page-based template, the
stylesheet associated with the page used for the target content always takes precedence over
competing stylesheets. In a frame-based template, the stylesheet specified in each frame takes
precedence for the content within the frame.
In addition to the specifics mentioned above, all the rules of inheritance and conflicting styles of
cascading stylesheets still apply. We recommend that you keep your custom stylesheet definition as
clean as possible and include only the style classes needed to avoid style conflicts.

Menu Navigation
PeopleSoft Enterprise Portal has its own version of enterprise menu navigation. The menu styles
provided by Branding apply to the Enterprise Menu pagelet only. You can change the look and feel of
the menu navigation by specifying images and styles. While the following three style classes are also
used by the menu, they are not configurable through the same mechanism:
PTPAGELET: Style class for the pagelet.
PTPAGELETHEADER: Style class for the pagelet header.
PTPAGELETBODY: Style class for the pagelet body.
These style classes are hard-coded for all homepage pagelets that include the Enterprise Menu
pagelet in the left navigation. To vary the pagelet styles by Branding theme, add the style classes with
different style properties to the stylesheet included in the theme definition. Another option is to add
the style classes to the stylesheet included in the menu style definition, and whichever theme uses
the menu style will have the new styles.

Chapter 4 – Beyond PeopleSoft Enterprise Portal Branding

Homepage Presentation
PeopleSoft Enterprise Portal Branding provides you with the flexibility to configure the header, footer,
menu navigation, and overall stylesheet that are employed based on portal registry or user roles. In
addition, PeopleTools provides fixed-named HTML and image objects to build portal homepage tabs.
You can use the Content Ref Administration page to override these delivered default HTML objects
and images used for homepage components such as tabs and pagelets with your own custom HTML
objects.
See PeopleTools Internet Technology PeopleBook, “Changing the Portal Interface”
If you are not using PeopleSoft Enterprise Portal Branding, see Appendix A in this Red Paper for
information about customizing headers using PORTAL_UNI_HEADER_NNS and its subsections.

Target Content Page Presentation

Target content page presentation is primarily based on the template registered with the CREF. If you
use the PeopleSoft Enterprise Portal default template for a target content page, you will have the
target content page header and the Enterprise Menu pagelet with full Branding support.
For other delivered templates, presentation will vary depending on what is included in the template.
For example, if you choose a template that includes the standard PeopleTools menu, you will not be
able to change the image used to expand the menu unless you override the existing image with the
new image using the same image name.
Different iScript calls will result in different Branding presentations. IScript_UniHeader() will
render the homepage header specified in the Branding theme without the Personalization bar.

25
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

IScript_UniHeader_PIA() will render the target content page header specified in the Branding
theme.
PeopleTools PeopleBooks contain details about creating templates and incorporating these iScript
calls into your template.
See PeopleTools Internet Technology PeopleBook, “Designing Portal Templates”

Remote Node Branding Header and Footer Presentation

As mentioned above, the header and footer are actually generated through iScript calls. If you are in
a remote database and need to use the PeopleSoft Enterprise Portal header, change the iScript call
from the local node to the PeopleSoft Enterprise Portal node. Basically, you need to use the
PeopleSoft Enterprise Portal as your content provider for header and footer calls.
<Pagelet Name="UniversalNavigation">
<SOURCE Node="LOCAL_NODE"
href="s/WEBLIB_PORTAL.PORTAL_HOMEPAGE.FieldFormula.
IScript_HPDefaultHdr"/>
</Pagelet>

See PeopleSoft 8.8 Enterprise Portal PeopleBook, “Using Branding”

Chapter 5 - Putting Everything Together

The following user homepage presentation was created using both PeopleSoft Enterprise Portal
Branding and portal registry attributes to achieve a desired look and feel.

User homepage example

The user homepage layout includes the following elements:

26
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

1. Branding header: Created using theme assignment.

2. Branding menu navigation body: Created using theme assignment.
3. Pagelets of different colors in different columns: Created by overriding the HTML
PORTAL_HP_3COL_LAYOUT three-column layout.
4. Different pagelet layout for the Workgroup Content pagelet: Created by overriding the HTML
PORTAL_HP_COMPONENT pagelet.

Overriding the Three-Column Layout

Access the Content Reference Attributes section of the Content Ref Administration page.

Content Reference Attributes section of the Content Ref Administration page

Override the three-column layout by entering an attribute value of
PORTAL_HP_3COL_LAYOUT_NEW. Ensure that the Translate option is clear.
For the user homepage example above, in the new HTML.PORTAL_HP_3COL_LAYOUT_NEW, we
set column 3 (PLANET_COL3) to use an aqua green background color to differentiate it from column
1 and column 2.
You can also vary pagelet header style by column. In this example, assuming the
PORTAL_HP_COMPONENT is the HTML object used for all pagelets and that
PTPAGELETHEADER style class is used as the pagelet header, you can use ID and DIV tags within
each column to vary the column header styles.

Note. If you want to override the HTML object used by the pagelet, you are not required to use
PTPAGELETHEADER.

Following is the content of the new PORTAL_HP_3COL_LAYOUT_NEW, which we use to override

the default PORTAL_HP_3COL_LAYOUT. The highlighted text illustrates the way in which you can
use different colors in different columns.
<style type="text/css">
#COL1 TD.PTPAGELETHEADER { background-color: white; text-align: left}
#COL2 TD.PTPAGELETHEADER { background-color: white; text-align: left}
#COL3 TD.PTPAGELETHEADER { background-color: white; text-align: center;
color:#3399cc }
</style>

<table width="100%">
<tr>
<td width="28%" valign="top" class="PLANET_COL1">
<div id="COL1">
%BIND(:1)
</div>
</td>

27
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

<td width="6">
</td>
<td width="32%" valign="top" class="PLANET_COL2">
<div id="COL2">
%BIND(:2)
</div>
</td>
<td width="6">
</td>
<td width="32%" valign="top" class="PLANET_COL3">
<div id="COL3">
%BIND(:3)
</div>
</td>
</td>
<td width="6">
</tr>
</table>

Overriding Pagelet Layout

If you want to override the layout of only the Workgroup Content pagelet in the second column of the
homepage, you do so by setting the non-translatable attribute (clearing the Translate option) on the
content reference for the pagelet itself. For more information, see Appendix B: Customizing
Homepage and Pagelet Objects Using Attributes.

Content Reference Attributes section of the Content Ref Administration page

HTML.PORTAL_HP_COMPONENT_CM is the custom HTML object we want to use to override the
default HTML used in PORTAL_HP_COMPONENT for the Workgroup Content pagelet.
In the Content Workgroup pagelet HTML object HTML.PORTAL_HP_COMPONENT_CM, we
removed the pagelet header and added an additional image via %BIND12.
The image value is defined on the Content Reference Attributes section of the Content Ref
Administration page for the tab that the Pagelet resides on, not on the pagelet..

Content Reference Attributes section of the Content Ref Administration page

28
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Following is the HTML object for the Content Workgroup pagelet. The color-coded text illustrates the
modifications made to the HTML that we describe above.
<!-- Begin Pagelet=%BIND(:5) -->
<!-- PageletState=MAX -->
<TABLE id="%BIND(:5)" CLASS="PTPAGELET" WIDTH="100%" CELLPADDING="0" CELLSPACING="0"
BORDER="1">
<TR>
<!-- Hide Pagelet Header
<TD CLASS="PTPAGELETHEADER">
%BIND(:1)
%BIND(:2)</nobr>
</TD>
-->
<TD CLASS="PLANETICONHEADER">
<!--image 12-->
<IMG SRC="%BIND(:12)" NAME="workgroup" border="0">
</TD>
</TR>
<TR>
<TD CLASS="PTPAGELETBODY" WIDTH="100%">
<Pagelet Name="%BIND(:2)">
<Source Pagelet="%BIND(:4)" href="%BIND(:3)" />
</Pagelet>
</TD>
</TR>
</TABLE>
<BR>
<!-- End Pagelet=%BIND(:5) -->

Chapter 6 - Frequently Asked Questions

Can I use different templates for different pagelets?
Yes. PeopleTools provides fixed-named HTML and image objects to build portal homepage tabs.
You can override the default HTML objects and images used for homepage components per tab
or per pagelet using the Content Ref Administration page. See the example above.

Can I have pagelets of different colors for different columns on my

homepage?
Yes. In addition to overriding the default HTML for each pagelet, you can also override the default
HTML by column. See the example above on how to override the three-column layout.

What do I need to do to migrate Branding development to production?

PeopleSoft Enterprise Portal provides Data Mover scripts (DMS) to move Branding data to your
production databases. The scripts include database objects as well as setup data in the tables.
For more information and a list of the DataMover scripts, see PeopleSoft 8.8 Enterprise Portal
PeopleBook: Using Branding
For portal registry attributes, you will need to include the content reference and any additional
images in a project and move it to the production database as well.

29
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Can I store and reference images, stylesheets, and JavaScript outside of

my PeopleSoft system?
Yes, you can store these objects outside of your PeopleSoft system. When creating images,
stylesheets, and JavaScript, you have two options:
• You can create new images and stylesheets within Application Designer.
• You can leverage a centralized repository of images, stylesheets, and JavaScript files.
Following are examples of how to reference the objects stored outside of your PeopleSoft
system:

Image example:

Copy the red text and replace the black text with your actual URL:
<IMG border=0 SRC=”http//library.peoplesoft.com/images/myimage.gif”>

Stylesheet example:

You can only select a PeopleSoft stylesheet when assembling a theme or setting menu overrides.
But you can to enter a style class that’s not in PeopleSoft. This provides a greater flexibility when
you want to use an external stylesheet or embed style classes within your HTML.
For embedded style classes, see the Planet PeopleSoft example from Chapter 3.
To link external stylesheets, copy the red text and replace the black text with your actual URL:
<LINK REL=”stylesheet” HREF=”http//library.peoplesoft.com/css/mystyle.css”
TYPE=”text/css”>

JavaScript example:

Copy the red text and replace the black text with your actual URL:
<SCRIPT LANGUAGE=”JavaScript”
SRC=”http//library.peoplesoft.com/javascript/myjs.js”>

Note. You can also use relative paths for each of these references. For example,
“/common/css/mycss.css”. This is assuming that the referenced web server is the same as the
PeopleSoft portal server, or that an alias has been created.

How can I change hyperlink colors on homepages?

Now you can control the style classes used in your header and footer. For the hyperlink colors on
the homepage pagelets, you need to have the PSHYPERLINK style class in your stylesheet. You
will modify this attribute to change hyperlink colors. Remember to modify the pseudo-classes
listed on the property pages for PSHYPERLINK.
You should also specify some default font attributes for <A> and <TD> in your own external
stylesheet or an embedded stylesheet at the top of a layout HTML object. This provides font
attributes for text if you don’t set style classes for certain elements. For example:
<STYLE TYPE="text/css">
td { font-family:arial; font-size:9pt; }
a:visited { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration:
underline }
a:link { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration:
underline }

30
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

a:hover { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration:

underline }
a:active { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration:
underline }
</STYLE>

How do I change the login, expire, and other WebLogic pages?

Modify the surrounding HTML. Do not change the values of forms or remove any dynamic bind
values, such as server-side tags. These dynamic bind variables contain tags like this one: <%
XXXX-YYYY %>. The HTML files for these WebLogic pages are located in:

\\bea\wlserver6.1\config\peoplesoft\applications\PORTAL\WEB-INF\psftdocs\ps
Here is a list of HTML files that can be modified to meet your Branding requirements:
• signin.html
• expire.html
• cookiesrequired.html
• exception.html
• sslrequired.html

Appendix A - 1: PORTAL_UNI_HEADER_NNS in PeopleTools

8.45
If PeopleSoft Enterprise Portal Branding is disabled, the system will use standard PeopleTools 8.45
branding. PORTAL_UNI_HEADER_NNS, which determines the look and feel of the header, is called
in Application Package PT_BRANDING, Class BrandingBase, Method GenerateUniHeaderHTML.
<html>
<head>
%bind(:36)
<title>%bind(:33)</title>
<style type="text/css">
.searchBar { background-repeat: repeat-x; background-color: #FFFFFF}
.buttonBar { background-image: url(%bind(:14)); background-repeat: repeat-x; color:
#FFFFFF; background-color: #5F6EAF}
.headerLink { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color:
#FFFFFF; text-decoration: none; background-color: #5F6EAF}
.headerLinkActive { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color:
#FFFFFF; text-decoration: underline}
.globeBar { background-image: url(%bind(:11))}
.greeting { color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size:
12pt; font-weight: bold}
.pthomepagetabactive { background-color: #FFFFFF; font-family: Arial, Helvetica, sans-
serif; font-weight: bold; color: #000000; font-size: 9pt; background-image:
url(%bind(:40)); border-style: none}
.pthomepagetabinactive { font-size: 9pt; color: #000000; font-family: Arial,
Helvetica, sans-serif; border: #FFFFFF none; background-image: url(%bind(:41))}
.pthomepagetabline { background-image: url(%bind(:42))}
</STYLE>
<script language='javascript' src='%Bind(:37)'></script>
<script language='javascript' src='%Bind(:39)'></script>
%bind(:32)
%bind(:43)

31
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

<LINK REL="stylesheet" HREF="%Bind(:15)" TYPE="text/css">

</HEAD>
<BODY MARGINHEIGHT="0" class="PSPAGE">
<form name="form1" method="post" action=%bind(:26)>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3" width="145"><img src="%BIND(:1)" width="145" height="41"
alt="PeopleSoft logo" hspace=20></td>
<td rowspan="2" width="46" valign="top" halign="left"><img
src="%bind(:9)" width="46" height="27"></td>
<td valign="top" colspan="10" height="23" width="100%"
class="globeBar"><font class="greeting">&nbsp;%bind(:25)</font></td>
</tr>
<tr>
<td valign="top" width="50%" ><img src="%bind(:13)" width="100%"
height="4"></td>
<td class="buttonBar" halign="right" valign="bottom" width="24"
nowrap=true><img src="%bind(:2)" width="24" height="18"></td>
<td halign="right" valign="bottom" width="40%">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
height="18">
<tr>
<td class="buttonBar" nowrap=true><nobr>&nbsp;<a
proxied=false %bind(:16)
class="headerLinkActive">&nbsp;%bind(:21)</span></a><
/nobr></td>
<td class="buttonBar" width="7%"
nowrap=true>&nbsp;</td>
<td class="buttonBar"><nobr>|</nobr></td>
<td class="buttonBar" width="3%"
nowrap=true>&nbsp;</td>
%BIND(:35)
%BIND(:44)
%BIND(:45)
%BIND(:5)
%BIND(:6)
%BIND(:7)
<td class="buttonBar" nowrap=true><nobr>&nbsp;<a
%bind(:19)
class="headerLinkActive">&nbsp;%bind(:24)</a>&nbsp;&n
bsp;</nobr></td>
</tr>
</table>
</td>
</tr>
</table>
%BIND(:28)
</form>
%BIND(:34)
%bind(:29)
%BIND(:18)
</body>
</html>

Appendix A - 2: PORTAL_UNI_HEADER_NNS Binds

1. &Response.GetImageURL(Image.NEW_PS_LOGO),

32
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

2. &Response.GetImageURL(Image.NEW_PORTAL_HDR_TBRCRV),
3. &Response.GetImageURL(Image.PT_PORTAL_IC_HOME),
4. &Response.GetImageURL(Image.PT_PORTAL_MENU),
5. &FavoritesHTML,
6. &AddToFavoritesHTML,
7. &HelpHTML,
8. &Response.GetImageURL(Image.PT_PORTAL_IC_LOGOUT),
9. &Response.GetImageURL(Image.NEW_PORTAL_HDR_CRV),
10. &Response.GetImageURL(Image.NEW_PORTAL_HDR_BG),
11. &Response.GetImageURL(Image.NEW_PORTAL_HDR_BG),
12. &Response.GetImageURL(Image.NEW_PORTAL_HDR_TBRCRV),
13. &Response.GetImageURL(Image.NEW_PORTAL_HDR_SHD),
14. &Response.GetImageURL(Image.NEW_PORTAL_HDR_TBR),
15. &styleSheet,
16. &homeURL,
17. &startURL,
18. &AddToFavFormHTML,
19. &logoutURL,
20. MsgGetText(95, 400, "Return Home"),
21. /*20*/MsgGetText(95, 401, "Home"),
22. MsgGetText(95, 402, "Return to Menu"),
23. MsgGetText(95, 403, "Menu"),
24. MsgGetText(95, 408, "Sign out"),
25. &Greeting,
26. &srchURL,
27. &Response.GetImageURL(Image.PT_PORTAL_GO),
28. &PersonalizeHTML,
29. "",
30. &SearchLabel,
31. &HelpJSHTML,
32. &homepageJS,
33. "",
34. &TabHTML,
35. &WLHTML,
36. &domainScript,

33
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

37. &Response.GetJavaScriptURL(HTML.PT_SAVEWARNINGSCRIPT),
38. &GoSaveWarnHTML,
39. &SaveWarnCrossDomainScript,
40. &Response.GetImageURL(Image.PT_HOME_TAB_ACTIVE_CENTER),
41. &Response.GetImageURL(Image.PT_HOME_TAB_INACTIVE_CENTER),
42. /*40*/&Response.GetImageURL(Image.PT_HOME_TAB_LINE),
43. %Request.ExpireMeta,
44. &CTIHTML,
45. &MCFHTML;

Appendix B: Customizing Homepage and Pagelet Objects Using

Attributes
This is a quick reference to a list of available attributes on a tab. Use these non-translatable
attributes to substitute the default HTML objects with your own objects.
See PeopleTools Internet Technology PeopleBook, “Changing the Portal Interface”
• Attributes related to the full Homepage Layout:
PORTAL_HP_USER_TEMPLATE
PORTAL_HP_2COL_LAYOUT
PORTAL_HP_3COL_LAYOUT
• Attributes related to Pagelets on the Homepage:
Pagelet Header
o PORTAL_HP_ACTIONBAR
o PORTAL_HP_ACTIONBAR_REMOVE
o PORTAL_HP_ACTIONBAR_EDIT
o PORTAL_HP_ACTIONBAR_HELP
Pagelet Body
o PORTAL_HP_COMPONENT
Pagelet Images
o PT_PORTAL_IC_EDIT
o PT_PORTAL_IC_CLOSE
o PT_PORTAL_IC_COLLAPSE
o PT_PORTAL_IC_EXPAND
o PT_PGLT_HELP
• Additional Images
You can specify up to an extra 15 images for a homepage using %BIND variables on tab or
pagelet HTML objects. Homepage generation logic replaces %BIND12 to %BIND26 on the
homepage tab with images specified as attributes. See the “Example on How to Override the
Pagelet Layout“ section in this Red Paper.
In addition to these tab attributes, you can also override the PORTAL_HP_COMPONENT HTML
object of pagelets as a pagelet CREF attribute. If the PORTAL_HP_COMPONENT object is specified
for a tab and for a pagelet, the pagelet attribute is used to build only that pagelet. All other pagelets
are built using the attribute specified on the tab or default.

34
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Appendix C: Special Notices

All material contained in this documentation is proprietary and confidential to PeopleSoft, Inc., is
protected by copyright laws, and is subject to the nondisclosure provisions of the applicable
PeopleSoft agreement. No part of this documentation may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means, including, but not limited to, electronic, graphic,
mechanical, photocopying, recording, or otherwise without the prior written permission of PeopleSoft,
Inc.
This documentation is subject to change without notice, and PeopleSoft, Inc. does not warrant that
the material contained in this documentation is free of errors. Any errors found in this document
should be reported to PeopleSoft, Inc. in writing.
The copyrighted software that accompanies this documentation is licensed for use only in strict
accordance with the applicable license agreement, which should be read carefully as it governs the
terms of use of the software and this documentation, including the disclosure thereof. See Customer
Connection or PeopleBooks for more information about which publications are considered to be
product documentation.
PeopleSoft, the PeopleSoft logo, PeopleTools, PS/nVision, PeopleCode, PeopleBooks, and Vantive
are registered trademarks, and PeopleTalk and "People power the internet." are trademarks of
PeopleSoft, Inc. All other company and product names may be trademarks of their respective owners.
The information contained herein is subject to change without notice.
Information in this documentation was developed in conjunction with use of the product specified, and
is limited in application to those specific hardware and software products and levels.
PeopleSoft may have patents or pending patent applications covering subject matter in this
document. The furnishing of this document does not give you any license to these patents.
The information contained in this document has not been submitted to any formal PeopleSoft test and
is distributed AS IS. The use of this information or the implementation of any of these techniques is a
customer responsibility and depends on the customer's ability to evaluate and integrate them into the
customer's operational environment.
While PeopleSoft may have reviewed each item for accuracy in a specific situation, there is no
guarantee that the same or similar results will be obtained elsewhere. Customers attempting to adapt
these techniques to their own environments do so at their own risk. Any pointers in this publication to
external websites are provided for convenience only and do not in any manner serve as
endorsements of these websites.

Appendix D: Validation and Feedback

This section documents the real-world validation this Red Paper has received.

Customer Validation

Field Validation

Appendix E: Revision History

Authors
Hsing Huang
Maria Gummerson

35
11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

Reviewers
Staci Ludwig

Revision History
November 19, 2004: Updated to reflect changes from PeopleTools 8.45

36