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

[CBITEP]

Картинки хорошо, но вот ресурсы с баннерами изображением без исходника PSD, мало имеют смысла, так как содержат только уже готовые названия групп, которые не всегда есть на другом форуме.
Предварительно сделаны логотипы для серверов:

• 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 стиля или с помощью модификации шаблона, добавляем:

@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, к примеру для админа:

userBanner userBanner--admin

Так для каждой группы и получим:

Цвета баннеров указаны в коде:

  &admin {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner();
    }

Где #fff - цвет текста, #d80000 - цвет фона.
Для баннеров можно добавить градиент фона, для этого указать два цвета в свойстве .gradientUserBanner();, например:

  &admin {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner(#ED213A, #93291E);
    }

Так же можно изменить направление цветов градиента:

  &admin {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner(#ED213A, #93291E, top);
    }

Как писал выше, можно изменить логотип сервера:

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

Изменить размер логотипа:

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

Прозрачность логотипа:

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

---

Поставьте плиз лайк если годно все файлы сливаю так без всякого геморроя, если есть вопросы пишите отвечу всем!

 

[stralis]

Точно не первый раз?

 

[CBITEP]

Точно не первый раз?

?

 

[stralis]

?

Я понимаю конечно, топ мануал, но можно было, что-то да изменить.

 

[king98]

Сделайте лично для меня фирменное лого

 

[stralis]

Сделайте лично для меня фирменное лого

Конечно, тебе в первую очередь, мне еще для сервера сделает?

 

[admin]

Скачиваем архив и содержимое папки upload, заливаем на форум.

Прикрепите во вложения архив, о котором идет речь в теме

 

[CBITEP]

Сам архив с файлами:

 

[CBITEP]

Сделайте лично для меня фирменное лого

Логотип легко делается.

 

[Solozzi]

А нужно распаковывать папку? И ещё вопросик, а можно залить баннер только "Команда форума" просто трудно найти где-то ещё.

 

[pawnBro]

А куда загружать логотип проекта (в какую папку)?