Difference between revisions of "CUSTOM WELCOME/LOGIN PAGE"

From Scalix Wiki
Jump to: navigation, search
(Additional Content body through /body)
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. We can use the page from Scalix 10 for the basis of the customization in Scalix 11.  
  
 +
== Scalix 10 "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.
  
 
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:
  
−
%CODE{html}%
+
  <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>
−
%ENDCODE%
+
  
−
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.
+
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.
−
%CODE{html}%
+
−
    <!-- 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;
+
  <table width="100%" height="100%" border="0">
−
var gIsNS = false;
+
    <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">
  
−
var reject = true;
+
You can change the logo here.
−
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;
+
−
  }
+
−
}
+
−
%ENDCODE%
+
  
−
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.  
+
                            <!-- 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> element...
 +
                            <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> element...
 +
                            <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> element...
 +
                            <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> element...
 +
                            <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> element...
 +
  <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>
  
−
%CODE{html}%
 
−
if ( reject )
 
−
  location.replace( "/webmail/browserReject.jsp" );
 
  
−
// -->
 
−
      </script>
 
−
  </head>
 
−
%ENDCODE%
 
  
 
More to come...
 
More to come...

Revision as of 02:54, 12 January 2007

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.

Scalix 10 "default.html"

Let's review the Scalix 10 "default.html" so that you understand what it is doing.

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>

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.

You can change the logo here. 

                           <img id="logoImg" src="/webmail/img/Scalix.gif" width="175" height="71" vspace="30" alt="Scalix">


Loading Message
element... 
                             
                               <script type="text/javascript">
                               </script>
                               <noscript>
                                 Scalix Web Access requires JavaScript to be enabled.
                               </noscript>


Login Form
element... Logging In
element...


Expired Password
element... Successful Login
element...

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>


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