Главная » Статьи » Формы Входа

Всплывающий вход для локальных пользователей uCoz

Шаг 1 - Установим JS:
Как вы понимаете данный PSD исходник я буду адаптировать для всплывающей формы входа для локальных пользователей uCoz, поэтому нам следует установить плагин Basic Modal Dialog, для этого вниз страницы перед закрывающим тегом устанавливаем следующий js:

JS
Код
<script type="text/javascript" src="http://www.center-dm.ru/ucoz/forma_vxoda/4/simplemodal.js"></script>

Шаг 2 - Установим HTML:
Теперь давайте установим html каркас формы входа для uCoz, для этого заходим в Админ панель => Дизайн => Управление дизайном => Пользователи => Форма входа пользователей

и устанавливаем новый код:

HTML
Код
<?if($ERROR$)?><div class="vxod_error">$ERROR$</div><?endif?>  
  <div class="vxod_name">Логин:</div><input class="vxod_pole" name="user" value="" size="20" maxlength="50" type="text">  
  <div class="vxod_name">Пароль:</div><input class="vxod_pole" name="password" size="20" maxlength="15" type="password">  

  <div class="vxod_zapomnit"><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label for="rem$PAGE_ID$">запомнить</label> </div>  
  <input class="vxod_kn" name="sbm" value="Войти" type="submit">  

  <div class="vxod_niz">  
  <a href="$REMINDER_LINK$">Забыл пароль</a> | <a href="$REGISTER_LINK$">Регистрация</a>
</div>

Теперь установим каркас всплывающего окна, для этого вниз страницы перед закрывающим тегом устанавливаем html код:

HTML
Код
<?if($LOGIN_FORM$)?>  
<div id="content_vxod" class="basic_content">  
  <div class="cv_title">Форма входа</div>  
  <div class="c_vxod">  
  $LOGIN_FORM$  
  </div>  
</div>  
<?endif?>

а для того чтобы вызвать данное окно, установим ссылку:

HTML
Код
<?if($USER_LOGGED_IN$)?><a href="#" id="okno_vxod">Вход</a><?endif?>

Шаг 2 - Установим CSS:
И в завершении данного решения, пропишем css стили:

CSS-Code
Код
/* Всплывающая форма входа для uCoz №2  
------------------------------------------*/  
#simplemodal-container {  
  width:400px;  
  height:250px;  
  background:#e7e7e7;  
  border-radius:5px;  
}  

/* Тёмный фон при открытии окна*/  
#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(http://www.center-dm.ru/ucoz/forma_vxoda/4/close.png) no-repeat;  
}  

#simplemodal-container a.modalCloseImg:hover {  
  background-position:0 -23px!important;  
}  

.basic_content {  
  display:none;  
}  

.cv_title {  
  float:left;  
  width:360px;  
  height:32px;  
  border-top: 1px solid #d6e870;  
  background:url(http://www.center-dm.ru/ucoz/forma_vxoda/5/cv_title.png) repeat;  
  margin-bottom: 10px;  
  padding: 8px 20px 0px 20px;  
  font:125%/1.5 Verdana,Arial,sans-serif; color:#4e6400;  
  text-shadow: 1px 1px 1px #e6f29e; font-weight:700;  
  border-radius:5px 5px 0px 0px;  
}  

.c_vxod {  
  float:left;  
  width:280px;  
  margin: 20px 60px 0px 60px;  
}  

/* Основа формы входа  
------------------------------------------*/  
.c_vxod,  
.c_vxod input{  
  font:11px Verdana,Arial,Helvetica, sans-serif;  
}  

.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 {  
  outline:none;  
  color:#FFF!important;  
  width:187px!important;  
  height:15px!important;  
  text-shadow: 1px 1px 1px #9e9e9e!important;  
  background:#b0b0b0!important;  
  border: 1px solid #9e9e9e!important;  
  border-bottom: 1px solid #fff!important;  
  padding: 7px 10px 7px 10px!important;  
  box-shadow:inset 0px 0px 3px #797979!important;  
  border-radius:3px;  
}  
   
.vxod_name,  
.vxod_pole {  
  float:left;  
  margin: 0px 0px 10px 0px;  
  font-weight: bold;  
}  
   
.vxod_pole:focus {  
  background:#bababa!important;  
}  
   
.vxod_zapomnit {  
  float:left;  
  margin-top: 5px;  
}  

.vxod_niz {  
  float:left;  
  width:100%;  
  color:#bcbcbc;  
  text-align:center;  
  font-weight: bold;  
  padding-top: 5px;  
  margin-top: 10px;  
  border-top: 1px solid #bcbcbc;  
}  

/* Кнопка входа  
------------------------------------------*/  
.vxod_kn {  
  float:right;  
  cursor:pointer;  
  padding: 5px 20px 5px 20px!important;  
  border:1px solid #467A9F!important;  
  color:#fff!important; text-shadow:1px 1px 1px #467A9F!important; font-weight: bold!important;  
  background: #9aeb56!important;  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #57A8D5), color-stop(1, #3082B1))!important;  
  background: -moz-linear-gradient(top, #57A8D5 1%, #3082B1 100%)!important;  
  background: -o-linear-gradient(#57A8D5, #3082B1)!important;  
  border-radius:3px;  
}  

.vxod_kn:active {  
  box-shadow:inset 0px 0px 3px #1c638b!important;  
}  

.vxod_kn:hover {  
  background:#6eb2d8!important;  
}

Напоминаю, что системная переменная отвечающая за отражение формы входа uCoz, должна быть прописана на странице сайта один раз, в противном случаи данное решение не будет работать!

На этом всё, спасибо за внимание!

Источник: http://www.center-dm.ru/
Категория: Формы Входа | Добавил: slavick (08.07.2013)
Просмотров: 248 | Комментарии: 1 | Теги: локальных, вход, ucoz, пользователей, для, Всплывающий | Рейтинг: 1.0/3
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]