Делаем красивую форму входа на форум, с помощью CSS3.
Изображение
Родная форма входа находится в index_body.html, находим:

Код: Выделить всё

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
	<form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
	<h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
		<fieldset class="quick-login">
			<label for="username">{L_USERNAME}:</label>&nbsp;<input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" />  
			<label for="password">{L_PASSWORD}:</label>&nbsp;<input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" />
			<!-- IF S_AUTOLOGIN_ENABLED -->
				| <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
			<!-- ENDIF -->
			<input type="submit" name="login" value="{L_LOGIN}" class="button2" />
		</fieldset>
	</form>
<!-- ENDIF -->
Меняем на:

Код: Выделить всё

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
	<h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
	<form method="post" action="{S_LOGIN_ACTION}" class="loginform cf">
		<ul>
			<li>
				<label for="username">{L_USERNAME}</label>
				<input type="text" name="username" id="username" placeholder="{L_USERNAME}" required />
			</li>
			<li>
				<label for="password">{L_PASSWORD}</label>
				<input type="password" name="password" id="password" placeholder="{L_PASSWORD}" required />
			</li>
			<li>
				<input type="submit" name="login" value="{L_LOGIN}" />
			</li>
			<li>
				<!-- IF S_AUTOLOGIN_ENABLED -->
				<label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
				<!-- ENDIF -->
			</li>
		</ul>
	</form>
<!-- ENDIF -->
Далее идём в тему стиля, в конец добавляем:

Код: Выделить всё

/* Login form */
label {
	display: block;
	color: #999;
}
.cf:before,
.cf:after {
	content: ""; 
	display: table;
}

.cf:after {
	clear: both;
}
.cf {
	*zoom: 1;
}
.loginform input:not([type=submit]):focus {
	outline: 1px solid #00a2e2;
}
.loginform {
	width: 410px;
	margin: 0px auto;
	padding: 25px;
	background: rgb(250,250,250);
	background: -moz-linear-gradient(top,  rgba(250,250,250,0.5) 0%, rgba(250,250,250,0.8) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,250,250,0.5)), color-stop(100%,rgba(250,250,250,0.8))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(250,250,250,0.5) 0%,rgba(250,250,250,0.8) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(250,250,250,0.5) 0%,rgba(250,250,250,0.8) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(250,250,250,0.5) 0%,rgba(250,250,250,0.8) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(250,250,250,0.5) 0%,rgba(250,250,250,0.8) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 
    			inset 0px 1px 0px 0px rgba(250, 250, 250, 0.5);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 
    			inset 0px 1px 0px 0px rgba(250, 250, 250, 0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 
    			inset 0px 1px 0px 0px rgba(250, 250, 250, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.3);
}
.loginform ul {
	padding: 0;
	margin: 0;
}
.loginform li {
	display: inline;
	float: left;
}
.loginform input:not([type=submit]) {
	padding: 5px;
	margin-right: 10px;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 
				0px 1px 0px 0px rgba(250, 250, 250, 0.5) ;
	-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 
				0px 1px 0px 0px rgba(250, 250, 250, 0.5) ;
	-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 
				0px 1px 0px 0px rgba(250, 250, 250, 0.5) ;
}
.loginform input[type=submit] {
	border: 1px solid rgba(0, 0, 0, 0.3);
	background: #64c8ef; /* Old browsers */
	background: -moz-linear-gradient(top,  #64c8ef 0%, #00a2e2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#64c8ef), color-stop(100%,#00a2e2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #64c8ef 0%,#00a2e2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 ); /* IE6-9 */
	color: #fff;
	padding: 5px 15px;
	margin-right: 0;
	margin-top: 15px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}
.loginform input[type=submit]:hover {
	background: #00a2e2; /* Old browsers */
	background: -moz-linear-gradient(top,  #00a2e2 0%, #64c8ef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a2e2), color-stop(100%,#64c8ef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #00a2e2 0%,#64c8ef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #00a2e2 0%,#64c8ef 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #00a2e2 0%,#64c8ef 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #00a2e2 0%,#64c8ef 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2e2', endColorstr='#64c8ef',GradientType=0 ); /* IE6-9 */
	color: #f8f8f8;
	cursor: pointer;
}
Форма будет работать во всех современных браузерах. В IE форма будет: без закруглённых углов, без тени и прозрачности, но с градиентом.
Комментарии: 18

romaamor 22 окт 2012, 11:00 Сообщение

У меня не пашит.Пишет ошибку.
Скорее всего что код я менял.Я так думаю.
  • 0

CabinetAdmin 22 окт 2012, 14:53 Сообщение

romaamor писал(а):Скорее всего что код я менял.Я так думаю.
Скорее всего:)
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

VaYDaK 22 окт 2012, 15:59 Сообщение

У меня тоже не робит
  • 0

CabinetAdmin 22 окт 2012, 16:06 Сообщение

Проверил, работает. Проверял только на prosilver'e.

VaYDaK
А неработоспособность в чём заключается? Не авторизирует?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

OJIeGОлег 24 ноя 2012, 07:21 Сообщение

Как это
Изображение
Можно поставить за место этого?
Красивая форма регистрации с помощью CSS3 - bandicam 2012-11-24 07-19-54-843.jpg
  • 0

CabinetAdmin 24 ноя 2012, 08:30 Сообщение

OJIeG
Это можно поставить на главной, за вместо родной формы.
OJIeG писал(а):за место этого?
Придётся дополнять и чуть переделывать форму.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

OJIeGОлег 24 ноя 2012, 08:35 Сообщение

CabinetAdmin писал(а):OJIeG

Придётся дополнять и чуть переделывать форму.
Давайте попробуем ?
  • 0

CabinetAdmin 24 ноя 2012, 09:55 Сообщение

OJIeG писал(а):Давайте попробуем ?
Можно и попробовать, чего нет-то:)


