- Ноя
- 129
- 35
Пользователь
[Красивые кастомные префиксы для тем (CSS / LESS)
Как использовать эти префиксы:
Код для добавления в extra.less:
below
Настройка в панели управления XenForo:
Пользуйтесь на здоровье! Если у вас возникнут вопросы по кастомизации — задавайте их в этой теме.
Префиксы тем — это отличный способ визуально упорядочить разделы вашего форума, сделать его более ярким и интуитивно понятным для пользователей. Стандартные стили XenForo часто выглядят скучно, поэтому я подготовил для вас подборку стильных кастомных префиксов, которые выделят важные темы.
Как использовать эти префиксы:
- Зайдите в панель Администратора (Вашего форума)
- Затем перейдите во Внешний вид -> Шаблоны
- Далее в поиске ищете шаблон extra.less
- Открываете его и вставляете код, представленный ниже
Код для добавления в extra.less:
extra.less:
/* Общий базовый стиль для всех префиксов */
.br-prefix {
padding: 3px 8px;
border-radius: 6px;
font-size: 85%;
font-weight: 600;
text-transform: uppercase;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
display: inline-flex;
align-items: center;
gap: 5px;
}
/* Открыто — Яркий зеленый градиент */
.prefix-open {
background: linear-gradient(135deg, #2ecc71, #27ae60);
}
/* Закрыто — Строгий красный градиент */
.prefix-close {
background: linear-gradient(135deg, #e74c3c, #c0392b);
}
/* Важно — Взрывной неоновый желтый/оранжевый */
.prefix-important {
background: linear-gradient(135deg, #f1c40f, #f39c12);
}
/* На рассмотрении — Насыщенный синий */
.prefix-consider {
background: linear-gradient(135deg, #3498db, #2980b9);
}
/* Рассмотрено — Глубокий бирюзовый */
.prefix-reviewed {
background: linear-gradient(135deg, #1abc9c, #16a085);
}
/* Одобрено — Мягкий лаймовый/зеленый */
.prefix-approved {
background: linear-gradient(135deg, #a3cb38, #009432);
}
/* Ожидание — Спокойный фиолетовый */
.prefix-waiting {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
}
/* Передано Тех Специалисту — Фирменный золотой/премиум */
.prefix-tech {
background: linear-gradient(135deg, #f39c12, #d35400);
border: 1px solid #e67e22;
}
/* Информация — Свежий информационный синий */
.prefix-info {
background: linear-gradient(135deg, #00d2ff, #0066ff);
}
Настройка в панели управления XenForo:
После того как вы сохранили код в extra.less, вам нужно связать его с самим префиксом темы:
- Перейдите в: Форумы -> Префиксы тем -> Добавить префикс (или отредактируйте существующий).
- В блоке Стиль выберите пункт "Другой, используя свой CSS-класс".
- В поле ввода укажите название класса из кода выше, например: prefix prefixCustom-important (обязательно через пробел после слова prefix).
- Сохраните изменения.
Пользуйтесь на здоровье! Если у вас возникнут вопросы по кастомизации — задавайте их в этой теме.