Группы пользователей как на форуме "Матрёшка RP"

Совместимость с XenForo

Всем привет! В этой теме расскажу как сделать баннеры пользователей как на форуме мобильного CRMP проекта - Матрёшка РП.

Баннеры были отрисованы через фотошоп и вставлены через CSS вместо дефолтного баннера.

Инструкция по установке:

1. Установите архив, который закреплён в данном ресурсе.
2. Распакуйте архив и загрузите на хостинг, в корневую директорию Вашего форума.
3. Зайдите в панель управления, Внешний вид, Шаблоны. Найдите шаблон extra.less.
4. Вставьте в данный шаблон этот код:

Less:

.userBanner {
    font-size: 75%;
    font-size: 11px;
    font-weight: 400;
    font-style: normal;
    padding: 1px 10px;
    padding: 1px 3px;
    border: 1px solid transparent;
    border-radius: 6px;
    text-align: center;
    display: inline-block;
  
    &.imgUser {
        background: url(styles/icon/img_user.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgAdmin {
        background: url(styles/icon/img_admin.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgDev {
        background: url(styles/icon/img_dev.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgGa {
        background: url(styles/icon/img_ga.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgGlsled {
        background: url(styles/icon/img_glsled.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgLeader {
        background: url(styles/icon/img_leader.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgLeaderfam {
        background: url(styles/icon/img_leaderfam.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgLegend {
        background: url(styles/icon/img_legend.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgMestn {
        background: url(styles/icon/img_mestn.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgModer {
        background: url(styles/icon/img_moder.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgSpecadmin {
        background: url(styles/icon/img_specadmin.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgSupport {
        background: url(styles/icon/img_support.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgZamga {
        background: url(styles/icon/img_zamga.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
    &.imgZamglsled {
        background: url(styles/icon/img_zamglsled.png) no-repeat;
        height: 45px;
        width: 130px;
        text-indent: -10000em;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }
}

5. Сохраните шаблон!
Вы успешно установили баннеры!

Результат:

Если в этот архив я не догрузил какие-то группы пользователей, то Вы напишите в Обсуждениях, обязательно обновлю ресурс.

Реакции: MuUdm, Prosto_Chlen, Matteo_Winston и 5 других

Группы пользователей как на форуме "Матрёшка RP" 0.1

Поделиться ресурсом

Мы ценим вашу конфиденциальность