Difference between revisions of "CUSTOM WELCOME/LOGIN PAGE"
m (Layout Changes) |
(Recycle Tomcat Notice After Modifying web.xml) |
||
| Line 254: | Line 254: | ||
and back when done with that specific element. This will allow you to see each of the areas as you modify it. | and back when done with that specific element. This will allow you to see each of the areas as you modify it. | ||
| + | |||
| + | Finally, recycle Tomcat. | ||
Revision as of 05:50, 12 January 2007
Contents
About Customizing Welcome/Login Page
In order to customize the welcome/login page you should understand that the page is (initially) generated on-demand when a user visits the webmail url. We need to create a static page that can perform the same tasks that this dynamic creation does. In Scalix 10 there was an Admin Resource Kit which included a static webpage to do this. This has not been released for Scalix 11. We can use the page from Scalix 10 for the basis of the customization in Scalix 11.
Default.html
Let's review the Scalix 10 "default.html" so that you understand what it is doing.
Head
You can change the title between <title> </title> in the head of the webpage:
<html>
<head>
<title>The Best Webmail System </title>
<style type="text/css">
input, span {
font-family:helvetica, sans-serif;
font-size:11px;
color:black;
font-weight:normal;
font-style:normal;
}
span {
cursor:default;
}
a:link, a:visited, a:active {
color:#BB0000;
text-decoration:none;
}
a:hover {
color:#BB0000;
text-decoration:underline;
}
</style>
The following section is the browser detection and other functions. These are essentially to the proper operation of the Webmail AJAX client. It is not recommended to modify these.
<script type="text/javascript" src="/webmail/brwsniff.js"></script> <script type="text/javascript" src="/webmail/fugu.js"></script> <script type="text/javascript" src="/webmail/index.js"></script> <script type="text/javascript"> </script> </head>
Body
Now let's look at the body. There are a few required elements involved and we'll point these out. The first one appears in the <body> tag in the onload function "loginPageOnLoadHandler()". You don't want to change this.
<body onload="loginPageOnLoadHandler();" style="overflow:hidden;background-color:#FFFFEB;">
This is for the initial page layout.
<table width="100%" height="100%" border="0">
<tr>
<td valign="middle" align="center">
<table width="350" cellspacing="0" cellpadding="1" border="0">
<tr>
<td style="background-color:#999999">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td style="background-color:#EEEEEE">
<table width="100%" cellspacing="0" cellpadding="2" border="0">
<tr>
<td align="center" style="background-color:#FFFFFF">
You can change the logo here.
<!-- You may customize your logo by changing the following line --> <img id="logoImg" src="/webmail/img/Scalix.gif" width="175" height="71" vspace="30" alt="Scalix"> <br>
Loading Message
<div id="loadingMessage" style="display:block;height:40px;">
<span style="font-size:12px;font-weight:bold;">
<script type="text/javascript">
<!--
document.write( 'Loading. Please wait...' );
// -->
</script>
<noscript>
Scalix Web Access requires JavaScript to be enabled.
</noscript>
</span>
</div>
Login Form
<div id="loginForm" style="display:none;">
<span style="font-size:12px;font-weight:bold;">
<!-- You may customize the title by changing the following line -->
Someones Company - Webmail
</span>
<br><br>
<!-- You may add some text below -->
<span style="color:#333333">
Please log in.
</span>
<br><br>
<input id="username_field" type="text" style="width:150px">
<br>
<span style="color:#666666;font-size:9px;">
Username
</span>
<br><br>
<input id="password_field" type="password" style="width:150px">
<br>
<span style="color:#666666;font-size:9px;">
Password
</span>
<br><br><br>
<a href="javascript:login()"><img alt="Login" src="/webmail/img/but_login.gif" width="71" height="22" border="0"></a>
<br>
<div style="width:100%;text-align:left;">
<span style="color:#666666;font-size:9px;">
</span>
</div>
</div>
Logging In
<div id="waitLogin" style="display:none;height:40px;">
<span style="font-size:12px;font-weight:bold;">
<!-- You may customize the text by changing the following line -->
Logging in. Please wait...
</span>
</div>
Expired Password
<div id="expPwdForm" style="display:none">
<span style="font-size:12px;font-weight:bold;">
<!-- You may customize the title by changing the following line -->
Your password has expired.
</span>
<br><br>
<input id="old_password_field" type="password" style="width:150px">
<br>
<span style="color:#666666;font-size:9px;">
Confirm your old password
</span>
<br><br>
<input id="new_password_field1" type="password" style="width:150px">
<br>
<span style="color:#666666;font-size:9px;">
Type your new password
</span>
<br><br>
<input id="new_password_field2" type="password" style="width:150px">
<br>
<span style="color:#666666;font-size:9px;">
Confirm your new password
</span>
<br><br><br>
<a href="javascript:chgExpPwd()"><img alt="Login" src="/webmail/img/but_login.gif" width="71" height="22" border="0"></a>
<br>
<div style="width:100%;text-align:left;">
<span style="color:#666666;font-size:9px;">
</span>
</div>
</div>
Successful Login
<div id="loginSuccessful" style="display:none;height:40px;">
<span style="font-size:12px;font-weight:bold;">
<!-- You may customize the text by changing the following line -->
Login successful. You may close this window,<br>or click <a href='javascript:showLoginForm()'>here</a> if you want to return to the login window.
</span>
</div>
And the rest of the HTML to properly close out the remaining open tags...
</td></tr></table></td></tr></table></td></tr></table></td></tr></table> <iframe id="jsFrame" src="/webmail/jscript.jsp" style="position:absolute;width:0px;height:0px;" frameborder="0" tabindex="-1"></iframe> </body>
Installing it on Scalix 10 and Scalix 11
Place default.html into /%sxroot%/webapps/webmail/
Place custom graphics into /%sxroot%/webapps/webmail/imgs
Modify /%sxroot%/webapps/webmail/WEB-INF/web.xml so that it appears like...
<welcome-file-list>
<welcome-file>default.html</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
Advanced Customization
It is entirely possible to create a very unique login page. Notice the required mentions (javascript and javascript related functions and includes). The various elements that are in bold are important as well. These elements can be drastically altered so long as their basic information and name is kept the same.
A suggestion for starters is to modify the page as you work down each element and change
<div id="xxxxxx" style="display:none;">
to
<div id="xxxxxx" style="display:block;">
and back when done with that specific element. This will allow you to see each of the areas as you modify it.
Finally, recycle Tomcat.
