Светлая панель входа и мини профиля 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; } Вот и всё скрипт установлен, и я рад если он вам пригодился! | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
