Баннеры хакерских форумов

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

Решил сделать любимые баннеры какерских форумов без картинок, с помощью стилей, LESS.

Заливаем шрифт из архива.
В extra.less добавляем:

Less:

@BannerFontPath: "/styles/fonts/Visitor_Rus";
@BannerBeforeContent: "\f2d1\00a0\f2d1\00a0\f2d1\00a0\f2d1\00a0\f2d1";
.userBannerGroup (@group, @color) {
    .userBanner.userBanner--@{group} {
        color: @color;
    }
}

@font-face {
    font-family: 'Visitor_Rus';
    src: url('@{BannerFontPath}/Visitor_Rus.eot');
    src: url('@{BannerFontPath}/Visitor_Rus.eot?#iefix') format('embedded-opentype'),
         url('@{BannerFontPath}/Visitor_Rus.woff2') format('woff2'),
         url('@{BannerFontPath}/Visitor_Rus.woff') format('woff'),
         url('@{BannerFontPath}/Visitor_Rus.ttf') format('truetype'),
         url('@{BannerFontPath}/Visitor_Rus.svg#Visitor_Rus') format('svg');
    font-weight: normal;
    font-style: normal;
}

.userBanner {
    margin-top: -5px!important;
    strong {
        font-family: 'Visitor_Rus';
        font-weight: 600;
    }
    .userBanner-before {
        display: block;
        &:before {
            font-family: 'FontAwesome';
            content: @BannerBeforeContent;
            font-size: 1.5em;
            font-style: italic;
            line-height: 50%;        
        }
    }
}

Код:

@BannerFontPath: "/styles/fonts/Visitor_Rus";
@BannerBeforeContent: "\f2d1\00a0\f2d1\00a0\f2d1\00a0\f2d1\00a0\f2d1";
.userBannerGroup (@group, @color) {
    .userBanner.userBanner--@{group} {
        color: @color;
    }
}

@font-face {
    font-family: 'Visitor_Rus';
    src: url('@{BannerFontPath}/Visitor_Rus.woff2') format('woff2'),
         url('@{BannerFontPath}/Visitor_Rus.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.userBanner {
    margin-top: -5px!important;
    strong {
        font-family: 'Visitor_Rus';
        font-weight: 500;
    }
    .userBanner-before {
        display: block;
        &:before {
            .m-faBase();
            content: @BannerBeforeContent;
            font-size: 1.5em;
            font-style: italic;
            font-weight: bold;
            line-height: 50%;         
        }
    } 
}

Указываем в настройках группы свой класс css для стиля баннера

По аналогии, для администратора userBanner--admin, для модератора userBanner--moder, для зарегистрированных, userBanner--registered и так далее.
Потом в extra.less, после добавленного кода, указываем цвета баннеров по группам:

Less:

.userBannerGroup (admin, red);
.userBannerGroup (registered, #53b0d6);
.userBannerGroup (moder, green);

Как видно, берется только часть класса баннера, которая изменяется и нужный цвет.

Реакции: my45ru, Smok, Tommi365 и 15 других

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

Мы используем основные cookies для обеспечения работы этого сайта, а также дополнительные cookies для обеспечения максимального удобства пользователя.

Баннеры хакерских форумов 01

Другие ресурсы пользователя Skaiman

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

Последние обновления

Добавление кода для 2.1+ версии движка

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