Префиксы тем с иконками

pikamonov · 24 Мар 2024

Привет!
Сегодня будет мануал, на такие красивые префиксы тем

Сразу тебе скажу, такой ужасный шрифт, будет только на стиле Аризоны (новый), а на стиле Матрешки , все будет хорошо,

Первым делом, идем в Админ-Панель и ищем extra.less

теперь же, читаем ВНИМАТЕЛЬНО!!!!

CSS:

@svgPrefixBorderRadius: @xf-borderRadiusSmall; // Радиус префиксов
@svgPrefixFontFamily: bold; // Семейство шрифта префикса
@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}";
}
}
}
}
}

CSS:

@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}";
}
}
}
}
}

Вставили код?
Теперь же, давайте сделаем само сердце префикса,
Вставляем этот интересный код:

CSS:

.svgLabelPrefix(odobpon, rgb(4,255,0), f00c);

Давайте теперь разберемся , что где зачем,

.svgLabelPrefix(odobpon, rgb(4,255,0), f00c); - odobpon название префикса,
rgb (4,255,0) - цвет RGB палитры,
f00c - иконка префикса, искать их на FontAwesome,

ну, в самом конце, для ленивых будут уже готовый код, с Информацией, Правилами, Одобрено, Закрыто, Рассмотрено, Отказано, Важно
давайте теперь, сделаем уже сами префиксы, и настроим их?

Создаем префикс, и вставляем это: svgPrefix odobpon
в нашем случае, odobpon - название префикса, который мы сделали в extra.less,

ну и сохраняем, и получаем чудесный результат,
а теперь для ленивых, как и обещал

CSS:

.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);

Если тебе понравилась моя темка, нажми на лайкосик

pawnBro · 30 Май 2024

Что именно не так?

smith · 10 Июн 2024

Не работает

Tokio Fendi · 9 Авг 2024

Не работает

Tokio Fendi · 9 Авг 2024

Кто может мне установить, мой вк https://vk.com/tokio_fendi пожалуйста помогите
Если что у меня стиль Arizona New

taden · 10 Авг 2024

Tokio Fendi написал(а):
Кто может мне установить, мой вк https://vk.com/tokio_fendi пожалуйста помогите
Если что у меня стиль Arizona New

Ты мб код не тот вставил, я написал тебе

taden · 10 Авг 2024

pikamonov написал(а):
Привет!
Сегодня будет мануал, на такие красивые префиксы тем

Посмотреть вложение 1715

Сразу тебе скажу, такой ужасный шрифт, будет только на стиле Аризоны (новый), а на стиле Матрешки , все будет хорошо,

Первым делом, идем в Админ-Панель и ищем extra.less

Посмотреть вложение 1716

теперь же, читаем ВНИМАТЕЛЬНО!!!!

CSS:

@svgPrefixBorderRadius: @xf-borderRadiusSmall; // Радиус префиксов @svgPrefixFontFamily: bold; // Семейство шрифта префикса @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}"; } } } } }

CSS:

@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}"; } } } } }

Вставили код?
Теперь же, давайте сделаем само сердце префикса,
Вставляем этот интересный код:

CSS:

.svgLabelPrefix(odobpon, rgb(4,255,0), f00c);

Давайте теперь разберемся , что где зачем,

.svgLabelPrefix(odobpon, rgb(4,255,0), f00c); - odobpon название префикса,
rgb (4,255,0) - цвет RGB палитры,
f00c - иконка префикса, искать их на FontAwesome,

ну, в самом конце, для ленивых будут уже готовый код, с Информацией, Правилами, Одобрено, Закрыто, Рассмотрено, Отказано, Важно
давайте теперь, сделаем уже сами префиксы, и настроим их?

Посмотреть вложение 1717

Создаем префикс, и вставляем это: svgPrefix odobpon
в нашем случае, odobpon - название префикса, который мы сделали в extra.less,

ну и сохраняем, и получаем чудесный результат,
а теперь для ленивых, как и обещал

CSS:

.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);

Если тебе понравилась моя темка, нажми на лайкосик

Дружище, ты коды сломанные скинул и поэтому у людей не работает

taden · 10 Авг 2024

Код:

@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}";
                }
            }
        }     
    } 
}

taden · 10 Авг 2024

Рабочий

taden · 10 Авг 2024

А еще лучше уметь писать в интернете и находить что вам нужно

taden · 10 Авг 2024

Например после того как вы вставили рабочий код, ниже сделайте так:

кто не понял, вставить ниже

Код:

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

и уже после сохраняем, переходим в ФОРУМЫ >> Префиксы тем >> нужный префикс >> Стиль отображения другой >> svgPrefix important

taden · 10 Авг 2024

