Профессиональная поддержка сайтов: разработка, дизайн, тексты, SEO и прочее от 500 Р   •   Реклама
6 296 просм
18 комм
Поделиться:

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

/** © 2016 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

ФайлРазмерСсылка
18
комментариев
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Администратор  |  735

Aleks Kac, здравствуйте.

Наверное, проще объяснить это на конкретном сайте. Пришлите ссылку где установлена форма.

14.07 в 22:00
  • 0
Пользователь  |  2

Благодарю за отличную форму! Один вопрос, как можно сделать дополнительно к клику в любом месте, кнопку закрыть модальное окно (например как у вас крестик).

13.07 в 01:45
  • 1
Гости  |  679

Интересно, что если сделать 2 ссылки на вход/рег, то работать будет только одна.

5.10 в 20:42
  • 0
Администратор  |  735

Алексей, не можем Вам написать из-за ограничения, напишите Вы нам, а там поможем - https://vk.com/pandoge

11.03 в 20:08
  • 5
Гости  |  679

Артем помоги поставить,напиши в вк vk.com/astraxanrp

11.03 в 18:17
  • 0
Администратор  |  735

Владимир, вы точно вставляете всё в те файлы что указаны? и можете ли прислать ссылку на сайт, где уже установлена форма. Проверим корректность установки.

7.02 в 12:32
  • 5
Гости  |  679

Всё прописываю как вы и сказали, но всё равно ничего не работает. Вы бы могли пожалуйста помочь? Я новичок в dle, но создавал сайты на других системах

7.02 в 09:22
  • 0
Гости  |  679

Арнольд, {login} должен был вывести вам ссылку на вызов формы. Установили все корректно? Напишите нам Вконтакте, постараемся помочь

11.12 в 13:30
  • 0
Гости  |  679

Артем Малков, если вас не затруднит, подскажите что собственно нужно прописать в main.tpl для вывода формы входа.

Введя {login} ничего не выводит, выведя скрипт=выводится 1 из 2 строка состояния (ваш профиль или авторизация) при клике затемняется весь экран и блок входа без всякой графики располагается в левом верхнем углу.

11.12 в 13:21
  • 0
Гости  |  679

Андрей, Рад, что вам нравится

22.11 в 14:16
  • 0
Гости  |  679

Артем Малков, Спасибо, теперь все работает. Благодарю за модуль!

22.11 в 12:17
  • 1
Гости  |  679

максим, Можете написать нам в Vk - https://vk.com/pandoge. А вообще - закрытие работает, для этого нужно нажать на фон (посмотрите видео демонстрацию)

15.11 в 02:27
  • 1
Гости  |  679

есть пара нюансов(из них нет кнопки закрыть, т.е. как ни крути, только обновлять страницу если промазал по кнопке) + ко всему после установки пропало верхнее меню. + ещё пара мелочей. можно проконсультироваться по этим вопросам? ответ можно по e-mail желательно с контактными данными(например skype)

15.11 в 01:27
  • 0
Гости  |  679

все, нашел :)

15.11 в 01:10
  • 0
Гости  |  679

стесняюсь спросить, но где этот архив, из которого надо выкачать этот img?

15.11 в 01:06
  • 0
Гости  |  679

Тоже заметил эту проблему. обратился к автору. После замены стилей (visibility) работает как надо: красиво и быстро!

Благодарю.

11.11 в 09:00
  • 1
Гости  |  679

Андрей, Спасибо за сообщение. И в правду была проблема. Ошибку устранили - обновите у себя стили. Ошибка должна пропасть. Если все о.к - отпишитесь об этом в комментариях.

11.11 в 02:31
  • 0
Гости  |  679

В данном модуле выявил проблему. Даже при неактивном окне входа в систему (модуля), невозможно нажать на ссылки, находящиеся на странице, т.к. это невидимое окно перекрывает центральную часть страницы. Понимаю что нужно править css, но не знаю, что именно. Подскажите пожалуйста. Полагаю, что такая проблема у всех.... Заранее спасибо!

10.11 в 23:20
  • 4
Подняться наверх
«Pandoge» - помощник веб-мастера