Шаблон login_body.html, меняем всё что между <!-- INCLUDE overall_header.html --> и <!-- INCLUDE overall_footer.html -->

Код: Выделить всё

<h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></h3>
<form method="post" action="{S_LOGIN_ACTION}" class="loginform cf" id="login">
	<!-- IF LOGIN_ERROR --><div class="error">{LOGIN_ERROR}</div><!-- ENDIF -->
	<ul>
		<li>
			<label for="{USERNAME_CREDENTIAL}">{L_USERNAME}</label>
			<input type="text" tabindex="1" name="{USERNAME_CREDENTIAL}" id="{USERNAME_CREDENTIAL}" placeholder="{L_USERNAME}" required />
		</li>
		<li>
			<label for="{PASSWORD_CREDENTIAL}">{L_PASSWORD}</label>
			<input type="password" tabindex="2" name="{PASSWORD_CREDENTIAL}" id="{PASSWORD_CREDENTIAL}" placeholder="{L_PASSWORD}" required />
		</li>
		<li>
			<input type="submit" name="login" tabindex="6" value="{L_LOGIN}" />
		</li>
		<!-- IF S_DISPLAY_FULL_LOGIN and (U_SEND_PASSWORD or U_RESEND_ACTIVATION) -->
		<li>
			<!-- IF U_SEND_PASSWORD --><a href="{U_SEND_PASSWORD}">{L_FORGOT_PASS}</a><!-- ENDIF -->
			<!-- IF U_RESEND_ACTIVATION --><a href="{U_RESEND_ACTIVATION}">{L_RESEND_ACTIVATION}</a><!-- ENDIF -->
		</li>
		<!-- ENDIF -->
		<!-- IF S_DISPLAY_FULL_LOGIN -->
		<li>
			<!-- IF S_AUTOLOGIN_ENABLED --><label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" tabindex="4" /></label><!-- ENDIF -->
			<label for="viewonline">{L_HIDE_ME} <input type="checkbox" name="viewonline" id="viewonline" tabindex="5" /></label>
		</li>
		<!-- ENDIF -->
		<!-- IF S_CONFIRM_CODE -->
		<li>
			<label for="confirm_code">{L_CONFIRM_CODE}:</label>
				<input type="hidden" name="confirm_id" value="{CONFIRM_ID}" placeholder="{L_CONFIRM_CODE}" />{CONFIRM_IMAGE}
				<input type="text" name="confirm_code" id="confirm_code" placeholder="{L_CONFIRM_CODE}" title="{L_CONFIRM_CODE}" />
		</li>
		<li>
			<span>{L_CONFIRM_CODE_EXPLAIN}</span>
		</li>
		<!-- ENDIF -->
	</ul>
</form>

