Chapter 1   Customizing Web Pages


This chapter contains the following sections:

• Vertical Navbar

• Conclusion

• Customizing the Appearance of Web Pages

Vertical Navbar

---

The vertical navbar is an iPlanet Market Maker display element. Its class is NavBarDisplay. It is a specialization of TabbedDisplay. Normally, TabbedDisplay shows its tabs as links at the top of the display. NavBarDisplay instead shows a hierarchical menu at the left of the content, plus an optional breadcrumb on top.

The hierarchy of classes is:

In iPlanet Market Maker, the main container for the application is a TabbedDisplay, with the setting notabs set to true in the DisplayProfile, so that the tabs are not generated.

Instead, the main jsp, imm.jsp, instantiates the TabbedDisplay and generates a DHTML/javascript menu.

NavBarDisplay can be used instead of TabbedDisplay to achieve a different presentation for the main page.

Architecture

Classes

To use the NavBarDisplay, a few classes are necessary:

The package com.iplanet.ecommerce.vortex.display contains the following classes:

• NavBarDisplay is the display element

  To produce the HTML for the pbreadcrumb (PathBar) and the navbar, it uses:

  • SimpleTable

  • SideNavigationProducer

  • PathBarProducer

• ActioncodeMap manages the action code mapping feature:
  • JumptoLinkGen

  • PostAuthenticationHook

    These are not used for now.

These classes then use a few properties files for configuration. Contrary to the other properties files read in iPlanet Market Maker, the navbar properties files use a new enhanced ResourceManager which consists of the following classes in the com.iplanet.ecommerce.vortex.util package:

ResourceManagerLauncher.java

ResourceManager.java

ResourceInstance.java

PropertyHelper.java

PropertiesInstance.java

This ResourceManager is an improvement on the old resources, in that when a config file is modified, you do not have to restart the server in order for it to be picked up.

JSPs

There are three JSPs in infrastructureD\www\jsp:

immnav.jsp

NavBarHeader.jsp

NavBarFooter.jsp

In order for the iMM installation to have both: the TabbedDisplay and the NavBarDisplay available, the NavBarDisplay container is used within another jsp:

immnav.jsp.

This jsp can co-exist with imm.jsp.

It is only an example, and it can be used as a base for your own main JSP.

If you customize it though, be sure to keep the two includes:

NavBarHeader.jsp

and

NavBarFooter.jsp

These are important, because they open and close tables that are assumed by the NavBarDisplay class.

Doing this allows us to remove one level of table embedding, which is critical for rendering performances on Netscape 4.7.

Display Profile

There must be a new PAGE element in the imm display profile:

<PAGE NAME=/immnav.jsp>

This element contains the same sub-elements as the imm.jsp page element, but it has different settings of which the NavBarDisplay can take advantage.

This display profile is found in tools/etc/navbarload. It is called newdp.xml and is based on the iPlanet Market Maker 4.0 SP1 display profile.

If you have customized your display profile, reapply your customizations to newdp.xml, both under the imm.jsp page element and under the immnav.jsp page element.

Then load it using ./install.

---

Note	The only different aspects of the DP structure in the imm.jsp page and in the immnav.jsp page are the Neg elements.

---

For each main menu title <Module>, Auction, Community, and so forth, there is a Neg<Module> avail item, and an associated Member item.

In the imm.jsp page, these avail items have the contentmask

!Anonymous,!mod_<Module>

This means that they are never rendered, because we do not need these when we generate the DHTML/Javascript menubar. The reason for this is that the top level menus never target real channels. However, they do target javascript functions that render the corresponding sublevel menu.

When we use the navbardisplay, we do need these top level menus to be rendered. These avail elements for Neg<Module> define FileContent elements, and the corresponding Members define the root and filename for these files.

By default these are imm/<module>.html.

However, because we need these channels to be rendered, we have to modify the contentmask to

!Anonymous,mod_<Module>

That is the only difference in the immnav.jsp profile.

