[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ] |
|
MUGEN WORKS - ANIME,CHARACTERS,STAGES,SCREENPACK,LIFEBAR Технический раздел Скрипты для uCoz Всплывающая форма входа для uCoz |
Всплывающая форма входа для uCoz | |||
И так для начала нам следует установить js плагин Basic Modal Dialog, для этого вниз страницы перед закрывающим тегом < /body> устанавливаем следующий js: Код <script type="text/javascript" src="http://www.center-dm.ru/ucoz/forma_vxoda/4/simplemodal.js"></script> Теперь давайте установим html каркас данной формы входа для uCoz, для этого идём в Админ панель => Дизайн => Управление дизайном => Пользователи => Форма входа пользователей удаляем старый код и устанавливаем новый: Код <?if($ERROR$)?><div class="vxod_error">$ERROR$</div><?endif?> <div class="cv_title"><font class="left">Форма входа</font> <a class="right" href="$REGISTER_LINK$">Регистрация</a></div> <div class="c_vxod"> <input class="vxod_pole vp_login" name="user" value="" size="20" maxlength="50" type="text"> <input class="vxod_pole vp_password" name="password" size="20" maxlength="15" type="password"> <div class="vxod_zapomnit"> <input id="rementry" name="rem" value="1" checked="checked" type="checkbox"><label for="rementry"></label><span class="left">Запомнить меня</span> <a class="right" href="$REMINDER_LINK$" >Забыл пароль ?</a> </div> <input class="vxod_kn" name="sbm" value="Войти" type="submit"> </div> Теперь нам следует установить основной каркас всплывающего окна с формой входя для uCoz, для этого вниз страницы перед закрывающим тегом < /body> устанавливаем следующий код: Код <?if($LOGIN_FORM$)?> <div id="content_vxod" class="basic_content"> $LOGIN_FORM$ </div> <?endif?> а для того чтобы вызвать данное окно, в нужное место страницы установим ссылку: Код <?if($USER_LOGGED_IN$)?><a href="#" id="okno_vxod">Вход</a><?endif?> Форма входа почти готова, осталось прописать основные css стили: Код /* Всплывающая форма входа для uCoz от fahriev ------------------------------------------*/ #simplemodal-container { width:345px; height:250px; background:#f4f4f4; border-radius:5px; border: 1px solid #e1e1e1; } /* Тёмный фон при открытии окна*/ #simplemodal-overlay { cursor:wait; background:#000; } /* Кнопка закрыть вверху окна */ #simplemodal-container a.modalCloseImg { top:-11px; right:-11px; width:23px; height:23px; z-index:3200; display:inline; cursor:pointer; position:absolute; background:url(close.png) no-repeat; } #simplemodal-container a.modalCloseImg:hover { background-position:0 -23px!important; } .basic_content { display:none; } .cv_title { float:left; text-align: left; width:305px; padding-bottom: 5px; margin: 20px 20px 0px 20px; border-radius:5px 5px 0px 0px; border-bottom: 1px solid #ddd; font:12px Verdana,Arial,sans-serif; text-shadow: 1px 1px 1px #fff; color:#555; } .c_vxod { float:left; width:305px; margin: 20px 20px 0px 20px; } /* Основа формы входа ------------------------------------------*/ .c_vxod, .c_vxod input{ font:11px Verdana,Arial,Helvetica, sans-serif; text-align: left; } .vxod_error{ float:left; width:100%; color:red; margin-bottom: 10px; text-align:center; font-weight: bold; } .vxod_name { width:50px; height:15px!important; padding: 7px 20px 7px 0px; color:#7b7b7b; text-shadow: 1px 1px 1px #FFF; font-weight: bold; } .vxod_pole { float: left; outline: none; width: 305px!important; height: 35px !important; margin: 0px 0px 10px 0px; border: 1px solid #ddd!important; padding: 7px 10px 7px 35px!important; border-radius: 5px; color: #777!important; font-weight: bold!important; } .vxod_pole:focus {box-shadow:inset 0px 0px 3px #ccc!important;} .vp_login {background:#fff url(pole_login.png) no-repeat left!important;} .vp_password {background:#fff url(pole_password.png) no-repeat left!important;} .vp_login:focus {background:#fff url(/img/pole_login.png) no-repeat left!important;} .vp_password:focus {background:#fff url(/img/pole_password.png) no-repeat left!important;} .vxod_zapomnit { float:left; width:100%; margin-top: 5px; } .vxod_zapomnit input { float:left; margin: 1px 10px 0px 0px; } .cv_title a, .vxod_zapomnit a { font-weight:bold!important; } .left {float: left;} .right {float: right;} /* Кнопка входа ------------------------------------------*/ .vxod_kn { float:left; text-align: center !important; width:100%; cursor:pointer; margin-top: 15px; padding: 5px 20px 5px 20px!important; border:1px solid #467A9F!important; background: #47719f!important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #47719f), color-stop(1, #5d82aa))!important; background: -moz-linear-gradient(top, #47719f 1%, #5d82aa 100%)!important; background: -o-linear-gradient(#47719f, #5d82aa)!important; border-radius:3px; font:13px Verdana,Arial,Helvetica, sans-serif!important; text-shadow:1px 1px 1px #467A9F!important; font-weight: bold!important; color:#fff!important; } .vxod_kn:active {box-shadow:inset 0px 0px 3px #326092!important;} .vxod_kn:hover {background:#6e92b8!important;}
|
| |||
| |||