PeopleSoft Enterprise Portal 8.

8 GUI Configuration Tips

Contains: PeopleSoft 8.8 Enterprise Portal GUI Branding Use Cases

Authors: Hsing Huang and Maria Gummerson PeopleSoft Enterprise Portal Development

11/30/2004 August 2003

PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips

PeopleSoft 8.8 Enterprise Portal GUI Configuration Tips Comments on this document can be submitted to: redpaper@peoplesoft.com. 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

.........................................1: PORTAL_UNI_HEADER_NNS in PeopleTools 8.................................................. 35 Customer Validation................................................................................................................................................ stylesheets............. 29 Can I store and reference images............................................................................................................................ and JavaScript outside of my PeopleSoft system? .................................. 30 How can I change hyperlink colors on homepages? ................................45 .............................. 35 Appendix E: Revision History .............................................. 32 Appendix B: Customizing Homepage and Pagelet Objects Using Attributes .......... 35 Reviewers ................. 31 Appendix A ........................................................... 36 Revision History ..................................................... 35 Authors. expire........................................................................ 34 Appendix C: Special Notices......................................... 29 Can I have pagelets of different colors for different columns on my homepage?....................................................................................................... 36 PeopleSoft Proprietary and Confidential 4 ................... 35 Field Validation.......................................................... 35 Appendix D: Validation and Feedback ......................... 31 Appendix A .........8 GUI Configuration Tips Can I use different templates for different pagelets?..................11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8...........2: PORTAL_UNI_HEADER_NNS Binds.............. and other WebLogic pages? .................... 30 How do I change the login.............. 29 What do I need to do to migrate Branding development to production?..........................