<AVAILITEM NAME="NegAuctions" DESCRIPTION_KEY="0" CLASS="com.iplanet.ecommerce.vortex.display.FileContent" DEFCODE="-1" DEFINDEX="0" CONTENTMASK="!Anonymous,mod_auction" />

To target a page other than one of the default pages, modify the corresponding MEMBER elements in the immnav.jsp page of the Display Profile:

<SETTINGS>

<BOOLEAN NAME="NoMenuBar" VALUE="true" />

<STRING NAME="ContentFile" VALUE="your_file_name_here.html" />

<STRING NAME="FileRoot" VALUE="imm" />

</SETTINGS>

Configuration Files

In navbar\resources there are a few configuration files that are relevant to configure the navbar:

• navbar.xml is used to configure the content of the navbar, based on the display profile.

• actioncodemap.xml is used to configure an advanced feature: the navbar elements can appear conditionnaly based on what is currently displayed in the container.

• NavBarDisplayStrings.properties is used to customize the look and feel of the navbar.

• ResourceManager.xml is used to configure the resourcemanager.

• The DTDs for the files navbar.xml and actioncodemap.xml are:

  navbar.dtd

  actioncodemap.dtd

The default values in the files as shipped should be enough to test the navbar. To customize it further, see the customization section.

Installation

In tools/etc/navbarload, there is a new display profile, which contains the entries necessary for the navbar. If you cd to that directory and run install, this new display profile will be loaded. Once it is complete, you can go to immnav.jsp in your browser and play with the new navbar. If you want to go back to the iMM default display profile, without the navbar features, run uninstall in tools/etc/navbarload, and the default display profile will be installed.

Test it!

To see if the product is installed correctly, point your browser to:

http://<host>:<port>/imm/imm.jsp

If everything is okay, then point the browser to:

http://<host>:<port>/imm/immnav.jsp

You should get the new container with the navbar on the left and the breadcrumb.

Login as immhost/root/root and check that the navbar behaves as expected.

Navbar Customization

Configure the ResourceManager

On the first load of the NavbarDisplay, a Class called ResourceManagerLauncher starts a thread that reads in and preloads all the Resource files specified within the ResourceManager.xml file. If any changes are made to any of these property files at run time, the thread launched by ResourceManagerLauncher reads in the changes and reloads the changed version of the Resource file used by the navbar. This is how we can change, for example, the look and feel of the Navbar on the fly!

---

Note	Currently the sleep interval of the thread which reads the property files (if changed) is set to one second. There is no configurable property to set the sleep to some other value

---

The ResourceManager.xml has a main tag <ResourceManager> which contains one or more <resource> elements.

A resource looks like this:

---

<resource name="navbar"

class="com.iplanet.ecommerce.vortex.util.XmlDocumentInstance"

file="navbar.xml"

/>

The name attribute is the String used in the java class that uses this resource to identify it. The navbar component uses three resources:

• navbar

• actioncodemap

• navbardisplay

The class attribute is the class used to load the resource. There are three of them in the util package now, but you can add your own if you use this facility in your own class:

XmlDocumentInstance for XML documents

ResourceInstance for resourcebundles

PropertiesInstance for property files

The file attribute is the name of the file to be loaded. The file must be in the classpath of the application.

Configure the Navbar Content

navbar.xml allows you tp configure the content of the navbar. It follows the navbar.dtd DTD. Refer to it for the exact syntax. navbar.xml is the example that ships with the navbar.

sunbidnavbar.xml is a more complex example that shows a lot of the possibilities of the syntax.

The <navbar> element can contain the different elements that constitute the navbar.

Most of these elements allow the optional attributes: DisplayIf and ContentMask.

These attributes enable an additional level of customization and filtering to be applied to the navbar.

Filtering attributes
The DisplayIf Attribute

When a navbar element has the attribute DisplayIf set to a String, this String is looked up in actioncodemap.xml where a list of action codes is associated to that name. Then the navbar element is only displayed if the container displays the page associated to one of these action codes.

This can be used to produce context-sensitive elements in the navbar, that appear depending on the page you are viewing.

This very powerful mechanism is not used in the default navbar.xml that we ship with the component, but you can use it when you customize your navbar.

Example
<vortexSection idNumber="10004" displayIf="Auction.Initiator.View"/>

The section will be displayed only when the page Auction.Survey is displayed in the container. Auction.Survey is a list of action codes defined in actioncodemap.xml.

The ContentMask Attribute

When a navbar element has the attribute ContentMask set to a String, the regular iPlanet Market Maker display profile ContentMask mechanism is applied to the navbar element. For example, only the users having the credentials required by the ContentMask will see this attribute.

This is useless for elements that come from the DisplayProfile where the ContentMask is already applied, but can be useful for the other types of elements (spacers, relatedSection, seeAlsoSection).

Example
<bigSpacer contentMask="buyer|seller|marketmaker"/>

The spacer is displayed only for buyer, seller and marketmaker, but not, for example, for anonymous user.

Spacers
There are four types of spacers. Use them to vertically separate out your navbar sections.

spacer

bigSpacer

lastSpacer

twoColumnSpacer

RelatedSection and seeAlsoSection
The content of these navbars will appear in special Related and See Also sections at the end of the navbar. This is a common layout used by many sites. However, you are not obliged to use it.

ImageRow
This displays an image on the whole row of the navbar.

Example

alt="More About iPlanet Market Maker"

link="http://www.iplanet.com/products/iplanet_market/home_2_1_1a .html"

newWin="pimm"/>

Row
This displays text with a link.

• link attribute is the link.

• newWin is the name of the popup window to be created if you want the link to generate a popup.

Example

contentMask="buyer|seller|marketmaker">Logout</row>

<row link="http://store.sun.com">Sun Store (U.S. Only)</row>

<row link="http://www.sun.com/auctions/sunbid/faq-rules/" newWin="sbr">Sun Bid

vortexSection
This is the most important element of the navbar. It displays a section of the iPlanet Market Maker DisplayProfile. The attribute is either idNumber or series.

• idNumber: the DisplayElement with the specified IDNUMBER is looked up in the DisplayProfile and displayed in the navbar.

• series: the series of idnumbers in this 100 series will be displayed, for example, the whole menu.

Example

<vortexSection idNumber="10003"/>

<spacer contentMask="Anonymous"/>

<!-- Market Place -->

<vortexSection idNumber="0"/>

<!-- OMS -->

<vortexSection series="100"/>

<!-- RFx -->

If you use the DisplayIf attribute in navbar.xml, the String value of this attribute must be defined in actioncodemap.xml. This file follows the actioncodemap.dtd DTD.

Each page element defines a logical name that can be used in navbar.xml. This logical name is associated to a list of action codes.

These symcodes are defined in java classes. A list of symcodemap elements lists all the classes that contain the definition for the action codes of the application. If you add your own action codes to iPlanet Market Maker, please add a symcodemap element referring to the class where your action codes are defined.

Example

<symcodemap class="com.iplanet.ecommerce.vortex.auction.display.AucJSP"/>

<page name="Auction.Initiator.View">

<symcode value="ACT_INITIATOR_VIEW_BROWSE"/>

<symcode value="ACT_INITIATOR_VIEW_SEARCH"/>

...

<symcode value="ACT_INITIATOR_VIEW_CANCELAUCTION"/>

</page>

Configure the Navbar Look and Feel

Finally, NavBarDisplayStrings.properties defines the look and feel of the navbar (for example, some pieces of HTML, with references to styles and images that will be used to generate it).

Refer to the comments in the file to see what these values mean.

Because it is instantiated by the ResourceManager, it is easy to test new look and feel by changing the file on the server directly and reloading your page to see the effect.

Configure the Settings of the Container in the Display Profile

One last way you can configure the navbar is through the settings element in the display profile for the top container in the immnav.jsp page element.

The important settings are:

• NoTabs: This should be false. If it is true the navbar will not be generated at all.

• Pathbar: If this is true, the breadcrumb on top of the navbar will be generated. Otherwise, it will not.

