Шаблон авторизации под DLE

Установка достаточно проста.
рекомендуется сделать резервную копию шаблона login.tpl перед началом установки

1)скопировать содержимое папки img к себе на сайт
в директорию: /templates/ВАШ-ШАБЛОН/img

2) добавить в css своего шаблона эти стили:
/* popup okno */
.window span a.close {color: #333; text-decoration: none; font-size: 25px;}
.window span a.close:hover {color:#ccc; text-decoration:none}
#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .30;
z-index: 9000;
}
#boxes .window {
position: fixed;
width: 505px;
height: 259px;
display:none;
left:0;
top:0;
z-index:9999;
}
#boxes #dialog {
width:360px;
height:250;
background-color:;
}
.login-box {background: url(‘../img/bg-yellow.png’); width: 511px; height: 259px; position: absolute;}

.close-div {position: absolute; width: 23px; height: 23px; right: 15px; top: 11px;}
a.close {width: 23px; height: 23px; display: block; background: url(‘../img/log-icons.png’) no-repeat; text-decoration: none;}
.text270deg {position: absolute;left: 15px;bottom: 16px;font-size: 18px;color: white;width: 18px;height: 18px;
-webkit-transform: rotate(270deg); /* для safari и chrome браузеров */
-moz-transform: rotate(270deg); /* для FF */
-o-transform: rotate(270deg); /* для Opera */
transform: rotate(270deg); /* для остальных браузеров поддерживающий поворот по-умолчанию */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* для ИЕ 6-8 */}

.popup-body {font-size: 0.9em; line-height: 1.3em; float: left;}

.log-box-l {margin: 5px 12px 13px 6px;width: 493px;height: 241px;background:url(‘../img/left-bg.png’) no-repeat;}
.log-box-r {width: 493px;height: 241px;background:url(‘../img/right-bg.png’) no-repeat 100% 0;float: left;color:#555;font:normal 9pt Arial; position: relative;}
.log-vhod {width: 493px;float: left;}

.flogin {float: left; width: 245px; position: absolute; margin: 16px 0 0 72px;}
.poptext {float: right; width: 151px;}
.poptext ul {list-style: none; margin: 0; padding: 0; position: absolute; bottom: 3px;}
.poptext ul li {padding: 0 0 13px 15px;}
.poptext ul li a {background: url(‘../img/log-icons.png’) no-repeat;padding-left: 32px;height: 23px;display: block;line-height: 23px;color: white;font-weight: bold;text-decoration: none;}
.poptext ul li a#b1 {background-position:0 -23px;}
.poptext ul li a#b2 {background-position:0 -46px;}
.poptext ul li a#b3 {background-position:0 -69px;}
.poptext ul li a#b4 {background-position:0 -92px;}

.log-box-c .popup-body .log-vhod {display: block;}
.lfield p {color: #454545; font-weight: bolder; -webkit-margin-before: 10px;-webkit-margin-after: 7px;-webkit-margin-start: 3px;-webkit-margin-end: 0px;}
.lfield input {color:#767676; padding: 0px 0 0 18px; width: 227px; height: 41px; background: url(‘../img/input.png’); border: 0; outline: none; margin: 0; font-style: italic;}
.lfield input:hover {background-position: 0 -41px;}

.but-log {cursor: pointer; width: 96px;height: 38px;color: white;background: url(«../img/log-button.png») no-repeat;float: right;border: none;margin-top: 25px;margin-right: 1px;}
/* ———- */

в шаблоне login.tpl удалите содержимое тегов [group=5]тут содержимое[/group]
и вставьте туда:

$(document).ready(function() {
//select all the a tag with name equal to modal
$(‘a[name=modal]’).click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr(‘href’);
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});
//transition effect
$(‘#mask’).fadeIn(1000);
$(‘#mask’).fadeTo(«slow»,0.3);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css(‘top’, winH/2-$(id).height()/2);
$(id).css(‘left’, winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(1000);
});
//if close button is clicked
$(‘.window .close’).click(function (e) {
//Cancel the link behavior
e.preventDefault();
$(‘#mask, .window’).hide();
});
//if mask is clicked
$(‘#mask’).click(function () {
$(this).hide();
$(‘.window’).hide();
});
});

<!—popup—>
<div id=»boxes»>
<div id=»popup-vhod» class=»window»>

<!— block —>
<div class=»login-box»>
<div class=»log-box-l»>
<div class=»log-box-r»>
<div class=»close-div»>[url=http://#»%20class=]</a></div>
<div class=»text270deg»>Авторизация[/url]</div>
<div class=»popup-body»>
<!— ФОРМА ВХОДА —>
<div class=»log-vhod»>

<form class=»flogin» method=»post»>
<div class=»lfield»>
<p>Логин пользователя:</p>
<input class=»loginField» type=»text» name=»login_name» id=»login_name» value=»Your username» />
<p>Пароль:</p>
<input class=»loginField» type=»text» name=»login_password» id=»login_password» value=»Your Password» />
</div>

<div valign=»top»>
<input class=»but-log» name=»image» style=»max-width:600px;» alt=»Войти» type=»button» value=»value» />
</div>

<input name=»login» type=»hidden» id=»login» value=»submit» />
</form>

<div class=»poptext»>
<ul>
<li><a id=»b1″ href=»/?do=rules»>Правила</a></li>
<li><a id=»b2″ href=»{lostpassword-link}»>Забыли пароль?</a></li>
<li><a id=»b3″ href=»{registration-link}»>Регистрация</a></li>
<li><a id=»b4″ href=»#»>Помощь</a></li>
</ul>
</div>
</div>
<!— END ФОРМА ВХОДА —>  
<div class=»clr»></div>
</div>

</div></div></div>
</div>
<!— /block —>

</div>
<div id=»mask»></div>
<!—/popup—>