» »

Мини профиль uCoz - by unallocated


Мини профиль uCoz - by unallocated

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

Установка

Это в CSS

Код
.uPanel a.url:hover{text-shadow:0px 0px 5px #fff;color:#fff;opacity:1.0;}  
.uPanel a.url.highlighted{opacity:1.0;}  
a.button{display:block;float:left;padding:6px 9px 6px 9px;margin:2px;color:#fff;font-weight:bold;background:url('http://zornet.ru/Rang_2/avtorizachii_dli_ucoz.png') #4E4E4E;background-position:100% 0px;border:1px solid #2D2D2D;border-radius:3px;-moz-border-radius:3px;box-shadow:0px 0px 1px #fff inset;-moz-box-shadow:0px 0px 1px #fff inset;text-shadow:0px -1px 0px #000;}  
a.button:hover{border:1px solid #815500;color:#fff;background-position:100% -28px;text-shadow:0px -1px 0px #815500;}  
a.button:active{border:1px solid #815500;color:#fff;background-position:100% -28px;box-shadow:0px 0px 5px #000 inset;-moz-box-shadow:0px 0px 5px #000 inset;text-shadow:0px -1px 0px #815500;}  
.uPanel a.url span{display:block;position:absolute;bottom:0px;left:20px;color:#fff;background:red;padding:0px 3px 0px 3px;height:14px;line-height:14px;font-size:7pt;font-weight:bold;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;}


А это куда хотите хоть в нижнею часть сайта

Код
<?if($USER_LOGGED_IN$)?>  
<div class="uPanel" id="uPanel">  
<a href="" title="$USERNAME$" class="URL"><img src="$USER_AVATAR_URL$" style="width:27px; height:27px;" alt=""> </a>  
<a href="/index/14" title="Личные сообщения" class="url"><img src="http://zornet.ru/Rang_2/pm.png" alt=""></a>  
<a href="/index/8" target="_blank" title="Персональная страница" class="url"><img src="http://unallocated.ru/wind-color.png" alt=""></a>  
<a href="/index/10" title="Выход" class="url"><img src="http://zornet.ru/Rang_2/exit.png" alt=""></a> <?else?>  
<div class="uPanel">  
<a class="button" href="javascript://" rel="nofollow" onclick="new _uWnd('LF',' ',-250,-110,{autosize:0,closeonesc:1,resize:1},{url:'/index/40'});return false;"><span style="color:white">Войти</span></a> <a class="button" href="/register"><span style="color:white">Зарегистрироваться</span></a>  
</div>  
<?endif?>



Источник:unallocated.ru
02.01.2016 Просмотров: 693 Комментарий: (32)

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

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

Комментарий: 21
workman
workman 02.01.2016 23:201
0
А на какой сайт ссылается данный файл ???
Код
/avtorizachii_dli_ucoz.png
Ребята. Ну если копируете откуда, то хоть полностью ставьте. А если не понимаете что и куда то хоть спрашивайте у знающих
Zismo-vk
Zismo-vk 02.01.2016 23:352
0
от моего
Zismo-vk
Zismo-vk 02.01.2016 23:373
0
Просто забыл поставить!
Kosten
Kosten 03.01.2016 03:234
0
Также можно точно такой мини чат поставить, только там изображение пользователя будет уже с левой стороны.



Установка:

В низ сайта и припишем код уже стили которые в нем прикреплены в низ сайта и вверх в самый потолок.

Код
<style type="text/css">  
  .uPanel {  
  background:rgba(0,0,0,0.8);  
  color:#fff;  
  float:left;  
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);  
  -moz-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);  
  -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);  
  padding: 4px 5px 4px 5px;  
  border-radius:3px;  
  -moz-border-radius:3px;  
  -webkit-border-radius:3px;  
  position:fixed;  
  bottom:7px;  
  left:7px;  
  }  
  
  .uPanel a.url, .uPanel a.url:visited {  
  display:block;  
  float:left;  
  color:#fff;  
  font-weight:bold;  
  height:26px;  
  line-height:26px;  
  -moz-transition:all 0.4s ease;  
  -webkit-transition:all 0.4s ease;  
  -o-transition:all 0.4s ease;  
  transition:all 0.4s ease;  
  opacity:0.4;  
  padding:0px 7px 0px 7px;  
  position:relative;  
  }  
  .uPanel a.url img {  
  vertical-align:-8px;  
  }  
  .uPanel a.url:hover {  
  text-shadow:0px 0px 5px #fff;  
  color:#fff;  
  opacity:1.0;  
  }  
  
  .uPanel a.url.highlighted {  
  opacity:1.0;  
  }  
  
  .uPanel a.url span {  
  display:block;  
  position:absolute;  
  bottom:0px;  
  left:20px;  
  color:#fff;  
  background:red;  
  padding:0px 3px 0px 3px;  
  height:14px;  
  line-height:14px;  
  font-size:7pt;  
  font-weight:bold;  
  border-radius:2px;  
  -moz-border-radius:2px;  
  -webkit-border-radius:2px;  
  }  
  </style>  
  
  <input name="dfdsfds" type="hidden" id="d-opacity" value="0.7" />  
  <input name="dffsd" type="hidden" id="d-color" value="255,255,255" /  
>  
  <div id="dstyle"></div>  
  <div class="uPanel" id="uPanel" style="display:none">  
  <a href="#" title="Вошли как DIMON_-_BEST" class="url"><?if  
($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" style="width:24px; height:24px;" alt="" /><?else?><img src="http://zornet.ru/Rang_2/noavatar.png" style="width:24px; height:24px;" alt="" /><?endif?></a>  
  <a href="$PM_URL$" title="Личные сообщения" class="url"><img  
src="http://zornet.ru/Rang_2/pm.png" alt="" /></span></a>  
  
  <a href="$PERSONAL_PAGE_LINK$" onclick="dialogColor(); return  
false;" title="Персональная страница" class="url"><img src="http://zornet.ru/Rang_2/wind-color.png" alt="" /></a>  
  <a href="$LOGOUT_LINK$" title="Выход" onclick="showLogForm(); return  
false;" class="url"><img src="http://zornet.ru/Rang_2/exit.png" alt="" /></a>  
  </div>  
  <script type="text/javascript">  
  $(function(){  
  $("#uPanel").fadeIn('normal');  
  $("#uPanel a.url").tipsy({gravity: 'sw', html: true});  
  });  
  </script>




Так вы будите видеть, как гость, а просто там вместо изображение будет noavatar, но здесь он темный, можете поставить по ярче, что визуально наблюдалось хорошо.
2004484
2004484 03.01.2016 07:445
0
Так это дубль. Хотя нет тут аватарка справа) Хороший профиль у меня давно стоит на сайте чуток переделанный
Zismo-vk
Zismo-vk 03.01.2016 16:476
0
Покажи мне почти такой же!
Kosten
Kosten 03.01.2016 17:147
0
Думаю, нужно спросить Dimstrik, так как на кино сайте он стоял, может сохранил.
Kosten
Kosten 03.01.2016 17:168
0
Нашел тему где делал эти тени и менял вид для гостя, возможно пригодится, смотреть здесь
AnTron
AnTron 03.01.2016 17:289
+1
Не знаю, кто где брал, здесь этот скрипт нашел, но немного еще сам тени добавлял, но хотя так нормально - клик
2004484
2004484 03.01.2016 18:3910
+1
У меня он вот такой в верхней части сайта

Kosten
Kosten 04.01.2016 16:2020
0
А всю ширину браузера сайтом можно посмотреть.
2004484
2004484 03.01.2016 18:4211
0
В верхнее меню его засунула ) И почти все стили убрала. При клике на фотку сделала чтоб заходило в профиль. А то тут криво сейчас не заходит
Kosten
Kosten 03.01.2016 19:0815
0
Думаю лучше оставить как есть.
Zismo-vk
Zismo-vk 03.01.2016 18:4412
+1
Немного переделаю потом добавлю еще одну функцию
2004484
2004484 03.01.2016 19:0313
0
Вообще самый лучший профиль стоит на сайте zornet
Zismo-vk
Zismo-vk 03.01.2016 19:0714
0
Согласен
Kosten
Kosten 03.01.2016 19:0916
0
Это точно, теперь на исходном сайте, даже его нет.)
2004484
2004484 03.01.2016 21:0817
0
Еще для полного счастья можно сделать чтоб на конвертике появлялась циферка с кол-вом сообщений
AnTron
AnTron 03.01.2016 21:1718
0
Это было бу здорово.
Zismo-vk
Zismo-vk 03.01.2016 22:0819
0
Сделаем только чуть позже
Kosten
Kosten 04.01.2016 16:2221
0
Это вот реально нужный код, спасибо.
avatar