Configuring and Assembling Branding Themes

This chapter contains common header and footer elements and discusses how to:

• Configure headers and footers.

• Define overrides for menu styles.

• Assemble branding themes.

Configuring Headers and Footers

This section lists common elements and pages used in configuring headers and footers and describes how to:

• Select headers and footers.

• Specify header and footer images.

• Add and edit header and footer bar elements

• Enable HTML elements in headers and footers.

• Define special bar elements—headers only (My Links, search options, homepage Help, homepage display tab).

• Create dated versions of headers and footers.

• Delete headers and footers.

Common Elements Used to Configure Headers and Footers

Pages Used to Configure Headers and Footers

See Also

PeopleTools 8.52: PeopleTools Portal Technologies PeopleBook, “Modifying the Portal Interface”.

Selecting Headers and Footers

This section discusses how to:

• Add new headers and footers.

• Select an existing header or footer.

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 (Portal Administration, Branding, Define Headers).

To add a new footer, access the Define Footer page (Portal Administration, Branding, Define Footers).

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:

1. To add a header, select Portal Administration, Branding, Define Headers.

   To add a footer, select Portal Administration, Branding, Define Footers.

2. Click the Add a New Value tab.

3. 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.

4. 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.

5. In the Effective Date field, enter the date that the header or footer will take effect.

6. 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.

   1. In the Description field, enter a description.

   2. 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.

   3. Save the changes.

7. To copy all configuration information from an existing header or footer to the new header or footer:

   1. Click the Copy Existing button. The Copy Existing page displays.

   2. Use the Preview button to preview existing headers or footers.

   3. Select the Header ID or the Footer ID of the header or footer to copy.

   4. 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.

1. To choose an existing header, select Portal Administration, Branding, Define Headers.

   To choose an existing footer, select Portal Administration, Branding, Define Footers.

2. Click the Search button.

3. In the Results List, click a header or footer with which to work.

See Also

PeopleTools 8.52: PeopleTools Portal Technologies PeopleBook, “Using Pagelet Wizard to Create and Manage Pagelets,” Defining Pagelet Wizard Headers and Footers.

Specifying Header and Footer Images

Access the Define Header - Images page (Portal Administration, Branding, Define Headers, Images) or the Define Footer - Images page (Portal Administration, Branding, Define Footers, Images).

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.

Selecting Image Elements

To select image elements used in a header or footer:

1. Select the Enabled checkbox for each element for which you want to display an image.

   Note. Required elements display checked and grayed out.

2. From the Image Source dropdown list, select the source of the image: Catalog or URL.

3. 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.

Refining Image Elements

Access the Image Attributes tab (select the Image Attributes tab on the Define Header - Image page).

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:

1. Enter the size of the image in pixels in the Height and Width fields.

2. In the Additional Attributes field, enter standard HTML tag attributes to refine the display of the image.

3. 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.

Adding and Editing Header and Footer Bar Elements

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:

1. 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.

2. 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

3. In the Divider Text field, enter text to use to divide elements on the bar.

4. Click the Save button.

5. 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.

6. Click the OK button to return to the Bar Detail page.

7. Click the Save button.

Adding or Editing Bar Element Items

Access the Bar Detail page (click the Edit Items button on the Bars tab).

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 PeopleSoft Applications Portal 9.1 PeopleBook: Portal and Site Administration, “Configuring Applications Portal,”Setting Up MCF For PeopleSoft Applications Portal.

To add and edit bar element items:

1. Click the Add button to add a new bar element item, or simply edit the existing items.

2. In the Seq# field, enter a number to specify the order in which the bar link or text displays on the bar.

3. 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 Applications Portal feature.)

   • *Link to Default Portal Home. (Default portal.)

   • Link to Feeds.

   • 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 Applications 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.)

4. 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.

