Группы пользователей и префиксы

[vladislav020]

Группы пользователей и префиксы для вашего форума.

Спойлер: Код

.userBanner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 6px 12px 18px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .4px;
  overflow: visible;
  border: 1px solid transparent;
  box-shadow:
    0 0 6px rgba(0, 0, 0, .35),
    0 0 12px currentColor;
  text-shadow:
    0 0 4px currentColor,
    0 0 8px currentColor;
}

.userBanner::after {
  content: "К";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  color: #000;
  -webkit-text-stroke: 1px #2aa9ff;
  text-shadow:
    0 0 4px #2aa9ff,
    0 0 8px #2aa9ff,
    0 0 12px #2aa9ff;
  pointer-events: none;
}

.userBanner--helper::before,
.userBanner--junior-mod::before,
.userBanner--mod::before,
.userBanner--senior-mod::before,
.userBanner--junior-admin::before,
.userBanner--admin::before,
.userBanner--senior-admin::before,
.userBanner--events::before,
.userBanner--developer::before,
.userBanner--founder-assistant::before {
  margin-right: 5px;
  color: #fff;
  text-shadow: 0 0 5px currentColor;
}

.userBanner--helper::before {
  content: "✦";
}

.userBanner--junior-mod::before,
.userBanner--mod::before,
.userBanner--senior-mod::before {
  content: "🛡";
}

.userBanner--junior-admin::before,
.userBanner--admin::before,
.userBanner--senior-admin::before {
  content: "⚙";
}

.userBanner--events::before {
  content: "🎉";
}

.userBanner--developer::before {
  content: "💻";
}

.userBanner--founder-assistant::before {
  content: "👑";
}

.userBanner--user {
  background: linear-gradient(135deg, #ff4fd8, #8e4dff);
  color: #fff;
  border-color: #ff4fd8;
}

.userBanner--local {
  background: linear-gradient(135deg, #7a2cff, #b04dff);
  color: #fff;
  border-color: #a64dff;
}

.userBanner--pro {
  background: linear-gradient(135deg, #ff9b2f, #ff6a00);
  color: #fff;
  border-color: #ff9b2f;
}

.userBanner--helper {
  background: linear-gradient(135deg, #00d8c6, #00a9a2);
  color: #fff;
  border-color: #00d8c6;
}

.userBanner--junior-mod {
  background: linear-gradient(135deg, #1f93ff, #006dff);
  color: #fff;
  border-color: #2aa9ff;
}

.userBanner--mod {
  background: linear-gradient(135deg, #1878e8, #0057d8);
  color: #fff;
  border-color: #1f93ff;
}

.userBanner--senior-mod {
  background: linear-gradient(135deg, #1669d6, #003fb0);
  color: #fff;
  border-color: #2a86ff;
}

.userBanner--junior-admin {
  background: linear-gradient(135deg, #3a9dff, #1b6fe6);
  color: #fff;
  border-color: #4cb3ff;
}

.userBanner--admin {
  background: linear-gradient(135deg, #2578ff, #0048c8);
  color: #fff;
  border-color: #2f8cff;
}

.userBanner--senior-admin {
  background: linear-gradient(135deg, #1b4fb8, #082f7f);
  color: #fff;
  border-color: #2c6dff;
}

.userBanner--main-supervisor {
  background: linear-gradient(135deg, #2578ff, #0048c8);
  color: #fff;
  border-color: #2f8cff;
}

.userBanner--deputy-supervisor {
  background: linear-gradient(135deg, #4da0ff, #1f75ff);
  color: #fff;
  border-color: #68b0ff;
}

.userBanner--events {
  background: linear-gradient(135deg, #ffb347, #ff7a00);
  color: #fff;
  border-color: #ffb347;
}

.userBanner--deputy-head-admin {
  background: linear-gradient(135deg, #0e6a3a, #044826);
  color: #fff;
  border-color: #1ec46d;
}

.userBanner--head-admin {
  background: linear-gradient(135deg, #18a84a, #0a7d33);
  color: #fff;
  border-color: #3be06d;
}

.userBanner--special-admin {
  background: linear-gradient(135deg, #e63232, #b80f0f);
  color: #fff;
  border-color: #ff4a4a;
}

.userBanner--developer {
  background: linear-gradient(135deg, #d92b2b, #8d0d0d);
  color: #fff;
  border-color: #ff4545;
}

.userBanner--founder-assistant {
  background: linear-gradient(135deg, #d91f1f, #7a0000);
  color: #fff;
  border-color: #ff5a5a;
}

.label--prefix,
.label.label--prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, .35);
  text-shadow:
    0 0 4px currentColor,
    0 0 8px currentColor;
  box-shadow:
    0 0 8px currentColor,
    inset 0 0 6px rgba(255, 255, 255, .08);
}

.label--prefixRed,
.label.label--prefixRed {
  color: #ff3b3b;
  border-color: #ff3b3b;
  box-shadow: 0 0 8px #ff3b3b, inset 0 0 6px rgba(255,255,255,.08);
}

.label--prefixGreen,
.label.label--prefixGreen {
  color: #2dff72;
  border-color: #2dff72;
  box-shadow: 0 0 8px #2dff72, inset 0 0 6px rgba(255,255,255,.08);
}

.label--prefixGray,
.label.label--prefixGray {
  color: #b9b9b9;
  border-color: #b9b9b9;
  box-shadow: 0 0 8px #b9b9b9, inset 0 0 6px rgba(255,255,255,.08);
}

.label--prefixYellow,
.label.label--prefixYellow {
  color: #ffd84a;
  border-color: #ffd84a;
  box-shadow: 0 0 8px #ffd84a, inset 0 0 6px rgba(255,255,255,.08);
}

Выглядят так.


Инструкция по установке:
1. Скопируйте данный код (выше)
2. Зайдите на свой форум
3. Зайдите в панель управления
4. Найдите вкладку "Внешний вид"
5. Зайдите в "Стили"
6. Выбираете нужный стиль и нажимаете три точки рядом с ним
7. Выбираете "Шаблоны"
8. В поиске вводите Extra.less
9. Заходите в Extra.less и вставляете туда код выше.
10. Сохраняете и заходите в "Группы пользователей"
11. Создаете группу пользователей и выбираете "Другой, использующий своё имя CSS-класса"
12. Вставляете туда, например userBanner--green
13. Сохраняете.
14. Готово.

 

[пи диддии]

Мощный ии

 

[vladislav020]

Мощный ии

Нет, вручную делал