Welcome!

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

SignUp Now!

Префиксы тем

Ноя
129
37
Пользователь
2.20. Запрещено публиковать ответы, сгенерированные при помощи ChatGPT или аналогичных ИИ-моделей.
[Красивые кастомные префиксы для тем (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 · Просмотры: 16
Дек
361
62
Пользователь
2.20. Запрещено публиковать ответы, сгенерированные при помощи ChatGPT или аналогичных ИИ-моделей.
OFFTOP


1784378021724.png

 
Сверху