Решено Help

[ajaj]

У кого есть их баннеры как у них(не реклама) вот их ссылка и скриншот

PAWNO FIX — Академия программирования

PAWNO FIX @

pawno-fix.ru

 

[Kolpak]

Анимированный баннер с эффектом.

Заходим в шаблоны стиля - extra.less Вставляем код: .userBannerLight, .userBanner--adminsforum{ display: inline-block; text-align: center; font-size: .7em; padding: .7em 1em; font-weight: 600; color: #fff; background: #FF0000; text-transform: uppercase...

pawno-help.ru

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

.userBannerLight, .userBanner--adminsforum{
    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: 3px;
    width: 169px;
    height: 23px;
    &.admin {
        background: linear-gradient(90deg, #c62828 0%, #a11f1f 100%);
    }
    &.glmoder {
        background: linear-gradient(90deg, #60f 0%, #30c 100%);
    }
    &.moder {
        background: linear-gradient(90deg, #60f 0%, #00008b 100%);
    }
    &.user {
         background: linear-gradient(90deg, #808080 0%, #404040 100%);
    }
    &.vip {
         background: linear-gradient(90deg, #ff8c00 0%, #e07b00 100%);
    }
    &.aktiv {
         background: linear-gradient(90deg, #00f 0%, #00008b 100%);
    }
    &.prof {
         background: linear-gradient(90deg, #00b300 0%, #060 100%);
    }
    :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%
    }
}