Как сделать красивые префиксы, (хз куда это надо отправлять, переместите плиз не удаляйте)

[Gigant]

Кто искал как сделать такие в extra.less в конце это надо вставить, а потов в поле css добавить то что после точки, как баннеры!

.yellow {
    margin: 0px 3px;
    white-space: nowrap;
    border-radius: 6px;
    font-size: 74%;
    color: #FFFF00;
    padding: 2px 8px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #000;
    background-color: #3f3f3f;
    border: 1px solid;
}
.green {
    margin: 0px 3px;
    white-space: nowrap;
    border-radius: 6px;
    font-size: 74%;
    color: #7FFF00;
    padding: 2px 8px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #000;
    background-color: #3f3f3f;
    border: 1px solid;
}
.blue {
    margin: 0px 3px;
    white-space: nowrap;
    border-radius: 6px;
    font-size: 74%;
    color: #005eff;
    padding: 2px 8px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #000;
    background-color: #3f3f3f;
    border: 1px solid;
}
.red {
    margin: 0px 3px;
    white-space: nowrap;
    border-radius: 6px;
    font-size: 74%;
    color: #FF0000;
    padding: 2px 8px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #000;
    background-color: #3f3f3f;
    border: 1px solid;
}
.purple {
    margin: 0px 3px;
    white-space: nowrap;
    border-radius: 6px;
    font-size: 74%;
    color:#ee00ff;
    padding: 2px 8px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #000;
    background-color: #3f3f3f;
    border: 1px solid;
}
.orange {
    margin: 0px 3px;
    white-space: nowrap;
    border-radius: 6px;
    font-size: 74%;
    color:#ffae00;
    padding: 2px 8px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #000;
    background-color: #3f3f3f;
    border: 1px solid;
}
.pink {
    margin: 0px 3px;
    white-space: nowrap;
    border-radius: 6px;
    font-size: 74%;
    color:#ff007b;
    padding: 2px 8px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #000;
    background-color: #3f3f3f;
    border: 1px solid;
}
.bluesvet {
    margin: 0px 3px;
    white-space: nowrap;
    border-radius: 6px;
    font-size: 74%;
    color:#00b3ff;
    padding: 2px 8px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #000;
    background-color: #3f3f3f;
    border: 1px solid;
}
.black {
    margin: 0px 3px;
    white-space: nowrap;
    border-radius: 6px;
    font-size: 74%;
    color:#000000;
    padding: 2px 8px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #000;
    background-color: #3f3f3f;
    border: 1px solid;
}

гайд ниже:

Спойлер

Для тупых:
ставим выше код в extra.less в конец!
Посмотреть вложение 153446
в extra.less копируем это: Посмотреть вложение 153447 или какой цвет вам нужен.
дальше заходим в Посмотреть вложение 153448 Посмотреть вложение 153449
после чего если уже создана или создаете в поле Посмотреть вложение 153450 пишем что будет на префиксе.
дальше Матаем к и вставляем ваш цвет Посмотреть вложение 153451


РЕЗУЛЬТАТ: Посмотреть вложение 153452

мой вк если есть какие то вопросы:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Gigant]

.svgPrefix.infopon, .label.svgPrefix.infopon {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 40%, transparent 100%), #0ff;
    color: #fafafa;
    text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.5), -1px 0 1px rgba(0, 0, 0, 0.5), 0 -1px 1px rgba(0, 0, 0, 0.5);
    padding: .25em .5em .25em 1.75em;
}
.svgPrefix.raspon, .label.svgPrefix.raspon {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 40%, transparent 100%), #04ff00;
    color: #fafafa;
    text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.5), -1px 0 1px rgba(0, 0, 0, 0.5), 0 -1px 1px rgba(0, 0, 0, 0.5);
    padding: .25em .5em .25em 1.75em;
}
.svgPrefix.pravpon, .label.svgPrefix.pravpon {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 40%, transparent 100%), #c62828;
    color: #fafafa;
    text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.5), -1px 0 1px rgba(0, 0, 0, 0.5), 0 -1px 1px rgba(0, 0, 0, 0.5);
    padding: .25em .5em .25em 1.75em;
}
.svgPrefix.vajpon, .label.svgPrefix.vajpon {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 40%, transparent 100%), #c62828;
    color: #fafafa;
    text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.5), -1px 0 1px rgba(0, 0, 0, 0.5), 0 -1px 1px rgba(0, 0, 0, 0.5);
    padding: .25em .5em .25em 1.75em;
}
.svgPrefix.otkpon, .label.svgPrefix.otkpon {
[LIST=1]
[*]    background: linear-gradient(

135deg
, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 40%, transparent 100%), #04ff00;
[*]    color: #fafafa;
[*]    text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.5), -1px 0 1px rgba(0, 0, 0, 0.5), 0 -1px 1px rgba(0, 0, 0, 0.5);
[*]    padding: .25em .5em .25em 1.75em;
[/LIST]
}

все так же делаеться!

 

[Gigant]

пример

 

[Takamura_Mamoru]

Какой за что отвечает? С этими понами запутался