Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Префиксы тем

Ноя
129
35
Пользователь
[Красивые кастомные префиксы для тем (CSS / LESS)

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



Как использовать эти префиксы:
  1. Зайдите в панель Администратора (Вашего форума)
  2. Затем перейдите во Внешний вид -> Шаблоны
  3. Далее в поиске ищете шаблон extra.less
  4. Открываете его и вставляете код, представленный ниже



Код для добавления в 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);
}
below



Настройка в панели управления XenForo:
После того как вы сохранили код в extra.less, вам нужно связать его с самим префиксом темы:​
  • Перейдите в: Форумы -> Префиксы тем -> Добавить префикс (или отредактируйте существующий).
  • В блоке Стиль выберите пункт "Другой, используя свой CSS-класс".
  • В поле ввода укажите название класса из кода выше, например: prefix prefixCustom-important (обязательно через пробел после слова prefix).
  • Сохраните изменения.

Пользуйтесь на здоровье! Если у вас возникнут вопросы по кастомизации — задавайте их в этой теме.
 

Вложения

  • IMG_20260713_202233.jpg
    IMG_20260713_202233.jpg
    57.2 KB · Просмотры: 2
Сверху