42.45 PeopleBook. headings. relational database concepts/SQL. 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.and Portal-related information in PeopleBooks to ensure that you have a well-rounded understanding of our PeopleSoft Internet Architecture (PIA) technology. This document is not intended to replace the documentation delivered in PeopleBooks. 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. basic Internet architecture. Much of the information in this document will eventually be incorporated into subsequent versions of PeopleBooks. We recommend that before you read this document.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.45 PeopleBook. you read the PeopleTools.Introduction This Red Paper is a practical guide meant for a technical audience. PeopleTools Internet Technology PeopleSoft 8. the structures. content.8 Enterprise Portal PeopleBook PeopleTools 8.45 PeopleBook. To see if the document has been updated since you last downloaded it. To take full advantage of the information covered in this document. Note. and how to use PeopleSoft applications. Structure of This Red Paper This Red Paper provides guidance on modifying the look and feel of the PeopleSoft Enterprise Portal. with a good understanding of PeopleSoft’s Internet and Portal Architecture. please consult PeopleBooks.8 GUI Configuration Tips Chapter 1 . We assume that our readers are experienced Information Technology (IT) professionals. For further details. Many of the fundamental concepts related to PeopleSoft development are discussed in the following PeopleSoft PeopleBooks: • • • • PeopleTools 8. the PeopleSoft Portal. PeopleSoft Application Designer (Development Tools | Application Designer) PeopleTools 8. SP2. we recommend that you have a basic understanding of system administration. or 8.45. including Web and application developers who implement or maintain applications of the PeopleSoft Enterprise Portal. compare the date of your version to the date of the version posted on Customer Connection. PeopleCode Reference (Development Tools | PeopleCode Reference) 5 PeopleSoft Proprietary and Confidential . It should be used only as a guide. please refer to the Red Paper library and search for Portal GUI Tips Red Papers. and length of this document is likely to vary with each posted version.8 Enterprise Portal PeopleTools 8. Related Materials This Red Paper is not a general introduction to developing with PeopleSoft or making changes to a PeopleSoft Portal environment.4).xx through PeopleTools 8. This document can be used for the following PeopleSoft Enterprise Portal and PeopleTools releases: • • PeopleSoft 8.xx For information about previous releases of the PeopleSoft Enterprise Portal (SP1.

For miscellaneous HTML pages. Using Branding. PeopleSoft Proprietary and Confidential 6 . layout. Overall. These objects are listed here for reference only. Pagelet header images and styles. layout. Footer content. Target page overall templates. Using these attributes. All modifications can be made through setup and configuration. and styles. and overall color scheme based on database. The diagrams below illustrate the various aspects of a PeopleSoft Enterprise Portal brand. The “Default HTML Object Used” material is the HTML used to make up the overall look and feel of each section. for example. and styles. 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. You can extend the concept of a brand to create distinctive website designs for your organization." You can even design several brands and vary their presentation based upon a portal site or a user’s role. The homepage and target pages are processed differently. These alterations can be made using a combination of methods: • PeopleSoft Enterprise Portal Branding. in most cases. The PeopleSoft Enterprise Portal provides you with the ability to quickly implement a portal with your own branding. sign-on and sign-off pages. Homepage body templates. including layout. Beginning with PeopleTools 8. and styles. homepage. footer. you can change header. images. or "look and feel. and target page templates. Portal Homepage at a Glance Figure 1 shows the various parts of a portal homepage. • PeopleTools portal registry attribute configuration. Menu navigation images and styles.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 must modify the files to achieve the desired look and feel. and styles that you can apply to your portal homepages and target content pages. The following branding design elements can be altered: • • • • • • • Header content. you no longer have to customize the default HTML objects to achieve your desired look and feel. branding means configuring a look and feel that includes layouts. • Customization. Miscellaneous HTML pages. you can override the default HTML and image objects that comprise pagelet header. Note.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. registry.42. in the PeopleSoft Enterprise Portal. and there is no need to modify any PeopleCode or customize database objects to change the portal interface. or roles. menu.

11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. 7 .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.

8 GUI Configuration Tips Figure 2 8 .11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.

footer. if appropriate. and navigation menu. See PeopleTools Internet Technology PeopleBook. a third-party application page.or three-column template Header/footer Pagelet Pagelet Style Action Bar Header Style Body Portal Registry Attribute Configuration 9 . The target content page layout is incorporated into the template specified in the portal registry when you register the page (component) as a CREF. You can configure multiple looks and combine them into themes that you assign per portal site and optionally. Each portal site can register the same target content page using a different template. if required. “Changing the Portal Interface” Lastly. you can assign your own designs. “Designing Portal Templates” There are miscellaneous pages that can be customized for use across your portal installation by modifying the following delivered HTML files. For PeopleSoft applications. Each portal site can assign different styles to the same pagelet.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. which wrap the actual portal content: the header. the design of the target content page is controlled by the content’s source application. and so on) can be registered using a different template.html The following table provides a summary of the Branding methods you should use to perform PeopleSoft 8.8 GUI Configuration Tips Branding allows you to configure these design aspects. or not. a website target page. a default portal template is applied. See PeopleSoft 8.8 Enterprise Portal PeopleBook. However. They can be frame templates or not. When you register pagelets and define homepage tabs. If no template is assigned to the CREF in the portal registry. this Red Paper does not provide details about these customizations.html Expire. Each site can also have distinct designs for its homepage tabs. Note.html Passwordexpired.html Sslrequired. • • • • • • Signin. See PeopleTools Internet Technology PeopleBook. the target content page layout is determined by the page definition created using Page Designer. These complete page templates for target content pages may include a header and menu navigation.html Passwordwarning.8 Enterprise Portal graphical user interface (GUI) customizations of the listed elements: PeopleSoft Enterprise Portal Branding Homepage Homepage template Two. Each type of target content page (a PeopleSoft application page. “Using Branding” The remaining aspects of a homepage’s presentation of pagelets are configurable via the portal registry using the attribute name/value pairs. per user role.html Exception.

8 Enterprise Portal PeopleBook. See PeopleSoft 8.8 GUI Configuration Tips PeopleSoft Enterprise Portal Branding Portal Registry Attribute Configuration Menu Pagelet Style Action Bar Header Style Body Navigation Target Page Target Content Page Template Header Menu Pagelet Header Body Navigation Note. You do not need to worry about updating the values manually. depending on your Branding setup. you can use the portal registry attribute configuration to override the default HTML objects. “Using Branding” Background Information Enabling Branding Branding code resides in two different application packages/classes. When you enable or disable Branding. if you are interested. The processes to create both elements are basically the same. 10 . Chapter 3 – Using PeopleSoft Enterprise Portal Branding A major part of PeopleSoft Enterprise Portal Branding functionality involves creating headers and footers. The PeopleSoft 8. Including these style classes also gives you greater control of the color scheme based on portal registry or user role. in general. but you can view the application class code for processing details. it’s EPPBR_BRANDING:BrandingBase. For standard PeopleSoft Branding. you can choose to include certain style classes in your branding style sheet. For PeopleSoft Enterprise Portal Branding. If you do not need to override the overall layout and only need to adjust colors and styles. it’s PT_BRANDING:BrandingBase. If both PeopleSoft Enterprise Portal Branding and Portal Registry Attribute Configuration are checked. the system actually updates the values of PACKAGEROOT and APPCLASSID in the PSOPTIONS table behind the scenes.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. The chapter also provides tips on styling menu navigation and style conflict considerations.8 Enterprise Portal PeopleBook provides more details about using the Branding setup pages. This chapter provides a stepby-step example of creating a new header using Branding.

see the PeopleSoft 8. we will outline the steps needed to create a new header. “Using Branding” This exercise uses our Planet PeopleSoft intranet header as its goal. Planet PeopleSoft intranet header Step 1 of 4: Generate the Header HTML In this first step. header. Configuring Branding Headers Creating a Header In this exercise.peoplesoft.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. and footer. as they reference JavaScript files (TimeOut warnings. forms. For details on how to use the setup pages to create an HTML layout. PeopleSoft 8. Open PeopleSoft Application Designer and select File. the Branding PeopleCode program will know how to assemble the HTML syntax according to the system element assigned. &HTML = GetHTMLText(HTML. for example). What is a bind variable? The PeopleCode example below shows how dynamic content is embedded into static content using a bind variable: HTML.”www.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.com”) By providing a set of predefined bind variables as system elements. 11 . Keep in mind that any changes to the system element number and type are not allowed. you create the HTML object to be used in the layout setup.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.TEST <a href="%bind(:1)"><img src="/images/home. Open.8 Enterprise Portal Bundle #1 delivered this HTML object as the base for creating any new header for use with Branding. You should also include all non-configurable system JavaScript/HTML %binds. A. See PeopleSoft 8.TEST. The example below is the end result created of the exercise.8 Enterprise Portal PeopleBook. Definition HTML.8 Enterprise Portal PeopleBook. The bind variables will be replaced with actual values at run time to generate HTML. Enter a Name value of EPPBR_HDRHTML_BASE. or additional HTML that enable the system to work properly.

%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.8 GUI Configuration Tips Open Definition panel Following is the HTML object text.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. %bind26. charset=iso-8859-1"> <!--system generated HTML %bind22. %bind20--> %bind(:19) %bind(:20) </body> 12 . %bind27--> <script language='javascript' src='%bind(:22)'></script> <script language='javascript' src='%bind(:23)'></script> %bind(:24) %bind(:25) %bind(:26) %bind(:27) <!--%bind16. %bind23. %bind29. %bind30--> %bind(:28) %bind(:29) %bind(:30) <!--system reserved elements HTML %bind19. along with markers designating where you can insert custom elements: <html> <head> %bind(:21) <title></title> <!-. %bind25. %bind24.title is generated by Tools--> <meta http-equiv="Content-Type" content="text/html.

select an HTML Object Name of PLANET_PSFT_HDR_HTML. Enable HTML Layouts. We will name the example PLANET_PSFT_HDR_HTML. This is performed by system elements 21 to 30. A list of applicable Branding elements displays. E. from the custom existing HTML you pasted into the HTML object in step C above. Save. It is assumed that you have already created the basic HTML for your interface outside of PeopleSoft. if any. Step 2 of 4: Identify HTML Syntax That Can be Replaced by System Elements Provided by Branding A. HTML Properties panel C. Define Elements. Save As and give the HTML object a new name. Add a new value and set the HTML Layout ID to PLANET_PSFT_HDR_LAYOUT. B. D. You will allocate additional system elements for custom scripts and functions.8 GUI Configuration Tips B. Make note of any additional custom scripts and functions within the header. C. Access your portal in three-tier mode and select Portal Administration. and select a Layout Type of Header. Branding. Keep layout reusability and ease of maintenance in mind when making this decision. You can also choose to leave custom scripts and functions in the HTML object. Remove all scripts and functions. Select File. Enter a description. Select File. Copy your custom existing HTML and insert into the <!--ADD CUSTOM HTML HERE--> section of the HTML object shown above.11/30/2004 </html> PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. Branding will take care of reinserting all delivered scripts and functions. 13 .

8 GUI Configuration Tips HTML Layouts and Element Selection page (1 of 2) 14 .11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.

you can use system elements on the fly to change the look and feel of a portal header. 15 . highlighting the syntax you want to be converted to system elements. Analyze the custom HTML from step 1. according to the element list. E.8 GUI Configuration Tips HTML Layouts and Element Selection page (2 of 2) D. To make this task easier. select the applicable system elements for the header and enter custom labels. Using system elements makes your HTML layout more reusable and flexible. In addition.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. highlight the attributes and styles that go along with the system elements. you may want to use an external text editor. On the HTML Layouts and Element Selection page. For example. Identifying potential system elements in your header F. instead of changing the layout HTML object. 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.

directorie s=no.IScript_Hlp&amp.com%2fservlets%2fic lientservlet%2fpeoplesoft8%2f%3fICType%3dScript%26tar get%3dmain%26ICScriptProgramName%3dWEBLIB_EBIZ_LNK.company.peoplesoft.com/servlets/psportal/peoplesoft8/?cmd=start"><im g name="logo" src="http://planetx.com/planet_content/images/planet/logos/myp lanetps.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.target=main&amp. <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr valign="top"> <td valign="top" rowspan="2"><a proxied="false" href="http://my.</font> </td> </tr> </table> </td> </tr> 16 .com" target="_parent" class="EBIZ_WHITE_HYPERLINK">PeopleSoft.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.IScript_Dir%26ID%3d0000000001" target="_parent" class="EBIZ_WHITE_HYPERLINK">Map</a> | <a href="http://my.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.peoplesoft.8 GUI Configuration Tips Following is the original HTML.IS CRIPT1.peoplesoft.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.com/servlets/iclientse rvlet/peoplesoft8/?ICType=Script&amp.com/servlets/psportal/peoples oft8/?url=http%3a%2f%2fwww.company.FieldFor mula.menubar=no.location=no.height=600.com/servlets/psportal/peoples oft8/?cmd=start" target="_parent" class="EBIZ_WHITE_HYPERLINK">Home</a> | <a href="http://my.copyhistory=no ').company. Text highlighted in yellow denotes style class code.FieldFormula.company. Text highlighted in blue denotes HTML code that you want to convert to system elements. ICScriptProgramName=WEBLIB_EBIZ_LNK.company.ID=0000000004'.company. 'Help'.company.resizable=yes.'width=800.com</a> | <a href="javascript:void window.com/servlets/psportal/peoples oft8/?url=http%3a%2f%2fmy.company.com/servlets/psportal/peoples oft8/?cmd=logout" target="_parent" class="EBIZ_WHITE_HYPERLINK">Sign Off</a>&nbsp.com/planet_content/ima ges/planet/planet_header_corner_fade.open('http://my.com/servlets/psportal/peoples oft8/?url=http%3a%2f%2fmy.toolbar=no.ISCRIPT1.company." target="_parent" class="EBIZ_WHITE_HYPERLINK" style="cursor:help">Help</a> | <a proxied="false" href="http://my.

&nbsp.com%2fq%3fs%3dPSFT%26d%3dt' title='Last updated on 3/12/2003 at ET' class='PSHYPERLINK'>PSFT</a> &nbsp.15.com/servlets/psportal/peoplesoft8/?url=http%3a%2f %2ffinance.company.&nbsp.peoplesoft.yahoo.032</font>&nbsp.FieldFormula.com/servlets/psportal/peoplesoft8/?url=http%3a%2f %2fmy.<br> <center><font size="1"><a href='http://my.com/servlets/psportal/peoplesoft8/?url=http%3a%2f 17 .peoplesoft.com/servlets/iclientservlet/peoplesoft8/?ICType=Script& ICScriptProgramName=WEBLIB_EBIZ.company.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.TEMPLATE_FUNC.IScript_PSFT_Stock-><span> <table border="0" cellpadding="0" cellspacing="0" width='100%'> <tr> <td nowrap><a href='http://my.com/planet_content/images/planet/logos/peo plepowertheinternet.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.company.ISCRIPT1.com/planet_content/images/planet/shim.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.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/iclientservlet/peoplesoft8/?ICType=Script& ICScriptProgramName=WEBLIB_EBIZ.peoplesoft.g if" align="middle" width="55" height="15"></a> <a href="http://my.&nbsp.company.com/servlets/psportal/peoplesoft8/?url=http%3a%2f %2fplanetx.com/planet_content/images/planet/content.352&nbsp.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.company.com%2fdisclaimer%2fstockquote. <font color='#008000'>+0.IScript_Greeti ng--><span>Welcome User</span><!--End iclientcomponent: Greeting --> </td> <td align="right" nowrap><!--Begin iclientcomponent: PSFT%20Stock URL: http://my.FieldFormula.

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.com/planet_content/images/planet/lo gos/peoplepowertheinternet.com/planet_content/images/planet/sh im.com/servlets/iclientservlet/peoples 18 .company.company.company.FieldFormula.com/servlets/psportal/peoplesoft8/?cmd=sta rt" target="_parent" class="EBIZ_WHITE_HYPERLINK">Home</a> | <a href="http://my.com/planet_content/images/planet/lo gos/myplanetps.company.com/servlets/psportal/peoplesoft8/?url=htt p%3a%2f%2fmy.company.company.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.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.ISCRIPT1.gif" border="0"></a> • %bind(:32) <img src="http://planetx.com/servlets/psportal/peoplesoft8/?cmd=sta rt"><img name="logo" src="http://planetx. • %bind(:31) <a proxied="false" href="http://my. Keep a list of the custom HTML you are replacing with bind variables.company.peoplesoft.com/servlets/psportal/peoplesoft8/?url=htt p%3a%2f%2fmy.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.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.peoplesoft.open('http://my.peoplesoft.8 GUI Configuration Tips %2fmy.com" target="_parent" class="EBIZ_WHITE_HYPERLINK">PeopleSoft.com/servlets/psportal/peoplesoft8/?url=htt p%3a%2f%2fwww.com/planet_content/images/planet/pl anet_header_corner_fade.peoplesoft.com%2fservlets%2ficlientservlet%2fpeoplesoft8 %2f%3fICType%3dScript%26target%3dmain%26ICScriptProgramName%3dWEBL IB_EBIZ_LNK.peoplesoft.com</a> | <a href="javascript:void window.company.IScript_Dir%26ID%3d0000000001" target="_parent" class="EBIZ_WHITE_HYPERLINK">Map</a> | <a href="http://my.company.gif" width="390" height="35" border="0"> • %bind(:34) <img src="http://planetx.peoplesoft.jpg" width="112" height="21" border="0"> • %bind(:33) <img name="peoplepowertheinternet" src="http://planetx.com/planet_content/images/planet/layout.

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.target=main&amp.com/planet_content/images/planet/co ntent.com/servlets/psportal/peoplesoft8/?url=htt p%3a%2f%2fplanetx.toolbar= no.com%2fq%3fs%3dPSFT%26d%3dt' title='Last updated on 3/12/2003 at ET' class='PSHYPERLINK'>PSFT</a> &nbsp. Paste the style classes into the HTML object area marked with the following note: <!--ADD CUSTOM STYLES HERE-->.032</font>&nbsp.peoplesoft.'width=800.ID=0000000004'.company.</font> • %bind(:4) <a href="http://my.directories=no. 19 .com/servlets/psportal/peoplesoft8/?cmd=log out" target="_parent" class="EBIZ_WHITE_HYPERLINK">Sign Off</a>&nbsp. three options are available: i.<br><center><font size="1"><a href='http://my.&nbsp. When adding styles.com%2fdisclaimer%2fstockquote.menubar=no.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.company.ICScriptProgramName=WEBLIB _EBIZ_LNK.com/planet_content/images/planet/la yout.copyhistory=no').ISCRIPT1.resizable=yes. If you are using only a few styles and they are not likely to be shared.FieldFormula. In the EPPBR_HDRHTML_BASE HTML object in Application Designer.company.IScri pt_PSFT_Stock--><span> <table border="0" cellpadding="0" cellspacing="0" width='100%'><tr><td nowrap><a href='http://my." target="_parent" class="EBIZ_WHITE_HYPERLINK" style="cursor:help">Help</a> | <a proxied="false" href="http://my.com/servlets/psportal/peoplesoft8/?url=htt p%3a%2f%2fmy. 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.&nbsp. C.com/servlets/iclientservlet/peoplesoft8/?ICType= Script&ICScriptProgramName=WEBLIB_EBIZ.htm'>Qu ote delayed 20 minutes</a></font></center></td></tr></table></span><!--End iclientcomponent: PSFT%20Stock --> B.peoplesoft.&nbsp.gif" align="middle" width="55" height="15"></a> <a href="http://my. <font color='#008000'>+0.peoplesoft.yahoo.8 GUI Configuration Tips oft8/?ICType=Script&amp.gif" align="middle" width="55" height="15"></a><br> • • %bind(:7) Welcome User %bind(:51) <!--Begin iclientcomponent: PSFT%20Stock URL: http://my.15.com/servlets/psportal/peoplesoft8/?url=htt p%3a%2f%2fmy.company.ISCRIPT1.height=600.com/servlets/psportal/peoplesoft8/?url=htt p%3a%2f%2ffinance.company.location=no.FieldFormula. 'Help'.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.company. embed the styles in the <head> section of the PLANET_PSFT_HDR_HTML object.IScript_Hlp&amp.company.352&nbsp.company.

font-variant: normal. font-weight: normal. font-Style: normal. font-weight: normal. color: rgb(255. padding-left: 3px} . font-variant: normal. PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. %bind26. charset=iso-8859-1"> <!--system generated HTML %bind22. font-size: 8pt. white-space: normal.178.EBIZ_WHITE_HYPERLINK {font-family: "Verdana". %bind27--> <script language='javascript' src='%bind(:22)'></script> <script language='javascript' src='%bind(:23)'></script> %bind(:24) %bind(:25) %bind(:26) %bind(:27) <!--%bind16.8 GUI Configuration Tips If the styles you are using are reusable. iii. padding-right: 3px. (CSS). 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. %bind24."Arial".title is generated by Tools--> <meta http-equiv="Content-Type" content="text/html. ii. lineheight: normal.EBIZ_STDTEXT_NO_UL {font-size: 10pt. %bind23.EBIZ_WHITE_HYPERLINK:HOVER {font-family: "Verdana". white-space: normal. letter-spacing: normal. Following is the final HTML object text: <html> <head> %bind(:21) <title></title> <!-. Two options are available: i. Save the final PLANET_PSFT_HDR_HTML HTML object.11/30/2004 ii. font-Style: normal. line-height: normal. It is more flexible to use PeopleSoft style sheets.255). word-spacing: normal. letter-spacing: normal. color: rgb(178. as you do when you are coding normal HTML. Embed the code in the HTML object itself. %bind25. convert them into a PeopleSoft style sheet and use the style sheet in a theme in which the header will be deployed.208). font-size: 8pt. Use the system elements 51-60 to add additional HTML areas. text-decoration: none. Add custom JavaScript functions/scripts. } <!--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 . word-spacing: normal. E.255.EBIZ_STDTEXT {font-size: 10pt. D."sans-serif"."Arial".} . You can also link to an external cascading style sheet. %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--> .} ."sans-serif".

