Мануал LESS для Font Awesome в баннер и перед ником.

[Skaiman]

Skaiman разместил(а) новый ресурс:

LESS для Font Awesome в баннер и перед ником. - Как вставить иконки перед ником и названием группы.

Собрал в кучу коды less для прикручивания иконок.
Делаем иконку перед названием группы в баннере. В extra.less пишем:

.userBanner--before (@bannerStyle; @content) {
    .userBanner {
        &.@{bannerStyle} {
            strong {
                &:before {
                    content: "\@{content}";
                }
            }
        }
    }
}

.userBanner {
    strong {
        &:before {
            font-family: "FontAwesome";
            padding-right: 3px;
        }...

Посмотреть страницу этого ресурса...

 

[Nixon1604]

Не меняется цвет в баннере пользователя, green - red работают, lilac или purple нет, подскажешь как решить?

 

[Skaiman]

Используй hex или rgb lilac - #d3bbd6 или rgb(211,187,214) purple - #5f1787 или rgb(95,23,135)

 

[Nixon1604]

Пробовал , вообще не отображается цвет

 

[Skaiman]

Цвета HTML. Таблица из 147 имён цветов для HTML и CSS — ColorScheme.Ru

 

[Skaiman]

Покажи весь код, который используешь

 

[Skaiman]

Ты делаешь в баннере? Так что голову морочишь нет по дефолту баннеров lilac или purple, там же пример для дефолтных баннеров, которые выбираешь в настройках, для своих будет по другому.

 

[Nixon1604]

Покажи весь код, который используешь

Ща скоро приеду , скину , в Скайп или дискорд не можешь выйти , что бы быстрее было ?

 

[Skaiman]

в Скайп или дискорд не можешь выйти , что бы быстрее было ?

Обсуждение здесь в теме, ты не один и у кого то может возникнуть такой же вопрос, для этого и тема обсуждения.

 

[Nixon1604]

.userBanner--before (@bannerStyle; @content) {
    .userBanner {
        &.@{bannerStyle} {
            strong {
                &:before {
                    content: "\@{content}";
                }
            }
        }
    }
}

.userBanner {
    strong {
        &:before {
            font-family: "FontAwesome";
            padding-right: 3px;
            font-weight: bold;
        }
    }
}
.userBanner--before (userBanner--red, f132);
.userBanner--before (userBanner--lilac, f0f4);

Сообщение автоматически объединено: 26.11.2018

Код, хотелось бы разную поддержку цвету, не дефолтные, и шрифт жирнее

 

[Skaiman]

Код, хотелось бы разную поддержку цвету, не дефолтные, и шрифт жирнее

Указываешь дефолтные, просто понимать надо что делаешь, если используется свой класс для баннеров, то и его и надо указывать. Сам по себе код не делает баннеры для групп, их надо указать в настройках групп.

 

[Nixon1604]

я указал, в своем стиле css, короче такое

 

[Skaiman]

я указал, в своем стиле css, короче такое

Ты указал

userBanner--lilac

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

 

[Skaiman]

Вот смотри, я добавил новые баннеры и к ним уже иконки

.userBanner {
    &.userBanner--lilac { .m-userBannerVariation(white, #C8A2C8, transparent); }
    &.userBanner--purple { .m-userBannerVariation(white, #c400ab, transparent); }
}

.userBanner--before (@bannerStyle; @content) {
    .userBanner {
        &.@{bannerStyle} {
            strong {
                &:before {
                    content: "\@{content}";
                }
            }
        }
    }
}

.userBanner {
    strong {
        &:before {
            font-family: "FontAwesome";
            padding-right: 3px;
            font-weight: 900;
        }
    }
}
.userBanner--before (userBanner--red, f132);
.userBanner--before (userBanner--lilac, f0f4);
.userBanner--before (userBanner--purple, f0f4);

 

[Nixon1604]

по коду то что ты сделал я понял, но не понял оно будет работать или нет ? ))

 

[Skaiman]

по коду то что ты сделал я понял, но не понял оно будет работать или нет ? ))

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

 

[Nixon1604]

ок, спс

Сообщение автоматически объединено: 26.11.2018

Сообщение автоматически объединено: 26.11.2018

внес в extra и ввел в стиль не чего не работает

 

[Skaiman]

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

 

[Nixon1604]

ок

 

[Skaiman]

Так в extra.less

.userBanner {
    &.userBanner--lilac {
        color: #000;
        background: #C8A2C8;
        border-color: transparent;
    }
    &.userBanner--purple {
        color: #fff;
        background: #c400ab;
        border-color: transparent;   
    }
}

.userBanner--before (@bannerStyle; @content) {
    .userBanner {
        &.@{bannerStyle} {
            strong {
                &:before {
                    content: "\@{content}";
                }
            }
        }
    }
}

.userBanner {
    strong {
        &:before {
            font-family: "FontAwesome";
            padding-right: 3px;
            font-weight: 900;
        }
    }
}
.userBanner--before (userBanner--red, f132);
.userBanner--before (userBanner--lilac, f0f4);
.userBanner--before (userBanner--purple, f0f4);