Previous     Contents     Index     DocHome     Next     
iPlanet Messenger Express 5.0 Customization Guide



Chapter 2   Customizing General Features


This chapter describes how to customize iPlanet Messenger Express 5.0 general features.

This chapter contains these sections:



Modifying the Login Screen

This section describes how to modify the Messenger Express login screen shown in Figure 2-1.

Figure 2-1    Messenger Express Login Screen


Modifications You Can Make to the Login Screen

You can perform the following modifications on the Messenger Express login screen:

  • Replace the logo and accompanying link with a custom graphic and link

  • Change the color scheme

  • Replace the service name (for example, Messenger Express)


To Modify the Login Screen

  • Edit the lang/default.html file.

    Customize the look by editing the body of lang/default.html. Functionally, lang/default.html contains four forms, two visible and two hidden:

    • Username Form (visible)

    • Password, Login Button, New Window Box Form (visible)

    • Login Same Window Form (hidden)

    • Login New Window Form (hidden)

    The hidden forms are the only ones that are submitted to the server (POST username and password to login.msc).

    Submitting the visible forms calls the function post(), which calls login(), which fills out the hidden forms based on the visible form values and submits the appropriate hidden form based on whether the New Window box is checked. Opening in a new window involves specifying a TARGET window name for the server response in the FORM tag.


Example—Login Screen Modifications

This example, shown in Figure 2-2, replaces the iPlanet logo with a custom graphic and link, changes the color scheme to maroon and silver, and changes the wording to "Web Mail Service."

Figure 2-2    Example Login Screen Modifications

Code Example 2-1 shows the login screen HTML before changes, and Code Example 2-2 shows the changes. The file to edit is en/default.html.

Code Example 2-1    Before Altering Login Screen Features
<body bgcolor="white" link="#666699" vlink="#666699" alink="#CCCCFF">
....
<td bgcolor="#66699">
....
<td width="24"><a href="http://www.iplanet.com/" target="_top">
<img src="imx/iplanet.gif" width="62" height="26" border="0"></a></td>
<td><font face="PrimaSans BT,Verdana,sans-serif" color="white"
size="-1"><font color="#CCCCCC" size="-2"<sup></sup></font><b>
Messenger Express</b></font></td>
....
<td bgcolor="#CCCCCC">
....
</body>

Code Example 2-2    After Altering Login Screen Features
<body bgcolor="white" link="#666699" vlink="#666699" alink="#CCCCFF">
......
<td bgcolor="#800000">
.....
<td width="24"><a href="http://siroe.org" target="_top">
<img src="imx/siroe.gif" width="84" height="30" border="0"></a></td>
<td><font face="PrimaSans BT,Verdana,sans-serif" color="white"
size="-1"><font color="CCCCCC" size="-2"><sup></sup></font><b>
Web Mail Service</b></font></td>
.....
<td bgcolor="#C0C0C0">
....
</body>



Modifying Color Sets


This section describes how to modify the iPlanet Messenger Express user interface color sets shown in Figure 2-3.

Figure 2-3    Messenger Express Color Sets


Modifications You Can Make to the Color Sets

You can customize the default color sets for the Messenger Express user interface to change such items as the title bar, tab outlines, column headers, and so on.


To Modify Color Sets in the User Interface

  • Edit the ui[] array definitions near the top of the main.js file.

    The function refreshColorSet() in main.js sets the color scheme of the user interface. This sets color values like chrome1, accent2, and so on, which are used by the rest of the display functions in main.js.

    See refreshColorSet() in main.js for the translation of the ui[] elements to the color values.

    The ui[] array can have as many rows as desired. Additional color themes are displayed on the preferences page as new rows are defined in main.js. If the rows are deleted from the definition script and the user preferences still point to a higher color table index than exists in the ui[] array, the user's JavaScript application will not start.

    See Table 2-1 for the color index of ui[] controls.

    Table 2-1    Color Index of ui[] Controls

    Index

    Name

    Determines

    0  

    accent0  

    Not used  

    1  

    accent1  

    Title bar  

    2  

    accent2  

    Not used  

    3  

    chrome0  

    Tab outlines  

    4  

    chrome1  

    Unselected tab background  

    5  

    chrome2  

    Selected tab background, tool bar, column headers, and so on  

    6  

    chrome3  

    Table cell background  

    7  

    ch3_img  

    Not used  

    8  

    link0  

    Unvisited link  

    9  

    link1  

    Visited link (almost always the same as unvisited)  

    10  

    link2  

    Active link  

    11  

    positive  

    Line drawing (white)  

    12  

    negative  

    Line drawing (black)  

    13  

    white  

    Page background color  


Example—Color Sets Modifications

This example, shown in Figure 2-4, customizes the default color set to have accent1 color maroon, chrome4 color navy, and chrome5 color silver.

Figure 2-4    Example Color Sets Modifications

Code Example 2-3 shows the necessary changes. The file to edit is main.js.

Code Example 2-3    Altering Color Sets
var ui = new Array()

ui[0] = new array('666699','800000','CCCCFF','666666','000080','C0C0C0',
'E6E6E6','gray90.gif','3333CC','3333CC','333366','FFFFFF','000000','FFFFFF',
'000000')



Modifying the Corner Logo and Link


This section describes how to modify the Messenger Express corner logo and link shown in Figure 2-5.

Figure 2-5    Messenger Express Corner Logo and Link


Modifications You Can Make to the Corner Logo and Link

You can perform the following modifications on the Messenger Express corner logo and link:

  • Replace logo with custom graphic

  • Change destination of link


To Modify the Corner Logo and Link

  • Edit the function toolFrame() in the main.js file.


Example—Corner Logo and Link Modifications

This example, shown in Figure 2-6, replaces the iPlanet logo with a custom logo having different dimensions and a custom link.

Figure 2-6    Example Corner Log and Link Modification

Code Example 2-4 shows the necessary changes. The file to edit is main.js.

Code Example 2-4    Altering Logo and Link
function toolFrame() {
....
'<a href="http://www.siroe.org"' +
' target="Netscape"><img src="imx/logo.cust.gif" width=74 height=25' +
'align=texttop border=0 hspace=5 vspace=3></a>' +'</td><td>' +
....
}



Modifying the Title Text


This section describes how to modify the Messenger Express title text shown in Figure 2-7.

Figure 2-7    Messenger Express Title Text


Modifications You Can Make to the Title Text

You can exchange the Messenger Express title text with the service name.


To Modify the Title Text

  • To customize the layout of the title text, edit the function toolFrame() in the main.js file. To customize the title text itself, edit the function i18n_tab_header() in the lang/i18n.js file.

    In general, you can quickly custom brand the interface by replacing all the "Messenger Express" strings with your custom brand name in the lang/i18n.js file.


Example—Title Text Modification

This example, shown in Figure 2-8, customizes the text to say "Web Mail Service for user."

Figure 2-8    Example Title Text Modification

Code Example 2-5 shows the necessary changes. The file to edit is en/i18n.js.

Code Example 2-5    Altering Title Text
function i18n_tab_header(user) {
return '<nobr>Web Mail Service</nobr> for ' + user
}



Modifying the Brand Image


This section describes how to modify the brand image shown in Figure 2-9.

Figure 2-9    Messenger Express Brand Image


Modifications You Can Make to the Brand Image

You can perform the following modifications on the Messenger Express brand image:

  • Include a custom brand logo of the server

  • Alter the size of the brand image


To Modify the Brand Image

  • Edit the main.js file as follows:

    • To customize the brand image, near the top of the main.js file, edit the values of brandht (height), brandwd (width), and brandimg (image location). The default is a blank 1x16 spacer graphic.

    • To customize how the image is displayed, near the top of the main.js file, edit the value of brand (the IMG tag generated from the other values).

    • To further customize the properties of the brand, edit the function toolFrame() in the main.js file.


Example—Brand Image Modification

This example, shown in Figure 2-10, customizes Messenger Express with a new brand image.

Figure 2-10    Example Brand Image Modification

Code Example 2-6 shows the necessary changes. The file to edit is main.js.

Code Example 2-6    Altering Brand Image
// set this to appropriate text and/or image to brand the top frame
// MUST specify height and width for Navigator 3.x to work
var brandht = 45
var brandwd = 45
var brandwd = 45


Previous     Contents     Index     DocHome     Next     
Copyright © 2000 Sun Microsystems, Inc. Some preexisting portions Copyright © 2000 Netscape Communications Corp. All rights reserved.

Last Updated September 29, 2000