Как сделать градиентные надписи званий участников форума на Invision Community 4.x.x

[фанфорум]

Делаем градиентные надписи званий участников форума на Invision Community 4.x.x

[фанфорум]

Создаём градиентные надписи групп пользователей, на примере Invision Community v4.7.13
 

Идём в админ панель форума и переходим в "пользователи" —> "группы"

 

Выбираем нужную нам группу пользователей и нажимаем на "изменить"


Выбираем поле "Форматирование группы" и вариант "Использовать HTML"


При нажатии на "Использовать HTML" в поле форматирования группы отобразит открывающий и закрывающий элемент strong ^{(делает шрифт жирным)}


Теперь перед первым <strong> вставляем следующий код
 

<span style="font-weight: 800;background: linear-gradient(75deg, #035f2c 28%, #15a857 72%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;color: #15a857;font-weight: bold;"><i class="fa fa-cogs"></i>

 

Сохраняем изменения, после чего надпись измененной группы пользователей будет с зелёным градиентом и с шестерёнками слева.
Пример на скрине

Если вы желаете сделать надпись с градиентом другого цвета, вам нужно выбрать начальный и конечный цвет.
Код цвета можно выбрать в Photoshop или на специальном сайте, наберите в поиске Google "html color picker"

Копируете в блокнот, для правки,  указанный мной выше код и меняете там значения #035f2c (тёмно зелёный ) и #15a857 (светло зелёный, повторяется дважды) - на выбранные вами коды других цветов.

А как убрать или заменить шестерёнки?
В указанном мною коде - это:

<i class="fa fa-cogs">

Удалите данный код, если не нужна вам такая иконка в названии группы пользователей.
Чтоб поставить другую, переходите на сайт Font awesome, в раздел v4 icons, где можно увидеть множество кодов разных иконок.
К примеру если надо заменить в моём коде шестерёнку на велосипед, меняем значение "fa fa-cogs" на "fa fa-bicycle"

Пример кода для группы "Меломаны", на моём форуме
 

<span style="font-weight: 800;background: linear-gradient(75deg, #9d01ff 28%, #cc21b7 72%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;color: #cc21b7;font-weight: bold;"><i class="fa fa-music"></i>

 

Выглядит это так