<!-- IF not S_ADMIN_AUTH and S_REGISTER_ENABLED -->
<h3>{L_REGISTER}</h3>
	<div class="loginform cf">
		<div class="inner"><span class="corners-top"><span></span></span>

		<div class="content">
			<p>{L_LOGIN_INFO}</p>
			<p><strong><a href="{U_TERMS_USE}">{L_TERMS_USE}</a> | <a href="{U_PRIVACY}">{L_PRIVACY}</a></strong></p>
			<hr class="dashed" />
			<p><a href="{U_REGISTER}" class="button2">{L_REGISTER}</a></p>
		</div>

		<span class="corners-bottom"><span></span></span></div>
	</div>
<!-- ENDIF -->
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

OJIeGОлег 24 ноя 2012, 16:22 Сообщение

A для регистрации такое сделать можно ?
Да забыл сказать когда в админ раздел входишь он требует имя и пароль я вписываю
а он пишет
Вы не имеете прав к администраторскому разделу эту ошибку как нибудь устранить можно ?
  • 0

CabinetAdmin 24 ноя 2012, 18:06 Сообщение

OJIeG писал(а):Вы не имеете прав к администраторскому разделу эту ошибку как нибудь устранить можно ?
Это надо права выставлять. Если войти не можешь, то через аварийный вход.
OJIeG писал(а):A для регистрации такое сделать можно ?
Шаблон ucp_agreement.html, найти:

Код: Выделить всё

<form method="post" action="{S_UCP_ACTION}" id="agreement">
Добавить class="loginform cf":

Код: Выделить всё

<form method="post" action="{S_UCP_ACTION}" id="agreement" class="loginform cf">
Найти и удалить:

Код: Выделить всё

	<div class="panel">
		<div class="inner"><span class="corners-top"><span></span></span>
их будет три.

Найти и удалить:

Код: Выделить всё

		<span class="corners-bottom"><span></span></span></div>
	</div>
их тоже три.


Шаблон ucp_register.html, найти:

Код: Выделить всё

<form method="post" action="{S_UCP_ACTION}" id="register">
Добавить class="loginform cf":

Код: Выделить всё

<form method="post" action="{S_UCP_ACTION}" id="register" class="loginform cf">
Найти и удалить:

Код: Выделить всё

	<div class="panel">
		<div class="inner"><span class="corners-top"><span></span></span>
и

Код: Выделить всё

		<span class="corners-bottom"><span></span></span></div>
	</div>
их будет тоже по три.

В общем виде всё будет симпатично, но код подтверждения и выпадающие списки будут выходить за рамки. Поэтому нужно увеличить ширину формы, добавив к форме style="width: 750px;":

Код: Выделить всё

<form method="post" action="{S_UCP_ACTION}" id="register" class="loginform cf" style="width: 750px;">

Если нужно чтобы в полях отображалось имя поля, в этом же шаблоне находим:

Код: Выделить всё

	<dl>
		<dt><label for="username">{L_USERNAME}:</label><br /><span>{L_USERNAME_EXPLAIN}</span></dt>
		<dd><input type="text" tabindex="1" name="username" id="username" size="25" value="{USERNAME}" class="inputbox autowidth" title="{L_USERNAME}" /></dd>
	</dl>
	<dl>
		<dt><label for="email">{L_EMAIL_ADDRESS}:</label></dt>
		<dd><input type="text" tabindex="2" name="email" id="email" size="25" maxlength="100" value="{EMAIL}" class="inputbox autowidth" title="{L_EMAIL_ADDRESS}" /></dd>
	</dl>
	<dl>
		<dt><label for="email_confirm">{L_CONFIRM_EMAIL}:</label></dt>
		<dd><input type="text" tabindex="3" name="email_confirm" id="email_confirm" size="25" maxlength="100" value="{EMAIL_CONFIRM}" class="inputbox autowidth" title="{L_CONFIRM_EMAIL}" /></dd>
	</dl>
	<dl>
		<dt><label for="new_password">{L_PASSWORD}:</label><br /><span>{L_PASSWORD_EXPLAIN}</span></dt>
		<dd><input type="password" tabindex="4" name="new_password" id="new_password" size="25" value="{PASSWORD}" class="inputbox autowidth" title="{L_NEW_PASSWORD}" /></dd>
	</dl>
	<dl>
		<dt><label for="password_confirm">{L_CONFIRM_PASSWORD}:</label></dt>
		<dd><input type="password" tabindex="5" name="password_confirm" id="password_confirm" size="25" value="{PASSWORD_CONFIRM}" class="inputbox autowidth" title="{L_CONFIRM_PASSWORD}" /></dd>
	</dl>
