of contents | Next | Previous
J2EE Millennia theme customization - Part I
The following section describes how to proceed with the customization of the
Millennia theme. This is Part I in a series of articles
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
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. 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.
- Click the content root under the My Pages header on the left side.
- 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.
- Click the Edit Page properties icon for the desired place.
- 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
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
Follow these steps to enable automatic JSP reloading:
- Open the file
- Find the entry shown in Listing 1 in this file.
Listing 1. ibm-web-ext.xmi file
- Change the value for reloadingEnabled to true.
- Save the file.
- 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)
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.
Figure13. Start image “QPG” theme and Goal image “Millennia” theme
You can 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
Figure14. Structural difference at wire-frame image
Abstract - Part I of III - The following article describes how to proceed with the customization of the Millennia theme.