Решено Как сделать баннер ровным

[Sample Text]

Приветствую , хотел спросить, как сделать так , чтобы этот баннер был никак на скрине, а нормально в линию

Код:

.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: 5px;
    &.remka {
        margin: 5px 0 0;
    display: inline-block;
    text-align: center;
    background-color: #009c82;
    position: relative;
    overflow: hidden;
    }   
         :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%
    }
}

 

[pikamonov]

.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: 5px;
    white-space: nowrap; /* <- новый параметр */
}

попробуй.

 

[Sample Text]

.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: 5px;
    white-space: nowrap; /* <- новый параметр */
}

попробуй.

Текст ушёл в отпуск


Сможешь как тут сделать?

https://forum.gta-mobile.ru/boss/

Не реклама!!!

 

[Kolpak]

Измените значения width в этом участке кода

.memberHeader-banners &, .memberTooltip-banners & {
    width: 120px;
}

 

[Sample Text]

Измените значения width в этом участке кода

.memberHeader-banners &, .memberTooltip-banners & {
    width: 120px;
}

Сделал 200

Но мне не то нужно, мне нужно как тут

https://forum.gta-mobile.ru/boss/

Не реклама!!!

 

[pikamonov]

.userBanner {
    font-size: 75%;
    font-size: 11px;
    font-weight: 400;
    font-style: normal;
    padding: 1px 10px;
    padding: 1px 3px;
    border: 1px;
    border-radius: 4px;
    text-align: center
}

код userbanner с их форума

 

[Sample Text]

.userBanner {
    font-size: 75%;
    font-size: 11px;
    font-weight: 400;
    font-style: normal;
    padding: 1px 10px;
    padding: 1px 3px;
    border: 1px;
    border-radius: 4px;
    text-align: center
}

код userbanner с их форума

Вообще не подходят

 

[pikamonov]

@Sample Text,
ты говоришь, что тебе надо как на форуме онлайн рп, я тебе предоставил их код - и ты говоришь, что они тебе не подходят..
как это?)

 

[Sample Text]

У них:

У меня:

 

[h0nkay]

@Sample Text, у тебя стиль другой

 

[Kolpak]

.userBannerLight, .userBanner--adminsforum{
    display: inline-block;
    text-align: center;
    font-size: 11px;
    padding: 1px 3px;
    font-weight: 400;
    color: #fff;
    background: #FF0000;
    border: 1px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    &.remka {
        margin: 5px 0 0;
        background-color: #009c82;
    }   
         :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
    }
    @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%
    }
}

 

[Sample Text]

.userBannerLight, .userBanner--adminsforum{
    display: inline-block;
    text-align: center;
    font-size: 11px;
    padding: 1px 3px;
    font-weight: 400;
    color: #fff;
    background: #FF0000;
    border: 1px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    &.remka {
        margin: 5px 0 0;
        background-color: #009c82;
    }  
         :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
    }
    @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%
    }
}

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

У меня почему то буквы все большие

 

[Kolpak]

У меня почему то буквы все большие

Убрать из кода text-transform: uppercase;

 

[Sample Text]

Убрать из кода text-transform: uppercase;

Если я его уберу, у меня другие баннера будут тоже с маленькой буквой , а мне нужно чтобы на тех было все с большой, а на этих нет

 

[Kolpak]

Добавьте text-transform: unset; в нужный баннер

 

[Sample Text]

Добавьте text-transform: unset; в нужный баннер

Благодарен )

 

[Sample Text]

Решено // Закрыто
Помогли больше всего:
@pikamonov
@Kolpak

Спойлер

Спасибо )))