» »

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


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

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

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

Спасибо Дмитрию сайта Dimanik.ru за этот реально оригинальный код.

Установка:

Идем в нижнее часть и там прописать нужно этот код, чтоб на всем сайте можно вызвать и появиться.

Код
<!-- <Вход на сайт> -->  
<div id="logindialog" title="Сделать авторизацию на сайте" style="display:none;">  
<script type="text/javascript">  
sendFrm549704=function(){  
  var o=$('#frmLg549704')[0],pos=_uGetOffset(o),o2=$('#blk549704')[0];  
  document.body.insertBefore(o2,document.body.firstChild);  
  $(o2).css({top:(pos['top'])+'px',left:(pos['left'])+'px',width:o.offsetWidth+'px',height:o.offsetHeight+'px',display:''}).html('<div align="left" style="padding:5px;"><div class="myWinLoad"></div></div>');  
  _uPostForm('frmLg549704',{type:'POST',url:'/index/sub/',error:function() {  
  $('#blk549704').html('<div align="left" style="padding:10px;"><div class="myWinLoadSF" title="Невозможно выполнить запрос, попробуйте позже"></div></div>');  
  _uWnd.alert('<div class="myWinError">Невозможно выполнить запрос, попробуйте позже</div>','',{w:250,h:90,tm:3000,pad:'15px'});  
  setTimeout("$('#blk549704').css('display','none');",'1500');}});  
}  
</script>  
<div id="blk549704" style="border:1px solid #CCCCCC;position:absolute;z-index:82;background:url('http://zornet.ru/Ajaxoskrip/Forma_knopk/g.gif');display:none;"></div><form id="frmLg549704" action="/index/sub/" method="post" style="margin:0" onsubmit="sendFrm549704();return false;"><ul id="enter-form">  
<li><input name="user" type="text" class="f_input-lg" onblur="if(this.value=='') this.value='Введите логин'" onfocus="if(this.value=='Введите логин') this.value=''" value="Введите логин"/></li>  
<li><input name="password" type="password" class="f_input-lg" onblur="if(this.value=='') this.value='И пароль'" onfocus="if(this.value=='И пароль') this.value=''" value="И пароль"/></li>  
<button type="hidden" class="lg-send" onclick="sbm();" type="submit">Войти</button><input name="login" type="hidden" id="submit" class="lg-send" value="submit" title="Войти" />  
</ul>  
<ul id="reg-link">  
<li><a href="/index/3" title="Создать аккаунт">Регистрация</a></li>  
<li><a href="javascript://" rel="nofollow" onclick="new _uWnd('Prm','Напоминание пароля',300,130,{autosize:1,closeonesc:1},{url:'/index/5'});return false;" title="Восстановить пароль">Восстановить пароль</a></li>  
</ul><br>  

<div id="uLogin"><h2><center>Вход/регистрация через соц.сети</center></h2>  
<div id="uidLogForm" align="center">  
<div id="uidLogButton">  
<a href="javascript://" onclick="return uSocialLogin('vkontakte');" class="login-with vkontakte" title="Войти через ВКонтакте" rel="nofollow"><i></i></a>  
<a href="javascript://" onclick="return uSocialLogin('ok');" class="login-with ok" title="Войти через Одноклассники" rel="nofollow"><i></i></a>  
<a href="javascript://" onclick="return uSocialLogin('facebook');" class="login-with facebook" title="Войти через Facebook" rel="nofollow"><i></i></a>  
<a href="javascript://" onclick="return uSocialLogin('yandex');" class="login-with yandex" title="Войти через Яндекс" rel="nofollow"><i></i></a>  
<a href="javascript://" onclick="return uSocialLogin('google');" class="login-with google" title="Войти через Google+" rel="nofollow"><i></i></a>  
<a href="javascript://" onclick="return uSocialLogin('twitter');" class="login-with twitter" title="Войти через Twitter" rel="nofollow"><i></i></a></div>  
</div></div>  
<input type="hidden" name="a" value="2" /><input type="hidden" name="ajax" value="1" /><input type="hidden" name="rnd" value="704" /></form>  
<div class="clr" style="height:50px;"></div>  
</div>  
<script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/Forma_knopk/jqueryui.js"></script>  
<script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/Forma_knopk/libs.js"></script>  
<link media="screen" href="http://zornet.ru/Ajaxoskrip/Forma_knopk/vhod.css" type="text/css" rel="stylesheet" />  
<!-- </Вход на сайт> -->


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

Код
<a href="#" class="loginlink">Авторизация</a>


Вот и все, установка полностью завершена.

Чтоб работало нормально, нужно в операторы поставить саму функцию вызова и это будет так.

Код
<?if($USERS_ON$)?><a href="#" class="loginlink">Авторизация</a><?endif?>


А остальное, читаем комментарий, там очень много полезного написано, кто создал этот код.
29.10.2015 Просмотров: 708 Комментарий: (29)

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

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