and select an HTML Layout ID of PLANET_PSFT_HDR_LAYOUT. Add a new value. Access your portal in three-tier mode. Enter a Header ID value of PLANET_PSFT_HDR. Select Portal Administration.system generated HTML %bind28--> <!--system generated HTML %bind29. and HTML Area are displayed based on the selected layout ID. Three additional page tabs are available: Images. enter a description. Go through each tab page to set the values based on Step C-i. Branding.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. Define Headers. B.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--> <!-. 21 . Bars. C. %bind20--> %bind(:19) %bind(:20) </body> </html> Step 4 of 4: Configure the Header A. %bind30--> %bind(:29) %bind(:30) <!--system reserved elements HTML %bind19.

links are displayed using two images similar to icons instead of using hyperlink text. Using &nbsp code is one way around the system check. 22 . 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. Note that for the Personalization bar. We have to convert the iScript into App Class code (PLANET_APP_PACKAGE:GetStockInfo:GetStockHTML) to generate the stock quote. Bars: specify the style classes for the bars and for each individual bar items if necessary. HTML Area: the system does not support iScripts. PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.11/30/2004 i. The system checks for missing link labels and issues a warning if it cannot find one.8 GUI Configuration Tips 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. Define Headers – Bars page iii. Bar Detail page iv.

