Баннеры групп

WinstonIncarnation · 15 Ноя 2020

Баннеры групп - 19 Пользовательских баннеров групп.
Использую лично сам)
Закидываем в extra.less:

CSS:

.banner1
{
    color: white;
    background: linear-gradient(90deg, #191970 25%, #000000 100%, #000000);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    font-style: normal;
    padding: 1px 10px 3px;
    border: none
}

.banner2
{
    color: white;
    background: linear-gradient(90deg, #C0C0C0 25%, #C0C0C0 100%, #000000);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner3
{
    color: white;
    background: linear-gradient(90deg, #778899 25%, #778899 100%, #000000);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner4
{
    color: white;
    background: linear-gradient(90deg, #cb2d3e, #ef473a);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner5
{
    color: white;
    background: linear-gradient(90deg, #008080, #001a1a);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner6
{
    color: white;
    background: linear-gradient(90deg, #008000, #001a00);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner7
{
    color: white;
    background: linear-gradient(90deg, #4b6cb7, #182848);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner8
{
    color: white;
    background: linear-gradient(90deg, #36f, #09bd72);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner9
{
    color: white;
    background: linear-gradient(90deg, #DAA520, #300052);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner10
{
    color: white;
    background: linear-gradient(90deg, #310062, #120a8f);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner11
{
    color: white;
    background: linear-gradient(90deg, #008080, #004d4d);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner12
{
    color: white;
    background: linear-gradient(90deg, #DC143C, #4f0716);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner13
{
    color: white;
    background: linear-gradient(80deg, #f02424, #008f8f);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner14
{
    color: white;
    background: linear-gradient(80deg, #a30b0b, #050404);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner15
{
    color: white;
    background: linear-gradient(80deg, #30d5c8, #00a550);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner16
{
    color: white;
    background: linear-gradient(80deg, #30d5c8, #135e58);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner17
{
    color: white;
    background: linear-gradient(80deg, #1e5945, #006666);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none
}

.banner18
{
    color: white;
    background: linear-gradient(80deg, #7442c8, #9400d3);
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none;
}

.banner19
{
    color: white;
    font-size: 87%;
    border-radius: 10px;
    text-align: center;
    padding: 1px 10px 3px;
    font-style: normal;
    border: none;
    background: #7cc3e0;
    border-color: #53b0d6;
}

West14 · 15 Ноя 2020

Офигеть полотно, конечно.
А теперь фокус.

Less:

.customBanner {
    color: white;
    text-align: center;
    font-size: 87%;
    font-style: normal;
    border: none;
    border-radius: 10px;
    padding: 1px 10px 3px;

    &.banner1 {
        background: linear-gradient(90deg, #191970 25%, #000000 100%, #000000);
    }

    &.banner2 {
        background: linear-gradient(90deg, #C0C0C0 25%, #C0C0C0 100%, #000000);
    }

    &.banner3 {
        background: linear-gradient(90deg, #778899 25%, #778899 100%, #000000);
    }

    &.banner4 {
        background: linear-gradient(90deg, #cb2d3e, #ef473a);
    }

    &.banner5 {
        background: linear-gradient(90deg, #008080, #001a1a);
    }

    &.banner6 {
        background: linear-gradient(90deg, #008000, #001a00);
    }

    &.banner7 {
        background: linear-gradient(90deg, #4b6cb7, #182848);
    }

    &.banner8 {
        background: linear-gradient(90deg, #36f, #09bd72);
    }

    &.banner9 {
        background: linear-gradient(90deg, #DAA520, #300052);
    }

    &.banner10 {
        background: linear-gradient(90deg, #310062, #120a8f);

    }

    &.banner11 {
        background: linear-gradient(90deg, #008080, #004d4d);

    }

    &.banner12 {
        background: linear-gradient(90deg, #DC143C, #4f0716);

    }

    &.banner13 {
        background: linear-gradient(80deg, #f02424, #008f8f);

    }

    &.banner14 {
        background: linear-gradient(80deg, #a30b0b, #050404);

    }

    &.banner15 {
        background: linear-gradient(80deg, #30d5c8, #00a550);

    }

    &.banner16 {
        background: linear-gradient(80deg, #30d5c8, #135e58);

    }

    &.banner17 {
        background: linear-gradient(80deg, #1e5945, #006666);

    }

    &.banner18 {
        background: linear-gradient(80deg, #7442c8, #9400d3);
    }

    &.banner19 {
        background: #7cc3e0;
        border-color: #53b0d6;
    }
}

В настройки группы customBanner bannerX

WinstonIncarnation · 16 Ноя 2020

West14 написал(а):

Офигеть полотно, конечно.
А теперь фокус.

Less:

.customBanner {
    color: white;
    text-align: center;
    font-size: 87%;
    font-style: normal;
    border: none;
    border-radius: 10px;
    padding: 1px 10px 3px;

    &.banner1 {
        background: linear-gradient(90deg, #191970 25%, #000000 100%, #000000);
    }

    &.banner2 {
        background: linear-gradient(90deg, #C0C0C0 25%, #C0C0C0 100%, #000000);
    }

    &.banner3 {
        background: linear-gradient(90deg, #778899 25%, #778899 100%, #000000);
    }

    &.banner4 {
        background: linear-gradient(90deg, #cb2d3e, #ef473a);
    }

    &.banner5 {
        background: linear-gradient(90deg, #008080, #001a1a);
    }

    &.banner6 {
        background: linear-gradient(90deg, #008000, #001a00);
    }

    &.banner7 {
        background: linear-gradient(90deg, #4b6cb7, #182848);
    }

    &.banner8 {
        background: linear-gradient(90deg, #36f, #09bd72);
    }

    &.banner9 {
        background: linear-gradient(90deg, #DAA520, #300052);
    }

    &.banner10 {
        background: linear-gradient(90deg, #310062, #120a8f);

    }

    &.banner11 {
        background: linear-gradient(90deg, #008080, #004d4d);

    }

    &.banner12 {
        background: linear-gradient(90deg, #DC143C, #4f0716);

    }

    &.banner13 {
        background: linear-gradient(80deg, #f02424, #008f8f);

    }

    &.banner14 {
        background: linear-gradient(80deg, #a30b0b, #050404);

    }

    &.banner15 {
        background: linear-gradient(80deg, #30d5c8, #00a550);

    }

    &.banner16 {
        background: linear-gradient(80deg, #30d5c8, #135e58);

    }

    &.banner17 {
        background: linear-gradient(80deg, #1e5945, #006666);

    }

    &.banner18 {
        background: linear-gradient(80deg, #7442c8, #9400d3);
    }

    &.banner19 {
        background: #7cc3e0;
        border-color: #53b0d6;
    }
}

В настройки группы customBanner bannerX

Можно и так, но я делаю как в своём варианте показал) Потому что люди ставят разные стили, и на разных стилях почему-то "плашки" по разному работают, но не суть)

West14 · 16 Ноя 2020

WinstonIncarnation, к чему тут разные стили? В движке имеется поддержка LESS. Пользуйтесь им и избегайте так полотен.

WinstonIncarnation · 17 Ноя 2020

West14 написал(а):
WinstonIncarnation, к чему тут разные стили? В движке имеется поддержка LESS. Пользуйтесь им и избегайте так полотен.

Не знаю, мне и так удобно)

DreamTails · 17 Ноя 2020

WinstonIncarnation,

OFFTOP

если большое количество однотипного кода показатель крутости, то нет слов, только ¯\_(ツ)_/¯

West14 · 17 Ноя 2020

WinstonIncarnation написал(а):
Не знаю, мне и так удобно)

Могу только пособолезновать.

Maut · 25 Ноя 2020

WinstonIncarnation написал(а):
и на разных стилях почему-то "плашки" по разному работают

Ну вероятнее всего по разному работают, т.к к ним применяются разные стили. Тот вариант который предлагал оратор выше, служит общим для всех групп и к определенной группе без каких либо проблем можно применить индивидуальный стиль, заменяя любое значение свойства, если это необходимо.

dontkillme · 25 Ноя 2020

Винстон, ты слил с гамбита или сделал такие же?

Куда это пихать кстати? В extra.less?

Narberal Gamma · 25 Ноя 2020

kazah написал(а):
Куда это пихать кстати? В extra.less?

Да

WinstonIncarnation · 26 Ноя 2020

kazah написал(а):
Винстон, ты слил с гамбита или сделал такие же?

Куда это пихать кстати? В extra.less?

сделал похожие, у некоторых градиент просто схожий.

elllseed · 28 Июл 2021

вот залил я в extra.less, что дальше?

Deku · 28 Июл 2021

enezavitin написал(а):
вот залил я в extra.less, что дальше?

В настройках группы, в поле Другое, использующее свое имя CSS-класса вставь название класса нужного баннера

elllseed · 28 Июл 2021

Deku написал(а):
В настройках группы, в поле Другое, использующее свое имя CSS-класса вставь название класса нужного баннера

где это название класса найти? XD

Skaiman · 28 Июл 2021

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

elllseed · 28 Июл 2021

Skaiman, cпасибо.

Skaiman · 28 Июл 2021

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

elllseed · 28 Июл 2021

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

подскажите. как сделать так же с баннером "команда форума"?

Skaiman · 28 Июл 2021

ну если используешь мой мануал, то переходим в его тему

capitan sbu · 3 Ноя 2021

Симпатично даже, но копировать-вставить с Гамбита...

Баннеры групп

WinstonIncarnation

Вложения

West14

meow

WinstonIncarnation

West14

meow

WinstonIncarnation

DreamTails

West14

meow

Maut

dontkillme

Narberal Gamma

WinstonIncarnation

elllseed

Deku

elllseed

Skaiman

elllseed

Skaiman

elllseed

Skaiman

capitan sbu

Похожие темы

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