Новое на форуме
КС 1.6 от Сантехника
Russian Theft Auto Ibutsk City Stories BETA3
Minecraft Heavy Machinery [1.12.2] [1.8.9] [1.8]

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

    Offline Harvus
    Руководящий проектом
    554 сообщений
    Трофеев: 1
    Симпатий: 5
    Опубликовано: 20 августа 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


    Համեստ աղջիկը ավելի թանկ է