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

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 написал(а):
Ну работал или нет, не мне решать, а вот у двух людей он не работал которые сверху написали

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

Egorchik_Wicked · 1 Сен 2024

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

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

Код:

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

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

Спс

LIVE SAMP

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

Добро пожаловать!

pikamonov

Дальше — Больше

pawnBro

smith

Tokio Fendi

Tokio Fendi

taden

taden

taden

taden

taden

taden

taden

pikamonov

Дальше — Больше

taden

pikamonov

Дальше — Больше

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

Создатель WayDev

taden

taden

Tokio Fendi

Egorchik_Wicked