Информационный блок в 2 колонки Топ пользователя для uCoz сайтов, идеально по размером подходит для размещения в колонке.
Используется исключительно только для светлых дизайн типов, так как подложка выполнена залитой белой картинкой. В настройках размеров меньше существующего не сделать, и если в ваш блок не влазит, то не следует его туда насильно впихивать, по любому будет или искажать или вылазить, смотрите размеры ширины блока.
Если у пользователя нет аватара то по условиям выводится мордочка осла, с подписью нет аватара. Имя пользователя выводится в зеленом фоне, смотрите скрин, далее информационное окружение места и состояние пользователя который попал в топ четверки указанной по настройкам саго информационного блока.
Установка: В таблицу стилей CCS вставляем стильность блока:
Code
/*Топ аплоадеров*/
.place1 {background:url('http://ucozon.ru/_dr/61/50620048.png') no-repeat center left; display:inline-block; padding-left:16px; height:16px; overflow:hidden; width:1px;}
.place1 #text {display:inline-block; padding:0 3px;}
.place2 {background:url('http://ucozon.ru/_dr/61/28856078.png') no-repeat center left; display:inline-block; padding-left:16px; height:16px; overflow:hidden; width:1px;}
.place2 #text {display:inline-block; padding:0 3px;}
.place3 {background:url('http://ucozon.ru/_dr/61/74038486.png') no-repeat center left; display:inline-block; padding-left:16px; height:16px; overflow:hidden; width:1px;}
.place3 #text {display:inline-block; padding:0 3px;}
.place4 {background:url('http://ucozon.ru/_dr/61/67725781.png') no-repeat center left; display:inline-block; padding-left:16px; height:16px; overflow:hidden; width:1px;}
.place4 #text {display:inline-block; padding:0 3px;}
div.chat-addtime span {-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background:#83C315; display:inline-block; height:19px; line-height:18px; padding:0px 2px 0px 6px; color:#ffffff; font-size:12px; text-shadow:0px 1px 0px #6fa413;}
.topusers-elem-bg {display:inline-block; background:url('http://ucozon.ru/_dr/61/91009265.png') no-repeat 0 -25px; padding-left:4px; position:absolute; margin-left:61px;}
.topusers-elem-bg .topusers-elem-bg1 {display:inline-block; background:url('http://ucozon.ru/_dr/61/91009265.png') no-repeat 100% 0; padding:4px 4px 5px 0px; height:16px; line-height:16px;}
.torrents {background:url('http://ucozon.ru/_dr/61/24695530.png') no-repeat center left;}
.comments {background:url('http://ucozon.ru/_dr/61/04310784.png') no-repeat center left;}
.torrents , .comments {display:inline-block; padding-left:16px; height:16px; overflow:hidden; width:1px;}
.torrents #text, .comments #text {display:inline-block; padding:0 3px;}
img#topusers {margin-bottom: 1px;width:86px; height:86px; border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 50px rgba(0, 0, 0, 0.35);;-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 50px rgba(0, 0, 0, 0.35);;;box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 50px rgba(0, 0, 0, 0.35);;}
img#topusers:hover {box-shadow: 0 0 5px rgba(0, 0, 0, 0.38), inset 0 0 50px rgba(0, 0, 0, 0.82);-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.38), inset 0 0 50px rgba(0, 0, 0, 0.82);-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.38), inset 0 0 50px rgba(0, 0, 0, 0.82);}
/* ---------------- */
Создаем Информер с такими параметрами:
Название информера Топ пользователей - Раздел - Пользователи - Способ сортировки - Количество файлов - Количество материалов - 4 - Количество колонок - 2
После этого меняем дизайн заходим в управление дизайном созданного информера
И заменяем весь код там на этот:
Code
<center><div style="width:85px; margin-bottom:5px;">
<div style="position: absolute;width: 0px;height: 0px;">
<div class="topusers-elem-bg">
<div class="topusers-elem-bg1">
<div class="place$NUMBER$" title="$NUMBER$ место" style="width: 1px; ">
<span id="text">
<font color="#000">№$NUMBER$</font>
</span>
</div>
</div>
</div>
<div class="topusers-elem-bg" style="margin-top:23px;" title="Файлов: $LOAD_POSTS$">
<div class="topusers-elem-bg1">
<div class="torrents"><span id="text">$LOAD_POSTS$</span>
</div></div></div>
<div class="topusers-elem-bg" style="margin-top:46px;" title="Комментариев: $COM_POSTS$">
<div class="topusers-elem-bg1">
<div class="comments">
<span id="text">$COM_POSTS$</span>
</div></div></div>
</div>
<a href="/index/8-$USER_ID$" target="_blank" style="color:#ffffff;">
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$" title="Перейти в профиль" id="topusers"><?else?>
<img src="http://ucozon.ru/_dr/61/29278967.png" id="topusers">
<?endif?></a>
<div class="chat-addtime" style="float:none; width:87px; margin-top:1px;">
<span style="display:block; text-align:center;">
<a href="/index/8-$USER_ID$" target="_blank" style="color:#ffffff;">
<?if(len($USERNAME$)>11)?>
<?substr($USERNAME$,0,11)?>
<?else?>
$USERNAME$
<?endif?>
</a>
</span>
</div>
</center>
<script type="text/javascript"> $('.place$NUMBER$').hover( function () {$(this).stop().animate({"width" : $('.place1 #text').width() + 6} , 250);}, function () {$(this).stop().animate({"width" : 1} , 250);} ); $('.torrents').hover( function () {$(this).stop().animate({"width" : $('.torrents #text').width() + 6} , 250);}, function () {$(this).stop().animate({"width" : 1} , 250);} ); $('.comments').hover( function () {$(this).stop().animate({"width" : $('.comments #text').width() + 6} , 250);}, function () {$(this).stop().animate({"width" : 1} , 250);} ); </script>
Теперь создаём новый блок (например через конструктор)
И называем его например "Топ пользователей"
В html код блока вставляем:
$MYINF_1$ - меняем на свой (если у вас другой)