Делаем красивую форму входа на форум, с помощью CSS3.
Родная форма входа находится в index_body.html, находим:
Меняем на:
Далее идём в тему стиля, в конец добавляем:
Форма будет работать во всех современных браузерах. В IE форма будет: без закруглённых углов, без тени и прозрачности, но с градиентом.
Родная форма входа находится в 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 --> • <a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
<fieldset class="quick-login">
<label for="username">{L_USERNAME}:</label> <input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" />
<label for="password">{L_PASSWORD}:</label> <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 --> • <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;
}
Комментарии: 18
- VaYDaK
- Сообщения: 2
- Зарегистрирован: 23 сен 2012, 11:13
- Пол: Муж
У меня тоже не робит
- OJIeG
- Сообщения: 23
- Зарегистрирован: 13 ноя 2012, 09:17
- Настроение:
- Пол: Муж
- Имя: Олег
Как это
Можно поставить за место этого?
Можно поставить за место этого?
- OJIeG
- Сообщения: 23
- Зарегистрирован: 13 ноя 2012, 09:17
- Настроение:
- Пол: Муж
- Имя: Олег
Давайте попробуем ?CabinetAdmin писал(а):OJIeG
Придётся дополнять и чуть переделывать форму.
Можно и попробовать, чего нет-то:)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 -->
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- OJIeG
- Сообщения: 23
- Зарегистрирован: 13 ноя 2012, 09:17
- Настроение:
- Пол: Муж
- Имя: Олег
A для регистрации такое сделать можно ?
Да забыл сказать когда в админ раздел входишь он требует имя и пароль я вписываю
а он пишет
Вы не имеете прав к администраторскому разделу эту ошибку как нибудь устранить можно ?
Да забыл сказать когда в админ раздел входишь он требует имя и пароль я вписываю
а он пишет
Вы не имеете прав к администраторскому разделу эту ошибку как нибудь устранить можно ?
Это надо права выставлять. Если войти не можешь, то через аварийный вход.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>
Код: Выделить всё
.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;
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- OJIeG
- Сообщения: 23
- Зарегистрирован: 13 ноя 2012, 09:17
- Настроение:
- Пол: Муж
- Имя: Олег
А для формы обратной связи можно
Действительно красиво
Всё работает
и права админа я настроил
Действительно красиво
Всё работает
и права админа я настроил
- VirtorVir
- Сообщения: 3
- Зарегистрирован: 13 сен 2013, 09:40
- Пол: Муж
Поставил. Только вход в админку при этом не работает.
Похожие темы
-
Здравствуйте.
Как можно добавить ещё одно поле при регистрации?
Выпадающий список выбор пола ( ПОЛА ), но только не выбор ( муж ) или ( жен ) а на...