ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Светлая панель входа и мини профиля uCoz

Светлая панель входа и мини профиля uCoz

Светлая панель входа и мини профиля uCoz
Можно поставить на светлый по дизайну шаблон, так как панель входа и мини профиля uCoz выполнена в такой же гамме. Предназначена для авторизации пользователя на портале и установка его, можно по вашему выбору установить. Я хочу предоставить для вас уважаемые гости нашего сайта а так же наши уже постоянные посетители, хороший скрипт с помощью которого на вашем сайте можно будет удобно расположить форму авторизации и сам мини профиль пользователя. Данный скрипт я взял с одного DLE шаблона для того что бы порадовать вас мои друзья как хорошей обновой сайта и так же рабочим скриптом. Многим не нравится стандартная форма входа и многие не могут настроить так как им нужно, для этого мы и есть!

Сама суть скрипта, вы наверное уже догадались, будет видна только надпись АВТОРИЗАЦИЯ НА САЙТЕ и после того как вы нажмёте на неё у вас появится окно с формой входа на сайт.

После того как вы зашли на сайте у вас будет надпись ПАНЕЛЬ УПРАВЛЕНИЯ при нажатие на которую будет выводиться краткая информация о пользователе!

Установка много времени не потребует, так как сложного не чего нет и не будет и вы справитесь самостоятельно, а если не сможете то мы придем к вам на помощь!

И так в первую очередь вам нужно скачать архив с нашего сайта и загрузить папку images и js в файловый менеджер вашего сайта.

Вторым действием вам нужно подключить скрипт, для того что бы в будущем у нас при нажатие на ссылку выходило окно с авторизацией или с мини профилем. И для этого скопируйте скрипт и вставьте в нижнюю часть вашего сайта и сохраните.

Код
<script type="text/javascript" src="/js/libs.js"></script>


Третьим шагом вам нужно установить саму панель и авторизацию на сайте в то место где вы считаете она должна быть, просто скопируйте код и вставляйте в нужное место на сайте.

Код
<?if($USER_LOGGED_IN$)?>
  <ul class="lpanel clr">
  <li><a href="javascript:;" class="spanel"><span class="green">Панель</span> управления</a>
  <div id="spanel" class="islogin">
  <span class="arrow"></span>
  <div class="scont">
  <div class="title clr">Панель <span class="red">управления</span></div>
  <div class="lcol avatar"><img src="$USER_AVATAR_URL$" alt="$USERNAME$"></div>
  <div class="rcol clr">
  <ul class="lcol">
  <?if($GROUP_ID$="4")?><li><a href="$HOME_PAGE_LINK$panel" target="_blank"><b>Админпанель</b></a></li><?endif?>
  <li><a href="$PERSONAL_PAGE_LINK$">Мой профиль</a></li>
  <li><a href="$PM_URL$">Сообщения ($UNREAD_PM$)</a></li>
  <li><a href="$LOGOUT_LINK$">Выйти</a></li>
  </ul>  
  </div>
  <div class="clr"></div>
  </div>
  </div>
  </li>
  </ul><!-- /end lpanel -->  
<?else?>
  <ul class="lpanel clr">  
  <li><a href="javascript:;" class="spanel"><span class="green">Авторизация</span> на сайте</a>
  <div id="spanel">
  <span class="arrow"></span>
  $LOGIN_FORM$  
  </div>  
  </li>
  </ul><!-- /end lpanel -->  
  <?endif?>


После третьего шага нам нужно сделать четвёртый и этим шагом мы установим новую и красивую форму входа на сайт, и для этого скопируйте код ниже указанный и вставляйте его в замен стандартного дизайна формы входа на сайт.

Код
<form method="post" action="">
  <div class="scont">
  <div class="title">Панель <span class="red">авторизации</span></div>
  <div class="lpinp"><label for="login_name">Логин</label><input type="text" name="user" value="" size="20" maxlength="50" id="login_name" /></div>
  <div class="lpinp"><label for="login_password">Пароль:</label><input type="password" name="password" size="20" maxlength="15" id="login_password" /></div>
  <div class="lpbtn"><button class="fbutton" id="login-submit" name="sbm" value="" title="Войти">Войти</button></div>
  <input name="login" type="hidden" id="login" value="submit" />
  </div>
<?if($PAGE_ID$="login")?> </form> <?endif?>


На этом практически всё сделано и нам только остаётся установить скрипу стили и для этого я вам предлагаю скопировать ниже приведённые стили и добавить их в самый низ стилей вашего сайта и сохранить их.

Код
/* login panel */
.lpanel {
  float:right;
  margin:25px 0 0 0;
}
.lpanel li {
  display:block;
  float:left;
  background:url(../images/lbtn_sep.png) no-repeat;
  padding:0 5px 0 10px;
  height:29px;
  width:70px;
  line-height:14px;
  position:relative;
}
.lpanel li:first-child {
  background:none;
}
.lpanel li a {
  color:#a09c98;
  text-transform:uppercase;
  font-style:italic;
  font-size:12px;
  text-decoration:none;
}