set the attribute and style class fields on the header and footer pages.8 GUI Configuration Tips Define Headers – HTML Area page v. you are just setting the actual values for images.EPPBR_TABLE_OPENTAG HTML. HTML. 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. and so forth in the header and footer components. You should be able to achieve your desired look and feel by changing the style classes and the layout HTML object.EPPBR_IMGONLY_HTML HTML. the HTML placement value will be <img valign=”top”>. You are now ready to assemble a Branding theme using the header. We recommend that you do not change the listed HTML objects below. 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.Divider Field Image Attribute Style Class Image Attributes Style Class HTML Placement (indicated by XXX) <img XXX> <tr class= XXX> <td> <img XXX> </td> <td class=XXX> <a class=XXX style="background:transparen t"> <img XXX> HTML Object/Note HTML.EPPBR_TABLE_OPENTAG_NOSTYLE Bar Bar .EPPBR_IMGHREF_HTML HTML. The list of HTML objects used in the process is for reference only. Element Type Image Bar Bar Element Image Bar Bar . if you set the Image Attribute field value for the Image system element to valign=”top”.Item Icon Image Attributes EPPBR_IMGSRC_HTML 23 .11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. For example.Item EPPBR_ITEM_OPENTAG EPPBR_ITEM_OPENTAGTEXT Bar Bar . Any changes will be customizations and will impact future upgrades. You can then assign the theme to any user. Basically. the actual configuration of headers and footers is quite straightforward. links. To refine your header or footer through the configuration.

