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

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

Баннеры групп для форумов серверов SA:MP
  • Автор НетМеня
  • Дата создания
Совместимость с XenForo
  1. 2.0
  2. 2.1
  3. 2.2
Картинки хорошо, но вот ресурсы с баннерами изображением без исходника 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:
@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:
userBanner userBanner--admin

Так для каждой группы и получим:
1689689045004.png
1689689049217.png
1689689054815.png


Цвета баннеров указаны в коде:
Less:
&admin {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner();
    }

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

1689689132989.png
1689689137331.png
1689689141134.png


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

1689689169316.png
1689689173261.png
1689689176848.png


Как писал выше, можно изменить логотип сервера:
Less:
@logoImages: 'diamond-logo.png'; // Изображение логотипа (указывать в кавычках)

1689689209932.png
1689689213931.png
1689689218689.png
1689689222454.png
1689689226926.png


Изменить размер логотипа:
Less:
@logoSize: 16px;                 // Размер логотипа

Прозрачность логотипа:
Less:
@logoOpacity: 70%;               // Прозрачность логотипа (100% - непрозрачный, 0% - прозрачный)

Похожие ресурсы

Search options order для XenForo 2 НетМеня
0,00 звёзд Оценок: 0
Обновлено
Назад
Верх Низ