Генератор устойчивых к взлому паролей
Артем Мáлков
2 478 просм
15 комм
Поделиться

«Космическая» форма входа + мини профиль для DLE

Всем привет! Появилась свободная минутка, поэтому решил с пользой ее провести и сделать что-нибудь нужное для сайта :)

Итак, перед вами альтернатива стандартной форме входа Dle + легкий мини профиль. Открытие окон сопровождается анимацией (то, что вы получите в итоге, можете посмотреть в конце статьи). Дизайн довольно приятный, поэтому данная связка подойдет для многих сайтов. Модуль тестировался на Dle версии 10.0 - 11.1

«Космическая» форма входа + мини профиль для Dle

Внимание! Для того чтобы вход через социальные сети функционировал без проблем, необходимо установить соответствующие настройки в разделе «Пользователи» - настройка социальных сетей в панели управления сайтом.

Установка

1. Перед началом, из архива закачайте в свою тему папку img.

2. В вашей теме, откройте файл login.tpl, очистите все данные из него, после чего скопируйте и вставьте следующий код:

[not-group=5]
<div class="login_mal profiles">
<div class="top_border_proff"></div>
<div class="you_name">{login}</div>
<div class="you_group">Группа: {group}</div>
<div class="ava_position"><img src="{foto}" alt="{login}" class="ava"><div class="online"></div></div>
<div class="border_miniprof"></div>
<div class="menu_prof">
<div><a href="{profile-link}">Персональная страница</a></div>
<div><a href="{pm-link}">Личные сообщения&nbsp;&nbsp;+{new-pm}</a></div>
<div><a href="{favorites-link}">Мои закладки</a></div>
</div>
<div class="border_miniprof"></div>
<a href="{logout-link}" class="logout">выход</a>
<div class="top_border"></div>
</div>
<div class="overlay"></div>
[/not-group]
[group=5]
<div class="login_mal">
<form method="post" action="">
<div class="top_border"></div>
<div class="rocket"></div>
<input type="text" class="login" name="login_name" id="login_name">
<input type="password" class="password" name="login_password" id="login_password">
<ul class="login_button">
[vk]<li class="vk"><a href="{vk_url}"></a></li>[/vk]
[facebook]<li class="fb"><a href="{facebook_url}"></a></li>[/facebook]
<li class="log_in"><input type="submit" value="Войти"></li>
</ul>
<div class="clears"></div>
<div class="footer_login">
<div class="bottom_border"></div>	
<ul>
<li class="for_pass"><a href="{lostpassword-link}">Забыли пароль?</a></li>
<li class="register">Нет аккаунта? <a href="{registration-link}">Регистрация</a></li>
</ul>
</div>
<input name="login" type="hidden" id="login" value="submit" />
</form>
</div>
<div class="overlay"></div>
[/group]
<a href="javascript://" id="open_modal">[group=5]Авторизоваться[/group][not-group=5]Открыть профиль[/not-group]</a>
<script>
$( "#open_modal" ).click(function() {
$('.login_mal').addClass('md-content');
$('.overlay').css({'display':'block'});
});
$( ".overlay" ).click(function() {
$('.login_mal').removeClass('md-content');
$(this).css({'display':'none'});
});
</script>

Сохраняете и закачиваете на сайт.

3. Теперь поработаем с файлом стилей. Копируем и вставляем эти значения в самый конец файла, и сохраняем. Важно! В зависимости от того, где находится ваш файл стилей, нужно изменить адреса для картинок.

