Единая регистрация и авторизация на нескольких сайтах » DataLife Engine (DLE) — система управления сайтом и контентом. Официальный сайт.

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

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

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

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. Теперь поработаем с файлом стилей. Копируем и вставляем эти значения в самый конец файла, и сохраняем. Важно! В зависимости от того, где находится ваш файл стилей, нужно изменить адреса для картинок.

/** © 2022 Artem Malcov | https://www.pandoge.com/moduli-i-skripty/kosmicheskaya-forma-vhoda-mini-profil-dlya-dle **/
.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