Configuring and Assembling Branding Themes

This chapter discusses how to:

• Configure headers and footers.

• Specify images for headers and footers.

• Define menu styles.

• Assemble branding themes.

Configuring Headers and Footers

This section describes how to:

• Choose headers and footers with which to work.

• Specify images for headers and footers and modify their HTML attributes.

• Select link bar elements for headers and footers and modify their HTML attributes.

• Specify and enable HTML elements used in a header and footer.

• Select 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.

Common Elements Used to Configure Headers and Footers

Pages Used to Configure Headers and Footers

Choosing Headers and Footers

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:

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.

   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.

Specifying Header and Footer Images

Use the Images tab on the Define Header or Define Footer 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.

Selecting Image Elements

To select image elements used in a header or footer:

1. Access the Define Header or Define Footer page.

2. Click the Images tab.

3. Enable images for the header or footer.

   In the Image Detail section, click the General tab, if not already selected.

   Note. Required elements display checked and grayed out.

   1. Check the Enabled box for each element for which you want to display an image.

   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

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. In the Image Attributes field, enter standard HTML tag attributes to refine the display of the image.

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

Check the Overridable box 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.

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:

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

   • Link to MCF/CTI Console. (PeopleTools feature.)

   • Link to Menu Item. (Portal content reference.)

   • *Link to Personalize Content. (homepage Personalization, Content page.)

   • *Link to Personalize Layout. (homepage Personalization, Layout page.)

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

   • *Link to Sign Out. (Executes log off.)

   • 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 Worklist. (PeopleTools Workflow feature.)

   • Plain Text.

   • *Text from Greeting. (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.

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 (2003.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, '03). 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 wish 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.

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.

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 PeopleSoft Application Designer. Catalog. Object from HTML catalog in PeopleSoft 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 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:

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.

Overriding Bar Elements

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, check the Overridable box.

Enabling HTML Area Elements

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: Appl Class. Application class in PeopleSoft Application Designer. Catalog. HTML catalog in PeopleSoft 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.

Defining Special Bar Elements (Headers Only)

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:

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 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:

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

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 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. The images shown are example images from the Blue Curve Header. 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 PeopleSoft 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 Special Element Attributes

Use the Item 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.

Overriding Special Elements

Use the Site Override tab to define those elements which portal sites can override.

Check the Overridable box 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 Branding and Effective Dates.

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

Branding and Effective Dates

PeopleTools 8.46 PeopleBook: Using PeopleSoft Applications, "Working with Pages," 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 Overrides for Menu 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.

This section describes how to:

• Preview menu pagelet overrides.

• Select menu style sheet overrides.

• Select menu style and image overrides.

• Select folder style and image overrides.

• Select target link style and images overrides.

• Select other menu image overrides.

Common Elements Used to Define Menu Styles

Pages Used to Define Menu Overrides

Previewing Menu Overrides

You can preview and test menu overrides using the Refresh button under the Instructions and Preview section of the Define Menu Overrides page.

To preview menu pagelet overrides:

1. Access the Define Menu Overrides page.

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

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

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

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

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.

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.

Selecting Folder Style and Image Overrides

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.

Defining Target Link Style and Image Overrides

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

Defining Other Image Overrides

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.

Assembling Branding Themes

After you have completed configuring the header, footer, and navigation menu, assemble the theme.

Page Used to Assemble Themes

Assembling Themes

Access the Assemble Branding Theme page.

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.