PDA

Просмотр полной версии : [Модуль] Выпадающая форма входа



- John.Besson
01.01.2014, 21: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;
}
Это как основа, в зависимости от стиля могут понадобиться дополнительные правки.

- John.Besson
01.01.2014, 21:49
Примерно вот так будет выглядеть:
http://i.imgur.com/oTnuZBs.png

Salvacore
02.01.2014, 02:29
Молодец)

Dima_Turkow
02.01.2014, 11:45
Демо можно?

- John.Besson
08.01.2014, 20:22
Демо можно?
Я выложил скрин.