Understanding Developing Custom Branding ThemesThis chapter provides an overview of developing custom branding themes and provides examples that demonstrate how to:
Create and configure custom branding headers.
Use branding and portal registry attributes to create custom homepages.
Understanding Developing Custom Branding ThemesThis section provides an overview of:
The development process for custom branding themes
Custom branding design considerations
Custom branding development considerations
Development Process Overview for Custom Branding ThemesThe process for creating custom branding themes is:
In PeopleSoft Application Designer, create an HTML object for branding component.
Identify syntax in your custom HTML that can be replaced branding system elements.
Replace identified HTML Syntax with bind variables.
Configure the component (header, footer, menu and so forth).
Assemble the components into a theme.
Assign the theme.
Deploy the theme to production.
Assembling theme components, assigning themes and deploying themes to production are discusses elsewhere in this PeopleBook.
See Assembling Branding Themes, Previewing, Selecting and Assigning Branding Themes, Components, Images, and Style Sheets, Deploying Branding Themes.
Custom Branding Design ConsiderationsThis section discusses items to consider with when designing custom homepages, target pages, and headers and footers located on remote node pages.
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 Enterprise PeopleTools 8.48 PeopleBook: PeopleTools Internet Technology PeopleBook, “Changing the Portal Interface”
Target content page presentation is primarily based on the template registered with the content reference. 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. 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 Enterprise PeopleTools 8.48 PeopleBook: PeopleTools Internet Technology, “Designing Portal Templates”
Remote Node Headers and Footers
As mentioned earlier in this chapter, 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—you need to use the PeopleSoft Enterprise Portal as your content provider for header and footer calls.
The following code example shows how to modify the source node to use the appropriate content provider node.
<Pagelet Name="UniversalNavigation"> <SOURCE Node="LOCAL_NODE" href="s/WEBLIB_PORTAL.PORTAL_HOMEPAGE.FieldFormula. IScript_HPDefaultHdr"/> </Pagelet>
Branding MethodsBranding allows you to configure the following 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.
The remaining aspects of a homepage’s presentation of pagelets are configurable using 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.
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 content reference. Each type of target content page (a PeopleSoft application page, a third-party application page, a web site target page, and so forth) can be registered using a different template, if appropriate. Note that 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 content reference in the portal registry, a default portal template is applied.
Branding Methods for Homepage Customizations
The following tables summarize the branding methods you should use to perform customizations on homepages.
Note. If both 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 the branding setup.
The following table summarizes the branding methods you should use to perform Enterprise Portal graphical user interface (GUI) customizations of the homepage:
|
Homepage Area |
PeopleSoft Enterprise Portal Branding |
Portal Registry Attribute Configuration |
|
Homepage template |
NA |
X |
|
Two- or three-column template |
NA |
X |
|
Header/footer |
X |
NA |
The following table summarizes the branding methods you should use to perform Enterprise Portal graphical user interface (GUI) customization of homepage pagelets:
|
Homepage Pagelet Area |
PeopleSoft Enterprise Portal Branding |
Portal Registry Attribute Configuration |
|
Pagelet style |
X |
X |
|
Action bar |
NA |
X |
|
Header style |
X |
X |
|
Body |
X |
X |
The following table summarizes the branding methods you should use to perform Enterprise Portal graphical user interface (GUI) customization of homepage menus:
|
Homepage Menu Area |
PeopleSoft Enterprise Portal Branding |
Portal Registry Attribute Configuration |
|
Pagelet style |
X |
X |
|
Action bar |
NA |
X |
|
Header style |
X |
X |
|
Body |
X |
X |
|
Navigation |
X |
NA |
Branding Methods for Target Page Customizations
The following tables summarize the branding methods you should use to perform customizations on target pages.
Note. If both 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 the branding setup.
The following table summarizes the branding methods you should use to perform Enterprise Portal graphical user interface (GUI) customization of target page content:
|
Target Page Content Area |
PeopleSoft Enterprise Portal Branding |
Portal Registry Attribute Configuration |
|
Page template |
NA |
X |
|
Header |
X |
NA |
The following table summarizes the branding methods you should use to perform Enterprise Portal graphical user interface (GUI) customization of target page menu areas:
|
Target Page Menu Area |
PeopleSoft Enterprise Portal Branding |
Portal Registry Attribute Configuration |
|
Pagelet |
X |
NA |
|
Header |
X |
NA |
|
Body |
X |
NA |
|
Navigation |
X |
NA |
Custom Branding Development ConsiderationsThis section discusses items to consider when you are developing custom branding themes.
Once you have an HTML layout ready with the predefined system elements in place, the actual configuration of headers and footers is quite straightforward—you set 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.
Note. Do not change the listed HTML objects. Any changes will be customizations and will impact future upgrades.
|
Element Type |
Element |
Field |
HTML Placement |
HTML Object/Note |
|
Image |
Image |
Image Attribute |
|
|
|
Bar |
Bar |
Style Class |
|
|
|
Bar |
Bar-Divider |
Image Attributes |
|
NA |
|
Bar |
Bar-Item |
Style Class |
|
|
|
Bar |
Bar-Item Icon |
Image Attributes |
|
EPPBR_IMGSRC_HTML |
|
My Links |
My Links |
Style Class |
|
For additional options within the My Links dropdown list box, add the following styles to your style sheet and make modifications, if necessary.
|
|
Search |
Search Options |
Item Attribute |
|
HTML.EPPBR_SRCH_HTML |
|
Search |
Search Options - Text Entry Box |
Style Class |
|
NA |
|
Search |
Search Options - Search Icon |
Image Attributes |
|
|
|
Homepage Help |
Homepage Help |
Style Class and Item Attributes |
|
HTML.EPPBR_HDR_HELP |
|
Homepage Tab |
Homepage Tab |
Style Class and Item Attributes |
|
HTML.EPPBR_TAB_OPENTAG |
|
Homepage Tab |
Homepage Tab - Active/Inactive Tab Style |
Style Class |
|
HTML.EPPBR_HP_INACTIVE_TAB |
|
Homepage Tab |
Homepage Tab - Transitional Images |
Image Attribute |
|
NA |
|
Homepage Tab |
Homepage Tab - Top/Bottom Images |
Image Attributes |
|
NA |
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:
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.
Stylesheet defined in the Define Menu Styles component, if the Enterprise Menu pagelet is on the homepage.
Stylesheet defined for the PeopleTools standard header.
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 MY_STYLE_CLASS in the first stylesheet and also have a style class named MY_STYLE_CLASS 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, PSPAGE is included in the blue theme stylesheet EPPBRBLUESTYLEDEF, but the left margin has been changed to zero.
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 here, all the rules of inheritance and conflicting styles of cascading stylesheets still apply. Keep your custom stylesheet definition as clean as possible and include only the style classes needed to avoid style conflicts.
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.
In addition to overriding the default HTML for each pagelet, you can also override the default HTML by column.
An example is provided later in this section that demonstrates these concepts.
See Example: Using Branding and Portal Registry Attributes to Create Custom Homepages.
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.
Storing and Referencing Images, Stylesheets and JavaScript
When creating images, stylesheets, and JavaScript, you have two options:
Create new images and stylesheets within PeopleSoft Application Designer.
Leverage a centralized repository of images, stylesheets, and JavaScript files.
This section provides examples of how to reference objects stored outside of the PeopleSoft system.
Note. In the examples shown, you can also use relative paths, if the referenced web server is the same as the PeopleSoft portal server or if an alias has been created.
|
Images |
The syntax for referencing images outside of the PeopleSoft system is:
For example:
|
|
Stylesheets |
You can only select PeopleSoft stylesheets when assembling themes, configuring headers, configuring footers, and setting menu overrides. But you can enter a style class that's not in the system. This provides greater flexibility when you want to use an external stylesheet or embed style classes within your HTML. The syntax for referencing stylesheets outside of the PeopleSoft system is:
For example:
|
|
JavaScript |
The syntax for referencing JavaScript outside of the PeopleSoft system is:
For example:
|
Homepage Hyperlink Colors
To control the hyperlink colors on homepage pagelets, the PSHYPERLINK style class must be in the stylesheet. You will modify this styleclass to change hyperlink colors. Remember to modify the pseudo-classes listed on the property pages for PSHYPERLINK.
You should also specify default font attributes for the <A> and <TD> tags 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 } 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>
Example: Creating and Configuring Custom Branding HeadersThis section provides an example for creating and configuring a custom header using the steps discussed earlier in this chapter.
This example demonstrates how to create the following header.
Header created in this example
Generating the Header HTML
PeopleSoft 9 Enterprise Portal delivers the EPPBR_HDRHTML_BASE HTML HTML object as the base for creating any new header for use with branding.
To generate the HTML for the header:
In PeopleSoft Application Designer, open the EPPBR_HDRHTML_BASE HTML definition.
The object opens and you can view the object HTML.
<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> </html>
Save the HTML object with the name PLANET_PSFT_HDR_HTML.
Copy your custom 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.
Remove all scripts and functions, if any, from the custom HTML you pasted into the HTML object in the previous step.
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.
Save the file.
Identifying HTML Syntax to Replace with Branding System Elements
This section discusses identifying HTML syntax to replace by system elements.
To identify custom HTML syntax to replace with branding system elements:
In the PeopleSoft Pure Internet Architecture, select Portal Administration, Branding, Define Elements, Enable HTML Layouts.
Add a new value and set the HTML Layout ID to PLANET_PSFT_HDR_LAYOUT. 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.
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.
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.
On the HTML Layouts and Element Selection page, select the applicable system elements for the header and enter custom labels.
Following is the original HTML. Text in bold denotes style class code. Text in italics 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"><img name="logo" src="http://planetx.peoplesoft.com /planet_content/images/planet/logos/myplanetps.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/images/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/peoplesoft8/?cmd=start" target="_parent" class="EBIZ_WHITE_HYPERLINK"> Home</a> | <a href="http://my.company.com/ servlets/psportal/peoplesoft8/?url=http%3a%2f%2fmy.company. com%2fservlets%2ficlientservlet%2fpeoplesoft8%2f%3fICType%3d Script%26target%3dmain%26ICScriptProgramName%3dWEBLIB_EBIZ_LNK. SCRIPT1.FieldFormula.IScript_Dir%26ID%3d0000000001" target=" _parent" class="EBIZ_WHITE_HYPERLINK" >Map</a> |<a href="http://my.company.com/servlets/ psportal/peoplesoft8/?url=http%3a%2f%2fmy.company.com%2 fservlets%2ficlientservlet%2fpeoplesoft8%2f%3fICType%3d Panel%26Menu%3dADMINISTER_EBIZ%26Market%3dGBL%26PanelG roupName%3dEBIZ_CONTACT_US" target="_parent" class="EBIZ_WHITE_HYPERLINK"> Contact Us</a> | <a href="http://my.company.com/servlets/ psportal/peoplesoft8/?url=http%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/ peoplesoft8/?ICType=Script&target=main&ICScriptProgram Name=WEBLIB_EBIZ_LNK.ISCRIPT1.FieldFormula.IScript_Hlp& 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=logout" target="_parent" class="EBIZ_WHITE_HYPERLINK">Sign Off </a> </font> </td> </tr> </table> </td> </tr> <tr valign="top"> <td align="right" valign="top"><img name="peoplepowerthe internet" src="http://planetx.peoplesoft.com/planet_content/ images/planet/logos/peoplepowertheinternet.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_Greeting--><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%2 6d%3dt' title='Last updated on 3/12/2003 at ET' class='PSHYPERLINK'>PSFT</a> 15.352 <font color='#008000'>+0.032 </font>   ;<br><center><font size="1"><a href='http:// my.company.com/servlets/psportal/peoplesoft8/?url=http%3a%2f%2 fplanetx.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%2fi clientservlet%2fpeoplesoft8%2f%3fICType%3dPanel%26Menu%3d PORTAL_PERS_HOMEPAGE%26Market%3dGBL%26PanelGroupName%3dPORTAL_HOMEP AGE%26PORTALPARAM_PAGE%3dCONTENT"><img border="0" src="http:// planetx.peoplesoft.com/planet_content/images/planet/content.gif" align="middle" width="55" height="15"></a> <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%26Panel GroupName%3dPORTAL_HOMEPAGE%26PORTALPARAM_PAGE%3dLAYOUT"><img border="0"src="http://planetx.peoplesoft.com/planet_content/ images/planet/layout.gif" align="middle" width="55" height="15"> </a><br> <!--==================== END: PERSONALIZATION ======================--> </td> </tr> </table>
Replacing Identified HTML Syntax With Bind Variables
In this example, the following bind variables will replace the sections of custom HTML in italics in the previous examples as indicated here:
|
%bind(:31) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:32) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:33) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:34) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:6) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:4) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:7) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:51) |
This bind variable replaces the following custom HTML in the previous section:
|
To replace custom HTML with bind variables:
In PeopleSoft Application Designer open the HTML object EPPBR_HDRHTML_BASE.
Replace the HTML syntax shown above with the bind variable syntax %bind(:XX). for which you have created associations on the HTML Layouts and Elements Selection page.
Add styles as required.
When adding styles, note the following:
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-->.
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.
You can also link to an external cascading style sheet, (CSS), as you do when you are coding normal HTML.
Note. It is more flexible to use PeopleSoft style sheets, as you can achieve a different look and feel by simply changing to a different style sheet using the same HTML object or even the same header.
Add custom JavaScript functions or scripts. Two options are available:
Use system elements 51-60 to add additional HTML areas.
Embed the code in the HTML object.
Save the PLANET_PSFT_HDR_HTML HTML object.
The following example shows the final HTML object code:
<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 style 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> <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>
Configuring the Header
To configure the header:
Access the portal in three-tier mode.
Select Portal Administration, Branding, Define Headers.
Add a new header.
Click the Add New Value tab.
In the Header ID field, enter PLANET_PSFT_NDR.
In the Description field, enter a description.
In the HTML Layout ID field enter PLANET_PSFT_HDR_LAYOUT.
Save the changes.
Based on the layout ID, three additional page tabs display: Images, Bars and HTML Area.
Access the Images, Bars and HTML Area tabs and set values based on the styles you added when you replaced custom HTML with bind variables in the previous section. For example:
Images. Use the Images tab to move images into the database or specify a URL as the image source.
Bars. Use the Bars tab to specify style classes for the bars and individual bar items as necessary.
Note that for the Personalization bar links are displayed using two images similar to icons instead of using hyperlink text. The example uses the   space code to create blank link labels and specify 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 the   space code is one way around the system check.
HTML areas: The system does not support iScripts, there you have to convert the iScript into application class code (PLANET_APP_PACKAGE:GetStockInfo:GetStockHTML) to generate the stock quote.
Example: Using Branding and Portal Registry Attributes to Create Custom HomepagesThis section discusses how to use branding and portal registry attributes to create custom homepages.
Understanding Using Branding and Portal Registry Attributes
The following homepage was created using PeopleSoft Enterprise Portal branding and portal registry attributes.
Homepage example
The homepage includes the following elements:
Branding header created using theme assignment.
Branding menu navigation body created using theme assignment.
Pagelets of different colors in different columns created by overriding the HTML PORTAL_HP_3COL_LAYOUT three-column layout.
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. Select PeopleTools, Portal, Structure and Content, Portal Objects, Homepage, Tabs. Then, select the page where the overrides will apply.
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 example in this section, in the new HTML.PORTAL_HP_3COL_LAYOUT_NEW layout, column three (PLANET_COL3) is set to use an aqua green background color to differentiate it from the first and second columns.
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 code in bold 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> <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.
HTML.PORTAL_HP_COMPONENT_CM is the custom HTML object 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, remove the pagelet header and add an additional image using %BIND12. Define the image value on the Content Reference Attributes section of the Content Ref Administration page for IMAGE_BIND_12.
The following example shows the HTML object code for the Content Workgroup pagelet. The code in bold illustrates the modifications made to the HTML described in this section.
<!-- 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) -->