|
| |
| Sun Java System Messenger Express 2004Q2 Customization Guide | |
Chapter 2
Customizing General Features in Messenger ExpressThis chapter describes how to customize the general features of Messenger Express.
This chapter contains the following sections:
Modifying the Login ScreenThis section describes how to modify the Messenger Express Login screen shown in Figure 2-1.
Figure 2-1 Messenger Express Login Screen
.
You can modify the following on the Messenger Express Login screen:
To Modify the Login Screen
To modify the Login Screen, edit the lang/default.html file.
Customize the user interface by editing the body of lang/default.html. Functionally, lang/default.html contains three forms, two visible and one hidden:
The hidden form is the one that is submitted to the server (POST username and password to login.msc).
You can also insert a new banner, image or link on the Sun Java System Messenger Express Login screen, by editing the lang/default.html file.
Example—Login Screen Modifications
The example shown in Figure 2-2 replaces the Sun logo with a custom graphic and adds an advertisement banner with a link.
Figure 2-2 Example Login Screen Modifications
Code Example 2-1 shows the Login screen HTML before editing the en/default.html file to customize the Login screen.
Code Example 2-2 shows the changes to be made in the en/default.html file to replace the Sun logo with a custom graphic and add an advertisement banner with a link in the Login screen.
Code Example 2-2 After Altering Login Screen Features
....
<meta http-equiv="Content-Type" content="text/html; ">
<link rel="stylesheet" href="master-style.css" type="text/css">
....
<BODY marginwidth="0" marginheight="0" topmargin="0" leftmargin="0"
rightmargin="0" bottommargin="0" bgcolor="#ffffff">
....
<td rowspan="4" valign="bottom"><img src="imx/siroe.gif"
width="96" height="66"></td>
....
<td><a href=”http://www.siroe.com”>
<img src="imx/ad.gif" width="450" height="50"
alt="Advertisement Banner tip"></a><BR>
<img src="imx/siroewebservice.gif" width="200" height="30"
alt="Siroe Webmail Service">
.....
<td bgcolor="#C0C0C0">
....
Modifying Color SetsThis section describes how to modify the Sun Java System Messenger Express user interface color sets shown in Figure 2-3.
Figure 2-3 Messenger Express Color Sets
You can customize the default color sets for the Messenger Express user interface to change items such as the title bar, tab outlines, and column headers.
To Modify Color Sets in the User Interface
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 to color values such as chrome1 and accent2. These color values 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. The user’s JavaScript application will not start when the rows are deleted from the definition script with the user preferences still pointing to a higher color table index than exists in the ui[] array.
See Table 2-1 for the color index of ui[] controls.
Table 2-1 Contains the color index of ui[] controls, their names and what they determine
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
The example shown in Figure 2-4 customizes the default color set ui[0] to have accent1 color maroon, chrome4 color navy blue, and chrome5 color silver.
Figure 2-4 Example Color Sets Modifications
Code Example 2-3 shows the necessary changes to be made in the file 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 Logo and LinkThis 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
You can modify the following on the Messenger Express corner logo and link:
To Modify the Logo and Link
To modify the logo and link, edit the function toolFrame() in the main.js file.
Example—Logo Modification
The example shown in Figure 2-6 replaces the Sun logo with a custom logo having different dimensions.
Figure 2-6 Example Corner Logo
Code Example 2-4 shows the necessary changes to be made in file default.html for replacing the Sun logo SunONE.jpg with a custom logo siroe.gif.
Code Example 2-4 Replacing the Sun logo with a custom logo.
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"><img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td valign="top" class="MstTdLogo" width="20%"><img src="images/siroe.gif"
width="110" height="43" alt="Sun Microsystems, Inc."></td>
Code Example 2-5 shows the necessary changes to be made in file default.html for changing the link to the new URL for siroe.com.
Code Example 2-5 Changes to be made in the file default.html for changing the link to the new URL to siroe.com
....
<td colspan="2"><a href="http://www.siroe.com">
onMouseOver="over('bannerlink')" onMouseOut="out('bannerlink')"
onClick="loadandswap('bannerlink', 'http://www.siroe.com'); return true"> <font size="-1"><span
class="banner-links">siroe.com</span></font></a></td>
</tr>
....
Code Example 2-6 Changes to be made in file default.html for changing the link to the new URL for siroe.com.
....
<td colspan="2"><a href="http://www.siroe.com">
onMouseOver="over('bannerlink')" onMouseOut="out('bannerlink')"
onClick="loadandswap('bannerlink', 'http://www.siroe.com'); return true"> <font size="-1"><span
class="banner-links">siroe.com</span></font></a></td>
</tr>
....
Modifying the Title Graphic and Text
This section describes how to modify the title graphic and the text shown in Figure 2-7.
Figure 2-7 Messenger Express Title Text
You can modify the following on the Sun Java System Messenger Express title graphic and text:
To Modify the Title Graphic and Text
To customize the layout of the title text, edit the function toolFrame() in the main.js file.
Example—Title Text Modification
The example shown in Figure 2-8 customizes the text to “Inbox for user.”
Figure 2-8 Example Title Text Modification
Code Example 2-7 shows the necessary changes to be made in file main.js to alter the graphic title.
Code Example 2-7 Altering Graphic Title
....
<TD width=1% nowrap bgcolor="'+ chrome1 +'"><NOBR>
<IMG src="imx/Banner.gif width="273" height="27"
alt="'+i18n['Sun Java System Messenger Express']+'"
align=texttop border=0 hspace=5 vspace=3
</nobr></TD>
....
Code Example 2-8 shows the necessary changes to be made file en/i18n.js to alter the title text.
Code Example 2-8 Altering Title Text
function i18n_tab_header(user) {
return ’<nobr> Inbox for ’ + user
}
Inserting Banners and LinksThis section describes how to insert advertisement banners and links on the Sun Java System Messenger Express user interface shown in Figure 2-9.
Figure 2-9 Example Inserting Common Banner and Link
You can modify the following on the Messenger Express user interface:
To Insert Banner and Link
Example—Inserting Banners and Links
The example shown in Figure 2-10 inserts a banner and link in the Sun Java System Messenger Express Inbox screen.
Figure 2-10 Example Inserting a Banner and Link in the Inbox Screen
Code Example 2-9 shows the code before inserting banner and link on all user interface in the main.js file.
Code Example 2-9 Before Inserting a Banner and Link
function toolFrame() {
if (isRefreshing())
return ’’
....
tab(i18n[’options’], state == ’options’, ’selectOptions()’) +
’<td width=50%>’ + nbsp + ’</td>\n’ +
’</tr></table>\n’ +
’</td>\n’ +
’</tr></table>\n’ +
getBreadCrumb() +
mailFrame.getToolbar() + ’</form>’
}
Code Example 2-10 shows how to insert a banner and link to the main.js file.
Code Example 2-10 After Inserting a Banner and Link
function toolFrame() {
if (isRefreshing())
return ’’
....
tab(i18n[’options’], state == ’options’, ’selectOptions()’) +
’<td width=50%>’ + nbsp + ’</td>\n’ +
’</tr></table>\n’ +
’</td>\n’ +
’</tr><tr><td width=100% bgcolor=’+main.chrome1+’ align=center><a href=”http://www.sesta.com”>
<img src="imx/ad.gif" width=200
height=25></a></td></tr></table>\n’ + getBreadCrumb() +
mailFrame.getToolbar() + ’</form>’
}
Code Example 2-11 shows the code before inserting banner and link to the Inbox screen, in mbox_fs.html file.
Code Example 2-11 Before Inserting Banner and Link to the Inbox Screen
function getToolbar() {
var s
var enable = main.sortid.length > 0
s = ’<table border="0" cellpadding="0" cellspacing="0">\n’ +
’<TR><TD colspan=42><IMG src="imx/spacer.gif" width="1"
height="8"></TD></TR>’+
’<tr align="center">\n’ +
’<td width="10"> </td>\n’ + ’<td align="center" nowrap>’
+ main.font(1) +
main.folderSelectionBreadCrumbs(’folderList’,’main.selectMbox(options[selec tedIndex].value);selectedIndex=0’,
Code Example 2-12 shows how to insert a banner and link to the Inbox screen by editing mbox_fs.html. The banner and link are displayed only on the Inbox screen.
Code Example 2-12 After Inserting Banner and Link to the Inbox Screen
function getToolbar() {
var s
var enable = main.sortid.length > 0
s = ’<table border="0" cellpadding="0" cellspacing="0">\n’ +
’<TR><TD width=100% align=center>’+
’<img src="imx/spacer.gif" width="405" height=1>
<a href =”http://www.siroe.com”><img src="imx/banner.gif"
width=200 height=35></a></td></tr>’+
’<tr align="center">\n’ +
’<td width="10"> </td>\n’ + ’<td align="center" nowrap>’
+ main.font(1) +
main.folderSelectionBreadCrumbs(’folderList’,’main.selectMbox(options[selec tedIndex].value);selectedIndex=0’,
....
![In Figure 2-4 the default color set ui[0] has been customized to accent1 color maroon, chrome4 color navy blue, and chrome5 color silver.](images/message_screen4.gif)