5. 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: %Date (2009.12.31). Returns a date value equal to the current server date in the format year/month/day. This information is updated when the portal header or footer is refreshed. %Date (Wed, Dec 31, '09). Returns a date value equal to the current server date in the format day of the week/date/year. This information is updated when the portal header or footer is refreshed. %Portal. Returns the name of the portal through which the current service is being accessed. A string value is returned. %Time. Returns the time on the server when the page was created or refreshed. This information is updated when the portal header or footer is refreshed. %DBName. Returns the name of the current database as a String value. %UserDescr. Returns the description, if any, listed for the current user. The description is set up under the security user profile when the User ID is set up. %UserID. Returns a character string containing the user currently logged on. This is typically used to restrict access to records or fields to specific users.

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:

1. From the Image Source dropdown list, select a source. The valid options are:

   • Image Catalog

   • URL

2. 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.

3. 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: Appl Class. Application class in Application Designer. Catalog. Object from HTML catalog in Application Designer. External. HTML code is entered here. 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: AppPackageName:AppClassName:MethodName For example: EPPBR_BRANDING:HTMLWrappers:StockQuote
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.

Defining Divider Images

Use the Divider Image tab in the Bar Detail section of the Bars page 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:

1. From the Image Source dropdown list, select a source. The valid options are:

   • Image Catalog

   • URL

2. 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.

3. If the source is URL, in the Image URL field, enter the location of the icon image.

Refining Divider Images

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.

Overriding Bar Elements

Use the Site Overrides tab of the of the Bar Detail section on the Bars page 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.

Enabling HTML Area Elements in Headers and Footers

Use the HTML Area page 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: Appl Class. Application class in Application Designer. Catalog. HTML catalog in Application Designer. External. HTML code. 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: AppPackageName:AppClassName:MethodName For example: EPPBR_BRANDING:HTMLWrappers:StockQuote
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.

See Also

PeopleTools 8.52: System and Server Administration PeopleBook, “Using PeopleTools Utilities,” PeopleTools Options.

Defining Special Bar Elements (Headers Only)

Use the Special Elements page 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 the search option selected (Search, Scoped Search, or Global Search) 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:

1. Check the Enabled box to enable a special element, or clear the Enabled box to disable a special element.

2. 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.

3. In the Style Class field, use the Lookup button to select a style class, or manually enter one that is defined within the HTML.

4. 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.

5. Click the OK button to return to the Special Elements page.

6. Click the Save button.

Defining Search Option Elements

When you click the Edit Options button for a search option element (Search, Scoped Search, or Global Search) on the Define Header - Special Elements page, an options page displays where you can specify images and image attributes for the search option element. Note that the Label and Style Class fields display, as well as any values you have entered for them.

The following example uses the Scope Search Options element to illustrate defining search elements. Configuring PeopleSoft Applications Portal to use Application Search (the Global Search Option element), requires integration with a back-end search engine in addition to branding configuration. The details for Application Search configuration are covered in a different PeopleBook.

See Configuring PeopleSoft Applications Portal for Application Search.

To specify the image source for the Search Options Go button:

1. From the Image Source drop-down list, select a source. The valid options are:

   • Image Catalog. The source of the image is the Application Designer Image Catalog.

   • URL. The source of the image is a URL.

2. 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.

3. 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 images for the selected search option element.

The following example continues use of the Scope Search Options element to illustrate defining search elements. Configuring PeopleSoft Applications Portal to use Application Search (the Global Search Option element), requires integration with a back-end search engine in addition to branding configuration. The details for Application Search configuration are covered in a different PeopleBook.

See Configuring PeopleSoft Applications Portal for Application Search.

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 on the Define Header - Special Elements page, 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.

The following graphic shows the tab types assembled to construct homepage tabs.

The preceding graphic shows the following homepage tab option types.

To define homepage tab display options:

1. 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.

2. 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 Application Designer Image Catalog.

   • URL. The source of the image is a URL.

3. 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.

4. If the source is URL, in the Image URL field, enter the location the image.

5. Click OK to return to the Special Elements tab. Save your changes.

Refining Image 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.

Overriding Special Elements

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.

Creating Dated Versions of Headers and Footers

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 Branding Themes Versions.

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:

1. 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.

2. Click the Add button to add another version of the header or footer.

3. 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.

4. 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 Branding Themes Versions

PeopleTools 8.48 PeopleBook: Using PeopleSoft Applications, “Working with Pages,”Describing Page Action Options and Effective Dates.

Deleting Headers and Footers

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.

See Running Branding Queries.

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.

Defining Branding Overrides

This section describes how to:

• Override the homepage header.

• Override the homepage header image.

• Upload an image to the image catalog.

• Override the target page header.

• Overriding MyLinks.

• Overriding images.

• Overriding the homepage Help.

• Override homepage footers.

Pages Used to Override Site Branding and Workspace Elements

Overriding the Homepage Header

Access the Override Homepage Header page (From within a site: Portal Administration, Branding, Override Homepage Header).

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.

Overriding the Homepage Header Image

Access the Override Homepage Header - Image page (click the Override Options icon to the right of the custom image on the Override Homepage Header page).

Note. You must be in Correction mode to make changes to this page.

Advanced Options

Use the Advanced group box to specify additional information for the image.

Uploading an Image to the Image Catalog

Access the Image Catalog page (click the Upload New Image link on the Override Homepage Header - Image page).

Note. You must be in Correction mode to make changes to this page.

1. Enter the name, description, and file type of the image you are uploading.

2. 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.

3. Click Upload and the system uploads and saves the image to the Image Catalog.

Overriding My Links

Access the Override Homepage Header - My Links page (click the Override Options icon to the right of the My Links drop-down list on the Override Homepage Header page) or the Override Target Page Header - My Links page (click the Override Options icon to the right of the My Links drop-down list on the Override Target Page Header page).

Note. You must be in Correction mode to make changes to this page.

Overriding the Homepage Help

Access the Override Homepage Header - Homepage Help page (click the Override Options icon to the right of the Homepage Help link on the Override Homepage Header page).

Note. You must be in Correction mode to make changes to this page.

Overriding Bars

Access the Override Homepage Header - Bar page (click the Override Options icon toward the right end of the bar on the Override Homepage Header 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

Overriding the Target Page Header

Access the Override Target Page Header page (from within a site: Portal Administration, Branding, Override Target Page Header).

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.

See Overriding the Homepage Header.

Overriding Homepage Footers

Access the Override Homepage Footer page (from within a site: Portal Administration, Branding, Override Homepage Footer).

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.

Defining Overrides for Menu Styles

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 to define image overrides.

Common Elements Used to Define Menu Styles

Pages Used to Define Menu Overrides

Understanding Menu Overrides

The Define Menu Overrides page enables you to assign overriding styles and images for a restyled version of the default PeopleSoft Applications 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 to menu images.

Previewing Menu Overrides

Access the Define Menu Overrides page (Portal Administration, Branding, Define Menu Styles, Define Menu Overrides).

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:

1. 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.

2. Change or enter overriding values in the other sections on the page.

3. Click the Refresh button. The new overrides are reflected in the preview section.

4. To retain the selections, click the Save button.

Defining Menu Style Sheet Overrides

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.

Defining Background Style and Image Overrides

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.

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.

Assembling Branding Themes

This section lists pages used and discusses hot to assemble themes.

Page Used to Assemble Themes

Assembling Themes

Access the Assemble Branding Theme page (Portal Administration, Branding, Assemble Themes, Assemble Branding Theme).

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.