the stylesheet specified in the Branding theme definition always takes precedence over competing stylesheets. Stylesheet defined for the PeopleTools standard header. Because the conflicting styles are defined at the same level. To override the left margin. 4.11/30/2004 Element Type My Links Element My Links PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. For example. add the following styles to your style sheet and make modifications.EPPBR_IMGHREF_HTML HTML. and a few homepage pagelets. They are applied in the following sequence: 1. if any of the displaying homepage pagelets is an iPage. In the homepage template.EPPBR_HP_INACTIVE_TAB Homepage Tab Image Attribute Homepage Tab Image Attributes Style Conflicts The user homepage usually includes a header. You can have conflicting style classes within all of these stylesheets used in the template. For example.EPPBR_GOBTN_NOSAVEWARN HTML. 3. Stylesheet defined in the theme definition.Active/Inactive Tab Style Homepage Tab . footer. but changed the left margin to zero.Text Entry Box Search Options . we included PSPAGE in the blue theme stylesheet EPPBRBLUESTYLEDEF. EPPBRSHORTCUTSELECT EPPBRSHORTCUTCOLLECTION HTML.Search Icon Item Attribute Style Class Image Attributes <img XXX> Homepage Help Homepage Tab Homepage Tab Homepage Help Homepage Tab Homepage Tab . There are several stylesheet references when the homepage is generated.Top/Bottom Images Style Class and Item Attributes Style Class and Item Attributes Style Class <a class=XXX XXX> <table class=XXX XXX> <td class=XXX> <a class=XXX style="background:transparen t"> <td XXX> <img XXX> <td XXX> <img XXX> HTML. the one applied later in the sequence takes precedence. there may be conflicting styles in the resulting homepage.Transitional Images Homepage Tab .EPPBR_IMGONLY_HTML HTML. This is set in the page properties in PeopleSoft Application Designer. 24 . menu navigation pagelet.EPPBR_HDR_HELP HTML. 2. Stylesheet specified for the homepage pagelets. Stylesheet defined in the Define Menu Styles component. if the Enterprise Menu pagelet is on the homepage.EPPBR_GOBTN_SAVEWARN HTML. if necessary. if you have a style class named Big in the first stylesheet and also have a style class named Big in the fourth stylesheet.8 GUI Configuration Tips Field Style Class HTML Placement (indicated by XXX) <td class=XXX> <select class=”EPPBRSHORTCUTS ELECT”> <option class=”EPPBRSHORTCUTC OLLECTION“> <table XXX> <input class=XXX> HTML Object/Note For additional options within the My Links dropdown list box. PSPAGE in the default stylesheet EPPSTYLEDEF includes two pixels for the left margin.EPPBR_TAB_OPENTAG HTML.EPPBR_SRCH_HTML Search Search Search Search Options Search Options .

Target Content Page Presentation Target content page presentation is primarily based on the template registered with the CREF. and whichever theme uses the menu style will have the new styles. For example. and overall stylesheet that are employed based on portal registry or user roles. The menu styles provided by Branding apply to the Enterprise Menu pagelet only. Chapter 4 – Beyond PeopleSoft Enterprise Portal Branding Homepage Presentation PeopleSoft Enterprise Portal Branding provides you with the flexibility to configure the header. “Changing the Portal Interface” If you are not using PeopleSoft Enterprise Portal Branding. menu navigation. We recommend that you keep your custom stylesheet definition as clean as possible and include only the style classes needed to avoid style conflicts. add the style classes with different style properties to the stylesheet included in the theme definition. the stylesheet specified in each frame takes precedence for the content within the frame. see Appendix A in this Red Paper for information about customizing headers using PORTAL_UNI_HEADER_NNS and its subsections. all the rules of inheritance and conflicting styles of cascading stylesheets still apply. 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. You can change the look and feel of the menu navigation by specifying images and styles. footer. if you choose a template that includes the standard PeopleTools menu. Menu Navigation PeopleSoft Enterprise Portal has its own version of enterprise menu navigation. they are not configurable through the same mechanism: PTPAGELET: Style class for the pagelet. PTPAGELETHEADER: Style class for the pagelet header. PeopleTools provides fixed-named HTML and image objects to build portal homepage tabs. In addition. you will have the target content page header and the Enterprise Menu pagelet with full Branding support. While the following three style classes are also used by the menu. the stylesheet associated with the page used for the target content always takes precedence over competing stylesheets. IScript_UniHeader() will render the homepage header specified in the Branding theme without the Personalization bar. In a page-based template.8 GUI Configuration Tips You can also have conflicting styles in your target content template. If you use the PeopleSoft Enterprise Portal default template for a target content page. To vary the pagelet styles by Branding theme. Another option is to add the style classes to the stylesheet included in the menu style definition. PTPAGELETBODY: Style class for the pagelet body.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. presentation will vary depending on what is included in the template. 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. Different iScript calls will result in different Branding presentations. In a frame-based template. These style classes are hard-coded for all homepage pagelets that include the Enterprise Menu pagelet in the left navigation. 25 . For other delivered templates. In addition to the specifics mentioned above.

See PeopleTools Internet Technology PeopleBook. User homepage example The user homepage layout includes the following elements: 26 .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. you need to use the PeopleSoft Enterprise Portal as your content provider for header and footer calls. If you are in a remote database and need to use the PeopleSoft Enterprise Portal header.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. Basically. “Designing Portal Templates” Remote Node Branding Header and Footer Presentation As mentioned above. the header and footer are actually generated through iScript calls. PeopleTools PeopleBooks contain details about creating templates and incorporating these iScript calls into your template.PORTAL_HOMEPAGE. “Using Branding” Chapter 5 . change the iScript call from the local node to the PeopleSoft Enterprise Portal node. IScript_HPDefaultHdr"/> </Pagelet> See PeopleSoft 8.8 Enterprise Portal PeopleBook.FieldFormula.8 GUI Configuration Tips IScript_UniHeader_PIA() will render the target content page header specified in the Branding theme. <Pagelet Name="UniversalNavigation"> <SOURCE Node="LOCAL_NODE" href="s/WEBLIB_PORTAL.

