» »

Форма входа для сайта (Появляющаяся)


Форма входа для сайта (Появляющаяся)

Очень даже не чего придумано и все до ума доведена Форма входа для сайта (Появляющаяся). Вы просто выбираете место где будит кнопка с надписью Вход и устанавливаете. Пользователь заходит на сайт, и если у него автоматом не сохранились его данные для входа на сайт. То он просто нажимает на кнопку и выплывает окно входа на сайт. Так же и гость может с этого входа нажать на регистрацию и зарегистрироваться на сайте. Как говориться все во дном флаконе и гостью не надо искать как на некоторых сайтах где эта регистрация.
Вот и дошли до установки:
Скачиваем архив с нашего сайта и закидываем его в корень сайта:
1. В конец вашей страницы перед тегом поставьте:
Код
<script type="text/javascript" src="http://zornet.ru/CSS-ZORNET/Login_form.js"></script>

2. Админ панель =>Дизайн => Управление дизайном =>Пользователи => Форма входа пользователей
удаляем старый код и устанавливаем следующий:
Код
<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>

3. Там, где хотите видеть кнопку с формой входа, поставьте:
Код
<!-- Начало тегов форма входа -->  
  <div id="loginContainer">
  <a href="#" id="loginButton"><span>Вход</span><em></em></a>
  <div style="clear:both"></div>
  <div id="loginBox">  
  <?if($LOGIN_FORM$)?>$LOGIN_FORM$<?endif?>  
  </div>
  </div>
  <!-- /Конец тегов форма входа -->

Но и последнее надо прописать стиль в CSS
Код
/* Форма входа
------------------------------------------*
#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(http://zornet.ru/CSS-ZORNET/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;
}
/* -------------------------------------- */
16.06.2013 Загрузок: 8 Просмотров: 846 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Kosten
Kosten 10.02.2014 20:261
0
ЗМЕЙ3862, поставь Вид кнопки uID авторизации: на старую.
Kosten
Kosten 11.02.2014 00:502
0
ЗМЕЙ3862, Админ панель - настройки - общие настройки. Там и выставишь почти в самом низу.
ALEX14-88
ALEX14-88 22.03.2014 00:333
0
Скажи пожалуйста как и куда устаностановить в css я устанавливаю в низ и у меня весь дизайн збивается
Kosten
Kosten 22.03.2014 00:514
0
ALEX14-88, есть специальный раздел по помощи ЗДЕСЬ
Delete
Delete 22.03.2014 01:395
0
ALEX14-88, очищать кэш браузера пробовали ? если нет то попробуйте, это первое, а второе может быть из-за:
Код
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />

это нужно смотреть на сайте все...
avatar