XF 2.2 Баннер нестандартного звания

[kochevnik]

собственно как сделать баннер для нестандартного звания пользователя

 

[CrazyHackGUT]

Через CSS?

 

[kochevnik]

это понятно ) пример бы

 

[CrazyHackGUT]

Заходите в девтулзы и копируете просто все применённые модификаторы к баннеру.
С ходу вот такое родил:

.userTitle.message-userTitle {
    font-size: 75%;
    font-weight: 400;
    font-style: normal;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 2px;
    text-align: center;

    color: #000;
    background: #00e3d6;
    border-color: #00b0a6;

    display: block;
    margin-top: 3px;
}

 

[kochevnik]

спасибо, понял, получилось

как вы открыли это окно ) у меня просмотр кода по другому

 

[Atikin]

kochevnik,

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

 

[kochevnik]

Skaiman​

помоги, сделал по подобию
https://xenforo.info/resources/Баннер-со-световым-эффектом.8415/
не догоняю как наложить эффект
вот такой код у меня

.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;
    }
      &.author {
        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%;
    }
}



.userTitle.message-userTitle {
    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: 3px;
    position: relative;
    overflow: hidden;

    color: #000;
    background: #00e3d6;
    border-color: #00b0a6;

    display: block;
    margin-top: 3px;
}

что нужно еще скопировать с твоего кода ?

 

[kochevnik]

или код юзер титле вставить внутрь твоего кода ? чтоб световой эффект пробегал ?

 

[Skaiman]

kochevnik, убери код что вставил, вмест него:

.userTitle {
    background: #0288D1;
    text-align: center;
    font-size: .7em;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .45em 0;
    position: relative;
    overflow: hidden;
    &: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;
    }
    .memberTooltip-blurb &, .memberHeader-blurb & {
        padding: .45em 1em;
    }
}

 

[kochevnik]

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

вообще решает многое ) но тут же вопрос, как добавить свечение, к вновь созданным баннерам ? и как сделать, чтоб все баннеры сворачивались под блок - "Баннера пользователя" и разворачивались по нажатию

 

[kochevnik]

ну и выравнивание хромает (

 

[Skaiman]

вообще решает многое ) но тут же вопрос, как добавить свечение, к вновь созданным баннерам ? и как сделать, чтоб все баннеры сворачивались под блок - "Баннера пользователя" и разворачивались по нажатию

вроде как уже оффтоп пошел

 

[kochevnik]

ну да, темы перекликаются ) и непонятно куда писать

 

[Skaiman]

непонятно куда писать

в ищу исполнителя :) а я возьмусь :)

 

[kochevnik]

в ищу исполнителя :) а я возьмусь :)

пиши в телегу @alex54ru