Difference between revisions of "CUSTOM WELCOME/LOGIN PAGE"

From Scalix Wiki
Jump to: navigation, search
(Additional Content body through /body)
(Installation of Custom Page and Advanced Information)
Line 95: Line 95:
 
This is for the initial page layout.
 
This is for the initial page layout.
  
 +
  <pre>
 
   <table width="100%" height="100%" border="0">
 
   <table width="100%" height="100%" border="0">
 
     <tr>
 
     <tr>
Line 107: Line 108:
 
     <tr>
 
     <tr>
 
     <td align="center" style="background-color:#FFFFFF">
 
     <td align="center" style="background-color:#FFFFFF">
 +
  </pre>
  
 
You can change the logo here.  
 
You can change the logo here.  
 +
  <pre>
 +
  <!-- 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>
 +
  </pre>
  
−
                            <!-- You may customize your logo by changing the following line -->
+
'''Loading Message''' div element...
−
                            <img id="logoImg" src="/webmail/img/Scalix.gif" width="175" height="71" vspace="30" alt="Scalix">
+
  <pre>
−
 
+
  <div id="loadingMessage" style="display:block;height:40px;">
−
                            <br>
+
    <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>
  
−
Loading Message <div> element...
+
'''Login Form''' div element...
−
                            <div id="loadingMessage" style="display:block;height:40px;">
+
  <pre>
−
                              <span style="font-size:12px;font-weight:bold;">
+
  <div id="loginForm" style="display:none;">
−
                                <script type="text/javascript">
+
    <span style="font-size:12px;font-weight:bold;">
−
                                <!--
+
      <!-- You may customize the title by changing the following line -->
−
                                  document.write( 'Loading. Please wait...' );
+
        Someones Company - Webmail
−
                                // -->
+
    </span>
−
                                </script>
+
    <br><br>
−
                                <noscript>
+
    <!-- You may add some text below -->
−
                                  Scalix Web Access requires JavaScript to be enabled.
+
    <span style="color:#333333">
−
                                </noscript>
+
      Please log in.
−
                              </span>
+
    </span>
−
                            </div>
+
    <br><br>
−
 
+
    <input id="username_field" type="text" style="width:150px">
−
 
+
    <br>
−
Login Form <div> element...
+
    <span style="color:#666666;font-size:9px;">
−
                            <div id="loginForm" style="display:none;">
+
      Username
−
                              <span style="font-size:12px;font-weight:bold;">
+
    </span>
−
                                <!-- You may customize the title by changing the following line -->
+
    <br><br>
−
                                Someones Company - Webmail
+
    <input id="password_field" type="password" style="width:150px">
−
                              </span>
+
    <br>
−
                              <br><br>
+
    <span style="color:#666666;font-size:9px;">
−
                              <!-- You may add some text below -->
+
      Password
−
                              <span style="color:#333333">
+
    </span>
−
                                Please log in.
+
    <br><br><br>
−
                              </span>
+
    <a href="javascript:login()"><img alt="Login" src="/webmail/img/but_login.gif" width="71" height="22" border="0"></a>
−
                              <br><br>
+
    <br>
−
                              <input id="username_field" type="text" style="width:150px">
+
    <div style="width:100%;text-align:left;">
−
                              <br>
+
      <span style="color:#666666;font-size:9px;">
−
                              <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>
+
      </span>
−
                              </div>
+
    </div>
−
                            </div>
+
  </div>
−
 
+
  </pre>
−
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>
+
  
 +
'''Logging In''' div element...
 +
  <pre>
 +
  <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>
 +
  </pre>
  
−
Expired Password <div> element...
+
'''Expired Password''' div element...
−
                            <div id="expPwdForm" style="display:none">
+
  <pre>
−
                              <span style="font-size:12px;font-weight:bold;">
+
  <div id="expPwdForm" style="display:none">
−
                                <!-- You may customize the title by changing the following line -->
+
    <span style="font-size:12px;font-weight:bold;">
−
                                Your password has expired.
+
      <!-- You may customize the title by changing the following line -->
−
                              </span>
+
      Your password has expired.
−
                              <br><br>
+
    </span>
−
                            <input id="old_password_field" type="password" style="width:150px">
+
    <br><br>
−
                              <br>
+
    <input id="old_password_field" type="password" style="width:150px">
−
                              <span style="color:#666666;font-size:9px;">
+
    <br>
−
                                Confirm your old password
+
    <span style="color:#666666;font-size:9px;">
−
                              </span>
+
      Confirm your old password
−
                              <br><br>
+
    </span>
−
                              <input id="new_password_field1" type="password" style="width:150px">
+
    <br><br>
−
                              <br>
+
    <input id="new_password_field1" type="password" style="width:150px">
−
                              <span style="color:#666666;font-size:9px;">
+
    <br>
−
                                Type your new password
+
    <span style="color:#666666;font-size:9px;">
−
                              </span>
+
      Type your new password
−
                              <br><br>
+
    </span>
−
                              <input id="new_password_field2" type="password" style="width:150px">
+
    <br><br>
−
                              <br>
+
    <input id="new_password_field2" type="password" style="width:150px">
−
                              <span style="color:#666666;font-size:9px;">
+
    <br>
−
                                Confirm your new password
+
    <span style="color:#666666;font-size:9px;">
−
                              </span>
+
      Confirm your new password
−
                              <br><br><br>
+
    </span>
−
                              <a href="javascript:chgExpPwd()"><img alt="Login" src="/webmail/img/but_login.gif" width="71" height="22" border="0"></a>
+
    <br><br><br>
−
                              <br>
+
    <a href="javascript:chgExpPwd()"><img alt="Login" src="/webmail/img/but_login.gif" width="71" height="22" border="0"></a>
−
                              <div style="width:100%;text-align:left;">
+
    <br>
−
                                <span style="color:#666666;font-size:9px;">
+
    <div style="width:100%;text-align:left;">
 +
      <span style="color:#666666;font-size:9px;">
 
                                    
 
                                    
−
                                </span>
+
      </span>
−
                              </div>
+
    </div>
−
                            </div>
+
  </div>
 +
  </pre>
  
−
Successful Login <div> element...
+
'''Successful Login''' div element...
 +
  <pre>
 
   <div id="loginSuccessful" style="display:none;height:40px;">
 
   <div id="loginSuccessful" style="display:none;height:40px;">
 
     <span style="font-size:12px;font-weight:bold;">
 
     <span style="font-size:12px;font-weight:bold;">
Line 214: Line 222:
 
     </span>
 
     </span>
 
   </div>
 
   </div>
 +
  </pre>
  
 
And the rest of the HTML to properly close out the remaining open tags...
 
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>
 
   </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>
 
   <iframe id="jsFrame" src="/webmail/jscript.jsp" style="position:absolute;width:0px;height:0px;" frameborder="0" tabindex="-1"></iframe>
 
   </body>
 
   </body>
 +
  </pre>
 +
 +
== 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
 +
  <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.

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

  <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 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>

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=2886"