Добавляем к каждому пункту placeholder="имя":

Код: Выделить всё

	<dl>
		<dt><label for="username">{L_USERNAME}:</label><br /><span>{L_USERNAME_EXPLAIN}</span></dt>
		<dd><input type="text" tabindex="1" name="username" id="username" size="25" value="{USERNAME}" class="inputbox autowidth" title="{L_USERNAME}" placeholder="{L_USERNAME}" /></dd>
	</dl>
	<dl>
		<dt><label for="email">{L_EMAIL_ADDRESS}:</label></dt>
		<dd><input type="text" tabindex="2" name="email" id="email" size="25" maxlength="100" value="{EMAIL}" class="inputbox autowidth" title="{L_EMAIL_ADDRESS}" placeholder="{L_EMAIL_ADDRESS}" /></dd>
	</dl>
	<dl>
		<dt><label for="email_confirm">{L_CONFIRM_EMAIL}:</label></dt>
		<dd><input type="text" tabindex="3" name="email_confirm" id="email_confirm" size="25" maxlength="100" value="{EMAIL_CONFIRM}" class="inputbox autowidth" title="{L_CONFIRM_EMAIL}" placeholder="{L_CONFIRM_EMAIL}" /></dd>
	</dl>
	<dl>
		<dt><label for="new_password">{L_PASSWORD}:</label><br /><span>{L_PASSWORD_EXPLAIN}</span></dt>
		<dd><input type="password" tabindex="4" name="new_password" id="new_password" size="25" value="{PASSWORD}" class="inputbox autowidth" title="{L_NEW_PASSWORD}" placeholder="{L_NEW_PASSWORD}" /></dd>
	</dl>
	<dl>
		<dt><label for="password_confirm">{L_CONFIRM_PASSWORD}:</label></dt>
		<dd><input type="password" tabindex="5" name="password_confirm" id="password_confirm" size="25" value="{PASSWORD_CONFIRM}" class="inputbox autowidth" title="{L_CONFIRM_PASSWORD}" placeholder="{L_CONFIRM_PASSWORD}" /></dd>
	</dl>
Плюс в форме кнопка "Вернуть" будет другого цвета. Открываем тему стиля, находим место куда поставили css стиль формы, добавляем:

Код: Выделить всё

.loginform input[type=reset] {
   border: 1px solid rgba(0, 0, 0, 0.3);
   background: #64c8ef; /* Old browsers */
   background: -moz-linear-gradient(top,  #64c8ef 0%, #00a2e2 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#64c8ef), color-stop(100%,#00a2e2)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* IE10+ */
   background: linear-gradient(to bottom,  #64c8ef 0%,#00a2e2 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 ); /* IE6-9 */
   color: #fff;
   padding: 5px 15px;
   margin-right: 0;
   margin-top: 15px;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}
.loginform input[type=reset]:hover {
   background: #00a2e2; /* Old browsers */
   background: -moz-linear-gradient(top,  #00a2e2 0%, #64c8ef 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a2e2), color-stop(100%,#64c8ef)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  #00a2e2 0%,#64c8ef 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  #00a2e2 0%,#64c8ef 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  #00a2e2 0%,#64c8ef 100%); /* IE10+ */
   background: linear-gradient(to bottom,  #00a2e2 0%,#64c8ef 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2e2', endColorstr='#64c8ef',GradientType=0 ); /* IE6-9 */
   color: #f8f8f8;
   cursor: pointer;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

OJIeGОлег 24 ноя 2012, 18:19 Сообщение

А для формы обратной связи можно
Действительно красиво
Всё работает
и права админа я настроил
  • 0

VirtorVir 14 сен 2013, 18:03 Сообщение

Поставил. Только вход в админку при этом не работает.
  • 0

CabinetAdmin 14 сен 2013, 19:29 Сообщение

Ошибку выдаёт? Не авторизует? Может где-то допустили ошибку?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CabinetAdmin 14 сен 2013, 19:30 Сообщение

Плюс, данная модификация предназначена для prosilver и его клонов.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы