ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Стилизация ТОПа пользователей для uCoz

Стилизация ТОПа пользователей для uCoz

Красиво созданный по оформлению топ для пользователя, где будет выводить самый активных по сайту, или по лидирует по комментариям на сайте. На многих интернет ресурсах, особенно с большой активностью, актуально, по сей день делать информационный топ пользователей.
Неважно в какой категории: "Топ по комментатор", "Топ по файлам", "Топ по новостям" и т.п.

Я предлагаю украсить ваш сайт вот таким видом топа.
Опишу его фишки:

1. Если пользователь, который просматривает сайт, есть в этом топе, то его позиция будет выделяться зелёным цветом.
2. Под каждой позицией отображается прогресс бар.
3. Компактный и стильный дизайн
4. шо ещё нужно?

Установка:
Первым делом, нам нужно создать информер, любой, который подойдёт для топа.
После в Шаблон информера добавить этот код:
P.s. данный пример сделать под информер "Кол-во комментариев"

Код

<div class="user-item">
<div class="user-item-grid">
<div class="user-ava">
<img src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>/img/noava.png<?endif?>"> 
</div>
<div class="user-name">$USERNAME$</div> 
<div class="user-counter">
<span>$COM_POSTS$</span> 
</div>
</div>
<div class="progress-bar">
<div class="progress-bar-bg"></div>
</div>
</div>

Далее этот код вставляем туда, где хотим видеть топ пользователей:
P.s. у меня информер имел переменную $MYINF_14$, у вас будет другая, так что замените
P.s.[2] для работы нужна библиотека Jquery 1.9.1 или выше, не забудьте.

Код

<div class="user-top">$MYINF_14$</div>
<script>
var topCounter = parseFloat($('.user-top .user-item').eq(0).find('.user-counter').text()),
thisUsername = '$USERNAME$';

$('.user-top .user-item').each(function(){
var thisCounter = parseFloat($(this).find('.user-counter').text()),
progressWidth = Math.round((100-(100-(thisCounter/(topCounter*0.01))))),
username = $(this).find('.user-name').text();
$(this).find('.progress-bar-bg').width(progressWidth+'%');
if(username==thisUsername) $(this).addClass('user-this');
});
</script>

Ну и стили (CSS):

Код

.user-top {display: block; width: 100%;}
.user-top .user-item {display: block; width: 100%; height: 53px; background: #fff; margin-bottom: 5px; overflow: hidden; border-radius: 5px;}
.user-top .user-item:last-child {margin-bottom: 0;}
.user-top .user-item-grid {display: grid; grid-template-columns: 50px 1fr auto; grid-gap: 5px;}
.user-top .user-ava {display: block; width: 50px; height: 50px; overflow: hidden;}
.user-top .user-ava img {width: 100%; height: 100%; object-fit: cover;}
.user-top .user-name {display: block; width: 100%; height: 50px; line-height: 50px; color: #666; font-size: 1.2em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.user-top .user-counter {display: block; width: 100%; height: 50px;}
.user-top .user-counter span {display: block; min-width: 26px; width: calc(100% - 20px); height: 30px; line-height: 30px; padding: 0 5px; text-align: center; background: #07f; color: #fff; font-size: 1em; border-radius: 50px; margin: 13px 5px 0;}
.user-top .progress-bar {display: block; width: 100%; height: 3px; position: relative;}
.user-top .progress-bar-bg {display: block; width: 60%; height: 3px; background: #07f; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}

.user-top .user-item.user-this .user-counter span,
.user-top .user-item.user-this .progress-bar-bg {background: #6ce890;}

Источник: pandora.clan.su

17 Сентября 2018 Просмотров: 1647 Комментариев: (0)

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

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

CbIPoK2513

Комментарии: 0