Инструкция Префиксы тем с иконками в Xenforo

Добавляем в extra.less, лучше модификацией, объяснять не буду здесь и так все умные

@svgPrefixBorderRadius: @xf-borderRadiusSmall; // Радиус префиксов
@svgPrefixFontFamily: inherit;                 // Семейство шрифта префикса
@svgPrefixColorGradient: rgba(0,0,0,.4);       // Цвет градиента прификса
@svgPrefixTextShadow: rgba(0,0,0,.5);          // Цвет тени префикса

.svgLabelPrefix(@prefix-name, @prefix-color, @prefix-icon: "none") {
    .svgPrefix, .label.svgPrefix {
        font-family: @svgPrefixFontFamily;
        font-size: 70%;
        font-weight: 500;
        display: inline-flex;
        text-align: center;
        align-items: center;
        text-transform: uppercase;
        line-height: ((@xf-lineHeightDefault) * .9);
        padding: .25em .5em;
        border: none;
        border-radius: @svgPrefixBorderRadius;
        position: relative;
        white-space: nowrap;
        .fsp & {
            margin-right: 5px;
        }
        .menuPrefix& {
            display: inline-block;
            font-size: 1.3em;
            width: 100%;
            padding: .333em;
            a& {
                text-decoration: none;
            }
        }
        .p-title-value & {
            .p-title & {
                font-size: 70%;
            }
        }
        &:before {
            position: absolute;
            top: .25em;
            bottom: 0;
            left: .333em;
        }     
        &.@{prefix-name} {
            background: linear-gradient(135deg, @svgPrefixColorGradient 0%, @svgPrefixColorGradient 40%, transparent 40%, transparent 100%), @prefix-color;
            color: rgb(250,250,250);
            text-shadow: 1px 0 1px @svgPrefixTextShadow, 0 1px 1px @svgPrefixTextShadow, -1px 0 1px @svgPrefixTextShadow, 0 -1px 1px @svgPrefixTextShadow;
            &when (iskeyword(@prefix-icon)) {
                padding: .25em .5em .25em 1.75em;
                &:before {
                    .m-faBase();
                    content: "\@{prefix-icon}";
                }
            }
        }     
    } 
}

Потом, делаем префиксы по примеры

.svgLabelPrefix(important, rgb(198,40,40), f06a);

Где important - название префикса, rgb(198,40,40) - основной цвет префикса, f06a - иконка префикса (можно не указывать)
В настройках префикса указываем свой класс svgPrefix important

 

скажите пожалуйста номера для того чтобы создать префикс Одобрено, Отказано, Информация, Открыто, Закрыто
а то ищу ищу найти не могу

 

скажите пожалуйста номера для того чтобы создать префикс Одобрено, Отказано, Информация, Открыто, Закрыто
а то ищу ищу найти не могу

Абсолютно не понял о каких номерах идёт речь

 

я про этот номер f06a

 

аа, ну так тебе на https://fontawesome.com/search?m=free
там ищи нужную тебе иконку.
Нажимаешь на неё и там код

 

спасибо большое

 

помогите
[automerge]1667032171[/automerge]
вопрос про svgPrefix important: где important свое название?

 

svgPrefix important: где important свое название

Сначала сделайте по инструкции а потом сами меняйте что хотите.

 

здравствуйте! Иконки не отображаются что делать?

 

@traders87, Приветствую! А что именно делали? Я использую такие иконки у себя на проекте, и всё отображается. Возможно не правильно настроили

 

@traders87, Приветствую! А что именно делали? Я использую такие иконки у себя на проекте, и всё отображается. Возможно не правильно настроили

Разобрался! В настройках стиля формат иконок сменил и все заработало!

 

@svgPrefixBorderRadius: @xf-borderRadiusSmall; // Радиус префиксов
@svgPrefixFontFamily: inherit;                 // Семейство шрифта префикса
@svgPrefixColorGradient: rgba(0,0,0,.4);       // Цвет градиента прификса
@svgPrefixTextShadow: rgba(0,0,0,.5);          // Цвет тени префикса

