Quickr Theme Customization and Branding – J2EE Architecture by bestt571


More Info
									Quickr Theme Customization and Branding – J2EE

                                          Deepak Khandelwal
                                          Shigehisa Okamoto
                                           Catherine Tchong
Theme Customization and Branding – J2EE Architecture
This article describes how to customize the out-of-the-box standard 8.1 Quickr Theme, and
to modify it to better match your organizations’ corporate identity.

As a starting point, we begin with this “look and feel” for Quickr, namely the standard 8.1
Quickr place theme.

We illustrate how to arrive at a customized example Quickr place for the fictitious ITSO
Millenia Corporation, shown in the image below.

Figure a.1 – Customized theme developed in this example

This article provides an analysis of the Quickr page layout and themes which make up a
Quickr page, then provides a step-by-step instruction on how to complete this customization.

3.1 Goals and scope of theme customization for this example
Quickr themes allow you to add your unique graphic identity and look and feel to your
application, while the Quickr server handles all the functionality.

Within this section of the wiki, accomplish the following:
   • We first explain what a theme is and which elements it contains, including the
       stylesheet files, java script files, images, color palette and layout components such as
       HTML and JSP. We will also include reference information for Quickr skin.
   • We then walk through the steps to get an existing theme modified, and how to upload
       it once the modification process is complete. As a context for the example, we
       discuss the process we used when creating the theme for our sample company
       ITSOMillennia Consulting.
   • In the last section, deployment of customized theme using XMLAccess and admin
       console is provided.

3.2 What is a Theme

A Quickr theme controls the look and the layout of a TeamPlace: its fonts and background
colors; how an element looks when it is selected; where the navigational controls appear; and
so on. When you create a TeamPlace, you can select a theme by choosing from a gallery of
predefined themes. You can also modify an existing theme or create a new theme. Using a
custom theme, you can give your TeamPlace a strong brand identity, or design it to look like
other corporate sites. Finally, by customizing the theme, you can supply additional
functionality as well as provide a unique look for your TeamPlace.

3.3 The Quickr theme layout architecture

This section provides an overview of the Lotus Quickr theme and its artifacts. By convention,
WebSphere Portal themes are broken down into four subfolders: colors, icons, images, and js
(javascript). Each of these folders contains a set of theme files as suggested by the folder
name. Essentially, a theme includes four main elements: Java Server Pages, stylesheets,
script files, and theme graphics that include image and icon files.

3.3.1 Explanation

The main theme fragments are:

   o   Theme Banner
   o   Page header
   o   Top Navigation row
   o   Page area (Portlet render area)
   o   Page footer
Figure 1: Theme Layout

So, the overall structure can be defined as :

                      Breadcrumb Section

                           Page Header

                      Top Navigation Tabs

                             Page Area

                           Page Footer

Figure 2: Theme Layout

3.3.2 Layout Components : Theme JSP

Java Server Pages are text documents that contain static data and dynamic data. Static data
can be expressed in any text format where dynamic data is used to construct the dynamic
content of the page. Lotus Quickr JSP files are located at the root of the QPG folder located
in the WebSphere Portal themes directory at:
The theme is composed of a set of files that consist of a parent JSP file and subsequent
fragments of the parent JSP. The fragment JSPs are included from within the parent JSP, and
by convention, they are saved with JSPF extensions. For most requests, the portal page is
rendered starting with Default.jsp in the themes directory unless the request has been
modified by a newWindow="true" parameter. In this case, the page is rendered using
Plain.jsp. Following figure shows an overview of all the theme files and how they are laid out
with respect to the parent file and to each other.

   Head         Banner                                    Top nav      Side nav       Footer

                              Global        Header
  Toolbar      Crumbtrail
                              actions       content


Figure 3: Theme file hierarchy

Default.jsp is the parent JSP file that includes the JSP fragments (denoted by the JSPF
extension) and tag libraries that are needed to render the theme elements. The fragments are
compiled into the servlet for Default.jsp. Whenever you make a change to a fragment, resave
Default.jsp to force the servlet to recompile. Resaving Default.jsp ensures that the servlet
picks up the latest modifications to the fragments.

