This article explores the specifics of customizing IBM Lotus Domino Web Access so that it looks better when used in conjunction with the default IBM WebSphere Portal 5.1 theme. The Lotus Domino Web Access Portlet included with WebSphere Portal works with whichever version of Lotus Domino is currently deployed. However, the look and feel of the visible content within the portlet is controlled by Lotus Domino Web Access, so it is influenced by the version of Lotus Domino that is deployed and the version of the user's mail file template.

Lotus Domino Web Access 7 changed its default styling so that it looks much better within WebSphere Portal 5.1. In this article, we discuss how you can customize Lotus Domino Web Access 6.5 to leverage some of these same style changes. We cover in detail the tools available to help make such look and feel changes, show tips on how to identify which cascading style sheet (CSS) classes are used by various areas of the Domino Web Access screen, and describe how to find and change these definitions within the Domino Web Access Forms file (Forms6.nsf).

Although our example describes how to change Lotus Domino Web Access so that it better resembles the CSS styles used within the default WebSphere Portal 5.1 theme, these principles can be used to alter Lotus Domino Web Access to fit in with any customized theme for WebSphere Portal, other portal servers, or general styling guidelines that may be in place for a particular company deploying Lotus Domino Web Access.

A quick recap

Most of the design (HTML, JavaScript, Images, and CSS) that contributes to the look and feel of Lotus Domino Web Access resides within the Domino Web Access Forms file. For the iNotes6.ntf Domino Web Access (6) template, this Forms file is Forms6.nsf, which is located in the iNotes subdirectory in the server’s data directory.

Lotus Domino Web Access uses the QuickPlace themes technology. This involves having skin groups that represent different themes, each of which is composed of a set of skins representing specific layout templates along with a separate shared stylesheet. To change the overall look and feel of Lotus Domino Web Access, you need to modify these skins.

Lotus Domino Web Access 6.5 has two major skin groups, h_ShimmerSkin for Microsoft Internet Explorer and h_ShimmerSkin_Gecko for Mozilla. Within each skin group, the following key skin types are used in the Domino Web Access pages below:

• h_ListFolder, h_Portal, h_DwaLite, h_PortalLite: Used for most view pages. H_ListFolder is the default, and h_DwaLite is used if &ui=inotes_lite is used. H_Portal is used if &ui=portal is in effect, and h_PortalLite is used when &ui=portal_lite is specified.
• h_ApptPage: Used by CalendarEntry, ToDo, Out of Office, and Preferences screens (has a different class specified for the BodyDiv outer div within the main PageContent area displayed by the PageContent skin component).
• h_MailPage: Used for other object screens (Read Message, Compose/Edit Message, and so on).
• h_Edit: Used for the Welcome Page Edit Layout page.

Back to top

The tools

Now let’s discuss the tools. To perform any skin customization in Lotus Domino Web Access 6.5, you need the Domino Web Access Skin Editor Tool (see figure 1), which you can download from the Lotus Sandbox.

Additionally, consider using the following tools to help you with the customization process:

• Mozilla Firefox Document Object Model (DOM) Inspector
• Microsoft Internet Explorer Developer Toolbar
• IBM Lotus Domino Designer

Back to top

Mozilla Firefox DOM Inspector

For this article, we use Mozilla Firefox v1.0.7. The DOM Inspector is not installed as part of the standard installation option. To get it, you must run the custom installation from the mozillaZine Web site.

To launch DOM Inspector on a Domino Web Access page, enter the URL of your Domino Web Access page in Firefox, then choose Tools - DOM Inspector from the menu bar.

Next, click the Inspect button (upper-right corner in figure 2) to display the preview of the HTML page being examined. In this mode, notice that as you highlight the DOM nodes, DOM Inspector highlights the corresponding area of the Web page in red.

Alternatively, to open the DOM Inspector, you can use the keyboard shortcut Ctrl + Shift + I on a page that you want to examine. This shortcut is particularly useful for dialog boxes that do not have a menu bar, such as the Domino Web Access Preferences dialog box.

Back to top

Internet Explorer Developer Toolbar

You can download the Internet Explorer Developer Toolbar from the Microsoft Download Center. Similar to Mozilla Firefox DOM Inspector, Internet Explorer Developer Toolbar allows you to open the DOM Explorer (see figure 3), which enables you to navigate the DOM of the current Web page. You can display or hide the DOM Explorer by clicking the View DOM button (as highlighted in red in figure 3) to toggle. As you navigate through the nodes, notice that the DOM Explorer highlights the corresponding area of the Web page in blue.

Back to top

Let’s do it

In this section, we walk through the process of changing the colors of a Domino Web Access 6.5 skin so that it looks similar to the Domino Web Access 7 skin. Before getting started, let’s discuss the following UI argument values available with Lotus Domino Web Access 6.5:

