XenForo 2 Less для кастомных баннеров групп

ADMIN

Новичок
Регистрация
18.07.2018
Сообщения
3 221
Баллы
180
Для добавления кастомных баннеров групп как по умолчанию в XF 2, достаточно в настройках групп, указать кастомный класс, допустим для группы "Локализаторы" это выглядит так.

https:/attachments/localiz-png.80326/


Где - userBanner userBanner--localizer, это наш кастомный класс.

И в extra.less добавить такой код.
Код:
 .m-userBannerVariation(@color; @bg; @border: false)
{ color: @color; background: @bg; border-color: xf-intensify(@bg, 10%); & when (iscolor(@border)) { border-color: @border; }
}
.userBanner
{ font-size: 75%; font-weight: @xf-fontWeightNormal; font-style: normal; padding: 1px @xf-paddingMedium; border: 1px solid transparent; border-radius: @xf-borderRadiusSmall; text-align: center; strong { font-weight: inherit; } &.userBanner--localizer{ .m-userBannerVariation(white, #0bbcbc); }
} 
Теперь разберём на примере готового кода, как нам добавить ещё кастомный баннер.
Всё достаточно просто, нам не нужно дублировать весь это большой участок кода, достаточно просто одной строчки.
Код:
&.userBanner--localizer{ .m-userBannerVariation(white, #0bbcbc); }
Где - userBanner--localizer, это наш кастомный класс.
.m-userBannerVariation(Color; @bg; @border: false) - это переменная, которая принимает три параметра, через запятую.
  • Цвет текста - Color;
  • Фон - @bg;
  • Рамка - @border: false, данный параметр является не обязательным, если не указать он будет высчитан сам из цвета фона.
В нашем примере это.
  • Цвет текста - white
  • Фон - #0bbcbc
  • Рамка - Будет высчитана автоматом
Допустим нам нужно добавить баннер для группы "Проверенные".
Прописываем кастомный класс в настройках группы.

https:/attachments/verif-png.80327/

Потом просто дублируем данную строчку:
&.userBanner--localizer{ .m-userBannerVariation(white, #0bbcbc); }

Итоговый код будет такой.
Код:
 .m-userBannerVariation(@color; @bg; @border: false)
{ color: @color; background: @bg; border-color: xf-intensify(@bg, 10%); & when (iscolor(@border)) { border-color: @border; }
}
.userBanner
{ font-size: 75%; font-weight: @xf-fontWeightNormal; font-style: normal; padding: 1px @xf-paddingMedium; border: 1px solid transparent; border-radius: @xf-borderRadiusSmall; text-align: center; strong { font-weight: inherit; } &.userBanner--localizer{ .m-userBannerVariation(white, #0bbcbc); } &.userBanner--verif{ .m-userBannerVariation(white, green); }
} 
Итог у нас такой.
Локализаторы.
https:/attachments/localiz-png.80309/

Проверенные.
https:/attachments/verif-png.80324/
 

dnkls

Новичок
Регистрация
03.02.2019
Сообщения
7
Баллы
3
Ты себе так реализовал баннеры пользователей?
 
Верх