.svgLabelPrefix(important, rgb(198,40,40), f06a) {
    .svgPrefix, .label.svgPrefix {
        font-family: @svgPrefixFontFamily;
        font-size: 70%;
        font-weight: 500;
        display: inline-flex;
        text-align: center;
        align-items: center;
        text-transform: uppercase;
        line-height: ((@xf-lineHeightDefault) * .9);
        padding: .25em .5em;
        border: none;
        border-radius: @svgPrefixBorderRadius;
        position: relative;
        white-space: nowrap;
        .fsp & {
            margin-right: 5px;
        }
        .menuPrefix& {
            display: inline-block;
            font-size: 1.3em;
            width: 100%;
            padding: .333em;
            a& {
                text-decoration: none;
            }
        }
        .p-title-value & {
            .p-title & {
                font-size: 70%;
            }
        }
        &:before {
            position: absolute;
            top: .25em;
            bottom: 0;
            left: .333em;
        }     
        &:important {
            background: linear-gradient(135deg, @svgPrefixColorGradient 0%, @svgPrefixColorGradient 40%, transparent 40%, transparent 100%), @prefix-color;
            color: rgb(250,250,250);
            text-shadow: 1px 0 1px @svgPrefixTextShadow, 0 1px 1px @svgPrefixTextShadow, -1px 0 1px @svgPrefixTextShadow, 0 -1px 1px @svgPrefixTextShadow;
            &when (iskeyword(@prefix-icon)) {
                padding: .25em .5em .25em 1.75em;
                &:before {
                    .m-faBase();
                    content: @f06a;
                }
            }
        }     
    }
}

Но он не работает хелпани пж если не сложно с Xenforo не так давно работаю, а
Другой, используя свое имя CSS-класса svgPrefix important

 

хм

 

@svgPrefixBorderRadius: @xf-borderRadiusSmall; // Радиус префиксов
@svgPrefixFontFamily: inherit;                 // Семейство шрифта префикса
@svgPrefixColorGradient: rgba(0,0,0,.4);       // Цвет градиента прификса
@svgPrefixTextShadow: rgba(0,0,0,.5);          // Цвет тени префикса

.svgLabelPrefix(important, rgb(198,40,40), f06a) {
    .svgPrefix, .label.svgPrefix {
        font-family: @svgPrefixFontFamily;
        font-size: 70%;
        font-weight: 500;
        display: inline-flex;
        text-align: center;
        align-items: center;
        text-transform: uppercase;
        line-height: ((@xf-lineHeightDefault) * .9);
        padding: .25em .5em;
        border: none;
        border-radius: @svgPrefixBorderRadius;
        position: relative;
        white-space: nowrap;
        .fsp & {
            margin-right: 5px;
        }
        .menuPrefix& {
            display: inline-block;
            font-size: 1.3em;
            width: 100%;
            padding: .333em;
            a& {
                text-decoration: none;
            }
        }
        .p-title-value & {
            .p-title & {
                font-size: 70%;
            }
        }
        &:before {
            position: absolute;
            top: .25em;
            bottom: 0;
            left: .333em;
        }    
        &:important {
            background: linear-gradient(135deg, @svgPrefixColorGradient 0%, @svgPrefixColorGradient 40%, transparent 40%, transparent 100%), @prefix-color;
            color: rgb(250,250,250);
            text-shadow: 1px 0 1px @svgPrefixTextShadow, 0 1px 1px @svgPrefixTextShadow, -1px 0 1px @svgPrefixTextShadow, 0 -1px 1px @svgPrefixTextShadow;
            &when (iskeyword(@prefix-icon)) {
                padding: .25em .5em .25em 1.75em;
                &:before {
                    .m-faBase();
                    content: @f06a;
                }
            }
        }    
    }
}

Но он не работает хелпани пж если не сложно с Xenforo не так давно работаю, а
Другой, используя свое имя CSS-класса svgPrefix important

МОжно подробнее описать, что именно не работает?

 

Сначала сделайте по инструкции а потом сами меняйте что хотите.

как зделать префикс с эфектами в нем

 

помогите, сделал точно так же как и в тексте написано(вставил код и указал класс) а у меня иконка не отображается(

 

@Дима Неврединов,
фактически можеш мне в дс отписать я тебе помогу

дс HOKAGY#3789

 

Как менять цвета

 

@+375 33 394-09-92, rgb найди нужный

 

Не можно не понял куда вставлять данный код)

.svgLabelPrefix(important, rgb(198,40,40), f06a);

 

Сделал все по инструкции, так и не понял в какой промежуток надо вставлять данный код или куда

.svgLabelPrefix(important, rgb(198,40,40), f06a);

 

Я все сделал все работает но не отображается иконка что делать

 

хелпаните как настроить, куда ввести в этом коде имя префикса и цвет как поменять

 

Для самых ленивых даю код готовых префиксов:

.svgLabelPrefix(odobpon, rgb(4,255,0), f00c);
.svgLabelPrefix(raspon, rgb(4,255,0), f00c);
.svgLabelPrefix(rassmotpon, rgb(255,200,0), f251);
.svgLabelPrefix(vajpon, rgb(198,40,40), f06a);
.svgLabelPrefix(zakpon, rgb(198,40,40), f023);
.svgLabelPrefix(otkazpon, rgb(198,40,40), f057);
.svgLabelPrefix(otkpon, rgb(4,255,0), f3c1);
.svgLabelPrefix(pravpon, rgb(198,40,40), f06a);
.svgLabelPrefix(infopon, rgb(0,255,255), f129);

 

@DetectorDevil, это можно вставить после написанного кода выше