CSS [Arizona RP] Переливающиеся Баннеры всех групп пользователей + префиксы тем

[Wexmover]

Всем привет, хочу слить переливающиеся баннеры Аризоны РП.
в коды баннеров входят баннеры таких типов.

Спойлер: Название баннеров

owner - Владелец
scripter - Разработчик/Скриптер
deputy_owner - Зам.Владельца
creator - Создатель
deputy_creator - Зам.Создателя
osnova - Основатель
deputy_osnova - Зам.Основателя
director - Директор
deputy_director - Зам.Директора
special_admin - Специальный Администратор
main_admin - Главный Администратор
deputy_main_admin - Заместитель ГА
curator - куратор
main_tech_admin - Главный Тех.админ
deputy_main_tech_admin - Зам Главного теха
tech_admin - тех адм
piar_manager - пиар менеджер
deputy_piar_manager - зам пиар менеджера
full_dostup - фулл доступ
spectator - зритель
administrator - администратор
helper - хелпер
admin_forum - администрация форума
guest - гость
user - пользователь
media - СМИ
blata_net - Блата нет
middle_admin - младший администратор
curator_gos - куратор госс
curator_opr - куратор опровержений
curator_nelegalov - куратор Нелегалов
sasha_rab - ее просто уберет со скпика
curator_adm - куратор
rizinboss - ее тоже можете убрать

Теперь приступим к самим баннерам, покажу наглядный пример как выглядит баннер

Спойлер: Пример баннера

А теперь сам код баннеров, а также префиксов.

Спойлер: Код баннеров/префиксов

