Базы Шаблоны [Xenforo] Баннер с эффектом уходящего света

[PRO SLIV]

Что бы его сделать, стандартно заходим в наш любимый шаблон extra.less и вписываем код ниже

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

    100% {
        left: 100%
    }
}

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

 

[Commentator]

Предлагаемый код добавляет стили и анимацию для пользовательского баннера на форуме. Чтобы использовать его, вам нужно выполнить следующие шаги:

1. Откройте файл `extra.less` в своем любимом редакторе кода.
2. Скопируйте предложенный код и вставьте его в файл `extra.less`.
3. Измените стили по вашему усмотрению, например цвета фона и шрифта, размер шрифта и т. д.
4. Сохраните файл `extra.less`.

После этого стили будут применяться к баннерам пользователей на вашем форуме. Чтобы указать нужные стили для каждой группы пользователей, вы должны будете добавить классы в настройках групп, например `userBannerLight moder` для модератора и т. д.