Difference between revisions of "CUSTOM WELCOME/LOGIN PAGE"

From Scalix Wiki
Jump to: navigation, search
(Changed tags because i'm new to this...)
(→‎About Customizing Welcome/Login Page)
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
== 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  
 
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
 
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.  
+
to do this. This has not been released for Scalix 11 and Scalix 12. We can use the page from Scalix 10 for the basis of the customization in Scalix 11 and 12.
  
 +
== Default.html ==
 
Let's review the Scalix 10 "default.html" so that you understand what it is doing.
 
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:
 
You can change the title between <title> </title> in the head of the webpage:
−
[quote]
+
 
−
<html>
+
  <html>
 
   <head>
 
   <head>
 
     <title>The Best Webmail System </title>
 
     <title>The Best Webmail System </title>
 
     <style type="text/css">
 
     <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>
  
−
input, span {
+
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.
−
  font-family:helvetica, sans-serif;
+
−
  font-size:11px;
+
−
  color:black;
+
−
  font-weight:normal;
+
−
  font-style:normal;
+
−
}
+
  
−
span {
+
  <!-- built on 08/26/2005 04:55 PM -->
−
   cursor:default;
+
   <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">
 +
  <!--
 +
  /*
 +
  * Browser detection
 +
  * We only allow:
 +
  *    - IE version >= 5.5 SP2 on Windows only
 +
  *    - Mozilla >= 1.7 on all platforms
 +
  *    - Firefox >= 1.0 on all platforms
 +
  */
 +
  var br = getBrowser();
 +
  var os = getOS();
 +
  var browserID = br[0];
 +
  var browserMajorVersion = getMajorVersion( br[1] );
 +
  var browserMinorVersion = getMinorVersion( br[1] );
 +
  var osID = os[0];
 +
  var gIsIE = false;
 +
  var gIsNS = false;
 +
  var reject = true;
 +
  if ( browserID == "msie" && osID == "win" ) {
 +
    if ( browserMajorVersion >= 6 ||
 +
        ( browserMajorVersion == 5 &&
 +
          browserMinorVersion >= 5 ) ) {
 +
      reject = false;
 +
      gIsIE = true;
 +
    }
 +
  } else if ( browserID == "mozsea" ) {
 +
    if ( browserMajorVersion > 1 ||
 +
        ( browserMajorVersion == 1 &&
 +
          browserMinorVersion >= 7 ) ) {
 +
      reject = false;
 +
      gIsNS = true;
 +
    }
 +
  } else if ( browserID == "firefox" ) {
 +
    if ( browserMajorVersion >= 1 |
 +
        ( browserMajorVersion == 0 &&
 +
          browserMinorVersion >= 10 ) ) {
 +
      reject = false;
 +
      gIsNS = true;
 +
    }
 +
  }
  
−
a:link, a:visited, a:active {
+
The following code segment redirects a browser if it does not match the criteria required. A forum post suggests that replacing the url with "/m" is useful and I would agree.
−
  color:#BB0000;
+
−
  text-decoration:none;
+
−
}
+
  
−
a:hover {
+
   if ( reject )
−
   color:#BB0000;
+
    location.replace( "/webmail/browserReject.jsp" );
−
   text-decoration:underline;
+
   // -->
−
}
+
  </script>
−
    </style>
+
  </head>
−
[/quote]
+
  
−
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.
+
=== Body ===
−
[code]
+
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.
−
    <!-- built on 08/26/2005 04:55 PM -->
+
−
    <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">
+
−
<!--
+
  
−
/*
+
  <body onload="loginPageOnLoadHandler();" style="overflow:hidden;background-color:#FFFFEB;">
−
* Browser detection
+
−
* We only allow:
+
−
*    - IE version >= 5.5 SP2 on Windows only
+
−
*    - Mozilla >= 1.7 on all platforms
+
−
*    - Firefox >= 1.0 on all platforms
+
−
*/
+
  
−
var br = getBrowser();
+
This is for the initial page layout.
−
var os = getOS();
+
−
var browserID = br[0];
+
−
var browserMajorVersion = getMajorVersion( br[1] );
+
−
var browserMinorVersion = getMinorVersion( br[1] );
+
−
var osID = os[0];
+
  
−
var gIsIE = false;
+
  <pre>
−
var gIsNS = false;
+
  <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">
 +
  </pre>
  
−
var reject = true;
+
You can change the logo here.
−
if ( browserID == "msie" && osID == "win" ) {
+
   <pre>
−
   if ( browserMajorVersion >= 6 ||
+
  <!-- You may customize your logo by changing the following line -->
−
      ( browserMajorVersion == 5 &&
+
   <img id="logoImg" src="/webmail/img/Scalix.gif" width="175" height="71" vspace="30" alt="Scalix">
−
        browserMinorVersion >= 5 ) ) {
+
   <br>
−
    reject = false;
+
   </pre>
−
    gIsIE = true;
+
−
   }
+
−
} else if ( browserID == "mozsea" ) {
+
−
  if ( browserMajorVersion > 1 ||
+
−
      ( browserMajorVersion == 1 &&
+
−
        browserMinorVersion >= 7 ) ) {
+
−
    reject = false;
+
−
    gIsNS = true;
+
−
  }
+
−
} else if ( browserID == "firefox" ) {
+
−
   if ( browserMajorVersion >= 1 |
+
−
      ( browserMajorVersion == 0 &&
+
−
        browserMinorVersion >= 10 ) ) {
+
−
    reject = false;
+
−
    gIsNS = true;
+
−
   }
+
−
}
+
−
[/code]
+
  
−
The following code segment redirects a browser if it does not match the criteria required. A forum post suggests that replacing the url with "/m" is useful and I would agree.  
+
=== Loading Message ===
 +
  <pre>
 +
  <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>
 +
  </pre>
  
−
[code]
+
=== Login Form ===
−
if ( reject )
+
  <pre>
−
   location.replace( "/webmail/browserReject.jsp" );
+
   <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" onfocus="gUsernameOrPasswordFieldHasFocus = true;" onblur="gUsernameOrPasswordFieldHasFocus = false;">
 +
    <br>
 +
    <span style="color:#666666;font-size:9px;">
 +
      Username
 +
    </span>
 +
    <br><br>
 +
    <input id="password_field" type="password" style="width:150px" onfocus="gUsernameOrPasswordFieldHasFocus = true;" onblur="gUsernameOrPasswordFieldHasFocus = false;">
 +
    <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>
 +
  </pre>
  
−
// -->
+
=== Logging In ===
−
       </script>
+
  <pre>
−
   </head>
+
  <div id="waitLogin" style="display:none;height:40px;">
−
[/code]
+
    <span style="font-size:12px;font-weight:bold;">
 +
      <!-- You may customize the text by changing the following line -->
 +
      Logging in. Please wait...
 +
    </span>
 +
  </div>
 +
  </pre>
 +
 
 +
=== Expired Password ===
 +
  <pre>
 +
  <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>
 +
  </pre>
 +
 
 +
=== Successful Login ===
 +
  <pre>
 +
  <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>
 +
  </pre>
 +
 
 +
And the rest of the HTML to properly close out the remaining open tags...
 +
  <pre>
 +
  </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>
 +
  </pre>
 +
 
 +
== Installing it on Scalix 11 and Scalix 12 ==
 +
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>
 +
 
 +
Finally, recycle Tomcat.
 +
 
 +
== 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
 +
  <pre><div id="xxxxxx" style="display:none;"></pre>
 +
 
 +
to
 +
  <pre><div id="xxxxxx" style="display:block;"></pre>
  
−
More to come...
+
and back when done with that specific element. This will allow you to see each of the areas as you modify it.

Latest revision as of 07:12, 3 February 2015

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 and Scalix 12. We can use the page from Scalix 10 for the basis of the customization in Scalix 11 and 12.

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" onfocus="gUsernameOrPasswordFieldHasFocus = true;" onblur="gUsernameOrPasswordFieldHasFocus = false;">
    <br>
    <span style="color:#666666;font-size:9px;">
      Username
    </span>
    <br><br>
    <input id="password_field" type="password" style="width:150px" onfocus="gUsernameOrPasswordFieldHasFocus = true;" onblur="gUsernameOrPasswordFieldHasFocus = false;">
    <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 11 and Scalix 12

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>

Finally, recycle Tomcat.

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.

Retrieved from "https://www.scalix.com/wiki/index.php?title=CUSTOM_WELCOME/LOGIN_PAGE&oldid=15595"