« Панель пользователя и форма авторизации для сайтов uCoz »

Описание материала:

Всем доброго времени суток!

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

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

Сама же форма входа которую щас предоставляю, с помощью её можно авторизоваться на сайт .



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



Установка сама по себе не хитра, но всё же нужно будет проделать несколько операций по её установки, но не чего сложного.

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

Код

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">  
<script type="text/javascript" src="http://kino-vor.ru/templates/kino-vor/js/bootstrap.min.js"></script>


Далее в нужное место сайта вам следует установить вот этот кусочек кода.

Код
<?if($USER_LOGGED_IN$)?>
<div id="login-bar" class="radis-b3">
<ul class="nav-login">
  <li>
  <a href="#" class="nav-login-profile" data-toggle="modal" data-target="#modal-login" title="Панель юзера - $USERNAME$">
  <span class="nav-login-foto radius-50"><img src="$USER_AVATAR_URL$" title="$USERNAME$" alt="$USERNAME$" /></span>
  <span class="nav-login-info"><i class="fa fa-bell-o"></i> Мой профиль</span>
<span class="nav-login-info"><i class="fa fa-envelope"></i> Сообщения ($UNREAD_PM$)</span>
  <span class="caret"></span>
  </a>
  </li>  
</ul>
<div class="modal fade" id="modal-login" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-me">
<div class="modal-content">  
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></span>
  </button>  
  <div class="modal-body">
  <div class="login-blue">
  <img alt="$USERNAME$" src="$USER_AVATAR_URL$" class="radius-3">
  <b>$USERNAME$</b><small>$USER_GROUP$</small>
  <div class="clearfix"></div>
  </div>  
  <ul class="nav-login-modal">  
  <li><a href="$PERSONAL_PAGE_LINK$"><i class="fa fa-bell-o"></i>Мой профиль</a></li>
  <li><a href="$PM_URL$"><i class="fa fa-envelope-o"></i>Сообщения ($UNREAD_PM$)</a></li>
  <li><a href="/"><i class="fa fa-heart-o"></i>Мои закладки</a></li>
  <li><a href="$LOGOUT_LINK$"><i class="fa fa-sign-out"></i>Выход с сайта</a></li>
  </ul>
  <div class="clearfix"></div>
  </div>  
</div>
</div>
</div>
</div>
<?else?>
<div id="login-bar" class="radis-b3">
<ul class="nav-login">
  <li>
  <a href="#" class="nav-login-profile" data-toggle="modal" data-target="#modal-login" title="Панель юзера - ">
  <span class="nav-login-foto radius-50"><img src="http://kino-vor.ru/templates/kino-vor/dleimages/noavatar.png " alt="Авторизация"></span>
  <span class="nav-login-info"><i class="fa fa-user"></i> Вход на сайт</span>
  <span class="nav-login-info"><i class="fa fa-sign-in"></i> Регистрация</span>
  </a>
  </li>
</ul>
<div class="modal fade" id="modal-login" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-sm">
<div class="modal-content">  
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></span>
  </button>  
  <div class="modal-body">
$LOGIN_FORM$
  </div>  
</div>
</div>
</div>
</div>  
<?endif?>


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

Код
<form method="post" action="">
  <div class="login-p">
  <b>АВТОРИЗАЦИЯ</b>
  <small>Нет аккаунта? <a rel="nofollow" href="$REGISTER_LINK$" title="Регистрация на сайте">Зарегистрируйтесь</a>, <br>или используйте логин и пароль</small></div>
   
  <div class="padding-25">  
  <ul>
  <li class="igroup">
  <span class="igroup-span"><i class="fa fa-user"></i></span>
  <input type="text" name="user" id="login_name" class="igroup-input" placeholder="Логин:">
  </li>  
  <li class="igroup">
  <span class="igroup-span"><i class="fa fa-key"></i></span>
  <input type="password" name="password" id="login_password" class="igroup-input" placeholder="Пароль">
  </li>  
  <li class="igroup">
  <span class="igroup-span"><i class="fa fa-info"></i></span>
  <a rel="nofollow" href="$REMINDER_LINK$" class="igroup-input igroup-link" style="width: 184px; height: 20px;">Забыли пароль?</a>
  </li>  
  <li class="igroup">
  <button class="btn" type="submit" title="Войти">Войти</button>
  </li>
  </ul>
  </div>  
  <input name="login" type="hidden" id="login" value="submit">