The head.jspf file is the first fragment included in Default.jsp. This file contains header
elements of an HTML page. In the Lotus Quickr theme, all the stylesheets and client-side
script files are linked from head.jspf. The page title and text direction are also set in this file.
For better performance, link any additional files added to the theme in head.jspf. This
approach consolidates all downloads to the beginning of the page and avoids retrieval in the
middle of page rendering.

The banner.jspf file, as suggested by its name, displays the page banner shown in figure
below. The banner includes the product logo, search box, and action links to login and
logout. It also includes the banner breadcrumb that displays the Back To Home button, a
button that lets you expand or compact the screen width, and Lotus Quickr help. Like
Default.jsp, the banner also includes fragment files that are compiled in banner.jspf.

These fragments are:
banner_toolbar.jspf. This fragment renders the toolbar at the top that includes the product
logo and search control box and links to login and logout.
banner_searchControl. This is a subfragment of banner_toolbar.jspf. It renders the search
control box at the right end of the banner toolbar.
banner_crumbtrails.jspf. This fragment renders the Back to Home link on a theme page.
banner_globalActions.jspf. This fragment contains the code that points to the links to
expand and compact the page width and to Lotus Quickr help.
Figure 4: Page banner

This section of the theme, contained in pageHeader.jspf and shown in the figure below,
displays the application header. In this JSP, you can find the source that retrieves the
application name and favorite status. The Customize link that is displayed at the right end of
the application header is also rendered in this fragment. The Customize link displays a
dynamic palette that is rendered with pageHeaderContent.jspf and shown in figure 6.

Figure 5: Page Header

Figure 6: Customize palette

The pageHeaderContent.jspf file contains the source that renders the customize shelf. The
customize shelf provides the ability to add components, members, and new pages or to
modify the properties for an existing place.
The topNav.jspf file is a simple and short file that renders the tabbed navigation row that
allows users to switch between different components in the same application; see figure 8.
The fragment uses different styles to differentiate between the selected and unselected tabs.

Figure 7: Tabbed navigation

The sideNav.jspf file renders subpages created under the top-level navigation node in a place.
By default, child nodes to the parent page in a place are displayed in side-tree navigation. In
a later section of this article, we discuss an example to change the default styles to a
horizontal navigation style instead.

The footerLarge.jspf file renders the section at the bottom of the page that contains quick
links to commonly accessed areas of Lotus Quickr; see figure 8 below. The links are internal
links to portal pages, and they appear in an expanded or a collapsed state.

Figure 8: Footer

3.3.3 Images

Images are used for icons and tools in the theme pages. These files are placed in the images
folder at the root of the theme directory at:

When you customize a new theme, you can modify the existing image file or create new ones
and place them in the images directory.

Image files are spread across various subfolders that are created to keep the image files
grouped with respect to various sections of the page.

3.3.4 Stylesheets

The layout content is contained in the theme JSP files, but the presentation details of the
content are defined in stylesheets. Lotus Quickr stylesheets are located in the same folder
with the theme JSP files at:


Similar to the theme JSPs, the stylesheets are broken into several fragments that are included
from the parent stylesheet named styles.jsp. Stylesheets are saved as JSP files to
accommodate differences in locale and browser support. Similar to default.jsp, the parent
stylesheet must be recompiled to pick up the updates to the fragments included in it. Here is a
list of stylesheets and a brief description of the contents of each file:

   •   styles_cacheSettings.jspf. Used to set the cache headers for all CSS JSPs.
   •   styles_extension.jspf. Contains theme extension styles.
   •   styles_help.jspf. Contains the styles used to render Lotus Quickr help content.
   •   styles_ibm.jspf. Contains styles for the WebSphere Portal administrator portlet page.
   •   styles_ibmportlet.jspf. Exclusive to the Lotus Quickr theme, contains styles used by
       the document library and web content management components in Lotus Quickr.
   •   styles_oobQuickr.jspf. Contains styles for the My Places Navigation portlet.
   •   styles_people.jspf. Contains styles in the person card.
   •   styles_portlet.jspf. Contains the default styles that are shipped with the IBM theme.
   •      styles_qpg.jspf. Contains styles for Lotus Quickr administrative portlets only.
   •      styles_rules.jspf. Sets browser- and locale-specific CSS rules.
   •      styles_theme.jspf. Contains general theme styles that are used in the theme files and
   •      styles_themeSolo.jspf. Is included when the toolbar render is turned off. Adjusts the
          page elements to display well without the toolbar.

