Все для DataLife Engine / DLE хаки / Хак для DLE / Хак Dle оформление Админ Панели сайта 11 PSD

Хак Dle оформление Админ Панели сайта 11 PSD



Очень красивое и необычное оформление Админ Панели для свое сайта представляет дизайн студия WEBs-ART для dle новости сайтов и других.
В архиве присутствует демо
11 PSD 2 из них мои iliks
11 резаных дизайнов
Инструкция

Легка установка
Не забываем делать резервную копию шаблона login.tpl перед началом установки
Хак Dle оформление Админ Панели сайта 11 PSD
Установка:

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]
и вставьте код :

<script type="text/javascript">$(document).ready(function() {//select all the a tag with name equal to modal$('a[name=modal]').click(function(e) {//Cancel the link behaviore.preventDefault();//Get the A tagvar id = $(this).attr('href');//Get the screen height and widthvar 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 widthvar 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 behaviore.preventDefault();$('#mask, .window').hide();});//if mask is clicked$('#mask').click(function () {$(this).hide();$('.window').hide();});});</script><!--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"><a href="#" class="close"></a></div><div class="text270deg">Авторизация</a></div><div class="popup-body"><!-- ФОРМА ВХОДА --><div class="log-vhod"><form class="flogin" method="post" action=""><div class="lfield" ><p>Логин пользователя:</p><input class="loginField" type="text" name="login_name" id="login_name"  onblur="if (value == '') {value = 'Your username'}" onfocus="if (value == 'Your username') {value =''}" value="Your username"/><p>Пароль:</p><input class="loginField" type="text" name="login_password" id="login_password" onblur="if (value == '') {value = 'Your Password'}" onfocus="if (value == 'Your Password') {value =''}" value="Your Password"/></div><div valign="top"><input class="but-log" onclick="submit();" name="image" alt="Войти" type="button" 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-->


Ссылка:

<a href="#popup-vhod" name="modal"><span style="padding:0 18px 0 28px;">Вход</span></a>


является вызовам окна авторизации, её вы можете сами настроить и вставить в нужное вам место как в шаблоне login.tpl так и в main.tpl
Для смены окраски просто замените картинки в папке "img" на те что лежат в папке "Окрасы"

С уважением iliks, удачи!)

В архиве присутствует демо
11 PSD 2 из них iliks
11 резаных дизайнов
Инструкция

«Автор работы:» iliks (webil) WEBs-ART
Источник: webs-art net

Советуем без регистрации скачать хак DataLife Engine 9.x form-login.rar[7.16 Mb]
  • 100
Добавить комментарий

Оставить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent