• Каждый пользователь который проходит регистрацию, проходит проверку у Администраций форума.
    Если ваш аккаунт был отклонен, узнать причину можно тут: Volshebnik
Баннеры групп для форумов SA:MP

XenForo Баннеры групп для форумов SA:MP

Скачать
Обзор Обсуждения
Картинки хорошо, но вот ресурсы с баннерами изображением без исходника PSD, мало имеют смысла, так как содержат только уже готовые названия групп, которые не всегда есть на другом форуме. Уже не первый раз делаю подобные баннеры на CSS/LESS.
Предварительно сделаны логотипы для серверов:
  • Arizona RP - arizona-logo.png
  • NextRP - next-logo.png
  • Evolve RP - evolve-logo.png
  • Diamond RP - diamond-logo.png
  • Radmir RP - radmir-logo.png
  • Paradox RP - paradox-logo.png
  • Revent RP - revent-logo.png
  • BlackRussia - blackrussia-logo.png
  • Матрешка RP - matreshka-logo.png
  • Monser DeathMatch - monser-logo.png
Скачиваем архив и содержимое папки upload, заливаем на форум.
В extra.less стиля или с помощью модификации шаблона, добавляем:

Less:
Expand Collapse Copy 
@logoImages: 'arizona-logo.png'; // Изображение логотипа (указывать в кавычках)
@logoSize: 14px;                 // Размер логотипа
@logoOpacity: 70%;               // Прозрачность логотипа (100% - непрозрачный, 0% - прозрачный)

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

@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%);
}

.svg-userBannerVariation(@color; @bg; @logo: @logoImages) {
    color: @color;
    background-color: @bg;
    border: none;
    .userBanner-before {
        &:before {
            content: '';
            display: block;
            width: 18px;
            height: 18px;
            background: url('/styles/role-play/images/@{logo}') no-repeat center / @logoSize,
                linear-gradient(to top, rgba(0,0,0,.8) 10%, rgba(0,0,0,.2) 100%);
            filter: opacity(@logoOpacity);
            padding: 2px;
            border-radius: 50%;
        }
    }
}

.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);
        .gradientUserBanner();
    }
    &admin {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner();
    }
    &moder {
        .svg-userBannerVariation(#fff, #019875);
        .gradientUserBanner();
    }
    &newmember {
        .svg-userBannerVariation(#fff, #6c7a89);
        .gradientUserBanner();
    }
    &verified {
        .svg-userBannerVariation(#fff, #446cb3,);
        .gradientUserBanner();
    }
    &premium {
        .svg-userBannerVariation(#fff, #f89406);
        .gradientUserBanner();
    }
    &banned {
        .svg-userBannerVariation(#fff, #9a12b3);
        .gradientUserBanner();
    }
}
В коде уже предусмотрены несколько баннеров для групп, для команды форума, админа, модера, зарегистрированного, проверенного, премиум и заблокированного. В настройках группы указываем свой класс CSS, к примеру для админа:
CSS:
Expand Collapse Copy 
userBanner userBanner--admin
Так для каждой группы и получим:
2022-10-07_153442.png
2022-10-07_153531.png
2022-10-07_153557.png

Цвета баннеров указаны в коде:
Less:
Expand Collapse Copy 
    &admin {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner();
    }
Где #fff - цвет текста, #d80000 - цвет фона.
Для баннеров можно добавить градиент фона, для этого указать два цвета в свойстве .gradientUserBanner();, например:
Less:
Expand Collapse Copy 
    &admin {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner(#ED213A, #93291E);
    }
2022-10-07_153755.png
2022-10-07_153814.png
2022-10-07_153843.png

Так же можно изменить направление цветов градиента:
Less:
Expand Collapse Copy 
    &admin {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner(#ED213A, #93291E, top);
    }
2022-10-07_154049.png
2022-10-07_154111.png
2022-10-07_154134.png

Как писал выше, можно изменить логотип сервера:
Less:
Expand Collapse Copy 
@logoImages: 'diamond-logo.png'; // Изображение логотипа (указывать в кавычках)
2022-10-07_153442.png
2022-10-09_185629.png
2022-10-09_185723.png
2022-10-09_185842.png
2022-10-09_185940.png

Изменить размер логотипа:
Less:
Expand Collapse Copy 
@logoSize: 16px;                 // Размер логотипа
Прозрачность логотипа:
Less:
Expand Collapse Copy 
@logoOpacity: 70%;               // Прозрачность логотипа (100% - непрозрачный, 0% - прозрачный)



Баннеры групп для форумов SA:MP
Баннеры групп для форумов серверов SA:MP
Скачать
Скачиваний
0
Просмотры
51
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0
  • Теги Теги
    xenforo

    • Ещё ресурсы от Skaiman

    Назад
    Верх