» »

Красивая форма входа для uCoz с тенями


Красивая форма входа для uCoz с тенями

Недавно залил один скрипт и все думал, что то ему не хватает и теперь Красивая форма входа для uCoz с тенями доработана и стала той которую видел по дизайну. А точнее убрал вход на сайт и поставил широкую по центру кнопку, что сразу приобрел свой оттенок по стилям скрипт. Потом нужно было поменять что то, где вы прописываете логин и пароль и не чего не стал делать, цветность сровнял и все на 5 пикселей округлил и на этом все почти изменение закончились.

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

Установка:

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

Код
<?if($USERS_ON$)?><a href="#" class="loginlink">Вход</a><?endif?>


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

Код
<!-- <Вход на сайт> -->  
<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/Fresa/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/Fresa/jqueryui.js"></script>  
<script type="text/javascript" src="http://zornet.ru/Fresa/libs.js"></script>  
<link media="screen" href="http://zornet.ru/Fresa/vhod.css" type="text/css" rel="stylesheet" />  
<!-- </Вход на сайт> -->


Если решите еще что то изменить, то только в css текстовом файле, но что нужно как бы сделано, но вам видней. Делал на тестовом сайте и на нем проверял на работоспособность, на по локальному и через форму социальных кнопок заходил и регистрировался отлично, вообщем также как от системы все идет.
30.10.2015 Просмотров: 764 Комментарий: (13)

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

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

Комментарий: 13
Brung
Brung 30.10.2015 02:421
0
Идея пошла с прошлой формы, говорил что с кнопкой как то серьезней будет. И вижу ты нашел не битые стили, чтоб оттуда взять CSS на вход и видно что намного высота поменялась, прошлая нормальная была, но высоту как то не по стандарту.
Kosten
Kosten 30.10.2015 02:532
0
Brung, хорошо вы загрузили меня искать не битую ссылку, которую на удивление быстро нашел и мне там нужен только был стиль на саму кнопку. В самом коде уже стоял код, но его сменил на совершенно другой, тот не давал вытянуть кнопку, вообще хотел на всю ширину, но Димон там стили прописал, что просто под цвет серый подогнал и закруглил.
Kosten
Kosten 31.10.2015 02:3210
0
Brung, это вообще можно считать как стандартная форма. Просто не чего лишнего здесь нет и нормально появляется, если вызывать ее на сайте.
Brung
Brung 30.10.2015 02:573
+1
Себе сейчас тестовый сайт сделал, которого не когда не было и поставил, как то не привычно по началу, а потом нормально стало. А что на всю ширину, то думаю это не красиво было, если только саму кнопку. Там еще нет клика который запоминал.
Kosten
Kosten 30.10.2015 03:074
0
На счет кнопки, поначалу ставил, но она по сути вообще не нужна, так как вообще она работает или нет. Все только браузер запоминает, а вот функция забыл пароль и регистрация, если она локальная, это думаю намного нужней и пришлось выбирать, хотел раскинуть надпись по левую и правую сторону, но в право слишком уходит и нужно было что а это дизайн только портить, перемычка или как там сделал и выравнял, думаю так пойдет и сильно вообще не заметны эти записи и есть они.
ZruBkul
ZruBkul 30.10.2015 03:105
+1
Нормально переделано, но лучше Kosten, что то свое сделать. А здесь просто взяты скрипты и стили с двух разных кодов, но главное работает, и как вижу, только стили больше времени искать нужно было. hands
AnTron
AnTron 31.10.2015 00:376
+1
Скоро смотришь и совершенно другой по функциям и по формату будет, начиналось с простого, как поставить на старый, а вот уже какие скрипты.
Kosten
Kosten 31.10.2015 00:417
0
AnTron, но а почему бы и нет, всегда хочется что то новое для пользователя залить и приходиться переделывать и перекраивать, под другой дизайн.
ZruBkul
ZruBkul 31.10.2015 00:438
0
Kosten, так и нужно, не все копировать, что то свое нужно привносить, чтоб знали, что тоновое может сегодня быть.
Kosten
Kosten 31.10.2015 00:459
0
Материал можно найти, вот ищу на PHP скрипты, нормальных нет, или просто тех, что ставишь и они будут реально работать. Вот нашел 4 скрипта, которые проверил и на сайт сразу закинул, хотя можно сказать на каждом сайте они, но здесь проверенны.
Canon
Canon 31.10.2015 15:1411
0
Почему красивая форма входа? Вполне обычном дизайне выполнено.
Kosten
Kosten 12.11.2015 03:1212
0
Для системы юкоз, такое окно необычное и нестандартное.
Dimstrik
Dimstrik 12.11.2015 06:1213
+1
Для самой системы это окно не совсем необычное просто многие не делают того что можно а потом говорят что юкоз отстой.
Тут просто не хотят делать и пользуются тем что при создание сайта стоит и всё.
avatar