Регистрация    Войти
Авторизация

Появляющаяся форма входа ucoz

Появляющаяся форма входа ucoz

Появляющаяся форма входа ucoz. Небольшой вариант скрипта для uCoz, благодаря которому мы создадим кнопку вход, при нажатии на которую появится форма входа вашего сайта.

Шаг 1 - установим JS:

Так как в системе uCoz уже установлена библиотека jQuery, нам следует установить в конец вашей страницы перед тегом следующий js код, весом всего 537 байт:
HTML-Code

<script type="text/javascript" src="/img/Login_form.js"></script>


Шаг 2 - установим HTML:

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

Админ панель =>Дизайн => Управление дизайном =>Пользователи => Форма входа пользователей

удаляем старый код и устанавливаем следующий:
HTML-Code

<div id="loginForm">  
  <div class="vxod_name">Ваш логин:</div><input class="login_pole" type="text" name="user" value="" size="20" maxlength="50"/>  
  <div class="vxod_name">Ваш пароль:</div><input class="login_pole" type="password" name="password" size="20" maxlength="15"/>  
  <div id="vxod_reg">
  <a href="$REMINDER_LINK$">Забыл пароль</a>
  <a href="$REGISTER_LINK$">Регистрация</a>
  </div>
  <div id="cell_knopkav">
  <span class="right"><input class="south" title="Сохранить пароль при входе"id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label for="rem$PAGE_ID$"></label></span>
  <input class="knopka_vxoda" name="sbm" type="submit" value="Войти"/></div>
  </div>


отлично, теперь нам следует установить кнопку входа, с содержанием формы входа в нужное место вашей страницы, обычно её размещают вверху страницы:
HTML-Code
<!-- Начало тегов форма входа -->

Вход


$LOGIN_FORM$


<!-- /Конец тегов форма входа -->


Шаг 3 - установим CSS:

Наша форма входа, почти готова, всё что нам осталось сделать, так это прописать нужные css стили:
CSS-Code
/* Форма входа 
------------------------------------------*
#loginContainer {
  position:relative;
  float:right;
}

#loginButton {  
  display:inline-block;
  float:right;
  background:#EFF3F7;  
  border:1px solid #97B7CA;  
  border-radius:3px;
  -moz-border-radius:3px;
  position:relative;
  z-index:30;
  cursor:pointer;
}

#loginButton span {
  font: 12px Verdana,Arial,Helvetica, sans-serif; font-weight:bold;
  color:#445058; text-shadow:1px 1px #fff;  
  padding:7px 29px 9px 10px;
  background:url(/img/loginArrow.png) no-repeat 53px 7px;
  display:block
}

#loginButton:hover {
  background:#D2E0EA;
}

#loginButton.active {
  border-radius:3px 3px 0 0;
}

#loginButton.active span {
  background-position:53px -76px;
}

#loginButton.active em {
  position:absolute;
  width:100%;
  height:1px;
  background:#EFF3F7;
  bottom:-1px;
}

#loginBox {
  position:absolute;
  display:none;
  width:220px;  
  background:#EFF3F7;
  border:1px solid #97B7CA;
  padding: 10px 15px 10px 15px;  
  margin-top:-1px;  
  top:34px;
  right:0;
  z-index:29;  
  border-radius:3px 0 3px 3px;
  -moz-border-radius:3px 0 3px 3px;
}

#loginBox a:link,  
#loginBox a:visited {text-decoration:none; color:#5a79b8;}
#loginBox a:hover {text-decoration:none; color:#5cb85a;}

.vxod_name {
  font:11px Verdana,Arial,Helvetica, sans-serif;
  color:#5789af; text-shadow: 1px 1px 1px #fff;
  margin:0px;
  padding: 0px 0px 2px 0px;  
}

.login_pole {
  float:left;
  font:12px Verdana,Arial,Helvetica, sans-serif;
  color:#5789af;
  width:198px;  
  background: #fff;
  padding: 6px 10px 6px 10px;
  border: 1px solid #97B7CA;
  vertical-align:middle;
  margin-bottom: 10px;
  border-radius:3px;
  -moz-border-radius:3px;
}

.login_pole:focus {
  background: #fff;
  box-shadow:inset 0px 1px 3px #bbb;
  -webkit-box-shadow:inset 0px 1px 3px #bbb;
  -moz-box-shadow:inset 0px 1px 3px #bbb;  
}

#vxod_reg {
  float:left;
  font:10px Verdana,Arial,Helvetica, sans-serif;
  color:#BABABA; font-weight: bold;
  width:120px;
}

#cell_knopkav {
  float:right;
}

#cell_knopkav span {
  float:left;
  margin: 5px 5px 0px 0px;  
}

.knopka_vxoda {
  float:right;
  font:12px Verdana,Arial,Helvetica, sans-serif;
  color:#226891; text-shadow:1px 1px 1px #fff;  
  width:53px;
  background:#afd5eb;
  border:1px solid #84ABC2;
  padding: 3px 5px;  
}

.knopka_vxoda:hover {
  color:#229125;
  text-shadow:1px 1px 1px #fff;
  background:#b7ebaf;
  border:1px solid #84c28b;
}
/* -------------------------------------- */


Вуаля, наша форма входа готова, всё просто и доступно...

Внимание! У вас нет прав для просмотра скрытого текста.
Новые скрипты для ucoz

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  25-12-2011, 18:03   Просмотров: 4545   
которую, вашего, которому, ucoz, входа, входа, скрипта, вариант, uCoz, форма, кнопку,
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Пользователь offline i7yx 22 января 2012 17:47
Что-то не чего не работает !!!!
Это точно правильно???
<!-- Начало тегов форма входа -->

Вход


$LOGIN_FORM$


<!-- /Конец тегов форма входа -->

          1
Пользователь offline Dereku 12 мая 2012 04:50
i7yx,
Конечно неправильно, тут даже слепой поймет) открой код страницы и поищи этот "Вход" как скрипт)

          2

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.