Example

<INTEGER NAME="ContentSpace" VALUE="0"/>

<INTEGER NAME="ContentPad" VALUE="0"/>

<INTEGER NAME="ContentBorder" VALUE="0"/>

<STRING NAME="ContentColor" VALUE="#FFFFFF"/>

<INTEGER NAME="ContainerBorder" VALUE="0"/>

<STRING NAME="ContainerStyle" VALUE="BACKGROUND: #FFFFFF"/>

<BOOLEAN NAME="NoMenuBar" VALUE="false"/>

<STRING NAME="MenuBarColor" VALUE="#666699"/>

<STRING NAME="MenuBarFontOpen" VALUE="&lt;FONT SIZE=2

COLOR=&apos;#FFFFFF&apos;&gt;&lt;B&gt;"/>

<STRING NAME="MenuBarFontClose" VALUE="&lt;/B&gt;&lt;/FONT&gt;"/>

<STRING NAME="Orientation" VALUE="left"/>

<BOOLEAN NAME="Pathbar" VALUE="true"/>

<BOOLEAN NAME="NoTabs" VALUE="false"/>

<BOOLEAN NAME="NoWrapper" VALUE="true"/>

</SETTINGS>

Conclusion

---

With this documentation, you should be able to configure the navbar to solve your business needs.

Happy NavBar!

Customizing the Appearance of Web Pages

---

A digital marketplace usually has style standards to maintain a consistent look and feel for its web pages. For example, it is common for text fonts and button shapes to be used consistently across pages. The default iPlanet Market Maker pages might use different standards than your existing pages. If you want these pages to conform to your style standards, you can customize them. This section covers the following topics.

• "Customizing Text and Tables"

• "Customizing Buttons and Tabs"

This chapter covers only how you can customize the appearance of the pages. For information about how to customize the functionality of the modules, see Chapter 3 "Customizing Modules."

Customizing Text and Tables

To customize the appearance of text and tables, you edit the iPlanet Market Maker style sheets in the @IMM_DOCROOT@/imm40/iMM directory. Style sheets control the appearance of text, tables characteristics, and colors. Table 1-1 describes the style sheets.

Table 1-1    Style Sheet File Names

Style Sheet File Name	Used to Define
m_styles.css	Text and tables in market maker pages.
b_styles.css	Text and tables in buyer pages.
s_styles.css	Text and tables in seller pages.
x_styles.css	Text and tables for pages in which the user role is not yet known.

Each of the style sheets defines similar characteristics. The main difference is that the colors vary depending on whether the user role is market maker, buyer, or seller. The following example shows a section of the m_style.css style sheet file.

...

TH /*For text at the top of a table heading column*/

{

   BACKGROUND: #CCCCCC;
   COLOR: #000000;
   FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
   FONT-SIZE: 10pt;
   FONT-STYLE: normal;
   FONT-WEIGHT: bold

}

TD /*For text within a table cell*/

{

   FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
   FONT-SIZE: 9pt;
   FONT-STYLE: normal

}

TABLE /*For the table background and ruling*/

{

   BACKGROUND: #CCCCCC;
   PADDING-BOTTOM: 0px;
   PADDING-LEFT: 0px;
   PADDING-RIGHT: 0px;
   PADDING-TOP: 0px

}

.pagetitle /*For the top and bottom bars of a table*/

{

   BACKGROUND: #CC6600;
   COLOR: #000000;
   FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
   FONT-SIZE: 11pt;
   FONT-STYLE: normal;
   FONT-WEIGHT: bold;

}

Figure 1-1 shows an example of how some of the styles are applied.

Figure 1-1    Styles Used on a Sample Page

Figure 1-2 shows the same sample page with some style sheet changes.

Figure 1-2    Styles Changed from Figure 1-1

Table 1-2 shows the differences between the style sheets applied in Figure 1-1 and Figure 1-2. The numbers in the middle column of the table correspond to the numbers in Figure 1-2. The changes to the style sheet applied in Figure 1-2 have bullets to the left of the code in the right column.