И ничего больше не нужно, а делал я сейчас на стиле Arizona new

pikamonov · 10 Авг 2024

@taden, 1) - код рабочий. Я взял со своего форума, и почему то у меня все работает, 2) - не надо под моими темами, оставлять гору оффтопа, и кучу сообщений, все это можно засунуть в один большой текст.

taden · 10 Авг 2024

pikamonov написал(а):
@taden, 1) - код рабочий. Я взял со своего форума, и почему то у меня все работает, 2) - не надо под моими темами, оставлять гору оффтопа, и кучу сообщений, все это можно засунуть в один большой текст.

1. Код твой нашел в интернете 2. Ты не видишь разницы в твоем и моем коде? у тебя отступов нет... 3. Я дополняю сообщения и это не оффтоп т.к инфа полезная и я проще говоря упростил твой способ в 2 раза xD

pikamonov · 10 Авг 2024

taden написал(а):
1. Код твой нашел в интернете 2. Ты не видишь разницы в твоем и моем коде? у тебя отступов нет... 3. Я дополняю сообщения и это не оффтоп т.к инфа полезная и я проще говоря упростил твой способ в 2 раза xD

1) - опять же, почему то у меня код работал, хотя брал я его с одних ресурсов. Вот так совпадение, да? 2) - Трабл уже далеко не с моей стороны. ибо у меня он вставляется корректно, 3) - Инфа полезная, базару ноль, но ты накручиваешь себе сообщения, для получения нового статуса, а накрутка сообщений - запрещена на форуме ;_) Можно было прописать, одним сообщением. 4) - закроем тему, во избежание конфликта, и оффтопа.

𝙡𝙖𝙨𝙩 𝙚𝙢𝙥𝙚𝙧𝙤𝙧. · 10 Авг 2024

@taden, чтобы дополнить сообщение - достаточно нажать кнопку "Изменить" на своем первом сообщении. Не нужно каждые пять минут писать отдельное сообщение.

taden · 11 Авг 2024

𝙡𝙖𝙨𝙩 𝙚𝙢𝙥𝙚𝙧𝙤𝙧. написал(а):
@taden, чтобы дополнить сообщение - достаточно нажать кнопку "Изменить" на своем первом сообщении. Не нужно каждые пять минут писать отдельное сообщение.

Мне удобнее так, вдруг было много людей в теме и мое "Изменение" никто не заметит)

taden · 11 Авг 2024

pikamonov написал(а):
1) - опять же, почему то у меня код работал, хотя брал я его с одних ресурсов. Вот так совпадение, да? 2) - Трабл уже далеко не с моей стороны. ибо у меня он вставляется корректно, 3) - Инфа полезная, базару ноль, но ты накручиваешь себе сообщения, для получения нового статуса, а накрутка сообщений - запрещена на форуме ;_) Можно было прописать, одним сообщением. 4) - закроем тему, во избежание конфликта, и оффтопа.

Ну работал или нет, не мне решать, а вот у двух людей он не работал которые сверху написали

Tokio Fendi · 11 Авг 2024

taden написал(а):
Ну работал или нет, не мне решать, а вот у двух людей он не работал которые сверху написали

Спасибо тебе огромное, ты лучший

Ёж Молоканов · 1 Сен 2024

taden написал(а):
Например после того как вы вставили рабочий код, ниже сделайте так:Посмотреть вложение 2380

кто не понял, вставить ниже

Код:

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

и уже после сохраняем, переходим в ФОРУМЫ >> Префиксы тем >> нужный префикс >> Стиль отображения другой >> svgPrefix important

Спс

Поиск

Welcome!

Префиксы тем с иконками

pikamonov

𝚖𝚘𝚛𝚜 𝚌𝚎𝚛𝚝𝚊, 𝚑𝚘𝚛𝚊 𝚒𝚗𝚌𝚎𝚛𝚝𝚊.

pawnBro

smith

Tokio Fendi

Tokio Fendi

taden

taden

taden

taden

taden

taden

taden

pikamonov

𝚖𝚘𝚛𝚜 𝚌𝚎𝚛𝚝𝚊, 𝚑𝚘𝚛𝚊 𝚒𝚗𝚌𝚎𝚛𝚝𝚊.

taden

pikamonov

𝚖𝚘𝚛𝚜 𝚌𝚎𝚛𝚝𝚊, 𝚑𝚘𝚛𝚊 𝚒𝚗𝚌𝚎𝚛𝚝𝚊.

𝙡𝙖𝙨𝙩 𝙚𝙢𝙥𝙚𝙧𝙤𝙧.

𝚖𝚎𝚖𝚎𝚗𝚝𝚘 𝚖𝚘𝚛𝚒.

taden

taden

Tokio Fendi

Ёж Молоканов