.login_mal {
font-family: arial;
width: 340px;
height:560px;
margin:auto;
background: #fafaff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position: fixed;
top:0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform: translateY(20%);
-moz-transform: translateY(20%);
-ms-transform: translateY(20%);
transform: translateY(20%);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
z-index: 1200;
visibility: hidden;
}
.login_mal a {
text-decoration: none
}
.login_mal a:hover {
text-decoration: underline;
}
.profiles {
height: 445px;
}
.top_border {
background: #ff6900;
height: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.top_border_proff {
background: #fcfcff;
height: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.bottom_border {
background: #a0bec6;
height: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.rocket {
background: url('../img/rocket.png') no-repeat center center;
width: 136px;
height: 110px;
margin:66px 0 0 113px
}
.login {
width: 190px;
height: 50px;
border:0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #b2d4dc url('../img/login.png') no-repeat;
background-position:13px 12px;
margin: 65px auto 0 auto;
display: block;
padding: 0 17px 0 53px;
font-size:15px;
color: #fff;
font-weight: bold;
font-family: arial;
}
.password {
width: 190px;
height: 50px;
border:0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #3e6372 url('../img/password.png') no-repeat;
background-position:10px 12px;
margin: 20px auto 0 auto;
display: block;
padding: 0 17px 0 53px;
font-size:15px;
color: #a7b3bc;
font-weight: bold;
font-family: arial
}
.login_button {
list-style-type: none;
margin: 40px auto 0 auto;
padding: 0;
width: 260px
}
.login_button li {
display: block;
float: left;
}
li.vk a {
width: 60px;
height: 50px;
display:block;
background: #507299 url('../img/vk.png') no-repeat center center;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
li.vk a:hover {
background: #486a90 url('../img/vk.png') no-repeat center center;
cursor: pointer;
}
li.fb a {
width: 60px;
height: 50px;
display:block;
background: #3b5998 url('../img/fb.png') no-repeat center center;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
li.fb a:hover {
background: #304d8a url('../img/fb.png') no-repeat center center;
cursor: pointer;
}
.log_in {
float: right !important;
width: 120px
}
.log_in input {
width: 120px;
height: 50px;
background: #ff6900;
border:0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
font-weight: 700
}
.log_in input:hover {
background: #ec6201;
cursor: pointer;
}
.footer_login {
height: 65px;
background: #b2d4dc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 39px 0 0 0
}
.footer_login ul {
list-style-type: none;
margin: 18px 0 0 0;
padding: 0 24px;
}
.for_pass {
float: left;
padding: 3px 0 0 0;
}
.for_pass a {
color: #3e6372;
font-size: 12px;
font-weight: 700;
}
.register {
color: #3e6372;
font-size: 12px;
font-weight: 700;
padding: 4px 0 0 0;
float: right
}
.register a {
color: #ff6900;
text-transform: uppercase;
}
.clears {
clear:both;
}
.md-content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
background: rgba(0,0,0,0.6);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
display: none;
cursor: pointer
}
.you_name {
color: #3e6372;
font-size: 18px;
text-align: center;
font-weight: 700;
padding: 24px 0 0 0;
text-transform: uppercase;
}
.you_group {
color: #3e6372 !important;
font-size: 14px;
text-align: center;
padding: 6px 0 0 0;
font-weight: 400 !important;
}
.ava {
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 110px;
height: 110px
}
.ava_position {
margin: 23px auto 28px auto;
width: 110px;
position: relative;
}
.online {
width: 11px;
height: 11px;
background: #fad920;
border:5px solid #fafaff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute;
right:-10px;
top:45px;
}
.border_miniprof {
border-top:1px solid #e1e1e5;
}
.menu_prof {
text-align: center;
padding: 10px 0
}
.menu_prof a {
color: #3e6372;
font-size: 14px;
margin: 5px 0;
display: inline-block;
}
.logout {
width: 120px;
height: 50px;
background: #ff6900;
color: #fff;
font-size: 14px;
text-transform: uppercase;
display: block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 31px auto 26px auto;
font-weight: 700;
text-align: center;
line-height: 50px
}
.logout:hover {
background: #ec6201;
text-decoration: none !important
}

Сохраняем, и заливаем обратно на сайт. В завершение, не забудьте почистить кэш на сайте.

4. Установка закончена.

Чтобы визуально представить результат того, что должно получиться, рекомендуем посмотреть краткую видео демонстрацию:

Дизайнер: Brad Frost

ФайлРазмерСсылка
15
комментарий
Андрей
10.11 в 23:20
В данном модуле выявил проблему. Даже при неактивном окне входа в систему (модуля), невозможно нажать на ссылки, находящиеся на странице, т.к. это невидимое окно перекрывает центральную часть страницы. Понимаю что нужно править css, но не знаю, что именно. Подскажите пожалуйста. Полагаю, что такая проблема у всех.... Заранее спасибо!
  • 4
Артем Малков
11.11 в 02:31
Андрей, Спасибо за сообщение. И в правду была проблема. Ошибку устранили - обновите у себя стили. Ошибка должна пропасть. Если все о.к - отпишитесь об этом в комментариях.
  • 0
Chessman
11.11 в 09:00
Тоже заметил эту проблему. обратился к автору. После замены стилей (visibility) работает как надо: красиво и быстро!
Благодарю.
  • 1
максим
15.11 в 01:06
стесняюсь спросить, но где этот архив, из которого надо выкачать этот img?
  • 0
максим
15.11 в 01:10
все, нашел :)
  • 0
максим
15.11 в 01:27
есть пара нюансов(из них нет кнопки закрыть, т.е. как ни крути, только обновлять страницу если промазал по кнопке) + ко всему после установки пропало верхнее меню. + ещё пара мелочей. можно проконсультироваться по этим вопросам? ответ можно по e-mail желательно с контактными данными(например skype)
  • 0
Артем Малков
15.11 в 02:27
максим, Можете написать нам в Vk - https://vk.com/art_malcov. А вообще - закрытие работает, для этого нужно нажать на фон (посмотрите видео демонстрацию)
  • 1
Андрей
22.11 в 12:17
Артем Малков, Спасибо, теперь все работает. Благодарю за модуль!
  • 1
Артем Малков
22.11 в 14:16
Андрей, Рад, что вам нравится
  • 0
Арнольд
11.12 в 13:21
Артем Малков, если вас не затруднит, подскажите что собственно нужно прописать в main.tpl для вывода формы входа.

Введя {login} ничего не выводит, выведя скрипт=выводится 1 из 2 строка состояния (ваш профиль или авторизация) при клике затемняется весь экран и блок входа без всякой графики располагается в левом верхнем углу.
  • 0
Артем Малков
11.12 в 13:30
Арнольд, {login} должен был вывести вам ссылку на вызов формы. Установили все корректно? Напишите нам Вконтакте, постараемся помочь
  • 0
Владимир
7.02 в 09:22
Всё прописываю как вы и сказали, но всё равно ничего не работает. Вы бы могли пожалуйста помочь? Я новичок в dle, но создавал сайты на других системах
  • 0
Владимир, вы точно вставляете всё в те файлы что указаны? и можете ли прислать ссылку на сайт, где уже установлена форма. Проверим корректность установки.
  • 1
Алексей
11.03 в 18:17
Артем помоги поставить,напиши в вк vk.com/astraxanrp
  • 0
Алексей, не можем Вам написать из-за ограничения, напишите Вы нам, а там поможем - https://vk.com/art_malcov
  • 1
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария