Баннер со световым эффектом в Xenforo

​

Описание:​

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

В extra.less вставляем код​

.userBannerLight, .userBanner--staff {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .5em 0em;
    width: 100%;
    border: none;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    &.admin {
        background: #c62828;
    }
    &.moder {
        background: #00695C;
    }
    &.user {
        background: #1565C0;
    }
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
    .memberHeader-banners &, .memberTooltip-banners & {
        width: 120px;
    }
    @media (max-width: @xf-responsiveMedium) {
        .message:not(.message--forceColumns) .message-userBanner.userBanner& {     
            width: 120px;
            text-align: center;
        }
    }
}
.userBanner--staff {
    background: #1ba39c !important;
    color: #fff !important;
}

@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}

Не забывает указывать свой css для баннера групп в настройках группа. Например: userBannerLight admin для администратора.

 

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

Описание:​

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

В extra.less вставляем код​

.userBannerLight, .userBanner--staff {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .5em 0em;
    width: 100%;
    border: none;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    &.admin {
        background: #c62828;
    }
    &.moder {
        background: #00695C;
    }
    &.user {
        background: #1565C0;
    }
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
    .memberHeader-banners &, .memberTooltip-banners & {
        width: 120px;
    }
    @media (max-width: @xf-responsiveMedium) {
        .message:not(.message--forceColumns) .message-userBanner.userBanner& {    
            width: 120px;
            text-align: center;
        }
    }
}
.userBanner--staff {
    background: #1ba39c !important;
    color: #fff !important;
}

@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}

Не забывает указывать свой css для баннера групп в настройках группа. Например: userBannerLight admin для администратора.

Привет помоги у меня чего то не грузит баннер https://yapx.ru/v/USAff

 

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

 

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

Убрал не работает

 

Убрал не работает

Я только заметил.
Вы не указали css
userBannerLight admin
Вот так напишите в настройках группы где вы точку убирали

 

Я только заметил.
Вы не указали css
userBannerLight admin
Вот так напишите в настройках группы где вы точку убирали

Можете пожалуйста со скрина вырезать я не вижу

 

вот так сделай

 

Посмотреть вложение 10251
вот так сделай

Все заработала можешь подсказать как изменить цвет и что делать как создать ищо одну такуеже я создал только заменил userBannerCurator вписал так же в конце admin и не работает

 

Учи CSS

.userBannerLight, .userBanner--staff {
   тут оформление для всех баннеров которые имеют кслассы userBannerLight и userBanner--staff
    &.admin {
        Вот тут настраивается как раз то, что ты вводил в редактировании группы админ А именно userBannerLight admin
    }
    &.moder {
        Это для группы модератора, и нужно будет указывать класс в редактировании группы userBannerLight moder
    }
    &.user {
       Это для группы пользователя, и нужно будет указывать класс в редактировании группы userBannerLight user
    }

И дальше можешь на создавать кучу таких
Например:

&.banned {
       Это для группы забаненых, и нужно будет указывать класс в редактировании группы userBannerLight banned
    }

&:before {
Это не трогай
}

 

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

Описание:​

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

В extra.less вставляем код​

.userBannerLight, .userBanner--staff {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .5em 0em;
    width: 100%;
    border: none;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    &.admin {
        background: #c62828;
    }
    &.moder {
        background: #00695C;
    }
    &.user {
        background: #1565C0;
    }
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
    .memberHeader-banners &, .memberTooltip-banners & {
        width: 120px;
    }
    @media (max-width: @xf-responsiveMedium) {
        .message:not(.message--forceColumns) .message-userBanner.userBanner& {    
            width: 120px;
            text-align: center;
        }
    }
}
.userBanner--staff {
    background: #1ba39c !important;
    color: #fff !important;
}

@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}

Не забывает указывать свой css для баннера групп в настройках группа. Например: userBannerLight admin для администратора.

Как сделать закруглённый баннер?

 

Как сделать закруглённый баннер?

border-radius: 10;
Выбирайте под свой вкус.

 

Привет, делаю новый пользователь "Баннед" в екстра, сделал - пишу в роль userBannerLight banned и у меня просто черная роль (прозрачная) помоги плиз

 

@Ervinec123, нам нужно больше информации о том, что ты написал. Если делать в точности как написано в инструкции, то всё работает.

 

Возможно это неактуально, но хотел бы попытаться получить ответ.
Моя проблема заключается в том, что я ввел как нужно в группе, все вставил в extra.less, но баннер не работает. Что делать? (Прилагаю скриншоты)

 

Здравствуйте когда я создал в
extra.less
данный код userBannerLight admin и этот

то получилось это:

вопрос в том как мне сделать все баннеры как первый

 

Админ сайта, а не можешь нормально сообщение оформить...

offtop

 

я ввел код чтобы группы пользователей переливались и вставил этот css:userBannerLight admin
и получились разные формы, суть в том что как сделать все группы на скрине как 1 по форме

 

@bobobo, Как сделать 2 банер как 1 и 3 чтобы он был в 1 строку?

 

От души мне зашло даже плагины не надо ставить если вот так можно сделать круто респект

 

• • Sanya_Demin
  • Как сделать закруглённый баннер?

@Sanya_Demin, в коде есть строка border: none;
в строке border: none; изначально граница отсутсвует, что бы она была закруглённая вместо значения: none , подставляешь значение rounded

 

Кто подскажет как сделать что бы не много закруглить баннер ?

 

Научите пожалуйста как разбираться с цветами ксс и т.д.

 

Как например поменять зелёный на красный

Без названия (1 фото) от Аноним — 20.11.2024. Фотоальбом ID: 205991441 | Япикс

Фотоальбом (1 фото) загружен 20 ноября 2024 года, 20:37 мск на фотохостинг Япикс. Автор: Аноним. Комментариев – 0. Размер – 294.6 КБ.

yapx.ru

 

как зделать цветной баннер?

 

@hththd, в век нейронок ты всё ещё задаёшь эти вопросы?