Комментарий: 29
Brung
Brung 29.10.2015 18:261
+1
Вот эта форма лучше всех смотрится, но поставил уже другую и она нормально работает, возможно эту поставлю, просто слишком светлая она.
Kosten
Kosten 29.10.2015 18:322
0
Brung, вообще не могу представить другую гамму цвета. Светлый оттенок само то и больше не нужно его красить, хотя кому так не нравиться, тот может сменить оттенок.
AnTron
AnTron 29.10.2015 18:343
0
Вот сейчас начнут делать эксперименты, но здесь сам бы убрал несколько элементов, но для меня локальные пользователи важней.
ZruBkul
ZruBkul 29.10.2015 18:384
0
Нормально создано, все учтено, только не вижу, запомнить как у стандартных но с кнопкой думаю намного красивей было, а так средний типаж, просто мне кажется не до конца не доработано.
Kosten
Kosten 29.10.2015 18:405
0
ZruBkul, думаю нужно поставить и посмотреть, а на счет кнопки, почему бы и нет, но видать так изначально было задумано.
Brung
Brung 29.10.2015 18:446
0
ZruBkul, это точно, кнопку в самый низ и под стили и на почти всю ширину и совершенно пл другому смотрелась.
Kosten
Kosten 29.10.2015 18:487
0
Brung, вы наверно имели виду такой дизайн, где все почти так, только без социальных кнопок.



Думаю было бы thumb
Brung
Brung 29.10.2015 18:528
0
Вот такой дизайн с кнопками, не знаю по мне намного лучше бы смотрелся. Хотел раньше поставить этот скрипт, но так поискал, не кто не перекинул на свои ссылки, а там битая стоит на всех, что нашел.
Dimstrik
Dimstrik 29.10.2015 18:539
0
Я думаю тут не чего менять не нужно и смотрится всё превосходно, просто вы привыкли к стандарту да и смотря ещё к какому дизайну. Не важно светлый или тёмный всё же на каждом сайте оно смотрится по разному даже если оба светлых дизайна.
AnTron
AnTron 29.10.2015 18:5610
0
Возможно плохо искали, мне попадался код с другими ссылками не от center-dm, но не проверял и точно сказать не могу.
Dimstrik
Dimstrik 29.10.2015 18:5711
0
Тут ещё была речь про кнопку запомнить! Не знаю я сегодня по этой форме входа зашёл на сайт в обед и не выходил закрыл браузер а щас зашёл на сайт и я авторизирован как и был.
Kosten
Kosten 29.10.2015 19:2513
0
На тестовом сайте проверил, все нормально появляется, только нет кнопок социальных, и нужно операторы еще поставить.
Dimstrik
Dimstrik 29.10.2015 19:3014
0
Нет кнопок? А ты не проверял свои стили на то что в них может стоять скрытие старой формы входа на сайт! Росто я щас проверил на 4 разных сайта и всё работает.
Kosten
Kosten 29.10.2015 19:3215
0
Да вот тестовый сайт.. http://diapason.ucoz.net/blog там видно что в блоке стоят кнопки а в окне нет.
Dimstrik
Dimstrik 29.10.2015 19:3516
0
36 строчку своих стилей сайта смотри и удали это там #uidLogButton и будет счастье !
Kosten
Kosten 29.10.2015 19:3817
0
Dimstrik, эти тонкости не знал, теперь нужно операторы ставить,чтоб кнопка пропадало, как зашел на сайт, ты видать забыл.
Dimstrik
Dimstrik 29.10.2015 19:3918
0
Нет не забыл, просто это то я думаю можно самим догадаться!
Kosten
Kosten 29.10.2015 19:4019
0
Не забывай, не все могут догадаться.)
Dimstrik
Dimstrik 29.10.2015 19:4420
0
Понимаешь нужно дать возможность человеку что то додумать саому а то он и привыкнет что ему положили в рот готовое а он пожувал и выплюнул.
то есть на мелочах и нужно начинать учится! Я честно сам то не много ещё знаю но пытаюсь догнать.
Kosten
Kosten 29.10.2015 19:4622
0
Но я прописал в низу, в материале возможно не буду, хотя нужно и там сделать, то попадутся упертые и скажут не работает.
Kosten
Kosten 29.10.2015 19:4924
0
Dimstrik, нужно еще с кнопкой сделать, вот что вверху скрин привел, чтоб можно было выбрать, для кого кнопка важна, для кого нет. Постараюсь найти не битые стили на то изображение.
Dimstrik
Dimstrik 29.10.2015 19:5326
0
Это можно сделать таким образом, убрать соц сети а там кнопку на ширину или их сдвинуть а между ними на ширину кнопку, в общем это уже не проблема !
Kosten
Kosten 29.10.2015 18:5812
0
Нужно этот код проверить, просто его делал Димон, он всегда ответственно подходит, ну знай но проверяй), пойду пока на тестовый, все нормально скрин скину.
Kosten
Kosten 29.10.2015 19:4521
0
Нужно нам поставить под операторы теперь, то войти мы на сайт войдем, но сама кнопка входа будет отсвечивать и ее нужно поставить так.

Код
<?if($USERS_ON$)?><a href="#" class="loginlink">Авторизация</a><?endif?>
1 2 »
avatar