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

[jesss]

jesss, это не весь код, ты не видишь его полностью

Я раньше этот же код вставлял не дополняя его, и у меня получалось.

 

[Skaiman]

Я раньше этот же код вставлял не дополняя его, и у меня получалось.

ну значит не оставляй надежды, вставляй еще, переставляй заново и глядишь опять получится

 

[jesss]

Ну помогите пожалуйста с кодом( Я хочу такие баннеры сделать.

 

[Skaiman]

Ну помогите пожалуйста с кодом( Я хочу такие баннеры сделать.

почитай правила форума

 

[Matew]

Что такое копирайт перевода?

Вот такая штука в футере


Инструкция по возвращению:

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

Ну помогите пожалуйста с кодом( Я хочу такие баннеры сделать.

Вставьте код целиком, а не его огрызок. Код полностью опубликован на странице ресурса. Если вы не видите его, вам надо перечитать правила

 

[Red_Normov]

Вот такая штука в футере
Посмотреть вложение 132315

Инструкция по возвращению:

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

Вставьте код целиком, а не его огрызок. Код полностью опубликован на странице ресурса. Если вы не видите его, вам надо перечитать правила

OFFTOP

кто-то уже на винде 11 )

 

[flusha]

А как можно тут сменить для отдельного баннера цвет текста?
UPD: разобрался

 

[Skaiman]

Так то добавить color, но ты не можешь полностью ресурс просматривать

 

[midstein]

У меня вот так вот получилось, как исправить?

 

[Westbrook]

Подскажите как сделать закруглённый баннер "Developer" так же как и "Команда Форума" ?

 

[ZloyDed]

Подскажите как сделать закруглённый баннер "Developer" так же как и "Команда Форума" ?

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

найди в коде border-radius и измени на нужное значение

 

[Westbrook]

найди в коде border-radius и измени на нужное значение

Спасибо большое!

 

[starter80]

почему в переписке прижатый текст в левый край вместо центра?

 

[Skaiman]

почему в переписке прижатый текст в левый край вместо центра?

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

 

[starter80]

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

и как исправить?

 

[Skaiman]

и как исправить?

найти и уничтожить

 

[Mikhail_Minakov]

Куда код вставлять?

 

[Skaiman]

Куда код вставлять?

все зависит от размера отверстия, а так то обычно суют в extra.less или делают модификацию одноименной дырки

 

[starter80]

    .memberHeader-banners &, .memberTooltip-banners & {
        width: 120px;
    }
    @media (max-width: @xf-responsiveMedium) {
        .message:not(.message--forceColumns) .message-userBanner.userBanner& {    
            min-width: 120px;
            text-align: center;
        }
    }
}

В коде

    .memberHeader-banners &, .memberTooltip-banners & {
        width: 120px;
    }
    @media (max-width: @xf-responsiveMedium) {
        .message:not(.message--forceColumns) .message-userBanner.userBanner& {   
            width: 120px;
            text-align: center;
        }
    }

Заменить на min-width

К сожалению не меняет и растянутым как лапоть по всей ширено остается
Вот полный изменённый код

.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: #008B8B;
    }
    &.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 & {
        min-width: 120px;
    }
    @media (max-width: @xf-responsiveMedium) {
        .message:not(.message--forceColumns) .message-userBanner.userBanner& {  
            min-width: 120px;
            text-align: center;
        }
    }
}
.userBanner--staff {
    background: #1ba39c !important;
    color: #fff !important;
}

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

Update:
Получилось
Сменить нужно вот так

    .memberHeader-banners &, .memberTooltip-banners & {
        width: 120px;
    }
    @media (max-width: @xf-responsiveMedium) {
        .message:not(.message--forceColumns) .message-userBanner.userBanner& {     
            min-width: 120px;
            text-align: center;
        }
    }
}

 

[Skaiman]

стиль?