Table 1-2    Style Sheets used for Figure 2-1 and Figure 2-2

Style Sheet for Figure 1-3		Style Sheet for Figure 1-4
TH { BACKGROUND: #CCCCCC; COLOR: #000000; FONT-FAMILY:Arial,Helvetica, Sans-Serif; FONT-SIZE: 10pt; FONT-STYLE: normal; FONT-WEIGHT: bold }		TH { BACKGROUND: #FFFFCC; COLOR: #000000; FONT-FAMILY:Arial,Helvetica, Geneva,Swiss,SunSans-Regular; FONT-SIZE: 10pt; FONT-STYLE: normal; FONT-WEIGHT: bold }
TD { FONT-FAMILY: Arial,Helvetica,Sans-Serif; FONT-SIZE: 9pt; FONT-STYLE: normal }		TD { FONT-FAMILY:Arial,Helvetica, Geneva, Swiss, SunSans-Regular; FONT-SIZE: 9pt; FONT-STYLE: normal }
TABLE { BACKGROUND: #CCCCCC; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px }		TABLE { BACKGROUND: #FFFFCC; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px }
.pagetitle { BACKGROUND: #6666cc; COLOR: #000000; FONT-FAMILY: Arial,Helvetica,Sans-Serif; FONT-SIZE: 11pt; FONT-STYLE: normal; FONT-WEIGHT: bold; }		.pagetitle { BACKGROUND: #336699; COLOR: #000000; FONT-FAMILY:Arial,Helvetica, Geneva,Swiss,SunSans-Regular; FONT-SIZE: 11pt; FONT-STYLE: normal; FONT-WEIGHT: bold; }
.subtitle { BACKGROUND: #999999; COLOR: #ffffff; FONT-FAMILY: Arial,Helvetica,Sans-Serif; FONT-SIZE: 14pt; FONT-STYLE: normal; VERTICAL-ALIGN: middle; FONT-WEIGHT: bold; TEXT-ALIGN: left; }		subtitle { BACKGROUND: #99CCCC; COLOR: #333366; FONT-FAMILY: Arial,Helvetica,Geneva,Swiss, SunSans-Regular; FONT-SIZE: 14pt; ONT-STYLE: normal; VERTICAL-ALIGN: middle; FONT-WEIGHT: bold; TEXT-ALIGN: left; }
.nav { BACKGROUND: #CCCCCC; FONT-FAMILY: Arial,Helvetica,Sans-Serif; FONT-SIZE: 8pt; FONT-STYLE: normal; TEXT-INDENT: 2pt; TEXT-ALIGN: center; }		.nav { BACKGROUND: #FFFFCC; FONT-FAMILY: Arial,Helvetica,Geneva,Swiss, SunSans-Regular; FONT-SIZE: 9pt; FONT-STYLE: normal; TEXT-INDENT: 2pt; TEXT-ALIGN: center; }
.simpletable { BACKGROUND: #E6E6E6; }		.simpletable { BACKGROUND: #FFFFFF; }
.buttonText { FONT-FAMILY: Arial,Helvetica,Sans-Serif; FONT-SIZE: 11pt; FONT-WEIGHT: bold; COLOR: #FFFFFF; TEXT-DECORATION: none; }		.buttonText { FONT-FAMILY: Arial,Helvetica,Sans-Serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; COLOR: #FFFFFF; TEXT-DECORATION: none; }
.mainTitle { FONT-FAMILY: Arial,Helvetica,Sans-Serif; FONT-SIZE: 16pt; FONT-WEIGHT: bold; COLOR: #330066; BACKGROUND: #FFFFFF; }		.mainTitle { FONT-FAMILY: Arial,Helvetica,Sans-Serif; FONT-SIZE: 16pt; FONT-WEIGHT: bold; COLOR: #3333366; BACKGROUND: #FFFFFF; }
.tabThere { BACKGROUND: #6666cc; FONT-FAMILY: Arial,Helvetica,Sans-Serif; COLOR: #FFFFFF; FONT-SIZE: 12pt; TEXT-DECORATION: none; }		.tabThere { BACKGROUND: #336699; FONT-FAMILY: Arial,Helvetica,Sans-Serif; COLOR: #FFFFFF; FONT-SIZE: 11pt; TEXT-DECORATION: none; }
.tabGrey { BACKGROUND: #CCCCCC; FONT-FAMILY: Arial,Helvetica,Sans-Serif; FONT-SIZE: 12pt; COLOR: #000000; TEXT-DECORATION: none; }		.tabGrey { BACKGROUND: #FFFFCC; FONT-FAMILY: Arial,Helvetica,Sans-Serif; FONT-SIZE: 11pt; COLOR: #000000; TEXT-DECORATION: none; }

Customizing Buttons and Tabs

iPlanet Market Maker comes with a default set of .gif image files that provide the curve effects for buttons and tabs. These files define the appearance of buttons and tabs. To customize the appearance of buttons and tabs, you create your own graphics in .gif files and rename these files to the corresponding defaults in the images directory and subdirectories. The purpose of these graphics is to overlay the left and right sides of tabs and buttons to create the effects you want.

Figure 1-3 shows an example of the graphics that determine the appearance of the tabs and buttons. For a description of each of the graphics, see Table 1-3.

Figure 1-3    Tab and Button Graphics

Table 1-3    Graphics Used in Figure 2-3

Image	File name	Used for
	tab_left.gif	Tab image to the left of the "Tab number 1" text.
	tab_right.gif	Tab image to the right of the "Tab number 1" text.
	curve_left.gif	Curve in the upper-left corner
	s_left.gif	Left curve for the "< Return to Previous" and "Button 1" buttons.
	s_right.gif	Right curve for the "< Return to Previous" and "Button 1" buttons.
	left_sm.gif	Left curve for the "Search" and "button 1" buttons.
	right_sm.gif	Right curve for the "Search" and "button 1" buttons.

To create a new look and feel for the tabs and buttons, use different graphics with the same file names as the default graphics. See Figure 1-4 and Table 1-4.

Figure 1-4    Alternative Tab and Button Graphics

Table 1-4    Alternative Graphics Used in Figure 2-4 

Image	File name	Used for
	tab_left.gif	Tab image to the left of the "Tab number 1" text.
	tab_right.gif	Tab image to the right of the "Tab number 1" text.
	curve_left.gif	Curve in the upper-left corner
	s_left.gif	Left curve for the "< Return to Previous" and "Button 1" buttons.
	s_right.gif	Right curve for the "< Return to Previous" and "Button 1" buttons.
	left_sm.gif	Left curve for the "Search" and and smaller "Button 1" button.
	right_sm.gif	Right curve for the "Search" and smaller "Button 1" button.

The files in Table 1-3 show some of the .gif images in iPlanet Market Maker. The complete list of default .gif files is shown in Table 1-5, Table 1-6, and Table 1-7.

Table 1-5    Image Files in the @IMM_DOCROOT_FULL@/imm40/iMM/images Directory 

Image	File name	Used for
	curve_left.gif	Top border.
	curve_right.gif	Top border.
	curve_bottom_left.gif	Bottom border
	curve_bottom_right.gif	Bottom border.
	tab_left.gif	Tabs at the top of a page.
	tab_right.gif	Tabs at the top of a page.
	m_arc.gif	Upper-left corner curve in a module page after you login as a marketmaker.
	b_arc.gif	Upper-left corner curve in a module page after you login as a buyer.
	s_arc.gif	Upper-left corner curve in a module page after you login as a seller.
	pixel.gif	Adding spacing throughout (set width/height).
	ascending.gif	Indicating table column sort order.
	descending.gif	Indicating table column sort order.
	arrow-up-blue.gif	Blue arrows.
	arrow-down-blue.gif	Blue arrows.
	arrow-right-blue.gif	Blue arrows.
	sortarrowdown.gif	Descending sorting of search results.
	sortarrowup.gif	Ascending sorting of search results.
	check.gif	RFx award symbol.
	aim.gif	Accessing AOL Instant Message.
	people.gif	Order management system (OMS) Edit Approver Screen.
	blank_connector.gif	OMS Edit Approver Screen.
	corner_connector.gif	OMS Edit Approver Screen.
	tee_connector.gif	OMS Edit Approver Screen.
	vertical_connector.gif	OMS Edit Approver Screen.
	collapsebutton.gif	Collapsing a channel.
	removebutton.gif	Removing a channel.
	checkBox.gif	Check boxed displayed when you select a catalog item.
	IMM_smBanner.gif	Upper-right banner text inside a module.
	MM_iPlanet_logo.gif	Large iPlanet logo for login page.
	MM_smiPlanet_logo.gif	Small iPlanet logo for portal pages.
	MM_3rdP_logo.gif	Large template for creating third party logos for login page.
	MM_sm3rdP_logo.gif	Small template for creating third party logos for login page.
	IMM_Banner.gif	Large Market Maker banner for login page.
	MM_Banner.gif	Small Market Maker banner for portal pages.
	Error.gif	Indicating an error page.
	login_BL.gif	Bottom-left portion of graphic in the login page.
	login_TL.gif	Top-left portion of graphic in the login page.
	login_TR.gif	Top-right portion of graphic in the login page.

Table 1-6    Image Files in the @IMM_DOCROOT_FULL@/imm40/iMM/images/buttons Directory 

Image	File name	Used for
	s_left.gif	Dark buttons in the seller top border.
	s_right.gif	Dark buttons in the seller top border.
	b_left.gif	Dark buttons in the buyer top border.
	b_right.gif	Dark buttons in the buyer top border.
	m_left.gif	Dark buttons in the market maker top border.
	m_right.gif	Dark buttons in the market maker top border.
	x_left.gif	Dark buttons before role is known (registration).
	x_right.gif	Dark buttons before role is known (registration).
	left_sm.gif	All buttons in the content area.
	right_sm.gif	All buttons in the content area.
	page_button_left.gif	Left curve for buttons inside the module content area.
	page_button_right.gif	Right curve for buttons inside the module content area.
	button_left.gif	Left curve for buttons outside the module content area.
	button_righ.gif	Right curve for buttons outside the module content area.
	search.gif	Search in the content area.
	go.gif	Filtering the search in the content area.
	s_help.gif	Seller title bar Help button.
	s_home.gif	Seller title bar Home button.
	s_logout.gif	Seller title bar Logout button.
	s_shoppingcart.gif	Seller title bar shopping cart button.
	b_help.gif	Buyer title bar Help button.
	b_home.gif	Buyer title bar Home button
	b_logout.gif	Buyer title bar Logout button.
	b_shoppingcart.gif	Buyer title bar shopping cart button.
	m_help.gif	Market maker title bar Help button.
	m_home.gif	Market maker title bar Home button
	m_logout.gif	Market maker title bar Logout button.
	m_shoppingcart.gif	Market maker title bar shopping cart button.
	registration.gif	Marketplace title bar Registration button.
	help.gif	Marketplace title bar Help button.
	customize_up.gif	Customizing portal page.
	customize_down.gif	Customizing portal page.
	customize_left.gif	Customizing portal page.
	customize_right.gif	Customizing portal page.
	pagination-go.gif	Pagination.

Table 1-7    Image Files in the @IMM_DOCROOT_FULL@/imm40/iMM/images/nav Directory

Image	File name	Used for
	b_left.gif	Indicating the selected module.
	b_right.gif	Indicating the selected module.
	b_spacer.gif	Separating the modules.
	m_left.gif	Indicating the selected module.
	m_right.gif	Indicating the selected module.
	m_spacer.gif	Indicating the selected module.
	m_spacer.gif	Separating the modules.
	s_left.gif	Indicating the selected module.
	s_right.gif	Indicating the selected module.
	s_spacer.gif	Separating the module names.