Новое на форуме
  • Страница 1 из 1
  • 1
Форум геймеров » Вебмастеру. Раздел сайтостроения » Скрипты для uCoz » Горизонтальный топ пользователей по репутации для uCoz
Горизонтальный топ пользователей по репутации для uCoz
Offline Harvus
Руководящий проектом
† Armenia
194

506 сообщений



Опубликовано: Понедельник, 20.08.2018 (15:03) 1


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

Топ пользователей по репутации как на 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_#$ в нужное вам место.
Готово.
Прикрепления: 7002367.jpg(55.4 Kb)
Форум геймеров » Вебмастеру. Раздел сайтостроения » Скрипты для uCoz » Горизонтальный топ пользователей по репутации для uCoz
  • Страница 1 из 1
  • 1
Поиск: