This chapter discusses how to:
Configure headers and footers.
Define overrides for menu styles.
Assemble branding themes.
This section lists common elements as well as pages used in configuring headers and footers and describes how to:
Choose headers and footers with which to work.
Specify header and footer images.
Add and edit header and footer bar elements
Enable HTML elements headers and footers.
Define special bar elements to display and use in a header, such as My Links, Search options, homepage Help and the homepage display tab.
Create dated (effective-dated) versions of headers and footers.
Delete headers and footers.
|
Click the arrow to display instructions for using a page. |
Header ID, Footer ID |
Header or footer object name. |
Effective Date |
Use this field to specify the date that the header or footer should take effect. |
|
Click the button to copy a complete header or footer setup from an existing header or footer to a new dated version of the current header or footer. |
|
Click the button to preview the header or footer. The Preview button appears after any header or footer is saved. When the preview window is open, you can also preview how different style sheets would impact the header or footer display. When the preview window is open, click the Lookup button next to the Style Sheet field, select a style sheet and click the Refresh button. Keep in mind that this is a preview only. To apply a different style sheet to a header or footer, use the Assemble Themes page. |
Description |
Description for the branding theme component. For example, customer header, human resources department footer, blue menu style, and so on. |
HTML Layout ID |
HTML layout on which a header or footer definition is based. |
Details |
Click the link to view the HTML Layout and Selection page. From the HTML Layout and Selection page you can click the View HTML link to view the hard-coded elements to understand the header or footer rendering. |
Add |
You can use the Add button under two conditions:
|
Delete |
You can use the Delete button under two conditions:
|
Enabled |
Check to enable an element for the header ID or footer ID. Required header and footer elements, per the related HTML layout, are automatically checked and grayed out. |
Element |
Custom label assigned to the system element in the related HTML layout. |
Image Source |
Source of the image for the header or footer element. The choices are:
|
Image Object Name |
Displays if the image source is Catalog. Indicates the name of the image object to display for the header or footer element. |
|
Click the Browse Image Catalog button to select a header or footer element image from the Image Catalog. |
Image URL |
Displays if the image source is URL. Specifies the location of the header or footer element image. URLs can be absolute or relative. |
Image Attributes |
Specify standard HTML tag attributes to refine the display of element images. |
Hover Text |
Enter text to display at runtime when a user hovers over an image. |
Target URL |
Enter a target URL that the user will access when the image is clicked. If you don't want the image to be "clickable" or act like a hyperlink, leave this blank. |
Overridable |
Check the box to indicate that portal sites can choose to allow the site administrator to override the element for a site-specific brand. |
Style Class |
Click the Lookup button to choose a style class from a PeopleSoft Application Designer style sheet, or manually enter one that is defined within a global or embedded style sheet declaration in the HTML layout object code. |
Seq# |
Specifies the order in which a bar item (link or text) displays on the header or footer bar. |
Page Name |
Object Name |
Navigation |
Usage |
Define Header |
EPPBR_HEADER |
Portal Administration, Branding, Define Headers |
Define and preview headers used in themes. Create versioned (effective-dated) headers. |
Images |
EPPBR_HEADER_IMG |
Portal Administration, Branding, Define Headers, Images |
Select and configure image elements used in headers. |
Header Preview |
EPPBR_HDR_PREVIEW |
Click the |
View the header so that you can view it with other stylesheets. |
Bars |
EPPBR_HEADER_LINK |
Portal Administration, Branding, Define Headers, Bars |
Select and configure bar elements used in headers. |
HTML Area |
EPPBR_HEADER_HTML |
Portal Administration, Branding, Define Headers, HTML Area Click the HTML Area tab. |
Enable and configure HTML elements used in the header. |
Special Elements |
EPPBR_HEADER_OTHER |
Portal Administration, Branding, Define Headers, Special Elements |
Define special elements you place on header bars, such as My Links, Search options, homepage Help and homepage tab displays. These special elements are available only on headers. |
Define Footer |
EPPBR_HEADER |
Portal Administration, Branding, Define Footers |
Configure and preview footers used in themes. Create versioned (effective dated) footers. |
Images |
EPPBR_HEADER_IMG |
Portal Administration, Branding, Define Footers Click the Images tab. |
Select and configure image elements used in footers. |
Bars |
EPPBR_HEADER_LINK |
Portal Administration, Branding, Define Footers Click the Bars tab. |
Select and configure bar elements used in footers. |
Bar Details |
EPPBR_HDRLINK_SEC |
Click the Edit Items button on the Bars tab. |
Add or edit bar items. |
HTML Area |
EPPBR_HEADER_HTML |
Portal Administration, Branding, Define Footers Click the HTML Area tab. |
Enable and configure HTML elements used in the footer. |
This section provides and overview of choosing headers and footers and gives
Adding New Headers and Footers
When you add a new header or footer, you have the option of copying an existing header or footer to use as a starting point for your configuration.
Note. The delivered headers and footers consist of system data. During the upgrade process new system data will overwrite existing system data. Therefore, to support upgrading use the Copy Header and Copy Footer options to create headers and footers with unique header and footer names.
To add a new header, access the Define Header page.
To add a new footer, access the Define Footer page.
Note. Elements selected on the HTML Layout and Selection page determine the tabs that display on the Define Header and Define Footer pages. For instance, if there are no images or HTML areas, then those tabs are hidden.
To add a header or footer:
To add a header, select Portal Administration, Branding, Define Headers.
To add a footer, select Portal Administration, Branding, Define Footers.
Click the Add a New Value tab.
In the ID field, enter an object name for the header or footer.
Note. The name you enter cannot start with a number or contain spaces.
Click the Add button. The Define Header or Define Footer page displays.
Initially when you add a Header ID or Footer ID, there is only one tab visible, the Define Header or Define Footer tab. The other tabs appear (as appropriate) after you specify an HTML Layout ID.
In the Effective Date field, enter the date that the header or footer will take effect.
To add new header or footer information, use the steps that follow. To copy information from an existing header or footer to the new one, go to Step 7.
In the Description field, enter a description.
In the HTML Layout ID field, enter a layout ID or click the Lookup button to select one.
To view the elements of the HTML Layouts and Elements page, click the Details link.
Save the changes.
To copy all configuration information from an existing header or footer to the new header or footer:
Click the Copy Existing button. The Copy Existing page displays.
Use the Preview button to preview existing headers or footers.
Select the Header ID or the Footer ID of the header or footer to copy.
Click the OK button.
Selecting an Existing Header or Footer
To choose an existing header or footer:
In general, to modify existing header or footer definitions, use Correct History mode. The default mode is Update/Display, so you must explicitly select Correct History mode.
To choose an existing header, select Portal Administration, Branding, Define Headers.
To choose an existing footer, select Portal Administration, Branding, Define Footers.
Click the Search button.
In the Results List, click a header or footer with which to work.
Access the Define Header — Images page or the Define Footer — Images page.
Use this page to select image elements to use in the header or footer. The Image Detail section enables you to assign an image reference to each enabled element, enter image attributes to refine the display of images, enter target URLs for images that will act like hyperlinks, and specify if portal sites can override the elements. The system displays the Header ID, description, and Effective Date for the header or footer.
|
Click the icon to preview the header |
To select image elements used in a header or footer:
Select the Enabled checkbox for each element for which you want to display an image.
Note. Required elements display checked and grayed out.
From the Image Source dropdown list, select the source of the image: Catalog or URL.
Specify the Image Object Name or the Image URL.
If the Image Source is Catalog, in the Image Object Name field, use the Lookup button to select the image object to appear in the header or footer for the selected element.
If the Image Source is URL, in the Image URL field, enter the URL where the image is located.
After you specify images for header and footer elements, use the Image Attributes tab in the Image Detail section to refine the display of the images and define the text that displays at runtime when a user hovers over the image.
To refine image elements:
Enter the size of the image in pixels in the Height and Width fields.
In the Additional Attributes field, enter standard HTML tag attributes to refine the display of the image.
In the Hover Text field, enter the text to display at runtime when the user hovers the cursor over the image.
Specifying Target URLs for Image Elements
Use the Target URL tab of the Image Detail section to enter target URLs for images, if clicking the image should navigate to another URL.
Specifying Site Overrides for Image Elements
Use the Site Overrides tab of the of the Image Detail section to define elements that portal sites can potentially override.
Select the Can be Overridden by Sites checkbox for each element to indicate that portal sites can potentially override that element. This means the portal administrator can delegate the ability for a site administrator to override individual elements within a site.
Warning! The grid will display an Invalid Element if the assigned HTML layout definition for the header or footer has changed. When previously enabled elements are disabled in an HTML layout, headers or footers already defined may contain data that is no longer valid, since there is no longer an HTML layout element to apply and match up to it. Clear the Enabled box for elements that display as an Invalid Element.
Use the Bar tab of the Define Header page or the Define Footer page to add and edit bar elements.
The Bar Detail section enables you to assign an optional overriding style class and optional text dividers to separate bar items, as well as enter attributes to refine the display of the divider images. You can also specify if portal sites can override the bar element.
Note. The spacing between bar items is determined by the HTML objects assigned to the HTML layout. Depending on how much space is allocated to a bar element in HTML and the user's browser size, the spacing among the items on the bar will be adjusted accordingly. In instances where the space allocated in HTML is too small or the browser window gets reduced substantially, you can force spacing by configuring one of cascading style sheet (CSS) text properties in the style class assigned to the bar.
When using the Bar tab to enable and configure bar elements, you configure general information for each bar, and then click the Edit Items button to drill down and define details for each specific link or text items within the bar.
To enable and configure a bar element and its detailed items:
In the Enabled column check the Enabled box to activate the bar for the header or footer. Clear the Enabled box to disable a bar element.
For enabled bar elements, in the Style Class field use the Lookup button to select a style class to apply to the entire bar, or manually enter one that is defined within the HTML layout object code.
Since the bar turns into an HTML table, this style class is applied to the <TR> tag
In the Divider Text field, enter text to use to divide elements on the bar.
Click the Save button.
Click the Edit Items button to view and edit the following:
Sequence.
Link type of bar elements.
Text type of bar elements.
Bar element labels.
Associated style classes.
Click the OK button to return to the Bar Detail page.
Click the Save button.
Adding or Editing Bar Element Items
When you click the Edit Items button for a bar element, the Bar Item Detail page displays.
Note. The Seq# and Type columns display on all of the tabs in the Bar Item Detail and serve as reference labels for the items that you are configuring.
The tabs and fields that display in the Bar Item Detail vary, depending on the link or text type with which you are working. For example, a Data Details tab displays when you are working with Text from System Data text types. The Link Details tab displays when you are working with a Custom Link or a Link to Menu Item link type.
Another link type with which you can work is Link to MCF/CTI (Multi-channel Framework/Computer Telephony Integration). When you implement this option, the system determines if the MCF administrative set up has been performed and if the user has access to the functionality. If so, the link will be displayed and operation can continue. If not, the link displays on the bar, however, when a user clicks on it, the following message displays: "You are not configured as MCF or CTI agent."
See Setting Up MCF For PeopleSoft Enterprise Portal.
To add and edit bar element items:
Click the Add button to add a new bar element item, or simply edit the existing items.
In the Seq# field, enter a number to specify the order in which the bar link or text displays on the bar.
From the Type dropdown list, select the bar link or text type. When you select the link or text type, the tabs and fields that display vary, based on your selection. The valid options are in the list.
Those items marked with an asterisk (*) require very little configuring as they have the proper navigational links or text is generated by the system. You may need only provide styles and modify link labels for these items.
Custom Link. (Any URL.)
*Link to Add Favorites. (PeopleTools feature.)
*Link to Add to My Links. (PeopleSoft Enterprise Portal feature.)
*Link to Default Portal Home. (Default portal.)
Link to MCF/CTI Console. (PeopleTools feature.)
Link to Menu Item. (Portal content reference.)
Link to Modify Content. (PeopleTools feature.)
Link to Modify Layout. (PeopleTools feature.)
Link to Performance Trace. (PeopleTools feature.)
*Link to Personalize Content. (homepage Personalization, Content page.)
*Link to Personalize Layout. (homepage Personalization, Layout page.)
Link to Portal/Site Home. (Returns to a site-specific homepage; for any site created with the PeopleSoft Enterprise Portal's Create New Site wizard.)
*Link to Sign Out. (Executes log off.)
*Link to Worklist. (PeopleTools Workflow feature.)
Plain Text.
*Text from Welcome message. (User-entered data from their homepage Personalization, Content page.)
Text from HTML. (Based on a defined HTML object, application class or manually entered HTML.)
Text from System Data. (Portal.)
Text from Welcome Message. (PeopleTools feature.)
In the Label field, enter a descriptive label for the link. This label is visible to the user at runtime. Most link types will supply default labels that you can keep or modify.
In the Style Class field, use the Lookup button to select a style sheet, or manually enter one that is defined within the HTML.
The Link Details tab displays when you are working with a Menu Item or Custom Link. Use this tab to select and designate a target URL for a custom link, menu item name and menu item site name.
Target URL |
Enter any URL for the custom link. |
Menu Item Site Name |
Select the portal site where the menu item is to reside. For example, CUSTOMER, EMPLOYEE, SUPPLIER and so on. |
Menu Item Name |
Enter the content reference name or use the Lookup button to select it. |
The Data Details tab displays when you are working with the type Text from System Data. Use this tab to choose a system variable type name for bar items that are text from system data.
System Variable Name |
The valid values are:
|
Sometimes you may want to pair an image next to a hyperlink and have both access the same URL. Use the Icon Image tab to specify information for icon images, including the image source and image object name. Icon images display just to the left of the bar item link or text.
To specify the image source for an icon image:
From the Image Source dropdown list, select a source. The valid options are:
Image Catalog
URL
If the source is Catalog, in the Image Object Name field, enter the name of the image object to display for the icon, or use the Browse Image Catalog button to search for one.
The image displays in the Preview column.
If the source is URL, in the Image URL field, enter the location of the icon image.
Use the Image Attributes tab to refine the display details for bar detail icons.
In the Image Attributes field, specify standard HTML tag attributes to refine the display of the bar images as well as height and width parameters.
The HTML Detail tab displays when you are working with text from HTML. The tab enables you to select the source of the HTML and specify the required details to supply the code.
HTML Source |
Source of the text HTML. Valid choices are:
Note. The Appl Class option is useful for dynamically generated HTML, like a stock quote or clock. JavaScript can be used with the Catalog and External HTML source option to create dynamically changing content, but the Appl Class option is the only option that allows the HTML itself to be dynamically generated. |
AppPackage, AppClass, Method |
Displays when the HTML source is Appl Class. The application class method must return an HTML string. Enter the information in the following format:
For example:
|
HTML Object Name |
Displays when the HTML source is Catalog. Enter the HTML object name or use the Lookup button to search for one. |
HTML Area |
Displays when the HTML source is External. Click the link to compose or copy and paste your own HTML or JavaScript code. |
Click OK to return to the Bar Details section and save your changes.
This concludes working with Bar Item Details. The following section resumes discussing Bar Details, specifically, divider images.
Use the Divider Image tab in the Bar Detail section of the Bar tab to define images to use to divide bar items. Using text dividers is an alternative to using image dividers, however, you may use both types of dividers.
To specify the image source for a divider image:
From the Image Source dropdown list, select a source. The valid options are:
Image Catalog
URL
If the source is Catalog, in the Image Object Name field, enter the name of the image object to display for the icon, or use the Browse Image Catalog button to search for one.
If the source is URL, in the Image URL field, enter the location of the icon image.
Use the Divider Image Attributes tab of the Bar Detail section to refine the display of divider images.
In the Image Attributes field, specify standard HTML tag attributes to refine the display of the divider images. In the Height and Width fields, enter size parameters for the image.
Use the Site Overrides tab of the of the Bar Detail section on the Bar tab to specify bar elements that portal sites can override.
To specify that portal sites can override a bar element, select the Can be Overridden by Sites checkbox.
Use the HTML Area tab to enable HTML elements used in headers or footers. In addition, use this tab to assign an HTML reference to each enabled HTML Area element or edit your own reference. You may also specify whether portal sites can override HTML elements that you specify.
HTML Source |
Source of the text HTML. The valid options are:
Note. The Appl Class option is useful for dynamically generated HTML, like a stock quote or clock. JavaScript can be used with the Catalog and External HTML source option to create dynamically changing content, but the Appl Class option is the only option that allows the HTML itself to be dynamically generated. |
AppPackage, AppClass, Method |
Displays when the HTML source is Appl Class. Enter the application class method name. The method must return an HTML string. Enter the information in the following format:
For example:
|
HTML Object Name |
Displays when the HTML source is Catalog. Enter an HTML object name or use the Lookup button to search for one. |
HTML Area |
Displays when the HTML source is External. Click the link to compose or copy and paste your own HTML or JavaScript code. |
Use the Special Elements tab to define special elements you place on header bars, such as My Links, Search options, homepage Help and homepage tab displays.
For example, you can use this tab to enter a homepage Help display label and optional style classes. You can also configure the details about Search options and homepage tab display, enter attributes to refine the display of these elements, and indicate if portal sites can override any of the elements.
PeopleSoft delivers all special elements configured with code to handle their underlying functionality and display layout. You can configure only the labeling, images, and style attributes of special elements. Use the tabs in the Setup Detail section of the tab to configure these items.
To define special bar elements:
Check the Enabled box to enable a special element, or clear the Enabled box to disable a special element.
If working with the My Links or Homepage Help Display elements, enter a label for the link display. The label appears to users at runtime.
In the Style Class field, use the Lookup button to select a style class, or manually enter one that is defined within the HTML.
Click the Edit Options button to apply images and image attributes for the Search Options and Homepage Tab Display elements.
See the following sections on Defining Search Option Elements and Defining Homepage Tab Display Elements for more information.
Click the OK button to return to the Special Elements page.
Click the Save button.
Defining Search Option Elements
When you click the Edit Options button for a Search Options element, a Search Options page displays where you can specify images and image attributes for the Search Options element. Note that the Label and Style Class fields display, as well as any values you have entered for them.
To specify the image source for the Search Options Go button:
From the Image Source dropdown list, select a source. The valid options are:
Image Catalog. The source of the image is the PeopleSoft Application Designer Image Catalog.
URL. The source of the image is a URL.
If the source is Catalog, in the Image Object Name field, enter the name of the image object to display for the icon, or use the Browse Image Catalog button to search for one.
The image appears in the Preview column.
If the source is URL, in the Image URL field, enter the location of the icon image.
Refining Search Options Images
Use the Image Attributes tab to refine the display of Search Option images
In the Image Attributes field, specify standard HTML attributes to refine the display of the search icon.
Defining Homepage Tab Display Options
When you click the Edit Options button for a Homepage Tab Display element, a Tab Options page displays where you can specify images and image attributes for the Homepage Tab Display element.
The tab option Types that you can configure correspond to those shown in the following lists and graphics. Note that for a complete configuration, you must configure all tab option Types, except for the Additional Tab Top Image and the Additional Tab Bottom Image.
Active Tab Style |
Controls the font style for the tab label of the currently displayed homepage tab. |
Inactive Tab Style |
Controls the font style for the tab label of the homepage tabs that are not selected. |
|
Active left cap image. |
|
Inactive left cap image. |
|
Active to inactive tab image. |
|
Active to active tab image. |
|
Inactive to inactive tab image. |
|
Active right cap image. |
|
Inactive right cap image. |
Additional Tab Top Image |
Use at the top of the homepage tab display so that the tops of the images fit together seamlessly. |
Additional Tab Bottom Image |
Use at the bottom of the homepage tab display so that the bottom of the images fit together seamlessly. |
The following graphic shows the tab types assembled to construct homepage tabs.
The preceding graphic shows the following homepage tab option types.
Homepage Tab Option Type |
Description |
1 |
Active tab style. |
2 |
Inactive tab style. |
3 |
Active left cap image. |
4 |
Inactive left cap image. |
5 |
Active to inactive cap image. |
6 |
Active to active cap image. |
7 |
Inactive to inactive cap image. |
8 |
Active right cap image. |
9 |
Inactive right cap image. |
10 |
Additional tab top image. (Not shown in graphic.) |
11 |
Additional tab bottom image. |
To define homepage tab display options:
If working with the Active Tab Style or Inactive Tab Style homepage tab display option Type, in the Style Class field, click the Lookup button to select a style class.
For all other homepage tab display option types, from the Image Source dropdown list, select an image source. The valid options are:
Catalog. The source of the image is from the PeopleSoft Application Designer Image Catalog.
URL. The source of the image is a URL.
If the source is Catalog, in the Image Object Name field, enter the name of the image object, or use the Browse Image Catalog button to search for one.
If the source is URL, in the Image URL field, enter the location the image.
Click OK to return to the Special Elements tab. Save your changes.
Refining Special Element Attributes
Use the Image Attributes tab to enter optional attributes to refine the display of the special elements.
In the Attributes field, specify standard HTML attributes to refine the display of the bar images. In addition, enter height and width parameters.
Use the Site Override tab to define those elements which portal sites can override.
Select the Can be Overridden by Sites checkbox to indicate that portal sites can override the element.
You can create dated versions of headers and footers and apply them to a theme for company promotions, company events, holidays and so on.
To do so, you create separate instances of headers and footers and then apply effective dates to them. Then, at runtime, specific headers or footers are added to a theme based on the effective date.
See Using Effective Dating to Create Versions of Branding Themes.
Note. You must create new headers and footers to take effect when you want the current versioned header or footer to end. The portal will not rollback to the previous header or footer.
To create dated versions of headers and footers:
Access the header or footer to version.
To version a header, access the Define Header page by selecting Portal Administration, Branding, Define Headers and select a header. The Define Header page displays.
To version a footer, access the Define Footer page by selecting Portal Administration, Branding, Define Footers and select a footer. The Define Footer page displays.
Click the Add button to add another version of the header or footer.
In the Effective Date field, enter a date or click the calendar icon to specify when the version of the header or footer should take effect.
Save the new version of the header or footer.
Click the View All link or the Show Next Row and Show Previous buttons to view all versioned headers or footers.
Continue to configure the header or footer as appropriate.
Note. After you create versioned headers and footers, take care to note the effective date for each to ensure that you configure the correct version.
See Also
Using Effective Dating to Create Versions of Branding Themes
PeopleTools 8.48 PeopleBook: Using PeopleSoft Applications, "Working with Pages," Page Action Options and Effective Dates
PeopleSoft recommends that you do not delete headers or footers, since in doing so you may disrupt theme definition used throughout the portal database.
If you must delete a header or footer, you should thoroughly research where it may be in use and understand the consequences of deleting it from the system. The branding queries can help you in this research.
After you have completed all the research, the portal administrator can delete header and footer data in SQL by executing a DELETE command against the appropriate records.
This section describes how to:
Override the homepage header
Override the target page header
Override the homepage footer
Page Name |
Object Name |
Navigation |
Usage |
Override Homepage Header |
EPPSM_BR_MAIN |
From within a site select, Portal Administration, Branding, Override Homepage Header Site Manager Center, Site Branding, Override Homepage Header |
Use this page to enable overrides in header site branding elements. |
Preview Site Branding Overrides |
EPPSM_HDR_PREVIEW |
Click the Preview Site Branding icon. |
View the results of the overrides. |
Override Homepage Header — Image |
EPPSM_BR_IMG |
Click the Override Options icon |
Use this page to override and upload replacement images. |
Image Catalog |
EO_PE_ADDIMAGE_SEC |
After changing to Correction mode, click the Upload New Image link on the Override Homepage Header — Image page. |
Use this page to upload images to the image catalog and use them to override existing images. |
Override Homepage Header — Bar |
EPPSM_BR_BAR |
Click the Override Options icon to the right of the bar on the Override Homepage Header page. |
Use this page to change bars on the page. |
Override Homepage Header — Homepage Help |
EPPSM_BR_HELP |
Click the Override Options icon to the right of the help link on the Override Homepage Header page. |
Use this page to set override options for Help. |
View My Links |
EPPSC_VIEW_MYSC |
Click the Override Options icon to the right of My Links to view the links. |
Use this page to set override options for My Links. |
Edit My Links |
EPPSC_VIEW_MYSC |
Click the Edit My Links button on the View My Links page. |
Use this page to edit or add links to the My Links page. |
Override Target Page Header |
EPPSM_BR_MAIN |
From within a site select, Portal Administration, Branding, Override Target Page Header. Site Manager Center, Site Branding, Override Target Page Header |
Use this page to change elements of the target page that can be overridden. |
Override Homepage Footer |
EPPSM_BR_ADD |
Portal Administration, Branding, Override Homepage Footer Site Manager Center, Site Branding, Override Homepage Footer |
Use this page to change the elements of the homepage footer that can be overridden. |
Access the Override Homepage Header page.
Elements in the header that can be overridden are identified by the Override Options icon. Start by selecting an effective date for when you want the overrides to take effect. All overrides on the page are set using this field.
|
The Override Options icon identifies any element that can be changed on the page. |
Effective Date |
Use this field to specify the date that the header or footer should take effect. |
|
Click the Preview Site Branding icon to see the appearance of the branding elements on the page. |
Add |
Click the Add button to create another effective-dated version of the header. |
Delete |
Click the Delete button to remove the selected version of the header. |
Access the Override Homepage Header — Image page.
Note. You must be in Correction mode to make changes to this page.
Display Option |
Select the option for the image. Available values are: Use Default. The existing image appears in the header. Override. You can select and upload another image to replace the existing one. Do Not Show. No image appears in the header. |
Image Source |
Select the source for the image. Available values are: External Source. You can specify a URL to the location of the image. System Catalog. You can enter the name of the image as found in the system catalog. |
Image Name |
Select the name of the image as found in the system catalog. |
Image URL |
Enter the URL for the location of the image. |
Upload New Image |
Select this link to display the Image Catalog page, which is used to upload remote images to the system catalog. |
Advanced Options
Use the Advanced group box to specify additional information for the image.
Height |
Enter the height of the image in pixels. |
Width |
Enter the width of the image in pixels. |
Additional Attributes |
Specify standard HTML tag attributes to refine the display of element images. |
Target URL |
Enter a target URL that the user will access when the image is clicked. If you don't want the image to be "clickable" or act like a hyperlink, leave this blank. |
Hover Text |
Enter text to display at runtime when a user hovers over an image. |
Access the Image Catalog page.
Enter the name, description, and file type of the image you are uploading.
Click OK
A standard browse window will enable you to browse through the directories on your machine and select the location of the file you are uploading.
Click Upload and the system uploads and saves the image to the Image Catalog.
Access the Override Homepage Header — My Links page or the Override Target Page Header — My Links page.
Note. You must be in Correction mode to make changes to this page.
Effective Date |
Use this field to specify the date that the override should take effect. |
Display Option |
Select the display options for My Links. Available values are: Use Default. The existing My Links appears in the header. Override. You can change the style class, label, and attributes for the link. Do Not Show. My Links does not appear in the header. If you select this option, you will still see My Links on the main screen so that you can access the page to configure the element. |
Label |
Enter a label for the link display. The label appears to users at runtime. |
Style Class |
Enter the class name associated with the override. |
Attributes |
Specify standard HTML tag attributes to refine the display the My Links element. |
Access the Override Homepage Header — Homepage Help page.
Note. You must be in Correction mode to make changes to this page.
Effective Date |
Use this field to specify the date that the override should take effect. |
Display Option |
Select the display options for Homepage Help. Available values are: Use Default. The existing Homepage Help link appears in the header. Override. You can select another style class and attributes to replace the existing one. Do Not Show. Homepage Help does not appear in the header. If you select this option, you will still see the help link on the main screen so that you can access the page to configure the element. |
Label |
Enter a label for the link display. The label appears to users at runtime. |
Style Class |
Enter the class name associated with the override. |
Attributes |
Specify standard HTML tag attributes to refine the display the Homepage Help element. |
Access the Override Homepage Header — Bar page.
Note. You must be in Correction mode to make changes to this page.
When you click the Edit Items button for a bar element, the Bar Item Detail page displays.
Note. The Seq# and Type columns display on all of the tabs in the Bar Item Detail and serve as reference labels for the items that you are configuring.
The tabs and fields that display in the Bar Item Detail vary, depending on the link or text type with which you are working. For example, a Data Details tab displays when you are working with Text from System Data text types. The Link Details tab displays when you are working with a Custom Link or a Link to Menu Item link type.
Another link type with which you can work is Link to MCF/CTI (Multi-channel Framework/Computer Telephony Integration). When you implement this option, the system determines if the MCF administrative set up has been performed and if the user has access to the functionality. If so, the link will be displayed and operation can continue. If not, the link displays on the bar, however, when a user clicks on it, the following message displays: "You are not configured as MCF or CTI agent."
See Also
Adding and Editing Header and Footer Bar Elements
Access the Override Target Page Header page.
Note. You must be in Correction mode to make changes to this page.
This page enables you to override elements in the header of the target page.
Elements in the header that can be overridden are identified by the Override Options icon. Start by selecting an effective date for when you want the overrides to take effect. All overrides on the page are set using this field.
|
The Override Options icon identifies any element that can be changed on the page. |
Effective Date |
Use this field to specify the date that the header or footer should take effect. |
|
Click the Preview Site Branding icon to see the appearance of the branding elements on the page. |
Add |
Click the Add button to create another effective-dated version of the header. |
Delete |
Click the Delete button to remove the selected version of the header. |
See Overriding the Homepage Header.
Access the Override Homepage Footer page after entering the Effective Date for your changes.
Note. If there isn't a footer associated with the Homepage, the system will not save the Effective Date and will not display the Override Homepage Footer page.
Elements in the header that can be overridden are identified by the Override Options icon. Start by selecting an effective date for when you want the overrides to take effect. All overrides on the page are set using this field.
|
The Override Options icon identifies any element that can be changed on the page. |
Effective Date |
Use this field to specify the date that the footer should take effect. |
|
Click the Preview Site Branding icon to see the appearance of the branding elements on the page. |
Add |
Click the Add button to create another effective-dated version of the footer. |
Delete |
Click the Delete button to remove the selected version of the footer. |
This section provides a list of common elements and pages used to define menu overrides and describes how to:
Preview menu pagelet overrides.
Define menu style sheet overrides.
Define Background style and image overrides.
Select folder style and image overrides.
Define target link style and images overrides.
Define other menu image overrides.
|
Click the button to display or hide instructional text, or expand or collapse individual sections used to define menu styles. |
Expand All |
Click the button to expand all sections used to define menu styles. |
Collapse All |
Click the button to collapse all sections used to define menu styles. |
|
Click the Lookup button to look up predefined values or images. |
|
Click the button to browse for images in the PeopleSoft Application Designer Image Catalog. |
Page Name |
Object Name |
Navigation |
Usage |
Define Menu Overrides |
EPPBR_MENUNAV |
Portal Administration, Branding, Define Menu Styles |
Assign overriding menu pagelet images and styles. |
The Define Menu Overrides page enables you to assign overriding styles and images for a restyled version of the default Enterprise Menu navigation pagelet. The basic PeopleTools default style and image values apply when no overrides are assigned. Each collapsible section on the Define Menu Overrides page displays different information about the menu overrides including:
A preview of the menu
Menu background styles and images
Folder styles and images
Target link styles and images
Other images like indentation spacer images
Access the Define Menu Overrides page.
You can preview and test menu overrides using the Refresh button in the Instructions and Preview group box of the Define Menu Overrides page.
To preview menu pagelet overrides:
On the Instructions and Preview section, click the arrow to expand the section.
A sample menu pagelet displays that features all of the defined attributes on the Define Menu Overrides page. When no overrides are specified, the pagelet displays the default values.
Change or enter overriding values in the other sections on the page.
Click the Refresh button. The new overrides are reflected in the preview section.
To retain the selections, click the Save button.
Use the Style Sheet section of the Define Menu Overrides page to specify the style sheet for the menu overrides. The style classes you subsequently specify on the Define Menu Overrides page must be defined within the designated style sheet, or at least within its cascading hierarchy. The style sheet that you specify takes precedence for menu styling over the style sheet identified in any theme to which this menu is a part.
Note. If you prefer not to use style sheets that reside in the PeopleSoft database, you can implement style sheets as you would do with regular HTML documents. You can either embed all the style declarations or link external style sheets inside the Head container tags in the HTML layout object.
Style Sheet Name |
Click the Lookup button to choose a style class, or manually enter one. |
Alternate Style Sheet |
For browser types other than Microsoft Internet Explorer and Netscape Navigator 6.0, use the Lookup button to choose a style class, or manually enter one. |
Use the Menu Styles and Images section of the Define Menu Overrides page to define an overriding style class for the menu background color and for menu minimize and maximize icons.
Background Style |
Click the Lookup button to choose an overriding menu background style class, or manually enter one. |
Alternate Background Style |
For browsers other than Microsoft Internet Explorer and Netscape Navigator 6, click the Lookup button to choose an overriding menu background style class, or manually enter one. |
Maximize Icon |
Click the Browse Image Catalog button to select an overriding image for the maximize icon on the menu. When the user clicks this icon, the menu frame will show/restore itself. |
Minimize Icon |
Click the Browse Image Catalog button to select an overriding image for the minimize icon on the menu. When the user clicks this icon, the menu frame will hide itself, therefore allowing for more information to appear in the target page area. |
Use the Folder Styles and Images section of the Define Menu Overrides page to define overriding folder styles for the navigation menu.
Closed Folder Image |
Click the Browse Image Catalog button to select an overriding image for the closed folder icon on the navigation menu. |
Folder Link Style |
Click the Lookup button to choose an overriding menu folder link style class, or manually enter one. |
Open Folder Image |
Click the Browse Image Catalog button to select an overriding image for the open folder icon on the navigation menu. |
Open Folder Background Style |
Click the Lookup button to choose an overriding menu background style class, or manually enter one. |
Edge |
Click the Lookup button to specify the dividing line between an open folder and a closed one. |
Selected Folder Link Style |
Click the Lookup button to choose an overriding folder link style class, or manually enter one for the folder you have currently selected. |
Selected Folder Background |
Click the Lookup button to choose an overriding folder background, or manually enter one for the folder background you have currently selected. |
Use the Target Link Styles and Images section of the Define Menu Overrides page to define overriding target link styles and target link image styles for the navigation menu.
Unselected Link Image |
Click the Browse Image Catalog button to select an overriding image for links that are not selected on the navigation menu. |
Unselected Link Style |
Click the Lookup button to choose an overriding style class for links that are not selected on the navigation menu. |
Selected Link Image |
Click the Browse Image Catalog button to select an overriding image for selected links on the navigation menu. |
Selected Link Style |
Click the Lookup button to choose an overriding style class for selected links on the navigation menu, or manually enter one. |
Selected Link Background |
Click the Lookup button to choose a background for a selected link. |
Selected Link Top Edge |
Click the Lookup button to choose an overriding image for the border around the top edge of the highlighted links background color. |
Selected Link Bottom Edge |
Click the Lookup button to choose an overriding image for the border around the bottom edge of the highlighted links background color. |
Use the Other Images section of the Define Menu Overrides page to define other overriding images for the navigation menu.
Indentation Spacer Image |
Click the Browse Image Catalog button to select an overriding image for indentation spacers on the navigation menu. You can control the size of the indentation for folders to subfolders to links by selecting a spacer image with of a size with more pixels or fewer pixels. |
This section lists pages used and discusses hot to assemble themes.
Page Name |
Object Name |
Navigation |
Usage |
Assemble Branding Theme |
EPPBR_THEME |
Portal Administration, Branding, Assemble Themes |
Select the headers, footer and menu elements for a theme, as well as the style sheet to apply. |
Access the Assemble Branding Theme page.
After you have completed configuring the header, footer, and navigation menu, assemble the theme. When you assemble a theme you select the effective date of the theme. You also select the headers, footer and menu elements to use, and the style sheet to apply.
The choices of header and footers are filtered based on effective dates. For example, if you are working with a theme with an effective date of 01/01/2003, you cannot select a header or footer with an effective date of 02/01/2003.
|
Click the arrow to display instructions for using the page. |
Theme ID |
Object name of the branding theme. |
Effective Date |
Date that the theme takes effect. |
Add |
Click the button to add another effective dated version of the theme. |
Delete |
Click the button to delete the current effective dated version of the theme. |
Status as of Effective Date |
The valid choices are:
|
Description |
Description of the branding theme. |
Homepage Header |
Header that applies to homepage tabs. Enter the header name in the field, or use the Lookup button to select one. |
Target Page Header |
Header that applies to the target or transaction PeopleSoft Pure Internet Architecture page. Enter the header name in the field, or use the Lookup button to select one. |
Homepage Footer |
Footer to apply to the homepage tabs. Enter the footer name in the field, or use the Lookup button to select one. If none is entered, there will be no footer on the homepage. |
Style Sheet Name |
Style sheet to apply to the branding theme. Enter the style sheet name in the field, or use the Lookup button to select one. If none is specified the portal database default style sheet from the PeopleTools Options page applies. |
Menu Navigation |
Menu style to apply to the homepage. Enter the name of the menu style in the field, or use the Lookup button to select one. If none is specified the PeopleTools basic menu style applies. You can preview this style using the Define Menu Overrides page. Leave all of the override values blank. |
Database Default Theme |
Select the checkbox to indicate that the theme displayed in the Theme ID field is the database default theme as of the effective date indicated. This theme will only apply if Enterprise Portal Branding is enabled and there is no portal site default theme assigned for an active portal registry. |
Details |
Click the Details link to view or modify details relevant to the following branding components:
|