Difference between revisions of "CUSTOM WELCOME/LOGIN PAGE"

From Scalix Wiki
Jump to: navigation, search
(Installation of Custom Page and Advanced Information)
m (Layout Changes)
Line 5: Line 5:
 
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" ==
+
== 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:
  
Line 89: Line 90:
 
   </head>
 
   </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.
 
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.
  
Line 117: Line 119:
 
   </pre>
 
   </pre>
  
−
'''Loading Message''' div element...
+
=== Loading Message ===
 
   <pre>
 
   <pre>
 
   <div id="loadingMessage" style="display:block;height:40px;">
 
   <div id="loadingMessage" style="display:block;height:40px;">
Line 133: Line 135:
 
   </pre>
 
   </pre>
  
−
'''Login Form''' div element...
+
=== Login Form ===
 
   <pre>
 
   <pre>
 
   <div id="loginForm" style="display:none;">
 
   <div id="loginForm" style="display:none;">
Line 168: Line 170:
 
   </pre>
 
   </pre>
  
−
'''Logging In''' div element...
+
=== Logging In ===
 
   <pre>
 
   <pre>
 
   <div id="waitLogin" style="display:none;height:40px;">
 
   <div id="waitLogin" style="display:none;height:40px;">
Line 178: Line 180:
 
   </pre>
 
   </pre>
  
−
'''Expired Password''' div element...
+
=== Expired Password ===
 
   <pre>
 
   <pre>
 
   <div id="expPwdForm" style="display:none">
 
   <div id="expPwdForm" style="display:none">
Line 214: Line 216:
 
   </pre>
 
   </pre>
  
−
'''Successful Login''' div element...
+
=== Successful Login ===
 
   <pre>
 
   <pre>
 
   <div id="loginSuccessful" style="display:none;height:40px;">
 
   <div id="loginSuccessful" style="display:none;height:40px;">

Revision as of 03: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.

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.

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