Инструкция Двух цветные банеры пользователей!

В данной теме я покажу как зделать вот такие двух цветные банеры на свой форум! (Цвет для роли можете указать свой).​

​

---

Для начала нужно вставить код ниже в extra.less

.customBanner {
color: white;
text-align: center;
font-size: 87%;
font-style: normal;
border: none;
border-radius: 10px;
padding: 1px 10px 3px;

&.banner1 {
background: linear-gradient(90deg, #191970 25%, #000000 100%, #000000);
}

&.banner2 {
background: linear-gradient(90deg, #C0C0C0 25%, #C0C0C0 100%, #000000);
}

&.banner3 {
background: linear-gradient(90deg, #778899 25%, #778899 100%, #000000);
}

&.banner4 {
background: linear-gradient(90deg, #cb2d3e, #ef473a);
}

&.banner5 {
background: linear-gradient(90deg, #008080, #001a1a);
}

&.banner6 {
background: linear-gradient(90deg, #008000, #001a00);
}

&.banner7 {
background: linear-gradient(90deg, #4b6cb7, #182848);
}

&.banner8 {
background: linear-gradient(90deg, #36f, #09bd72);
}

&.banner9 {
background: linear-gradient(90deg, #DAA520, #300052);
}

&.banner10 {
background: linear-gradient(90deg, #310062, #120a8f);

}

&.banner11 {
background: linear-gradient(90deg, #008080, #004d4d);

}

&.banner12 {
background: linear-gradient(90deg, #DC143C, #4f0716);

}

&.banner13 {
background: linear-gradient(80deg, #f02424, #008f8f);

}

&.banner14 {
background: linear-gradient(80deg, #a30b0b, #050404);

}

&.banner15 {
background: linear-gradient(80deg, #30d5c8, #00a550);

}

&.banner16 {
background: linear-gradient(80deg, #30d5c8, #135e58);

}

&.banner17 {
background: linear-gradient(80deg, #1e5945, #006666);

}

&.banner18 {
background: linear-gradient(80deg, #7442c8, #9400d3);
}

&.banner19 {
background: #7cc3e0;
border-color: #53b0d6;
}
}

---

В настройках группы пользователя в строку Другой, используя своё имя CSS-класса вставляем customBanner bannerX (X) - номер банера, пример: 1!

---

Теперь я расскажу как изменить 2 цвета в одном баннере (для тех кто не понимает).

&.banner1 {

background: linear-gradient(90deg, #191970 25%, #000000 100%, #000000);

}

В данном банере три html цвета #191970, #000000, #000000 (синий, чорный, чорный).
Все цвета в html можете посмотреть - https://colorscheme.ru/html-colors.html

---

Дальше нужно выбрать сколько какого либо цвета будет больше в нашем баннере за это отвечают проценты после html цвета #000000 56%, это значит что баннер будет чорного цвета на 56%, а остольные 44% будут не закрашены.

---

Приятной разработки своего форума!​

от: Kenny_Macalister​

 

Хмм

 

Имба

 

Поверю

Помогите не работает

 

Вот исправленная версия кода:

.customBanner {
  color: white;
  text-align: center;
  font-style: normal;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  padding: 1px 10px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 87%;
}

.customBanner span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 1em;
}

.customBanner.banner1 {
  background: linear-gradient(90deg, #191970 25%, #000000 100%, #000000);
}

.customBanner.banner2 {
  background: linear-gradient(90deg, #FF4500 25%, #8B0000 100%, #8B0000);
}

.customBanner.banner3 {
  background: linear-gradient(90deg, #008000 25%, #006400 100%, #006400);
}

.customBanner.banner4 {
  background: linear-gradient(90deg, #4B0082 25%, #000080 100%, #000080);
}

.customBanner span {
  font-size: 87%;
}

.customBanner span {
  max-width: 100%;
}