Overriding the Three-Column Layout Access the Content Reference Attributes section of the Content Ref Administration page.PTPAGELETHEADER #COL3 TD. <table width="100%"> <tr> <td width="28%" valign="top" class="PLANET_COL1"> <div id="COL1"> %BIND(:1) </div> </td> 27 .PTPAGELETHEADER #COL2 TD. in the new HTML.PTPAGELETHEADER color:#3399cc } </style> { { { background-color: white. 3. The highlighted text illustrates the way in which you can use different colors in different columns. If you want to override the HTML object used by the pagelet. 2. we set column 3 (PLANET_COL3) to use an aqua green background color to differentiate it from column 1 and column 2. Pagelets of different colors in different columns: Created by overriding the HTML PORTAL_HP_3COL_LAYOUT three-column layout. assuming the PORTAL_HP_COMPONENT is the HTML object used for all pagelets and that PTPAGELETHEADER style class is used as the pagelet header. Ensure that the Translate option is clear.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. 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. Different pagelet layout for the Workgroup Content pagelet: Created by overriding the HTML PORTAL_HP_COMPONENT pagelet. you are not required to use PTPAGELETHEADER.PORTAL_HP_3COL_LAYOUT_NEW. 4. For the user homepage example above. Following is the content of the new PORTAL_HP_3COL_LAYOUT_NEW. Note. text-align: center. text-align: left} background-color: white. You can also vary pagelet header style by column. which we use to override the default PORTAL_HP_3COL_LAYOUT. Branding header: Created using theme assignment. Branding menu navigation body: Created using theme assignment. <style type="text/css"> #COL1 TD. you can use ID and DIV tags within each column to vary the column header styles. text-align: left} background-color: white. In this example.8 GUI Configuration Tips 1.

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. In the Content Workgroup pagelet HTML object HTML. For more information.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. not on the pagelet. we removed the pagelet header and added an additional image via %BIND12. Content Reference Attributes section of the Content Ref Administration page HTML.. 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. you do so by setting the non-translatable attribute (clearing the Translate option) on the content reference for the pagelet itself. Content Reference Attributes section of the Content Ref Administration page 28 .PORTAL_HP_COMPONENT_CM.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. see Appendix B: Customizing Homepage and Pagelet Objects Using Attributes.

Can I have pagelets of different colors for different columns on my homepage? Yes.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.Frequently Asked Questions Can I use different templates for different pagelets? Yes. The color-coded text illustrates the modifications made to the HTML that we describe above. See the example above.PageletState=MAX --> <TABLE id="%BIND(:5)" CLASS="PTPAGELET" WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="1"> <TR> <!-.8 GUI Configuration Tips Following is the HTML object for the Content Workgroup pagelet. See the example above on how to override the three-column layout. You can override the default HTML objects and images used for homepage components per tab or per pagelet using the Content Ref Administration page. you will need to include the content reference and any additional images in a project and move it to the production database as well. you can also override the default HTML by column.Begin Pagelet=%BIND(:5) --> <!-.8 Enterprise Portal PeopleBook: Using Branding For portal registry attributes. 29 .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> <!-. In addition to overriding the default HTML for each pagelet. PeopleTools provides fixed-named HTML and image objects to build portal homepage tabs. <!-. see PeopleSoft 8.End Pagelet=%BIND(:5) --> Chapter 6 . The scripts include database objects as well as setup data in the tables. For more information and a list of the DataMover scripts. 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.

you can store these objects outside of your PeopleSoft system.css”. you need to have the PSHYPERLINK style class in your stylesheet. font-size:9pt. font-size:9pt. and JavaScript files. This provides a greater flexibility when you want to use an external stylesheet or embed style classes within your HTML. Remember to modify the pseudo-classes listed on the property pages for PSHYPERLINK. For embedded style classes. stylesheets. This is assuming that the referenced web server is the same as the PeopleSoft portal server. You will modify this attribute to change hyperlink colors. color: #5c93ae.com/css/mystyle.peoplesoft. color: #5c93ae.peoplesoft. 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. and JavaScript.com/images/myimage. stylesheets. For example: <STYLE TYPE="text/css"> td { font-family:arial.gif”> Stylesheet example: You can only select a PeopleSoft stylesheet when assembling a theme or setting menu overrides. text-decoration: underline } a:link { font-family:arial. 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. For the hyperlink colors on the homepage pagelets. You can also use relative paths for each of these references. stylesheets.com/javascript/myjs. } a:visited { font-family:arial.8 GUI Configuration Tips Can I store and reference images. You can leverage a centralized repository of images. and JavaScript outside of my PeopleSoft system? Yes. How can I change hyperlink colors on homepages? Now you can control the style classes used in your header and footer. But you can to enter a style class that’s not in PeopleSoft. text-decoration: underline } 30 . font-size:9pt. For example.js”> Note.peoplesoft. or that an alias has been created.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. “/common/css/mycss. you have two options: • • You can create new images and stylesheets within Application Designer. To link external stylesheets.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. see the Planet PeopleSoft example from Chapter 3. copy the red text and replace the black text with your actual URL: <LINK REL=”stylesheet” HREF=”http//library. When creating images.