3.3.5 Color palette

A color palette allows you to set the color scheme of the theme. In WebSphere Portal, the
color palette is defined by a property file that contains key value pairs holding references to
colors and graphics used in the theme. This is a useful concept that lets users change the
color scheme of the theme without making any changes to the stylesheets. You can assign a
color palette to an entire theme or to a single page depending upon the design requirements.
Refer to the section, "Using color palettes in the theme," in the WebSphere Portal Infomation
Center (See URL below) to get details on creating, using, and referencing color themes in
WebSphere Portal.


Out of the box, the QPG theme uses the default color palette. You will reuse it in this

3.3.6     Theme policy

A theme policy is an XML file that controls how various parts of the theme are rendered on a
page. This design concept allows you to display a single theme in multiple ways.

 Banner                         Tool bar                                                  Portal page hierarchy
   Level1    Level1   Level1             Top nav
                                Banner                           Tool bar
 Level2         Contents                                                                                 Level3
  Side                           Level1     Level1     Level1             Top nav                 Level2
                                   Level2     Level2   Level2
Single TopNav
                                                                 Banner                       Tool bar
                                Level3        Contents
                                 Side                            Level1
                                 nav                             Level1
                               Double TopNav                     Level2        Contents

                                                                SideNav only
Figure 9: Theme Policies
Theme policies are an important part of the theme and theme customizations. Lotus Quickr
installation is shipped with two policies used to render the Lotus Quickr pages:
QuickrMyPlaces and QuickrSpaces.

To set up a new policy, you must create and install it using the XML configuration utility as
described in the WebSphere Portal Information Center. (See the URL provided below.)


3.4 The Quickr skin

Skins represent the wrapper that goes around the components. They are made of row
containers, column containers, and controls. The containers act as a wrapper for the inside
portlet application, and the control section renders portlet controls.

By default, Lotus Quickr uses QuickrSkin, which was designed specifically to work with
Lotus Quickr themes and pages. In the "Getting Started" section of this article, we created a
custom_skin from the default Lotus Quickr skin. This skin directory contains three main JSP

UnlayeredContainer-H. This is the row container.
UnlayeredContainer-V. This is the column container.
Control.jsp. This renders the controls for the portlet application.

3.5 Millennia theme customization

The following section describes how to proceed with the customization of the Millennia

3.5.1 Creating Millennia theme : Introduction

To make modifications to the theme, you need administrative access to the Lotus Quickr
server. The Lotus Quickr theme is shipped in a folder named “QPG” in the WebSphere Portal
theme directory. The section that follows describes how to create custom themes and skins
from Lotus Quickr and how to apply them to the desired team places. It also describes the
steps you take to enable JSP reloading on the custom theme. This approach helps save
development time when you make changes to the theme.

Create a custom skin

Lotus Quickr uses “QuickrSkin” as the default skin for the “QPG” theme. If you choose, you
can create a new skin that is more suited to your custom environment. The skin files are
located here :

Use the default skin called “QuickrSkin” as the starting point for your custom skin. To do
this, copy the existing “QuickrSkin” folder to a new folder and rename that folder
custom_skin. You can now set this skin as the default skin for your custom_theme.

Create a custom theme

To create your custom theme, first make a copy of the Lotus Quickr theme folder and rename
that folder to a name that is appropriate to your theme. The WebSphere Portal theme files are
located here:


You need to make a copy of the “QPG” folder and paste that copy back into the WebSphere
Portal theme folder at the above location. After pasting it, you can rename the folder
custom_theme (in this case, “Millennia”). You are now ready to set the custom_theme on the
desired places in your workspace.

Set the theme to a place

Your next step is to register your custom_skin and custom_theme with WebSphere Portal,
and then to set them both on the desired team places. To do this, you first need to create a
new theme in WebSphere Portal and point that to the custom_theme folder. Registering new
skins and themes will be done in Site Administration – Advanced Administration – Themes
and Skins.
Optional : If you created a custom_skin, first register your new skin by clicking the Add
New Skin button on this page. See figure 10.

Figure10. Adding a new skin

You are now ready to register your theme and set your custom_skin as the default skin for
your custom_theme. Choose Site Administration – Advanced Administration – Themes and
Skins – Add new theme.