<?if($PAGE_ID$="login")?> </form><?endif?>


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

Код
/* логин панель */

.modal-open{overflow:hidden}.modal{display:none;overflow:hidden;position:fixed;top:0;right:0;padding:15px;bottom:0;left:0;z-index:1041;-webkit-overflow-scrolling:touch;outline:0}
.modal.fade .modal-dialog{transform:translate(0, -25%);transition:transform 0.3s ease-out}.modal.in .modal-dialog{transform:translate(0, 0)}
.modal-open .modal{overflow-x:hidden;overflow-y:auto}
.modal-dialog{position:relative;width:auto;margin:15px}
.modal-backdrop{top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}
.modal-backdrop.fade{opacity:0}
.modal-backdrop.in{opacity:0.5}
.modal-content{position:relative;background-color:#fff;border:10px solid rgba(255,255,255,0.2);background-clip:padding-box;outline:0}
.close{font-size:28px;font-weight:bold;line-height:1;color:#fff;position:absolute;top:-25px;right:-25px;width:40px;height:40px;line-height:40px;text-align:center;background:#FFC600;z-index:9999999;border-radius:50%}
.close:hover,.close:focus{color:#fff;text-decoration:none;cursor:pointer;background:#F5AB0C}button.close{padding:0;cursor:pointer;border:0;-webkit-appearance:none}
.modal-body{position:relative}
.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}

@media (min-width: 768px){
.modal-dialog{width:600px;margin:100px auto 25px auto}
.modal-dialog.modal-dialog-me{width:400px}
.modal-dialog.modal-dialog-sm{width:330px}
.modal-dialog.shortf-popup{width:700px}}

#login-bar {position: absolute; background: #FFC600; border-bottom: 3px solid #C35C00; border-top: 1px solid #FFDD67; margin-top: -14px;}
#login-bar:after {position:absolute;top:0;left:-9px;z-index:1;width:0;content:"";height:0;border-style:solid;border-width:0 0 13px 9px;border-color:transparent transparent #BC8404 transparent}

@media (max-width: 599px){
  #login-bar{margin:-73px 0 0 0}
}
.nav-login a {text-decoration: none;}
.nav-login{height:56px}
.nav-login-profile{position:relative;overflow:hidden;display:block;height:56px;padding:13px 15px 0 65px;color:#C35C00}
.nav-login-foto{width:40px;height:40px;overflow:hidden;border:1px solid #F5AB0C;position:absolute;top:8px;left:13px}
.nav-login-foto img{display:block;width:40px;height:40px}
.nav-login-info{display:block;font-size:11px}
.nav-login-info i{font-size:12px;margin-right:4px}
.nav-login-profile .caret{display:none}

@media (max-width: 767px){
  .nav-login-profile .nav-login-info{display:none}
  .nav-login-profile .caret{display:block;margin-top:15px !important}
}
.login-blue{color: #fff; overflow: hidden; padding: 20px 20px 20px 130px; text-shadow: 0 1px 1px #363838; position: relative; height: 115px; box-shadow: 0px 3px 7px rgba(83, 88, 89, 0.4); background: #33393A;}
.login-blue img{width:90px;height:90px;border-radius:50%;border:5px solid #fff;position:absolute;top:25px;left:25px}
.login-blue > b, .login-blue small{display:block}
.login-blue>b{font-size:22px;margin-top:25px;line-height:22px}
.login-blue small span{color: #CBCBCB !important;text-shadow:none}

@media (max-width: 767px){
.login-blue{padding:25px 0;text-align:center}
.login-blue img{position:static;display:inline-block}
}
.nav-login-modal{overflow:hidden;margin:25px}
.nav-login-modal li{list-style: none; margin-bottom:4px;float:left;width:50%}
.nav-login-modal li a { text-decoration: none; border-radius:3px;height:28px;line-height:26px;padding:0 10px;display:block;margin:0 3px;color:#C35C00;background:#FFC600}
.nav-login-modal li a i{margin-right:6px}
.nav-login-modal li a:hover{background:#F99002;color:#fff;border-color:#F99002}

@media (max-width: 767px){
.nav-login-modal li{width:100%;float:none}
}
.login-p {color: #fff; padding: 25px; text-align: center; text-shadow: 0 1px 1px #3D3D3B; box-shadow: 0px 3px 7px rgba(83, 88, 89, 0.4); background: #33393A;}
.login-p b{display:block;font-size:20px;line-height:20px;margin-bottom:15px}
.login-p small{display:block}
.login-p small a{color:#fff;text-decoration:underline}
.login-p small a:hover{text-decoration:none}.social-login{text-align:center;overflow:hidden;padding-bottom:10px;border-bottom:1px solid #e5e5e5;margin-bottom:15px}

.igroup {width: 100%; position: relative; display: table; border-collapse: separate; margin-bottom: 8px;}

.padding-25 {padding: 25px !important;}
.igroup-span { padding: 6px 12px; font-size: 14px; font-weight: normal; line-height: 1; color: #999; text-align: center; background: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; }
.igroup-span:first-child { border-right: 0; vertical-align: middle; border-bottom-right-radius: 0; border-top-right-radius: 0; }
.btn:hover, .btn:focus { color: #fff; text-decoration: none; background: #0A86A0; background: #0A86A0 linear-gradient(top, #0A86A0 0%,#0B97B5 100%); background: #0A86A0 -webkit-linear-gradient(top, #0A86A0 0%,#0B97B5 100%); background: #0A86A0 -moz-linear-gradient(top, #0A86A0 0%,#0B97B5 100%); background: #0A86A0 -ms-linear-gradient(top, #0A86A0 0%,#0B97B5 100%); }
.btn { display: inline-block; margin-bottom: 0; text-align: center; vertical-align: middle; position: relative; cursor: pointer; font-size: 12px; background: #0B97B5; background: #0B97B5 linear-gradient(top, #0CAACB 0%,#0CA0C0 100%); background: #0B97B5 -webkit-linear-gradient(top, #0CAACB 0%,#0CA0C0 100%); background: #0B97B5 -moz-linear-gradient(top, #0CAACB 0%,#0CA0C0 100%); background: #0B97B5 -ms-linear-gradient(top, #0CAACB 0%,#0CA0C0 100%); color: #eee; border: 1px solid #0DB9DD; border-bottom: 1px solid #0A859E; border-radius: 3px; padding: 8px 14px 7px 14px; line-height: 1.4; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 20; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); -ms-touch-action: manipulation; touch-action: manipulation; transition: all 200ms ease-in; }
.igroup .igroup-input:last-child, .igroup-span:last-child, .igroup-btn:last-child > .btn, .igroup-btn:first-child > .btn:not(:first-child), #page-input select, .igroup-select select { border-bottom-left-radius: 0; border-top-left-radius: 0; }
.igroup-span, .igroup-btn, .igroup .igroup-input { display: table-cell; }
.igroup .igroup-input { position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0; }
.igroup-input, #page-input select { display: block; width: 100%; height: 34px; padding: 7px 12px; font-size: 12px; line-height: 1.4; color: #666 !important; background: #fff; border: 1px solid #e5e5e5; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }


На заметку!

Первое что вы должны знать, то что этот скрипт не будет работать если вы не настроите версию библиотеки jQuery, для этого проходим в общие настройки сайта и указываем на против Версия библиотеки jQuery: вот такие параметры jquery-1.7.2.js. Всё видно на скриншоте ниже.



Далее я вам бы посоветовал вот этот файл скачать и загрузить на свой сайт.

Код
<script type="text/javascript" src="http://kino-vor.ru/templates/kino-vor/js/bootstrap.min.js"></script>


Для этого вставьте эту ссылку в адресную строку

Код
http://kino-vor.ru/templates/kino-vor/js/bootstrap.min.js


И нажмите в браузере сохранить страницу как.

И думаю последний момент не очень важный ну нужный!

Если у вас уже подключён на сайте шрифтовые иконки то вот это вам не нужно устанавливать

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


На этом я вроде всё!


Установка материала

Мы поможем установить данный материал к Вам на сайт

Источник

Материал взят со стороннего ресурса и был проверен нами


Добавил: Dimstrik | Категория: Скрипты для uCoz | Просмотров: 537


Поделиться в соц. сетях:
Комментариев к материалу: 6
Владислав 13.08.2016 в 18:34Спам
Стильно, красиво, молодежно wink
1
Timur Aktag 12.08.2016 в 23:07Спам
Отличный материалчик biggrin
1
Пользуйтесь! Будет что ещё обязательно выложу на этом сайте.
1
Александр 13.08.2016 в 16:24
Очень красиво смотрится
1
Что есть то есть, я стараюсь выкладывать интересное, красивое и редкое!
0
Александр 13.08.2016 в 16:34
Буду ждать всё больше интересных скриптов
0
avatar