11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. color: #000000. color: #5c93ae.1: PORTAL_UNI_HEADER_NNS in PeopleTools 8. sans-serif. These dynamic bind variables contain tags like this one: <% XXXX-YYYY %>. font-size: 12pt. text-decoration: none.html exception. font-weight: bold. color: #FFFFFF. text-decoration: underline } </STYLE> How do I change the login. is called in Application Package PT_BRANDING. Helvetica. expire. color: #000000. font-weight: bold} . Method GenerateUniHeaderHTML. border: #FFFFFF none. font-family: Arial.45 If PeopleSoft Enterprise Portal Branding is disabled. font-size:9pt. Helvetica. sans-serif. font-size: 9pt. background-image: url(%bind(:40)). background-color: #5F6EAF} . sans-serif. such as server-side tags. font-size:9pt.html Appendix A . background-repeat: repeat-x. font-size: 9pt. border-style: none} . and other WebLogic pages? Modify the surrounding HTML.pthomepagetabinactive { font-size: 9pt. color: #5c93ae. Helvetica. PORTAL_UNI_HEADER_NNS. text-decoration: underline } a:active { font-family:arial. color: #FFFFFF.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 . Helvetica.html sslrequired. Do not change the values of forms or remove any dynamic bind values. background-image: url(%bind(:41))} .html cookiesrequired.globeBar { background-image: url(%bind(:11))} . background-color: #5F6EAF} . background-color: #FFFFFF} . Helvetica.html expire.45 branding. Class BrandingBase.greeting { color: #FFFFFF. color: #FFFFFF.searchBar { background-repeat: repeat-x.headerLinkActive { font-family: Arial. sans-serif. sansserif.pthomepagetabactive { background-color: #FFFFFF. text-decoration: underline} . the system will use standard PeopleTools 8.headerLink { font-family: Arial. <html> <head> %bind(:36) <title>%bind(:33)</title> <style type="text/css"> . font-family: Arial.buttonBar { background-image: url(%bind(:14)).8 GUI Configuration Tips a:hover { font-family:arial. which determines the look and feel of the header. font-size: 8pt.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. font-family: Arial. The HTML files for these WebLogic pages are located in: \\bea\wlserver6.

&Response.%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.</nobr></td> </tr> </table> </td> </tr> </table> %BIND(:28) </form> %BIND(:34) %bind(:29) %BIND(:18) </body> </html> Appendix A .</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.&n bsp.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.2: PORTAL_UNI_HEADER_NNS Binds 1. 32 .NEW_PS_LOGO).%bind(:24)</a>&nbsp.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.%bind(:21)</span></a>< /nobr></td> <td class="buttonBar" width="7%" nowrap=true>&nbsp.<a %bind(:19) class="headerLinkActive">&nbsp.<a proxied=false %bind(:16) class="headerLinkActive">&nbsp.GetImageURL(Image.

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

ExpireMeta. See PeopleTools Internet Technology PeopleBook.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. you can also override the PORTAL_HP_COMPONENT HTML object of pagelets as a pagelet CREF attribute. the pagelet attribute is used to build only that pagelet. %Request. All other pagelets are built using the attribute specified on the tab or default. See the “Example on How to Override the Pagelet Layout“ section in this Red Paper. 40. 41.PT_HOME_TAB_ACTIVE_CENTER). &GoSaveWarnHTML.PT_SAVEWARNINGSCRIPT). 34 . /*40*/&Response. 42. &Response. In addition to these tab attributes. If the PORTAL_HP_COMPONENT object is specified for a tab and for a pagelet.GetImageURL(Image. Homepage generation logic replaces %BIND12 to %BIND26 on the homepage tab with images specified as attributes.GetJavaScriptURL(HTML. 39.8 GUI Configuration Tips 37. 44.GetImageURL(Image. Use these non-translatable attributes to substitute the default HTML objects with your own objects.PT_HOME_TAB_LINE). &Response.PT_HOME_TAB_INACTIVE_CENTER). &MCFHTML. 45. &CTIHTML. Appendix B: Customizing Homepage and Pagelet Objects Using Attributes This is a quick reference to a list of available attributes on a tab. &SaveWarnCrossDomainScript.GetImageURL(Image. 43. “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. &Response. 38.

8 GUI Configuration Tips Appendix C: Special Notices All material contained in this documentation is proprietary and confidential to PeopleSoft. Inc. 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. Inc. but not limited to. PS/nVision. stored in a retrieval system. The copyrighted software that accompanies this documentation is licensed for use only in strict accordance with the applicable license agreement. The information contained in this document has not been submitted to any formal PeopleSoft test and is distributed AS IS. PeopleBooks. and PeopleTalk and "People power the internet. photocopying. PeopleSoft. in writing. recording.. This documentation is subject to change without notice. The information contained herein is subject to change without notice. or otherwise without the prior written permission of PeopleSoft. and is subject to the nondisclosure provisions of the applicable PeopleSoft agreement. PeopleCode. PeopleSoft may have patents or pending patent applications covering subject matter in this document. Appendix D: Validation and Feedback This section documents the real-world validation this Red Paper has received. and is limited in application to those specific hardware and software products and levels. there is no guarantee that the same or similar results will be obtained elsewhere. is protected by copyright laws. See Customer Connection or PeopleBooks for more information about which publications are considered to be product documentation." are trademarks of PeopleSoft. Inc. The furnishing of this document does not give you any license to these patents. 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. including the disclosure thereof. graphic. does not warrant that the material contained in this documentation is free of errors. and PeopleSoft. the PeopleSoft logo. and Vantive are registered trademarks. Customers attempting to adapt these techniques to their own environments do so at their own risk. While PeopleSoft may have reviewed each item for accuracy in a specific situation. mechanical. which should be read carefully as it governs the terms of use of the software and this documentation. Customer Validation Field Validation Appendix E: Revision History Authors Hsing Huang Maria Gummerson 35 . including. electronic. Any errors found in this document should be reported to PeopleSoft.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8. Inc. PeopleTools. Inc. All other company and product names may be trademarks of their respective owners. or transmitted in any form or by any means. No part of this documentation may be reproduced. Information in this documentation was developed in conjunction with use of the product specified.

2004: Updated to reflect changes from PeopleTools 8.11/30/2004 PeopleSoft Red Paper: PeopleSoft Enterprise Portal 8.8 GUI Configuration Tips Reviewers Staci Ludwig Revision History November 19.45 36 .