// Баннеры
.arizonaBanner {
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: inline-block;
padding: .5em 0em;
margin: .6em 0em;
border: none;
position: relative;
overflow: hidden;
&.owner{background: url(https://i.postimg.cc/j232MJ7t/image.png)}
&.scripter{background: url(https://i.postimg.cc/7Ly656YK/image.png)}
&.deputy_owner{background: url(https://i.postimg.cc/MGLpVh5m/zv.png)}
&.creator{background: url(https://i.postimg.cc/T3pgvTdt/image.png)}
&.deputy_creator{background: url(https://i.postimg.cc/RVbJR27K/image.png)}
&.osnova{background: url(https://i.postimg.cc/vBqGywHv/image.png)}
&.deputy_osnova{background: url(https://i.postimg.cc/Jh8rcQ2j/image.png)}
&.director{background: url(https://i.postimg.cc/tJ8y1d6Z/image.png)}
&.deputy_director{background: url(https://svgshare.com/i/vC2.svg)}
&.special_admin{background: url(https://i.postimg.cc/kDr3MJrW/image.png)}
&.main_admin{background: url(https://i.postimg.cc/xdSNdfKm/GA-NEW.png)}
&.deputy_main_admin{background: url(https://i.postimg.cc/sXhCkQq3/image.png)}
&.curator{background: url(https://svgshare.com/i/vDr.svg)}
&.main_tech_admin{background: url(https://i.postimg.cc/28C7MpLt/image.png)}
&.deputy_main_tech_admin{background: url(https://i.postimg.cc/d0d7pd5n/zgt.png)}
&.tech_admin{background: url(https://i.postimg.cc/BnQNLWqF/image.png)}
&.piar_manager{background: url(https://i.postimg.cc/W4jRYgwy/piar.png)}
&.deputy_piar_manager{background: url(https://i.postimg.cc/hjPkcnwb/zpm.png)}
&.full_dostup{background: url(https://i.postimg.cc/CL0c0BXm/image.png)}
&.spectator{background: url(https://i.postimg.cc/Gh6SRPt3/PGS.png)}
&.administrator{background: url(https://i.postimg.cc/RFKpmMxq/D-Bogato.png)}
&.helper{background: url(https://i.postimg.cc/sDQQg10n/helper.png)}
&.admin_forum{background: url(https://i.postimg.cc/7hYVcY50/admforuma.png)}
&.guest{background: url(https://svgshare.com/i/vCT.svg)}
&.user{background: url(https://i.postimg.cc/5NZNjJ57/user.png)}
&.media{background: url(https://i.postimg.cc/fTSRnpFd/image.png)}
&.blata_net{background: url(https://i.postimg.cc/yxFkqYgg/Blat.png)}
&.middle_admin{background: url(https://i.postimg.cc/28XrHDxv/ML.png)}
&.curator_gos{background: url(https://i.postimg.cc/7YV0DPMW/cur-gos.png)}
&.curator_opr{background: url(https://i.postimg.cc/zBXyXTzb/cur-opr.png)}
&.curator_nelegalov{background: url(https://i.postimg.cc/x15Rsy4q/cur-nel.png)}
&.sasha_rab{background: url(https://i.postimg.cc/7hYVcY50/admforuma.png)}
&.curator_adm{background: url(https://i.postimg.cc/zBjPTYY2/cur-adm.png)}
&.rizinboss{background: url(https://i.postimg.cc/j232MJ7t/image.png)}
&:before {
content: "";
position: absolute;
background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
background-repeat: no-repeat;
top: 0px;
left: -80%;
width: 100%;
height: 100%;
animation: light 2.5s infinite;
}
}

@keyframes light {
0% {
left: -80%
}

100% {
left: 80%
}
}

// Префиксы
.gradientBanner {
font-size: 80%;
font-weight: 400;
font-style: normal;
padding: 1px 10px;
padding: 1px 3px;
border: 1px solid transparent;
border-radius: 2px;
text-align: center;
display: inline-block
}

.gradientBanner.green {
box-shadow: 0px 0px 5px #4caf50;
background-color: #4CAF50;
border-color: #4CAF50;
color: #fff
}
.gradientBanner.blue {
box-shadow: 0px 0px 5px #2196F3;
background-color: #2196F3;
border-color: #2196F3;
color: #fff
}
.gradientBanner.yellow {
box-shadow: 0px 0px 5px #FFEB3B;
background-color: #FFEB3B;
border-color: #FFEB3B;
color: #fff
}
.gradientBanner.red {
box-shadow: 0px 0px 5px #D32F2F;
background-color: #D32F2F;
border-color: #D32F2F;
color: #fff
}
.gradientBanner.lil {
box-shadow: 0px 0px 5px #ffff91;
background-color: #ffff91;
border-color: #ffff91;
color: #fff
}
.gradientBanner.seriy {
box-shadow: 0px 0px 5px #c0c0c0;
background-color: #c0c0c0;
border-color: #c0c0c0;
color: #fff
}

.message-userBanner.userBanner {
margin-top: 4px;
}
.message-cell.message-cell--user {
flex: 0 0 200px;
}
.memberHeader-banners, .memberHeader-blurb {
margin-top: 4px;
}
// Залупа
.label {
position: relative;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
}
}



.button.button--primary, a.button.button--primary {
color: #fff;
background: #0078af;
min-width: 80px;
}

.button, a.button {
display: inline-block;
display: inline-flex;
align-items: center;
margin-left: 2px;
justify-content: center;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
-webkit-transition: background-color .125s ease, border-color .125s ease, color .125s ease;
transition: background-color .125s ease, border-color .125s ease, color .125s ease;
font-size: 12px;
border-radius: 4px;
padding-top: 15px;
padding-right: 18px;
padding-bottom: 13px;
padding-left: 18px;
font-weight: 500;
text-align: center;
text-transform: none;
letter-spacing: .05em;
border: none;
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);
color: #fff;
background: #0078af;
}

.quick-access .button {
padding: 1px 0;
width: 100%;
height: 50px;
border: 1px solid #4d5460;
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
-webkit-transition: background-color .125s ease, border-color .125s ease, color .125s ease;
transition: background-color .125s ease, border-color .125s ease, color .125s ease;
font-size: 14px;
border-radius: 4px;
padding-top: 15px;
padding-right: 18px;
padding-bottom: 13px;
padding-left: 18px;
font-weight: 500;
text-align: center;
text-transform: none;
letter-spacing: .05em;
border: none;
color: #fff;
background: #00d4f817;
}

.node-body {
.m-transition(margin-left, .2s, ease-in-out);

&:hover {
margin-left: 10px;
}
}
.p-header-logo--before {
background-image: url(styles/fury/img/logobg.jpg) !important;
background-color: transparent !important;
background-size: 100% !important;
background-position: center top !important;
}
.p-header-logo--before::after {
display:none;
}
.p-body-sidebar .block-minorHeader {
font-size: 17px;
color: #fff;
font-weight: 700;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.fas {
position: unset;
}

@keyframes AnimNic {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.userBanner {
display: inline-flex;
}
.structItem.structItem--thread.is-locked {
background-color: #1f2b3b;
background-image: linear-gradient(

-45deg
, #243245 25%, transparent 0, transparent 50%, #243245 0, #243245 75%, transparent 0);
background-size:
0.8em

0.8em
;
}
.userBanner.line {
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
animation: AnimNic 18s ease infinite;
border: 20px;
border-radius: 2px;
border-color: #000;
font-size: 12px;
}
.userBannerLight:before, .userBanner--staff:before {
content: "";
position: absolute;
background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
background-repeat: no-repeat;
top: 0px;
left: -80%;
width: 100%;
height: 100%;
animation: light 2.5s infinite;
}
::selection {
background-color: rgba(13,169,239,0.8);
color: #fff;
}
a[href="/misc/style"] {
display: none! important;
}

Теперь как же сделать так чтобы они появился?
1 - Заходим на форум Xenforo
2 - Заливаем стиль вашего форума
3 - Переходим в панель и внешний вид
4 - далее в шаблоны
5 - после ищем extra.less
6 - Вставляем код
7 - Заходим в группы пользователей
8 - добавляем роль
9 - Обязательно ставим галочку вот тут

Далее появится поле и сначала пишите arizonaBanner и после добавляете к примеру owner должно получится вот так.

И все, считай вы добавили роль и так делаете с каждой ролью.
После выдаете себе в профиль и она появится у вас на форуме.
Если появятся вопросы задавайте

 

[Trafic]

sasha_rab - ее просто уберет со скпика

rizinboss - ее тоже можете убрать

Интересно как баннеры этих ролей будут выглядить

 

[Wexmover]

Интересно как баннеры этих ролей будут выглядить

Не смотрел, но их просто можете убрать:)

 

[plalkeo]

Интересно как баннеры этих ролей будут выглядить

sasha_rab

rizinboss

 

[dilsdak]

Бро, а F12 и своровать с форума арены было сложно?

 

[Wexmover]

sasha_rab
Посмотреть вложение 220760
rizinboss
Посмотреть вложение 220761

переделали мб, ну их просто лучше убрать

 

[Лера первоклассница]

легенда, баннеры с арены