Горизонтальный топ пользователей по репутации для uCoz

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

Топ пользователей по репутации как на RootGames.Ru на данный момент, пример можете увидеть в персональной странице пользователя в самом низу на нашем сайте.
Подойдет как для светлых, так и для тёмных дизайнов, если слегка изменить стили.
При наведении на аватарку пользователя она прокручивается.
Красиво будет смотреться в персональной странице пользователя или на форуме.

Сам по себе информер расположен горизонтально и по размерам он достаточно большой, но это можно легко исправить с помощью CSS.

Установка
Создаём информер - [ Пользователи · Материалы · Репутация · Материалы: 8 · Колонки: 8 ]
Где Материалы - кол-во пользователей которые будут высвечиваться в топе.
Колонки выставляем столько же, сколько и материалов для корректного отображения.

В сам шаблон информера вставляем следующий код:

Код
<div class="rg-top-user"> <a href="$PROFILE_URL$" title="Профиль пользователя"> <div class="rg-top-user-ava"><img src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>/designs_4/no-avatar-2017.png<?endif?>"><span title="репутация пользователя">$REPUTATION$</span></div> </a> <a href="$PROFILE_URL$" class="rg-top-user-name"><b>$USERNAME$</b></a> <span>$GROUP_NAME$</span> </div>


Добавляем стили в таблицу стилей CSS:

Код
.rg-top-user { margin: 5px 0; text-align: center; } .rg-top-user span { font-size: 12px; display: block; margin: 5px 0 0 0; } .rg-top-user-ava { border-radius: 50%; width: 80px; height: 80px; position: relative; margin: 0 auto; margin-bottom: 15px; } .rg-top-user-ava span { position: absolute; background: #fffdfd; border-radius: 100%; border: 1px solid #e4e4e4; padding: 10px; color: #222122; width: 16px; height: 16px; font-size: 14px; top: -5px;  right: -10px; font-weight: bold; } .rg-top-user-ava img { border: 1px solid #e4e4e4; padding: 2px; opacity: .7; transition: .8s; border-radius: 50%; width: 80px; height: 80px; } .rg-top-user-ava img:hover { opacity: 1; -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); border-color: #f96c04; } .rg-top-user-name { background: #f1f1f1; padding: 3px 7px; border-radius: 3px; transition: .2s; margin: 0 0 0 5px; text-decoration: none !important; } .rg-top-user-name:hover { background: #f96c04; color: #fff !important; }


И вставляем код информера $MYINF_#$ в нужное вам место.
Готово.

  • Дата: 13.06.2018, 13:05
  • Просмотры: 52
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

Правила публикации комментариев:
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных сайтов uCoz, например: blog.uсoz.ru)
4. Запрещено флудить и спамить, предлогать услуги (например: рипы, адаптации, помогу с установкой и т.д. )

Комментарии