XF 2.1 Баннер Г-П

Версия XenForo
2.1.8

Skezeek

Участники
Сообщения
38
Реакции
1
Баллы
65
Прошу) Помогите сделать такой баннер, в других темах я не понял.
1714167831921.png
 

Вложения

  • joxi_screenshot_1714362795791.png
    joxi_screenshot_1714362795791.png
    21.2 KB · Просмотры: 3
Efremov, банер все ровно отображается так как на картинке выше. как вообще поправить сам банер? увеличить его ширину. код сейчас предоставлю.
CSS:
.userBanner.userBanner--admins{
color: black;
background: linear-gradient(80deg, #7442c8, #9400d3);
font-size: 87%;
border-radius: 10px;
text-align: center;
padding: 1px 10px 3px;
font-style: normal;
border: none;
}
.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: 1000000000000px;
    position: relative;
    overflow: hidden;
    &.proverenie {
        background: #FF1493;
    }
    &.glavadm {
        background: #FF0000;
    color: #FFFFFF;
    }
    &.user {
        background: #808080;
    }
    &.special {
        background: #FF4500;
    }
    &.sponsorka {
        background: #0000FF;
    }
    &.rppers {
        background: #9400D3;
    }
    &.adminforum {
        background: BlueViolet;
    }
    &.manager {
        background: PaleVioletRed;
    }
    &.user {
        background: gray;
    }
    &.hudoznik {
        background: #FF69B4;
    }
    &.frendportal {
        background: #1E90FF;
    }
    &: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%;
    }
}
 
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу