ZorNet.Ru — сайт для вебмастера » Профиль для сайта » Форма входа для Ucoz в ajax окне + профиль в ajax

Форма входа для Ucoz в ajax окне + профиль в ajax

Форма входа для Ucoz в ajax окне + профиль в ajax
Очень по своему необычная форма входа для Ucoz, так он еще идет в ajax что очень удобно. Для светлых дизайн сайтов так же и для темных тоже, так как профиль по своей цветовой гамме создан в светлом оттенке. Когда зайдете на сайт через него или просто. То он сразу поменяется, будит самые основные функций на нем и Avarat что будит смотреться на сайте очень красиво. Но главное вы его можете поставить там где вам нужно а не только в блоке сайта.
Приступим к установке:
Этот код вставляем в самый низ CSS:

Код
/* User Box */  
  #userbox {text-shadow:0 -1px 0 #446b81;color:#fff;font:normal 14px Trebuchet MS,Arial,Tahoma,Verdana;display:none;position:fixed;top:50%;left:50%;padding:29px 33px 0;width:250px;margin-left:-158px;margin-top:-140px;height:281px;background:url('http://www.csomsk.ru/1-ucoz/pm/user_box.png') no-repeat 0 0;}  
  #userbox a {color:#fff;text-decoration:none;}  
  #userbox a:hover {text-decoration:underline;}  
  #userbox span#nm {font:bold 26px Trebuchet MS,Arial,Tahoma,Verdana;margin-bottom:18px;display:block;}  
  #userbox #cls {width:25px;height:25px;display:block;float:right;background:url('http://www.csomsk.ru/1-ucoz/pm/oel.png') no-repeat 0 -133px;cursor:pointer;}  
  #userbox input[type='text'], #userbox input[type='password'] {margin-top:19px;padding:0 13px;background:url('http://www.csomsk.ru/1-ucoz/pm/oel.png') no-repeat 0 0;font:normal 15px/38px Trebuchet MS,Arial,Tahoma,Verdana;width:224px;height:37px;color:#9f9f9f;border:none;outline:none;}  

  #userbox input#log_in {background:url('http://zornet.ru/Statistics/logbt.png') no-repeat -122px 0;cursor:pointer;width:122px;height:40px;margin:21px 64px 0;border:none;outline:none;}  
  #userbox input#log_in:hover {background:url('http://zornet.ru/Statistics/logbt.png') no-repeat -122px -41px;}  
  #userbox input#log_out {background:url('http://www.csomsk.ru/1-ucoz/pm/logbt.png') no-repeat 0 0;cursor:pointer;width:122px;height:40px;margin:21px 64px 0;border:none;outline:none;}  
  #userbox input#log_out:hover {background:url('http://zornet.ru/Statistics/logbt.png') no-repeat 0 -41px;}  

  #userbox #avatar {width:95px;height:96px;background:url('http://zornet.ru/Statistics/oel.png') no-repeat 0 -37px;float:left;margin-right:22px;margin-top:19px;}  
  #userbox #avatar img {max-with:85px;max-height:85px;margin:5px 5px 0 5px;border:none;}  
  #userbox #u_block {padding-top:21px;}  
  #userbox #u_block a {display:block;}  
  /* -------- */

Вставляйте туда где хотите видеть вызов ссылки

Код
<!-- User_Box -->  
  <script type="text/javascript">function log_in() {$('input[name=user]').val($('#u_login').val());$('input[name=password]').val($('#u_pass').val());$('input[name=sbm]').click();}</script>  
  <div id='userbox'>  
  <div id='cls' title='Закрыть' onclick="$('#userbox').fadeOut();"></div>  
  <span id='nm'>Профиль Вход</span>  
   
  <div id='avatar'><img src='$USER_AVATAR_URL$' alt='avatar' title='$USERNAME$'></div>  
  <div id='u_block'>  
  <a href='/news/0-0-0-1'>Добавить Новость</a>  
  <a href='/index/14'>Сообщения: <span title='Непрочитанных сообщений: $UNREAD_PM$'>$UNREAD_PM$</span></a>  
  <a href='/index/8'>Мой Профиль</a>  
  <a href='/index/11'>Изменить Данные</a>  
  <a href='/index/15'>Все Пользователи</a>  
  <input type='button' value='' title='Выйти' id="log_out" onclick="location.href='/index/10'">  
  </div>  
  <input type='text' id='u_login' value='Логин' size='20' maxlength='50' onblur="if(value == ''){value = 'Логин'}" onfocus="if(value == 'Логин'){value =''}">  
  <input type='password' id='u_pass' value='Пароль' size='20' maxlength='50' onblur="if(value == ''){value = 'Пароль'}" onfocus="if(value == 'Пароль'){value =''}">  
  <input type='button' value='' id="log_in" onclick='log_in();'>  
   
  </div>  
  <!-- /User_Box -->  
<a href="javascript://" onclick="$('#userbox').fadeIn();">Профиль Вход</a>

ВНИМАНИЕ: Стандартную форму входа нужно удалить и глобальных блоков (Если есть)
12 Апреля 2012 Просмотров: 4465 Комментариев: (4)

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

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

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

Комментарии: 4
Марковичь
Марковичь 24 Декабря 2015 17:031
0
Что то понять не могу, вот виху как гость, если зайту он просто изчезнет или будет профиль.
Сопрано
Сопрано 24 Декабря 2015 18:042
0
nikolla76, ты что первый день в интернете, там идет профиль и ава также будет, но для этого нкно такостиль самого шаблона, вообщеи он не дя всех, если кратко сказать.
FeStemBer
FeStemBer 24 Декабря 2015 18:333
0
Но в интернете есть же скрины, где он полностью развернут, и здесь не соглашусь, что для него нужен не обычный дизайн, простой подойдет, главное чтоб оттенки цвета совпадали.
Kosten
Kosten 24 Декабря 2015 19:154
0
Как найду, так сразу в комментариях поставлю изображение, как гость видит и зарегистрированный пользователь.
avatar