The directory name listed on the WebSphere Portal site administration page must match the
folder name that you created in the WebSphere Portal theme directory. In this example, the
new theme name and directory name are both set to custom_theme. At this point, you have
the option to add any skins desired by your theme, and then to set the custom_skin as the
default skin. See figure 11.

Figure 11. Adding a new theme and setting the default skin on a theme

After you have created the new theme and registered it in WebSphere Portal, you can apply it
to one or more places. Choose Site Administration – Advanced Administration – Portal User
Interface – Manage Pages, and then follow these steps. See figure 12.

  1.   Click the content root under the My Pages header on the left side.
  2.   In the list of pages that appear on this page, navigate to your place under Application
       Root or search for it by typing its name in the search box.
  3.   Click the Edit Page properties icon for the desired place.
  4.   Select custom_theme from the drop-down box under theme header, and then click OK.
Figure 12. Setting the theme on a place

At this point, you are ready to start applying your customization to the custom_theme.

Enable automatic JSP reloading

To view changes to your theme JSPs without restarting WebSphere Portal, you can force the
application server to automatically check for new versions of JSPs. Even though this is ideal
for development and testing purposes, you should disable automatic JSP reloading in a
production environment. Enabling automatic reloading forces the IBM WebSphere
Application Server engine to check the file system for updated files on every page refresh
and slows down the overall performance.

Follow these steps to enable automatic JSP reloading:

    1.   Open the file
    2.   Find the entry shown in Listing 1 in this file.

Listing 1. ibm-web-ext.xmi file
 <webappext:WebAppExtension xmi:version="2.0"
           xmlns:commonext="commonext.xmi" xmlns:common="common.xmi"
           xmi:id="IBM_WPS_Ext" reloadInterval="3" reloadingEnabled="false"
           fileServingEnabled="true" directoryBrowsingEnabled="false"
           serveServletsByClassnameEnabled="false" preCompileJSPs="false">
    3.   Change the value for reloadingEnabled to true.
    4.   Save the file.
    5.   Restart WebSphere Portal.

While this is ideal for development and testing purposes, automatic JSP reloading should be
disabled in a production environment because of performance issues. (See the URL below)


3.5.2 Customizing the “Millennia” theme

Start image and Goal image

As a starting point, you will begin with the “QPG” default theme and, after performing the
necessary customization steps, arrive at the customized "Millennia" theme, as shown in
figure 13, below.

Figure13. Start image “QPG” theme and Goal image “Millennia” theme

You could settle the difference between the two by customizing. You notice the difference of
colors, the structure of Banner part (“Millennia” has two lines) and navigation style
(“Millennia” look like the SideNav), See wire frame figure 14.
Figure14. Structural difference at wire-frame image

Customizing Lotus Quickr theme policy

We will create a new theme policy, starting from the default Lotus Quickr one. You can
export default Lotus Quickr theme policy using XMLAccess. See Listing 2.

For more information on XMLAccess, please refer to

Listing 2. ExportThemePolicy.xml
 <?xml version="1.0" encoding="UTF-8"?>
 <request xsi:noNamespaceSchemaLocation="PortalConfig_1.4.xsd"
  create-oids="true" type="export"
     <portal action="locate">
         <policy-node action="export" label="WebPage"
                 type="theme" path="QuickrSpaces">

Locate this file at c:\temp for example (in case Windows), then in command prompt,
< portal_server_root>\bin\xmlaccess.bat –url <Quickr_hostname:port>/lotus/config –in
c:\temp\ExportThemePolicy.xml –user <admin_userid> -password <admin_password>

This command will create c:\temp\exported_QuickrSpaces_ThemePolicy.xml file. You can
rename this file to QuickrSideNavOnly_ThemePolicy.xml and edit it to perform the
following modifications :(edit to Bold value) :

