Выпадающая форма входа

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Выпадающая форма входа

CabinetAdmin 30 дек 2013, 08:49 Сообщение

Авторизация на форуме через выпадающею форму при наведении курсора или клике на ссылку "Вход".

Изменения для стилей prosilver.

В шаблоне overall_header.html находите:

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

<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>

и меняете на:

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

<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"<!-- IF not S_USER_LOGGED_IN and not S_DISPLAY_FULL_LOGIN --> onmouseover="delay1 = setTimeout('document.getElementById(\'quick-login\').style.display=\'block\'', 500);" onmouseout="clearTimeout(delay1)"<!-- ENDIF -->>{L_LOGIN_LOGOUT}</a></li>


Так форма входа будет появляться при наведении курсора. Для того чтобы форма появлялась при нажатии, меняете на:

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

<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"<!-- IF not S_USER_LOGGED_IN and not S_DISPLAY_FULL_LOGIN --> onclick="setTimeout('document.getElementById(\'quick-login\').style.display=\'block\'', 500); return false;"<!-- ENDIF -->>{L_LOGIN_LOGOUT}</a></li>



Далее находите:

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

<a name="start_here"></a>


перед найденным добавляете:

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

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT and not S_DISPLAY_FULL_LOGIN -->
<form method="post" action="{S_LOGIN_ACTION}" id="quick-login">
<fieldset>
{L_USERNAME}:<br />
<input type="text" name="username" size="10" class="inputbox" title="{L_USERNAME}" /><br />
{L_PASSWORD}:<br />
<input type="password" name="password" size="10" class="inputbox" title="{L_PASSWORD}" style="margin-bottom: 7px" /><br />
<!-- IF S_AUTOLOGIN_ENABLED -->
<label>{L_LOG_ME_IN} <input type="checkbox" name="autologin" /></label><br />
<!-- ENDIF -->
<input type="button" value="{L_CANCEL}" class="button2" onclick="document.getElementById('quick-login').style.display='none'; return false;" />
<input type="submit" name="login" value="{L_LOGIN}" class="button2" />

</fieldset>
</form>
<!-- ENDIF -->


В теме стиля (forms.css) находите:

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

.tiny { width: 10%;}


после найденного добавляете:

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

#quick-login {
position: absolute;
display: none;
right: 30px;
width: 150px;
margin-top: -3px;
padding: 5px 5px 2px;
background: #ECF3F7;
text-align: center;
line-height: 1.8em;
border-radius: 5px;
box-shadow: 0px 2px 12px;
-moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px;
-moz-box-shadow: 0px 2px 12px; -khtml-box-shadow: 0px 2px 12px; -webkit-box-shadow: 0px 2px 12px #555;
}

#quick-login .button2 {
margin: 8px 0;
}

#quick-login, v\:* {
border: 1px solid #7096C1;
}


Ну и можно удалить старую форму входа, в 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" />
{S_LOGIN_REDIRECT}
</fieldset>
</form>
<!-- ENDIF -->



Изменения для subsilver2.

В шаблоне overall_header.html находите:

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

<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_LOGIN_LOGOUT}</a>&nbsp;<!-- ENDIF -->

меняете на:

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

<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"<!-- IF not S_USER_LOGGED_IN and not S_DISPLAY_FULL_LOGIN --> onmouseover="delay1 = setTimeout('document.getElementById(\'quick-login\').style.display=\'block\'', 500);" onmouseout="clearTimeout(delay1)"<!-- ENDIF -->><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_LOGIN_LOGOUT}</a>&nbsp;<!-- ENDIF -->


Для того чтобы форма появлялась при нажатии, меняете на:

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

<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"<!-- IF not S_USER_LOGGED_IN and not S_DISPLAY_FULL_LOGIN --> onclick="setTimeout('document.getElementById(\'quick-login\').style.display=\'block\'', 500); return false;"<!-- ENDIF -->><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_LOGIN_LOGOUT}</a>&nbsp;<!-- ENDIF -->



Далее находите:

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

<div id="datebar">

перед найденным добавляете:

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

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT and not S_DISPLAY_FULL_LOGIN -->
<form method="post" action="{S_LOGIN_ACTION}" id="quick-login">
<table class="tablebg" width="100%" cellspacing="1">
<tr>
<td class="row1" align="center" style="padding-bottom: 9px">
<span class="genmed">{L_USERNAME}:</span><br />
<input class="post" type="text" name="username" size="17" /><br />
<span class="genmed">{L_PASSWORD}:</span><br />
<input class="post" type="password" name="password" size="17" style="margin-bottom: 7px" /><br />
<!-- IF S_AUTOLOGIN_ENABLED -->
<input class="radio" type="checkbox" name="autologin" /> <span class="genmed">{L_LOG_ME_IN}</span><br />
<!-- ENDIF -->
<input type="submit" class="btnmain" name="login" value="{L_LOGIN}" />
<input type="button" class="btnmain" value="{L_CANCEL}" onclick="document.getElementById('quick-login').style.display='none'; return false;" />
</td>
</tr>
</table>
{S_LOGIN_REDIRECT}
{S_FORM_TOKEN}
</form>
<!-- ENDIF -->


В теме стиля (stylesheet.css) находите:

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

.username-coloured {
font-weight: bold;
}

после найденного добавляете:

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

#quick-login {
position: absolute;
display: none;
left: 25px;
width: 150px;
margin-top: 7px;
background: #ECF3F7;
text-align: center;
line-height: 1.8em;
box-shadow: 0px 2px 12px;
-moz-box-shadow: 0px 2px 12px; -khtml-box-shadow: 0px 2px 12px; -webkit-box-shadow: 0px 2px 12px #555;
}

#quick-login .btnmain {
overflow: visible;
margin-top: 3px;
}



Это как основа, в зависимости от стиля могут понадобиться дополнительные правки.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Дим

Re: Выпадающая форма входа

Дим 30 дек 2013, 14:03 Сообщение

Спасибо, CabinetAdmin, :Rose: даже установить помог...

P.S. Вот что получилось

Изображение

Stalker TM

Выпадающая форма входа

Stalker TM 28 сен 2017, 02:17 Сообщение

CabinetAdmin писал(а):Источник цитаты В теме стиля (forms.css) находите:
КОД: ВЫДЕЛИТЬ ВСЁ

.tiny { width: 10%;}

у меня только stylesheet. на нем искал

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

.tiny { width: 10%;}
, не нашел. примерно где нужно искать
http://sharatv.4adm.ru/index.php

Аватара пользователя
CabinetAdmin

Выпадающая форма входа

CabinetAdmin 28 сен 2017, 16:32 Сообщение

Тогда просто в конец темы стиля.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Stalker TM

Выпадающая форма входа

Stalker TM 28 сен 2017, 18:33 Сообщение

CabinetAdmin, спасибо, теперь получилось
http://sharatv.4adm.ru/index.php



Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя