Developing Custom Branding Themes

This chapter provides an overview of custom branding theme development and provides examples that demonstrate how to:

• Create and configure custom branding headers.

• Use branding and portal registry attributes to create custom homepages.

Understanding Developing Custom Branding Themes

This section provides overviews and discusses the:

• Development process for custom branding themes.

• Custom branding development considerations.

Development Process Overview for Custom Branding Themes

The process for creating custom branding themes is as follows :

1. In Application Designer, create an HTML object for branding component.

2. Identify syntax in your custom HTML that can be replaced branding system elements.

3. Replace identified HTML Syntax with bind variables.

4. Configure the component (header, footer, menu and so forth).

5. Assemble the components into a theme.

6. Assign the theme.

7. Deploy the theme to production.

Assembling theme components, assigning themes and deploying themes to production are discusses elsewhere in this PeopleBook.

See Understanding Enterprise Portal Branding

See Assembling Branding Themes, Previewing, Selecting and Assigning Branding Themes, Components, Images, and Style Sheets, Deploying Branding Themes.

Custom Branding Development Considerations

This section discusses items to consider when you are developing branding themes.

Attributes and Styles

Once you have an HTML layout ready with the predefined system elements in place, the actual configuration of headers and footers is quite straightforward—you set the actual values for images, HTML, links, and so forth in the header and footer components.

To refine your header or footer through the configuration, set the attribute and style class fields on the header and footer pages. This will give you greater flexibility to manipulate the look and feel using table data without changing database HTML objects.

The following table illustrates how data entered on the header and footer definition pages and stored in the attribute and style class fields is applied when generating the final header and footer HTML. For example, if you set the Image Attribute field value for the Image system element to valign=”top”, the HTML placement value will be <img valign=”top”>.

The list of HTML objects used in the process is for reference only. You should be able to achieve your desired look and feel by changing the style classes and the layout HTML object.

Note. Do not change the listed HTML objects. Any changes will be customizations and will impact future upgrades.

Stylesheets

The user homepage usually includes a header, footer, menu navigation pagelet, and a few homepage pagelets. There are several stylesheet references when the homepage is generated. They are applied in the following sequence:

1. Stylesheet specified for the homepage pagelets, if any of the displaying homepage pagelets is an iPage. This is set in the page properties in Application Designer.

2. Stylesheet defined in the Define Menu Styles component, if the Enterprise Menu pagelet is on the homepage.

3. Stylesheet defined for the PeopleTools standard header.

4. Stylesheet defined in the theme definition.

You can have conflicting style classes within all of these stylesheets used in the template. For example, if you have a style class named MY_STYLE_CLASS in the first stylesheet and also have a style class named MY_STYLE_CLASS in the fourth stylesheet, there may be conflicting styles in the resulting homepage. Because the conflicting styles are defined at the same level, the one applied later in the sequence takes precedence.

In the homepage template, the stylesheet specified in the branding theme definition always takes precedence over competing stylesheets. For example, PSPAGE in the stylesheet EPPSTYLEDEF includes two pixels for the left margin. To override the left margin, PSPAGE is included in the blue theme stylesheet EPPBRBLUESTYLEDEF, but the left margin has been changed to zero.

You can also have conflicting styles in your target content template. In a page-based template, the stylesheet associated with the page used for the target content always takes precedence over competing stylesheets. In a frame-based template, the stylesheet specified in each frame takes precedence for the content within the frame.

In addition to the specifics mentioned here, all the rules of inheritance and conflicting styles of cascading stylesheets still apply. Keep your custom stylesheet definition as clean as possible and include only the style classes needed to avoid style conflicts.

Menu Navigation

PeopleSoft Enterprise Portal has its own version of enterprise menu navigation. The menu styles provided by branding apply to the Enterprise Menu pagelet only. You can change the look and feel of the menu navigation by specifying images and styles. While the following three style classes are also used by the menu, they are not configurable through the same mechanism:

PTPAGELET—Style class for the pagelet.

PTPAGELETHEADER—Style class for the pagelet header.

PTPAGELETBODY—Style class for the pagelet body.

These style classes are hard-coded for all homepage pagelets that include the Enterprise Menu pagelet in the left navigation. To vary the pagelet styles by branding theme, add the style classes with different style properties to the stylesheet included in the theme definition. Another option is to add the style classes to the stylesheet included in the menu style definition, and whichever theme uses the menu style will have the new styles.

Homepage Hyperlink Colors

To control the hyperlink colors on homepage pagelets, the PSHYPERLINK style class must be in the stylesheet. You will modify this styleclass to change hyperlink colors. Remember to modify the pseudo-classes listed on the property pages for PSHYPERLINK.

You should also specify default font attributes for the <A> and <TD> tags in your own external stylesheet or an embedded stylesheet at the top of a layout HTML object. This provides font attributes for text if you don’t set style classes for certain elements. For example:

<STYLE TYPE="text/css"> td { font-family:arial; font-size:9pt; } a:visited { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration: underline } a:link { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration: underline } a:hover { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration: underline } a:active { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration: underline } </STYLE>

