Login at Community Support for OpenDocMan (Deprecated)

Olivier · 02-22-2012, 04:45 AM

Hello,
The next step is define a structured template. First I make a new folder adddon on the root directory with the subfolders images js css
I created the tpl file :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="addon/css/login_style.css" />
<script src="addon/js/validform.js" type="text/javascript"></script>
</head>
<body>
<div id="header_page">
<div id="header_logo">
<img src="addon/images/altimirambitecnia.png" alt="Iso Altimir ambitecnia"/>
</div>
<div id="header_text">
<h1><span class="blau_alti">Altimir </span><span class="blau">Ambitè</span><span class="vert">cnia</span></h1>
</div>
<div id="header_time">
<iframe src="http://free.timeanddate.com/clock/i2zpgj1q/tlfr2/fn12/fs42/fcfff/tct/pc090/ftb/bls0/brs0/bts4/btc00b/bbs4/bbc00b/th1" frameborder="0" width="211" height="52" allowTransparency="true"></iframe>
</div>
</div>
<form name="Form1" id="form_page" method="post" action="index.php" id="Form1" onsubmit="return ValidateForm1(this)">
<img src="addon/images/login.jpg" id="Image1" alt=""/>
<table>
<tbody>
<tr align="Left">
<td width=45%><span class="label">{$g_lang_username}</span></td>
<td colspan="2"><input type="text" id="Editbox1" name="frmuser" value=""></td>
</tr>
<tr align="Left">
<td width=45%><span class="label">{$g_lang_password}</span></td>
<td colspan="2"><input type="password" id="Editbox2" name="frmpass" value=""></td>
</tr>
</tbody>
</table>
<input type="submit" id="Button1" name="login" value="Submit">
{if $redirection}
<input type="hidden" id="Editbox3" ame="redirection" value="{$redirection}">
{/if}
{if $allow_password_reset == 'True' }
<div class="link">
<a href="$g_base_url/forgot_password.php">{$g_lang_forgotpassword}</a>
</div>
{/if}
{if $allow_signup == 'True'}
<div class="link">
<a href="$g_base_url/signup.php">{$g_lang_signup}</a>;
</div>
{/if}
</form>
</body>
</html>

the css file (login_style.css)

body
{
background-color: #FFFFFF;
color: #000000;
}

/*---------------------------------------------------------*/
/* Header definition */
/*---------------------------------------------------------*/
#header_page
{
width: 90%;
height:151px;
margin-left: auto;
margin-bottom:30px;
background:#FFFFFF;
}
#header_logo
{
display: inline-block;
width: 20%;
height:151px;
vertical-align: top;
background:none;
}
#header_logo img
{
display: inline-block;
height:151px;
width:auto;
vertical-align: top;
}
#header_text
{
display: inline-block;
width: 40%;
height:151px;
vertical-align: top;
background:none;
text-align:center;
}
#header_text h1
{
font-size: 3.5em;
font-family: 'Trebuchet MS', serif;
}
#header_time
{
display: inline-block;
width: 30%;
height:151px;
background:none;
vertical-align: top;
margin-top:45px;
margin-left:70px;
}
.vert
{
color:#26ec06;
}
.blau
{
color:#2c05f3;
}
.blau_alti
{
color:#064975;
}
/*---------------------------------------------------------*/
/* form definition */
/*---------------------------------------------------------*/
#form_page
{
width: 410px;
height:300px;
margin-left: 30%;
margin-bottom:30px;
background:none;
border: 4px solid orange;
opacity:0.7;
filter:alpha(opacity=70);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
box-shadow: 8px 8px 0px #aaa;
filter:progid Big Grin

XImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
zoom: 1;

}
#form_page img
{
display: inline-block;
width:88px;
height:87px;
vertical-align: top;
margin-top:20px;
margin-left:15px;
}
#Editbox1, #Editbox2
{
display: inline-block;
border: 1px #000000 solid;
background-color: #E6E6FA;
color :#000000;
font-family: Arial;
font-size: 18px;
text-align: left;
vertical-align: middle;
width:200px;
height:25px;
}
#Editbox1:focus, #Editbox2:focus{
border: 1px red solid;
}
#Button1
{
margin-left:295px;
margin-top:10px;
width:80px;
height:30px;
}
.label
{
margin-left:20px;
font-family: Arial;
font-size: 18px;
}
.link
{
margin-left:20px;
margin-top:10px;
}
.link a
{
font-family: Arial;
font-size: 12px;
color:blue;
}

And a litle js for the form validation:

function ValidateForm1(theForm)
{
var regexp;
if (theForm.Editbox1.value == "")
{
alert("Please enter a value for the \"frmuser\" field.");
theForm.Editbox1.focus();
return false;
}
return true;
}

The index.php file must have the previous post modificacions.
And the result is: