Pop-up окно входа с полями логина/пароля

Как это выглядит

Pop-up окно входа с полями логина/пароля Snap0393

1. В шаблоне overall_header (Верхняя часть страницы) замените фрагмент

Код::  <div id="login_popup"> <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0"> <tr height="25"> <td class="catLeft"> <span class="genmed module-title">{SITENAME}</span> </td> </tr> <tr height="{LOGIN_POPUP_MSG_HEIGHT}"> <td class="row1" align="left" valign="top"> <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="mainoption" value="{L_LOGIN}" /> <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> <span class="genmed">{LOGIN_POPUP_MSG}</span> </td> </tr> </table> </div>

на

Код::  <div id="login_popup"> <form action="{S_LOGIN_ACTION}" method="post" name="form_login"> <span class="prez">Добро пожаловать на форум!<br />Представьтесь, пожалуйста:<br /></span><br /> <span>Логин:</span><br /> <input class="post" type="text" size="10" name="username" id="nm" /><br /> <span>{L_PASSWORD}:</span><br /> <input class="post" type="password" size="10" name="password" id="pass" /><br /> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /> <span>{L_AUTO_LOGIN}</span><br /> {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" id="log" /><br /> <span class="oda"><a class="gensmall" href="/register">Регистрация!</a> | <a class="gensmall" href="/profile?mode=sendpassword">Забыли пароль?</a></span> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" id="dnt" /> </form> </div>

Сохраните, опубликуйте (!) plus

2. Добавьте в CSS базовые настройки оформления:

Код:: /* настройки самого всплыващего окна */ #login_popup { width: 230px !important; height: 320px !important; padding: 0; background: #f1f1f1 url(http://i44.servimg.com/u/f44/16/54/26/99/vywr10.jpg) no-repeat center top; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; box-shadow: 2px 5px 5px rgba(42, 44, 44, 0.2); -moz-box-shadow: 2px 5px 5px rgba(42, 44, 44, 0.2); -webkit-box-shadow: 2px 5px 5px rgba(42, 44, 44, 0.2); border: 1px solid #fff; font-family: Verdana,Arial,Helvetica; color: #826363; font-size: 10px; } #login_popup form { width: 230px !important; margin: 60px auto 0; text-align: center; } /* общ. настройки полей ввода */ input.post { padding: 5px 30px 5px 5px; margin: 0 auto; width: 180px; border: 1px solid #B0C4DE; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 1px #87CEFA inset; -webkit-box-shadow: 0 1px 1px #87CEFA inset; box-shadow: 0 1px 1px #87CEFA inset; } /* фон поля логин */ input#nm { background: #f1f1f1 url(http://i44.servimg.com/u/f44/16/54/26/99/busine12.png) no-repeat center right; } /* фон поля пароль */ input#pass { background: #f1f1f1 url(http://i44.servimg.com/u/f44/16/54/26/99/link10.png) no-repeat center right; } input.radio { vertical-align: middle; } /* кнопка вход */ #log { width: 218px; padding: 7px 0; margin: 5px auto 20px !important; border: 1px solid #B0C4DE; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 1px #87CEFA; -webkit-box-shadow: 0 1px 1px #87CEFA; box-shadow: 0 1px 1px #87CEFA; cursor: pointer; color: #826363; } /* кнопка больше не показывать */ #login_popup_close { width: 100%; height: 30px !important; padding: 3px 0; margin: 5px auto !important; background: rgba(42, 44, 44, 0.2); color: #fff; cursor: pointer; border: none; } /* приветствие */ .prez { text-shadow: 0 1px 0 #fff; font-weight : bold; } /* ссылки на регистрацию и напоминание пароля */ .oda a { text-shadow: 0 1px 0 #fff; text-decoration: none !important; color: #74B2CB; } /* ссылки при наведении */ .oda a:hover { color: #008000; }

Измените их на свой вкус как угодно.