.lpanel #spanel {
  display:none;
  background:rgba(0,0,0,0.04);
  position:absolute;
  top:100%;
  right:0;
  margin-top:15px;
  width:258px;
  padding:3px;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  z-index:2;

}
.lpanel .islogin {
  width:345px !important;
}
.lpanel #spanel .arrow {
  border-bottom: 11px solid rgba(0,0,0,0.04);
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  position: absolute;
  left:81%;
  bottom:100%;
}
.lpanel .islogin .arrow {
  left:82.2% !important;
}

.lpanel .scont {
  background:#fff url(../images/scont.png) repeat-x top;
  position:relative;
  padding:5px;
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  box-shadow:inset 0 0 1px rgba(0,0,0,0.21);
  -moz-box-shadow:inset 0 0 1px rgba(0,0,0,0.21);
  -webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.21);  
}
.lpanel .scont:after, .lpanel .scont:before {
  bottom:99%;  
  border:solid transparent;  
  content: "";  
  height:0;  
  width:0;  
  position:absolute;
  pointer-events:none;
}  
.lpanel .scont:after {
  border-color:rgba(255,255,255,0);
  border-bottom-color:#fff;
  border-width:10px;
  left:86%;
  margin-left:-10px;
}  
.lpanel .scont:before {
  border-color:rgba(241,241,241,0);
  border-bottom-color:#f1f1f1;
  border-width:11px;
  left:86%;
  margin-left:-11px;
}
.lpanel .scont .title {
  display:block;
  text-transform:uppercase;
  font-size:12px;
  color:#b9b6b6;
  padding:3px 0 15px 5px;
}
.lpanel .scont .lpinp {
  background:#fbfbf7;
  margin:0 5px 5px;
  padding:4px 10px;
  border-radius:5px;
  box-shadow:inset 0 1px 1px rgba(0,0,0,0.07);
}
.lpanel .scont .lpinp label {
  color:#919176;
  font-size:11px;
  text-transform:uppercase;
  font-style:italic;
  width:40px;
  display:block;
  float:left;
  padding-top:2px;
}
.lpanel .scont .lpinp input[type="text"], .lpanel .scont .lpinp input[type="password"] {
  border:0 none;
  background:none;
  color:#919176;
  font-style:italic;  
}
.lpanel .scont .lpbtn {
  margin:7px 0 4px;
  text-align:center;
}
.lpanel .scont .lpbtn .fbutton {
  color:#75cb40;
}
.lpanel .scont .lpbtn .fbutton:hover {
  color:#898989;
}
.lpanel .scont .avatar {
float: left;
  background:#fbfbf7;
  margin:0 0 5px 3px;
  padding:4px 4px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
}
.lpanel .scont .avatar > img {
  display:block;
  width:92px;

  box-shadow:0 0 2px rgba(0,0,0,0.18);
  -moz-box-shadow:0 0 2px rgba(0,0,0,0.18);
  -webkit-box-shadow:0 0 2px rgba(0,0,0,0.18);
}
.lpanel .scont .rcol ul {
  margin:-2px 10px 0;
}
.lpanel .scont .rcol ul li {
  display:block;
  float:none;
  border-top:1px dotted #ececec;
  background:none;
  padding:5px 2px 5px 1px;
  height:auto;
  width:auto;
}
.lpanel .scont .rcol ul li:first-child {
  border-top:none;
}
.lpanel .scont .rcol ul li a {
  color:#98987f;
  background:url(../images/gwdot.png) no-repeat left;
  padding-left:8px;
  text-transform:none;
  font-style:italic;
  font-size:12px;
  text-decoration:none;  
}
.lpanel .scont .rcol ul li a:hover {
  color:#75cb40;
}
.lpanel .clr {
  clear:none;
  }


Вот и всё скрипт установлен, и я рад если он вам пригодился!
16 Сентября 2015 Загрузок: 2 Просмотров: 1643 Комментариев: (9)

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

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

Оставь свой отзыв

Комментарии: 7
Сопрано
Сопрано 16 Сентября 2015 21:201
0
Опять стащил кто то с DLE там что такой дизайн крутой, что много чего уже переделано.
Kosten
Kosten 16 Сентября 2015 22:282
0
Вот вы видите на сайте, что надо поставить пароль и логин и потом зайти. Все функций такие же, плюс еще оригинальный и по малый по размерам мини профиль, можно поставить, на самый верх одного из контейнеров в блоге.
Сопрано
Сопрано 17 Сентября 2015 00:153
0
Так это понятно, одно не понимаю, почему только все светлое, у них там что темных шаблонов совсем нет.
Kolinkor
Kolinkor 17 Сентября 2015 00:184
0
Что то подозрительно, можно заказать уже на сайт а не адаптировать с другого хостинга, вообще много шаблонов создано и переделано, сейчас посмотреть бы, по гуглу пройдут они.
Kolinkor
Kolinkor 17 Сентября 2015 00:285
0
И еще, стал больше замечать, что сайты стали просто убирать социальные закладки, под регистрацию и чтоб гости проходили полную, не знаю в чем дело, с ними намного должно быть лучше.
FeStemBer
FeStemBer 17 Сентября 2015 00:396
0
Красиво смотрится, но как вижу на блоге по верх стоит, тогда можно в самый верх как написано поставить.
Kosten
Kosten 17 Сентября 2015 00:507
0
Сразу скажу не проверяли вообще вижу в первые, просто приятель отдал сайт и там был этот материал, а он не рабочие не ставит, вот потому сюда перетянул.
avatar