Example: Using Branding and Portal Registry Attributes to Create Custom Homepages

This section provides an overview and example for using branding and portal registry attributes to create custom homepages, and discusses how to:

• Override the three-column layout.

• Override the pagelet layout.

Understanding Using Branding and Portal Registry Attributes

The following homepage was created using PeopleSoft Enterprise Portal branding and portal registry attributes.

The homepage includes the following elements:

• Branding header created using theme assignment.

• Branding menu navigation body created using theme assignment.

• Pagelets of different colors in different columns created by overriding the HTML PORTAL_HP_3COL_LAYOUT three-column layout.

• Different pagelet layout for the Workgroup Content pagelet created by overriding the HTML PORTAL_HP_COMPONENT pagelet.

Overriding the Three-Column Layout

Access the Content Reference Attributes section of the Content Ref Administration page. Select PeopleTools, Portal, Structure and Content, Portal Objects, Homepage, Tabs. Then, select the page where the overrides will apply.

Override the three-column layout by entering an attribute value of PORTAL_HP_3COL_LAYOUT_NEW. Ensure that the Translate option is clear.

For the example in this section, in the new HTML.PORTAL_HP_3COL_LAYOUT_NEW layout, column three (PLANET_COL3) is set to use a background color to differentiate it from the first and second columns.

You can also vary pagelet header style by column. In this example, assuming the PORTAL_HP_COMPONENT is the HTML object used for all pagelets and that PTPAGELETHEADER style class is used as the pagelet header, you can use ID and DIV tags within each column to vary the column header styles.

The following is the content of the new PORTAL_HP_3COL_LAYOUT_NEW, which we use to override the default PORTAL_HP_3COL_LAYOUT. The code in bold illustrates the way in which you can use different colors in different columns.

<style type="text/css">
#COL1 TD.PTPAGELETHEADER  {  background-color: white; text-align: left}
#COL2 TD.PTPAGELETHEADER  {  background-color: white; text-align: left} 
#COL3 TD.PTPAGELETHEADER  {  background-color: white; text-align: center; color:⇒
#3399cc}
</style>

<table width="100%">
   <tr>
      <td width="28%" valign="top" class="PLANET_COL1">
          <div id="COL1">
          %BIND(:1)
          </div>
      </td>
      <td width="6">
      </td>
      <td width="32%" valign="top" class="PLANET_COL2">
          <div id="COL2">
              %BIND(:2)
          </div>
      </td>
      <td width="6">
      </td>
      <td width="32%" valign="top" class="PLANET_COL3">
          <div id="COL3">
              %BIND(:3)
          </div>
      </td>
      </td>
      <td width="6">
   </tr>
</table>

Overriding the Pagelet Layout

If you want to override the layout of only the Workgroup Content pagelet in the second column of the homepage, you do so by setting the non-translatable attribute (clearing the Translate option) on the content reference for the pagelet itself.

You can also vary pagelet header style by column. In this example, assuming the PORTAL_HP_COMPONENT is the HTML object used for all pagelets and that PTPAGELETHEADER style class is used as the pagelet header, you can use ID and DIV tags within each column to vary the column header styles.

Note. If you want to override the HTML object used by the pagelet, you are not required to use PTPAGELETHEADER

HTML.PTPPB_HP_COMP_NOHEAD is the custom HTML object to use to override the default HTML used in PORTAL_HP_COMPONENT for the Workgroup Content pagelet.

In the Content Workgroup pagelet HTML object HTML.PTPPB_HP_COMP_NOHEAD, remove the pagelet header and add an additional image using %BIND12. Define the image value on the Content Reference Attributes section of the Content Ref Administration page for IMAGE_BIND_12.

The following example shows the HTML object code for the Content Workgroup pagelet. The code in bold illustrates the modifications made to the HTML described in this section.

<!-- Begin Pagelet=%bind(:5) -->
<!-- PageletState=MAX -->
<li id="ptpgltli_%bind(:5)" class="pthpli %bind(:6)">
<table id="%bind(:5)" class="PTPAGELET" width="100%" cellpadding="0" cellspacing=⇒
"0" border="1" summary="">
   <tr style="display:none;">
      <td>
         %bind(:2)
      </td>
   </tr>
   ​<tr>
      <TD CLASS="PLANETICONHEADER">
        <!--image 12-->
        <IMG SRC="%BIND(:12)" NAME="workgroup" border="0">
      </TD>
   </tr>
​   <tr id="ptpgltbody_row_%BIND(:5)">
      <td id="ptpgltbody_%bind(:5)" class="PTPAGELETBODY" width="100%">
         <Pagelet Name="%bind(:2)">
            <Source Pagelet="%bind(:4)" href="%bind(:3)" />
         </Pagelet>
      </td>
   </tr>
</table>
</li>
<!-- End Pagelet=%bind(:5) -->

See Also

Enterprise PeopleTools 8.50 PeopleBook: PeopleTools Portal Technology PeopleBook, “Administering Content References”