h_Portal : Portal skin (&ui=portal)
h_LiteFolder : Lite Folder skin (&ui=inotes_lite)
h_LitePortal : Lite Portal skin (&ui=portal_lite)

By default, Lotus Domino Web Access uses the skin depicted in figure 4. However, you can alter which skin is used by appending &ui=inotes_lite to the original ?OpenDatabase URL command instead of &ui=inotes. If you want the lite skin to be used by default for all users on the server, you can use the following Notes.ini setting:

iNotes_WA_UI=inotes_lite

OR

iNotes_WA_UI=portal_lite (if all users are using &ui=portal)

See the developerWorks Lotus article, "Lotus Domino Web Access client performance improvements," for more information on the lite skin.

For our sample customization, we use the iNotes lite and portal lite skins as a starting point. These lite skins were introduced in Forms6.nsf as part of the performance improvements. The Forms7.nsf standard skins evolved from these lite skins, which do not have rounded tab corners or a gradient background around the banner. Therefore, it is easier to start with the iNotes lite skin without having to worry about changing the color of the GIF file used for the rounded tab corners.

Getting started

As described in the developerWorks Lotus article, "Customizing the look and feel of Domino Web Access 6.5," we can examine the h_CurrentSkinName and h_CurrentSkinType variables to determine which skin group and skin type are being used. You can access these variables in Microsoft Internet Explorer by choosing View - Source from the menu. The skin group we are dealing with is h_ShimmerSkin; in this exercise, we do not modify the skin type h_DwaLite because most modifications are done by CSS definition changes in h_Stylesheet. This information is enough for us to know what to bring up with the Skin Editor Tool (see figure 1).

Using the Skin Editor Tool, you can edit and post your skin updates to the Domino Web Access server; however, the tool does not have many text editor functions. Therefore, we recommend that you copy the content temporarily to your favorite text editor (for example, Notepad or a professional text editor tool, such as IBM Rational Application Developer or Microsoft Visual Studio) to make modifications. You can do this by clicking the Copy All button and pasting the content into the text editor.

NOTE: Make a backup copy of the content before making any changes in the Skin Editor Tool. You can keep the backup copy as a text file that you can paste back into the Skin Editor Tool, if necessary. It’s always a good idea to copy and save a version that is in a good working state, so you can revert back to a known good point.

Choosing which CSS definitions to change

Now, the fun part. How do you know which CSS definitions to modify to change the appearance of an HTML element? If you examine the HTML that is generated when you choose View - Source from Internet Explorer, you find that it does not offer enough details to help you figure out what to change.

The best tool to use here is either Mozilla Firefox DOM Inspector or Internet Explorer Developer Toolbar. Once you use these tools, you will see what time savers they are. For example, as you navigate the Mozilla Firefox DOM Inspector with the Inspect capability enabled, it highlights in red the tabbed area you examine, making it much easier to discover the style that applies to the HTML element.

Making CSS definitions changes

As described in the earlier section "Getting started," we recommend that you copy the skin you want to modify (from the Domino Web Access Skin Editor Tool) to a text editor and make your changes with the text editor for ease of editing.

We have included our changes with this article in the form of text files for the original and modified stylesheets. You can use a text compare tool to see what has changed. We also have provided a table with detailed information and screenshots of the style definitions that are changed to achieve the look and feel described in figure 7. See the Downloads section for an additional document.

Figure 5 shows an example of some of the changes on the active and inactive tabs using Rational Application Developer as a text compare tool.

After you finish making changes within the text editor, you can paste your changes back into the Skin Editor Tool and click the Update button to update the Forms6.nsf file.

Non-CSS changes

You can perform most skin customizations merely by changing the CSS definition. However, some customizations involve modifying Forms6.nsf design elements. Examples of such customizations are:

• Custom banner
• Welcome page
• Array of special colors

Custom banner
Refer to the IBM Redbook, "Domino Web Access 6.5 on Linux," for more details about customizing the banner within Lotus Domino Web Access.

Welcome page
To customize the appearance when editing the layout of the Welcome page, you must modify the PrefDiv embedded style definition in the s_WelcomePageEdit subform as shown in table 1.

Before	After
PrefDiv{background-color: #ceceaa;padding: 4px;margin: 1px;}	PrefDiv{background-color: #D8E0E8;padding: 4px;margin: 1px;}

Array of special colors
In the s_SessionInfo form, there is an array of special colors that controls the colors for various elements that are altered in a more dynamic way by Lotus Domino Web Access (explicit styles are updated rather than a new class used). Table 2 provides the details of which offset of the array controls which Domino Web Access element.

You need Lotus Domino Designer to make changes to the s_SessionInfo form. Specifically, navigate to the Forms section of Forms6.nsf in Lotus Domino Designer to get to s_SessionInfo, open the form, and search for "s_clr=" so that you can edit the array (see figure 6). Be sure to save your changes when you are done.

Table 3 demonstrates how modification of this array can change the colors for Preferences tabs and drop-down menus.

Before	After
s_clr="#ceceaa, #b0b096, #336699, #ffffff, #e0e0e0, #000000, #ffffff, #fcfcf0, #f6f3e2, #cc3300, tan, darktan, #999999, #f6f3e2";	s_clr="#dee3ef, #adc3d6, #336699, #ffffff, #e0e0e0, #000000, #ffffff, #fcfcf0, #f6f3e2, #cc3300, tan, darktan, #999999, #f6f3e2";
s_clr="#ceceaa,#b0b096, #336699, #ffffff, #e0e0e0, #000000, #ffffff, #fcfcf0, #f6f3e2, #cc3300, tan, darktan, #999999, #f6f3e2";	s_clr="#ceceaa, #adc3d6, #336699, #ffffff, #e0e0e0, #000000, #ffffff, #fcfcf0, #f6f3e2, #cc3300, tan, darktan, #999999, #f6f3e2";

Additional considerations

Notice as you go through the customization that the color of some elements on a Domino Web Access page is controlled by graphics. To change the color, you need to modify those graphics. One example is the rounded corners of the alphabet tabs under Contacts (see figure 7). Refer to the IBM Redbook, "Domino Web Access 6.5 on Linux" for more details on how to modify images in Lotus Domino Web Access prior to Lotus Domino 7. (NOTE: In Lotus Domino 7, images are stored as file resource design elements within Forms7.nsf and are much easier to update.)

Table 4 lists the graphics that need to be modified when you make changes to the coloring scheme of Lotus Domino Web Access.

Previewing the result

Finally, you are ready to preview the final result. As with any Domino Web Access customization, before you can see any changes, you must restart the Lotus Domino HTTP server. To do this, follow these steps:

1. From the Domino server console, type tell http quit to shut down the HTTP server.
2. Enter dbcache flush to flush the databases from the cache.
3. Start the HTTP server by entering the load http command.

After you restart the HTTP server, you can preview the result from the browser as displayed in figure 8. You may need to either clear the browser cache before trying out the modified Forms6.nsf file or use Ctrl + Refresh (press the Ctrl key and click the browser’s Refresh button) to force the browser to refresh any pieces within the browser cache.

Congratulations! You have successfully customized the look and feel of a Domino Web Access 6.5 page by modifying CSS definitions in a Domino Web Access stylesheet file.

Back to top

How different is skin customization in Lotus Domino Web Access 7?

The answer to that question is: not too different. The concepts and tools we discussed in this article still apply. More importantly, skin customization is significantly improved in Lotus Domino Web Access 7 in that it is more developer friendly. You no longer need to use the Domino Web Access Skin Editor Tool; all skins are available as file resources. In Lotus Domino Web Access 7, you can easily export or open a skin file resource from Lotus Domino Designer, modify it using any text editor tool, save the changes within this external tool, and then refresh the file resource with the modified content.

Back to top

Migration considerations

Bear in mind that when you perform customizations in Lotus Domino Web Access, they may not automatically work upon migration. Be sure to analyze the differences between the original and your custom code and try to make similar changes on the upgraded Forms file (Forms7.nsf) where it makes sense. You can use text compare utility tools to assist you in making a smoother migration.

Back to top

Download

Information about download methods          Get Adobe® Reader®

Resources

Learn

• developerWorks Lotus article, "Customizing the look and feel of Domino Web Access 6.5"
  
  
• developerWorks Lotus article, "Manipulating data in Domino Web Access"
  
  
• developerWorks Lotus article, "Lotus Domino Web Access client performance improvements"
  
  
• IBM Redbook, "Domino Web Access 6.5 on Linux"
  
  

Get products and technologies

• Download the Domino Web Access Skin Editor Tool from the Lotus Sandbox.
  
  
• Get instructions for installing DOM Inspector for Mozilla Firefox.
  
  
• Download the Internet Explorer Developer Toolbar from Microsoft.com.
  
  

Discuss

• Participate in the discussion forum.
  
  
• Check out developerWorks blogs and get involved in the developerWorks community.
  
  

About the authors

Rate this article

Comments

Back to top

Table of contents

• A quick recap
• The tools
• Mozilla Firefox DOM Inspector
• Internet Explorer Developer Toolbar
• Let’s do it
• How different is skin customization in Lotus Domino Web Access 7?
• Migration considerations
• Download
• Resources
• About the authors
• Comments

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

Dig deeper into Lotus on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.

Special offers