- Автор темы
- Администратор
- Модер.
- Команда форума
- #1
Данное решение подойдет, как для префиксов тем, так и для баннеров пользователей.
Добавьте в extra.less:
Для новичков:
В настройках стиля отображения баннера / префикса укажите
Где

Добавьте в extra.less:
Less:
@svgPrefixBorderRadius: @xf-borderRadiusSmall; // Радиус префиксов
@svgPrefixColorGradient: rgba(0,0,0,0); // Цвет градиента прификса (не используется)
@svgPrefixTextShadow: rgba(0,0,0,0); // Цвет тени префикса (не используется)
.svgLabelPrefix(@prefix-name, @prefix-color, @prefix-icon: "none") {
.svgPrefix,
.label.svgPrefix {
font-size: 80%;
font-weight: 400;
text-align: center;
align-items: center;
padding: 1px 6px;
border: 1px solid @prefix-color; /* Оставляем цветной бордер */
border-radius: 10px;
font-style: normal;
position: relative;
white-space: nowrap;
background: transparent; /* Убираем фон */
.fsp & {
margin-right: 5px;
}
.menuPrefix& {
display: inline-block;
font-size: 1.3em;
width: 100%;
padding: .333em;
a& {
text-decoration: none;
}
}
.p-title-value & {
.p-title & {
font-size: 70%;
}
}
&:before {
position: absolute;
top: .25em; /* Базовое положение */
bottom: 0;
left: .333em;
}
&.@{prefix-name} {
color: @prefix-color; /* Цвет текста как у бордера */
text-shadow: none; /* Отключаем тень */
border-color: @prefix-color; /* Явно указываем цвет бордера */
/* Добавляем подсветку через box-shadow */
box-shadow: 0 0 10px fade(@prefix-color, 90%);
&when not (@prefix-icon = "none") {
padding: .25em .5em .25em 1.75em;
&:before {
.m-faBase();
.m-faContent(@prefix-icon);
/* Смещаем иконку чуть ниже */
top: .35em; /* Увеличиваем значение для смещения вниз */
}
}
}
}
}
.svgLabelPrefix(player, rgb(255, 199, 0), @fa-var-gamepad);
.svgLabelPrefix(tex, rgb(55, 63, 215), @fa-var-code);
.svgLabelPrefix(pod, rgb(247, 75, 180), @fa-var-user-headset);
Для новичков:
Less:
.svgLabelPrefix(УКАЗАТЬ НАЗВАНИЕ ПРЕФИКСА/ГРУППЫ, rgb(УКАЗАТЬ ЦВЕТ), @fa-var-УКАЗАТЬ ИКОНКУ FONT AWESOME);
В настройках стиля отображения баннера / префикса укажите
svgPrefix player
Где
player
используйте заданное Вами название префикса / группы.