Представляю вашему вниманию новую и удобную форму входа для Datalife Engine.
Форма не требует к себе всяких дополнительных картинок - все сделано при помощи CSS.
Установка
1.В login.tpl удаляем все содержимое между тегами [group=5]ТУТ СОДЕРЖИМОЕ[/group]
2.Между этими тегами вставляем следующий код:
2.Между этими тегами вставляем следующий код:
<center>
<form method="post" action="">
<div class="loginblock">
<ul class="reserlog loginform">
<li title="Имя пользователя"><input class="find1" ENGINE="text" name="login_name" / value="Логин" onblur="if(this.value=='') this.value='Логин';" onfocus="if(this.value=='Логин') this.value='';"></li>
<div style="height:5px;"></div>
<li title="Пароль" class="fpass"><input class="find1" class="ltext" type="password" name="login_password" / value="*****" onblur="if(this.value=='') this.value='*****';" onfocus="if(this.value=='*****') this.value='';"></li>
</ul>
<input name="login" type="hidden" id="login" value="submit" />
<div style="height:5px;"></div>
<li style="list-style:none;"><button class="btn" onclick="submit();" type="submit" title="Войти"><span>Войти</span></button></li>
</div>
<p><a href="{registration-link}">Регистрация</a> | <a href="{lostpassword-link}">Напомнить пароль?</a>
</form>
</center>
<form method="post" action="">
<div class="loginblock">
<ul class="reserlog loginform">
<li title="Имя пользователя"><input class="find1" ENGINE="text" name="login_name" / value="Логин" onblur="if(this.value=='') this.value='Логин';" onfocus="if(this.value=='Логин') this.value='';"></li>
<div style="height:5px;"></div>
<li title="Пароль" class="fpass"><input class="find1" class="ltext" type="password" name="login_password" / value="*****" onblur="if(this.value=='') this.value='*****';" onfocus="if(this.value=='*****') this.value='';"></li>
</ul>
<input name="login" type="hidden" id="login" value="submit" />
<div style="height:5px;"></div>
<li style="list-style:none;"><button class="btn" onclick="submit();" type="submit" title="Войти"><span>Войти</span></button></li>
</div>
<p><a href="{registration-link}">Регистрация</a> | <a href="{lostpassword-link}">Напомнить пароль?</a>
</form>
</center>
3.В style.css добовляем следующее:
/*---buttons---*/
.btn {
cursor: pointer;
display: inline-block;
background-color: #E6E6E6;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #333;
font-size: 13px;
line-height: normal;
border: 1px solid #CCC;
border-bottom-color: #BBB;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-transition: 0.1s linear all;
-moz-transition: 0.1s linear all;
-ms-transition: 0.1s linear all;
-o-transition: 0.1s linear all;
transition: 0.1s linear all;
border-image: initial;
}
.btn:hover {
background-position: 0 -15px;
color: #333;
text-decoration: none;
}
.btn:focus {
outline: 1px dotted #666;
text-decoration: none;
}
/*---buttons---*/
/*---Стиль формы---*/
.find1 {
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
display: inline-block;
width: 210px;
height: 20px;
padding: 4px;
font-size: 13px;
line-height: 18px;
color: gray;
border: 1px solid #CCC;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-image: initial;
}
.find1:focus {
outline: 0;
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
/*---Стиль формы---*/
/*---Дополнительные стили---*/
.reserlog, .resetlog li {
list-style: none;
padding-left: 12px;
margin: 0;
}
/*---Дополнительные стили---*/
.btn {
cursor: pointer;
display: inline-block;
background-color: #E6E6E6;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #333;
font-size: 13px;
line-height: normal;
border: 1px solid #CCC;
border-bottom-color: #BBB;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-transition: 0.1s linear all;
-moz-transition: 0.1s linear all;
-ms-transition: 0.1s linear all;
-o-transition: 0.1s linear all;
transition: 0.1s linear all;
border-image: initial;
}
.btn:hover {
background-position: 0 -15px;
color: #333;
text-decoration: none;
}
.btn:focus {
outline: 1px dotted #666;
text-decoration: none;
}
/*---buttons---*/
/*---Стиль формы---*/
.find1 {
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
display: inline-block;
width: 210px;
height: 20px;
padding: 4px;
font-size: 13px;
line-height: 18px;
color: gray;
border: 1px solid #CCC;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-image: initial;
}
.find1:focus {
outline: 0;
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
/*---Стиль формы---*/
/*---Дополнительные стили---*/
.reserlog, .resetlog li {
list-style: none;
padding-left: 12px;
margin: 0;
}
/*---Дополнительные стили---*/
Проверял во всех браузерах - форма кроссбраузерна.
Демо можно посмотреть ТУТ
Теги: 
Главная
Предыдущая Следующая