Listing 3. Editing QuickrSideNavOnly_ThemePolicy.xml
 <?xml version="1.0" encoding="UTF-8"?>

 <policyList xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:noNamespaceSchemaLocation="Policy.xsd" >
     <policyValue Name="Type" Factory="com.ibm.wps.policy.parse.StringFactory"
     <policyValue Name="Description"
 Factory="com.ibm.wps.policy.parse.StringFactory" >
       <value>Side Navigation Only Theme Policy</value>
     <policyValue Name="PznType"
 Factory="com.ibm.wps.policy.parse.StringFactory" >
     <policyValue Name="topNavigationStopLevel"
 Factory="com.ibm.wps.policy.parse.IntegerFactory" >
     <policyValue Name="renderTopNavigation"
 Factory="com.ibm.wps.policy.parse.BooleanFactory" >
     <policyValue Name="sideNavigationStartLevel"
 Factory="com.ibm.wps.policy.parse.IntegerFactory" >
     <policyValue Name="topNavigationStartLevel"
 Factory="com.ibm.wps.policy.parse.IntegerFactory" >
     <policyValue Name="Title" Factory="com.ibm.wps.policy.parse.StringFactory"
Save your custom XML theme policy file .

You can import your new theme policy using the following XML file. See Listing 4.
Listing 4. AddThemePolicyNode.xml
 <?xml version="1.0" encoding="UTF-8"?>
 <request xsi:noNamespaceSchemaLocation="PortalConfig_1.4.xsd"
  create-oids="true" type="update"

     <portal action="locate">
         <policy-node action="update" label="WebPage" type="" path="">

You could execute XML import at WebSphere Portal Admin page. Choose Site
Administration – Advanced Administration – Portal Settings – import XML, and then follow
these steps. See figure 15.

    1.    Select C:/temp/AddThemePolicyNode.xml for Directory: field.
    2.    Click the Import button.

Figure15. Import XML to add new theme policy

After you have installed the new policy in WebSphere Portal, it can be set on a page by
accessing Page properties under Manage Pages in Portal Site Administration. To do this,
follow these steps (see figure 16):

  1.     Search for the Application root under Manage Pages, Select Page > Content Root
         (You may have to turn several pages).
  2.   Click the Edit page properties icon for the Application Root.

Figure 16. Application Root under Manage pages

Figure 17. Setting theme policy on a page

  3.   The desired policy “QuickrSideNavOnly” can be selected from the drop-down box
       under Navigation Type on this page as shown in figure 17.

You will find the style has changed to “Quickr side navigation only” accessing Quickr place
page (figure 18).
Figure 18. Quickr Side Navigation Only style

Note: In our theme customization example (Millennia theme), we used the navigation
properties of theme policy to easily switch from one type of navigation to another. Changing
the theme policy for the Application Root page will set the theme policy for all Quickr places
(specific themes can be set on each Quickr place, while all Quickr places inherit from the
same theme policy).
Theme policies can be set on the Application Root page and a few other pages (homepage for
If you want to use different navigation styles for different places, you have to build themes
that are independent from the theme policy from the navigation point of view.

Page background

You can update the page background image easily using the color palettes. The color palette
used by Lotus Quickr is default.properties.

To update your theme background, follow these steps:

  1. Open default.properties located at custom_theme/colors.
  2. Find property bodyMarginBackground = url(./colors/qpg/body_background.gif).
  3. Update this property to point to your custom background image:
      bodyMarginBackground = url(./colors/custom/body_background_ml.jpg)
  4. Background of Toolbar and Body should be transparent. So update are following;

Listing 5. Update in colors/default.properties

 bodyMarginBackground=url(./colors/qpg/body_background.gif) repeat-x
 toolbarBackground=#FFDB4A url(./colors/qpg/toolbar_background.gif) repeat-x


 bodyMarginBackground=url(./colors/custom/body_background_ml.jpg) repeat-x
  5.   Next, resave styles_rules.jspf, styles.jsp, and Default.jsp. This step updates the
       timestamps on all the files and forces the theme to recompile the files and to read the
       color palette into the theme again. You should also check web browser cache must be
       cleared. After these changes occur, the page background is updated to look similar to
       the one shown in figure 19.

Figure 19 After page background is updated

Theme banner

The next step is to update the logos in the theme designed for the custom team place. Lotus
Quickr banner table structure also be target for customization. Follow the steps listed here to
tailor the banner to your custom environment.

Figure 20 displays the banner logo highlighted in pink. You can update this to a custom logo
by making modifications in the banner_toolbar.jspf file that is located in /custom_theme.
Figure 20. Banner logo

Find the text shown in listing 6. and update the file path parameter value to point to your
custom logo file (in Bold).

Listing 6. Banner title <div> element in banner_toolbar.jspf

 <div class="bannerTitle">
       <img alt="Lotus Quickr" title="Lotus Quickr" src='<portal-
       file="colors/${colorPalette}/toolbar_logo.gif"/>' />


 <div class="bannerTitle">
       <img alt="Lotus Quickr" title="Lotus Quickr" src='<portal-
       file="colors/custom/toolbar_logo_ml.gif"/>' />

The banner is updated to look like the image shown in figure 21.

Figure 21. The Millennia banner

Another row table is needed for search bar, login/logout and user profile link. It can be
modified by <div> tag.

In the styles_theme.jspf file located at /custom_theme root, add original class .toolbar-second
as shown in listing 7.

Listing 7. Toolbar-second style definition in styles_theme.jspf

 .toolbar-second {
       background-color: #FFCC66;
       border: 1px solid;
       border-top-color: ${colors.bodyBorder};
       border-bottom-color: ${colors.bodyBorder};
       border-right-color: #FFCC66;
       border-left-color: #FFCC66;
For the orange color shown here, use #FFCC66. We recommend that you collect information
about updated colors for new theme in advance. (See figure 22 for specific color information
used in this there customization.)

Figure 22. Update color information in Millennia theme

Then update again the banner_toolbar.jspf file as shown in listing 8.
Listing 8. Add <div> element and comment out toolbarShadow in banner_toolbar.jspf

 <div class="bannerTitle">
       <img alt="Lotus Quickr" title="Lotus Quickr" src='<portal-
 logic:urlFindInTheme file="colors/custom/toolbar_logo_ml.gif"/>' />


 <c:if test = "${themePolicy.renderUserActions}">

 <portal-logic:if loggedIn="yes">
       <div class="clearing"></div>
 <div class="toolbarShadow"><!-- IE hack --></div>


 <div class="bannerTitle">
       <img alt="Lotus Quickr" title="Lotus Quickr" src='<portal-
 logic:urlFindInTheme file="colors/custom/toolbar_logo_ml.gif"/>' />


 <div class="clearing"></div>
 <div class="toolbar-second">

 <c:if test = "${themePolicy.renderUserActions}">

 <portal-logic:if loggedIn="yes">
       <div class="clearing"></div>


 <div class="toolbarShadow"><!-- IE hack --></div>

The banner should now look like the one shown in figure 23.

Figure 23. Updated banner
The banner margin and padding can be modified in the style file. Image can be updated
respectively. toolbarShadow can be reused at bottom of banner.

Listing 9. Update margin and padding in styles_theme.jspf

 .banner {
         color: ${colors.bannerText};
         background: ${colors.bannerBackgroundImage};
         background-color: ${colors.bannerBackground};
         margin: 0px;
         padding: 0px;
         border: 1px solid ${colors.bodyBorder};

         font-size: ${requestScope.cssRules.fontSize.large};
         color: ${colors.bannerTitleText};
         font-weight: bold;
         padding-${requestScope.cssRules.bidiLeft}: 10px;
 /*      padding-top: 4px;      */
 /*      padding-bottom: 4px;   */
         padding-top: 0px;
         padding-bottom: 3px;

 .toolbar {
     color: ${colors.toolbarText};
     margin-${requestScope.cssRules.bidiRight}: 0px;
 /*    border-bottom: 1px solid ${colors.toolbarBorder};       */
 /*    border-left: 1px solid ${colors.toolbarBorder};         */
 /*    border-right: 1px solid ${colors.toolbarBorder};        */
 /*    padding: 7px 5px; */
     padding: 0px 0px;
 /*      -moz-border-radius-bottomright: 4px; */
 /*      -moz-border-radius-bottomleft: 4px;          */

 .toolbarShadow {
 /*    height: 4px;     */
     height: 6px;
     padding: 0px;
 /*    margin: 0px 3px 0px 3px;        */

 /*      background: #2e93e2
 url(images/quickr/returnHome_${requestScope.cssRules.bidiLeft}.gif) center
 ${requestScope.cssRules.bidiLeft} no-repeat; */
         background: #476C90 url(colors/custom/returnHome_left_ml.gif) center
 ${requestScope.cssRules.bidiLeft} no-repeat;
         border: 1px solid ${colors.breadcrumbBorder};
         padding: 1px 15px !important;
         display: block;
Listing 10. Update menu icon in banner_toolbar.jspf

                <img id="userActionsMenu_img"
                       alt="<portal-fmt:text bundle='nls.engine'
    key='link.page.actions' />"
                       title="<portal-fmt:text bundle='nls.engine'
    key='link.page.actions' />" />


                <img id="userActionsMenu_img"
                       alt="<portal-fmt:text bundle='nls.engine'
    key='link.page.actions' />"
                       title="<portal-fmt:text bundle='nls.engine'
    key='link.page.actions' />" />

Listing 11. Add toolbarShadow in banner.jspf

  <%-- this div is for branding image --%>
  <div class="bannerbg">

        <div class="clearing"></div>

  <%-- end banner --%>


  <%-- this div is for branding image --%>
  <div class="bannerbg">

        <div class="clearing"></div>

  <div class="toolbarShadow"><!-- IE hack --></div>

  <%-- end banner --%>
Listing 12. Update in colors/default.properties

 toolbarShadowBackground=url(./colors/qpg/toolbar_shadow.gif) repeat-x


 toolbarShadowBackground=url(./colors/custom/toolbar_shadow_ml.gif) repeat-x

The banner should be updated to look like the one shown in figure 24.

Figure 24. Updated banner

Page area

The following section provides guidance on updating the page area in the Lotus Quickr
theme. As indicated by the name, the page area in the theme is wrapped in a <div> tag with
the ID value pageArea. This <div> tag acts as a wrapper for the page header, the top /side
navigation, portlet render area, and the page footer.

The page header, shown in figure 25, is the first section rendered within the page area. This
space is used to display the application title, the application favorite status, and the
Customize link that allows users to control access to the place and add pages or components
to a place. Common customizations to this section include updating the background image,
font styles, and header dimensions.

Figure 25. Page header

Here are a few examples of different customizations for the page header.

Background is updated from image to color. Padding is omitted and bottom border is added.
Listing 13. Update in colors/default.properties


customizeBackground=transparent url(./colors/qpg/barBack.gif)



Listing 14. Update pageArea style definitionnt in styles_theme.jspf

 #pageArea {
     background-color: ${colors.bodyBackground};
     border: 1px solid ${colors.bodyBorder};
 /*    padding: 2px;     */
     padding: 0px;
     -moz-border-radius: 4px;

 #pageHeader {
     background: ${colors.customizeBackground} top
 ${requestScope.cssRules.bidiLeft} repeat-x;
     padding: 2px;
     border-bottom: 1px solid ${colors.bodyBorder};

After these changes are made, the page header now looks similar to the one shown in figure

Figure 26. Page header after updates

Figure 27 shows the side navigation row that contains all the pages for a team place. The
section of the theme has scope for some advanced customizations.

Figure 27. Side navigation
Default side navigation has simple look and feel. Let's build unique menu area for side
navigation with original style class (as shown in listing 15-16).
Listing 15. wpsSideNav style definition in styles_theme.jspf

     font-size: ${requestScope.cssRules.fontSize.normal};
     border: 1px solid;
     border-color: ${colors.sideNavBorder};
     text-decoration: none;
 /*    margin-top:0px;   */
 /*    margin-bottom:0px;      */
 /*    margin-${requestScope.cssRules.bidiLeft}: 0px; */
 /*    padding-${requestScope.cssRules.bidiLeft}: 0px; */
     font-weight: bold;
     margin: 15px 10px 15px 10px;
     padding: 4px;
     -moz-border-radius: 6px;
     /* This is a fix for the IE peekaboo bug */
     <c:if test="${requestScope.isIE}"> {height: 1%;} </c:if>

 .wpsSideNav-box {
       background-color: #F6F8FC;
       border-right: 1px solid;
       border-bottom: 1px solid;
       border-color: ${colors.bodyBorder};

Listing 16. Add class to sideNav in Default.jsp

 <table style="width:100%; height:100%;" cellpadding="0px"
 cellspacing="0px" id="portletRenderWidth">
             <td valign="top">
                   <portal-logic:if portletSolo="no">
                         <%@ include file="./sideNav.jspf" %>
 <td width="100%" height="100%" valign="top">


 <table style="width:100%; height:100%;" cellpadding="0px"
 cellspacing="0px" id="portletRenderWidth">
             <td valign="top" class="wpsSideNav-box">
                   <portal-logic:if portletSolo="no">
                         <%@ include file="./sideNav.jspf" %>
 <td width="100%" height="100%" valign="top">
Figure 28. Side navigation after updated styles

It is necessary to superadd color data in side navigation and borders. The example in listing
17-18 shows how to update style definitions.

Listing 17. Update wpsSideNav style definition in styles_theme.jspf

 .wpsSideNav .wpsNavItem a {
       display: inline;
       border: 0px !important;

 .wpsSideNav .selected{
       color: ${colors.sideNavSelectedText} !important;
       background-color: ${colors.sideNavSelectedBackground};
       text-decoration: none;
       padding:3px 3px;
       border: 1px solid;
       border-color: ${colors.sideNavSelectedBorder};
       margin:0px 2px 0px 2px;
Listing 18. Update in colors/default.properties






At this point, your team place looks like the one shown in figure 29.

Figure 29. Side navigation after updated styles

The last step is to update portlet style. Frame of portlet is decorated by skin, but some portlet
style depend on which theme include. the purpose is to give the consistency of externals
between theme and skin.
Listing 19. Update portlet side bar style definition in styles_ibmportlet.jspf

 .ibm-portlet-sidebar .primary-action-section BUTTON {
 /*   background: #E6F0FC url(./images/portlet/buttonBg.gif) left center
 repeat-x; */
 /*   color: #0063DC; */
    background: #E6F0FC url(./colors/custom/buttonBg_ml.gif) left center
    color: #FFFFFF;
    border: 1px solid #9acae8;
    padding: 0.2em 0.5em;
    cursor: pointer;

 .ibm-portlet-sidebar .action-section {
 /*   background-color:#F6FBFF;      */
 /*   border:1px solid #C2E2F4;      */
    line-height: 1.4em;
    padding: 0.5em;
    padding-bottom: 0;
    margin-bottom: 2em;
    border:1px solid #476C90;
    -moz-border-radius: 6px;

Figure 30. Portlet side bar area before and after updated styles

The final result is shown in figure 31.
Figure 31. Updated view of the place

3.6 Deploying the customized theme and skin

3.6.1 Deploying themes and skins in a production environment

Theme and skin JSPs are managed as part of the main WebSphere Portal enterprise
application and are thus part of the WebSphere Portal EAR file. The WebSphere Portal EAR
file must be updated and redeployed when adding new themes and skins. Failure to do this
could cause the custom themes and skins to be deleted when the EAR file is subsequently
updated. To update and redeploy the EAR file with the new themes and skins, follow the
instructions in the WebSphere Portal Information Center. (See the URL below.)


3.6.2 Install the theme and skin into Quickr

As already described in this section, to install the theme deployed to Quickr, the
Administrative portlet “Themes and Skins” is used.

An alternative way is provided by XMLAccess. The sample file is shown in Listing 20.
Listing 20. DeployTheme.xml
 <?xml version="1.0" encoding="UTF-8"?>
     type="update" create-oids="true">
          <portal action="locate">
          <!-- Sample for deploying themes and skins in an XML script. Note that this
               only created the database entries; you still need to provide the rendering JSPs
               under the resource root directories specified in the XML. -->

                 <skin action="update" active="true" objectid="customSkin"
                          uniquename="ibm.portal.skin.customSkin" resourceroot="customSkin">
                     <localedata locale="en">
                 <description>A customSkin!</description>
                 <theme action="update" active="true" defaultskinref="customSkin"
                         uniquename="ibm.portal.theme.customTheme" resourceroot="customTheme">
                     <localedata locale="en">
                          <title>A customTheme</title>
                 <!-- There's only one skin that may be combined with this theme. -->
                     <allowed-skin skin="customSkin" update="set"/>

Further information is in the WebSphere Portal Information Center. (See the URL below)

Additionally, see support information about PK63234 for Lotus Quickr 8.1 services for
Portal. (See the URL below)

3.7 Summary

This section summarizes common customizations to the Lotus Quickr theme for WebSphere
Portal. It describes how to create a new theme and skin and how to apply it to a place. It also
talks about the theme components and the role that each component plays in the theme.
Finally, the chapter went over individual theme sections and provided examples of common
customizations to modify the theme.

To top