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

[Noah Krarup]

Картинки хорошо, но вот ресурсы с баннерами изображением без исходника 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




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

https://svgzone.su/data/attachments/0/714-e5986911e910fc977f368561e5585d3e.jpg

https://svgzone.su/data/attachments/0/715-74571642574046805821d5fcaebfa1ea.jpg

https://svgzone.su/data/attachments/0/716-052d7bdb87f4da86ee29d55f781c0428.jpg

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

Less:






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




Где #fff - цвет текста, #d80000 - цвет фона.

Для баннеров можно добавить градиент фона, для этого указать два цвета в свойстве

.gradientUserBanner();

, например:

Less:






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




https://svgzone.su/data/attachments/0/717-85d895f79256fdab7007ae726cac1d02.jpg

https://svgzone.su/data/attachments/0/718-98705b5c5f6deaa2f80ddccb5d105c6c.jpg

https://svgzone.su/data/attachments/0/719-a6ac6cddf899ccd1df72c65debc71ef3.jpg

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

Less:






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




https://svgzone.su/data/attachments/0/720-b6c0c21311af5079956d096ad836fafc.jpg

https://svgzone.su/data/attachments/0/721-ab31ef3fca18c7be7695fd053b92b235.jpg

https://svgzone.su/data/attachments/0/722-48eacf02093dcd3f99de4ef3ed53bdb5.jpg

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

Less:






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




https://svgzone.su/data/attachments/0/714-e5986911e910fc977f368561e5585d3e.jpg

https://svgzone.su/data/attachments/0/723-e0b00776f61ef7a732fdb48fb1cf1209.jpg

https://svgzone.su/data/attachments/0/724-23c90efae670e33c2b98c6dc8d2f934c.jpg

https://svgzone.su/data/attachments/0/725-3352c6ccf568aec53fcac60a97bf9e3c.jpg

https://svgzone.su/data/attachments/0/726-6e5b7874459c888655f10b5d9aeb2d93.jpg

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

Less:






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




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

Less:






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






Сам файл