Баннеры групп хелп

Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
  • Если Вы желаете помогать развитию проекта, готовы заполнять раздел(-ы) и подсказывать другим пользователям на портале, есть возможность попасть в команду редакторов. Для этого следует обратиться в техническую поддержку
Пользователь
Регистрация
4 Июл 2024
Сообщения
14
Как поднять текст выше?1728576635651.png
 
Пользователь
Регистрация
30 Мар 2023
Сообщения
78
использовать нормальный код баннера, САМОЕ ЛУЧШЕЕ И АДЕКВАТНОЕ РЕШЕНИЕ !!!

CSS:
.fontMontserrat(@fweight) {
    @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: @fweight;
        src: local(''),
            url('/styles/fonts/custom/montserrat-v21-latin_cyrillic-@{fweight}.woff2') format('woff2'),
            url('/styles/fonts/custom/montserrat-v21-latin_cyrillic-@{fweight}.woff') format('woff');
    }
}
.fontMontserrat(400);
.fontMontserrat(500);
.fontMontserrat(600);
.fontMontserrat(700);

.svg-userBannerVariation(@color; @bg; @icon: 'user') {
    color: @color;
    background-color: @bg;
    border: none;
    .userBanner-before {
        &:before {
            .m-faBase();
            .m-faContent('@{fa-var-@{icon}}');
            background: linear-gradient(to top, rgba(0,0,0,.8) 10%, rgba(0,0,0,.3) 100%);
            padding: 3px;
            border-radius: 50%;
            color: @bg;
            width: 1.4em;
        }
    }
}

@strongTextShadow:  1px 0 1px  rgba(0,0,0,.5),
                    0 1px 1px  rgba(0,0,0,.5),
                    -1px 0 1px rgba(0,0,0,.5),
                    0 -1px 1px rgba(0,0,0,.5);

.gradientUserBanner(@start: transparent, @end: transparent, @position: right) {
    background-image: linear-gradient(to @position, @start 0%, @end 100%); 
}

.userBanner {
    font-style: normal;
    text-transform: uppercase;
    font-weight: 600;
    padding: 3px 5px 3px 3px;
    border: 1px solid transparent;
    border-radius: 20px;
    text-align: center;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    position: relative;
    strong {
        font-size: 75%;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        padding-left: 3px;
        line-height: .95;
        text-shadow: @strongTextShadow;
    }
    .message-userBanner& {
        display: flex;
    } 
}

@media (max-width: @xf-responsiveMedium) {
    .message:not(.message--forceColumns) .message-userTitle,
    .message:not(.message--forceColumns) .message-userBanner.userBanner {
        display: inline-flex;
    }
}

.userBanner.userBanner-- {
    &staff {
        .svg-userBannerVariation(#fff, #5c97bf, 'user-cog');
        .gradientUserBanner();
    }
    &admin {
        .svg-userBannerVariation(#fff, #d80000, 'user-crown');
        .gradientUserBanner(); 
    }
    &moder {
        .svg-userBannerVariation(#fff, #019875, 'user-shield');
        .gradientUserBanner();
    } 
    &newmember {
        .svg-userBannerVariation(#fff, #6c7a89);
        .gradientUserBanner();
    }
    &verified {
        .svg-userBannerVariation(#fff, #446cb3, 'user-check');
        .gradientUserBanner();
    }
    &premium {
        .svg-userBannerVariation(#fff, #f89406, 'user-plus');
        .gradientUserBanner();
    }
    &banned {
        .svg-userBannerVariation(#fff, #9a12b3, 'user-times');
        .gradientUserBanner();
    }
}

Код в настройках группы (другой, использующий свое имя ксс класса): userBanner userBanner--admin

И с этим кодом, у тебя будут красивые, круглые баннера, с нормальным шрифтом, а главное "ТЕКСТ ВЫШЕ".
 
Пользователь
Регистрация
14 Май 2024
Сообщения
1
кст выше?
1728576635651.png
 
Пользователь
Регистрация
26 Окт 2024
Сообщения
29
А другие баннера не судьба делать?, на Pawno много разных видов, поищи
 
Сверху