Гайд Как создать кастомный HTML-виджет в XenForo

[wlux.net]

Как создать кастомный HTML-виджет в XenForo​

Если вы хотите разместить на форуме блок с произвольным содержимым — текст, иконки, ссылки, рекламные материалы — подойдёт HTML-виджет, который легко настраивается и не требует создания отдельных шаблонов.

Шаг 1: Создание виджета​

Перейди в:
Админка → Внешний вид → Виджеты → Добавить виджет

• Тип виджета: HTML
• Ключ: custom_widget (например)
• Заголовок: на своё усмотрение (например: «Полезные ссылки»)
• Позиция отображения: выбери нужное место (например: боковая панель, футер и т.д.)
• Режим: включи расширенный режим

Шаблон HTML-виджета

<div class="block custom-widget" {{ widget_data($widget) }}>
    <div class="block-container">
        <h3 class="block-minorHeader">Название виджета</h3>
        <div class="block-body block-row">
            Содержимое виджета
        </div>
        <div class="block-footer">
            Содержимое футера виджета
        </div>
    </div>
</div>

Полезные настройки:

Убрать заголовок — просто удалите эту строку:

<h3 class="block-minorHeader">Название виджета</h3>

Добавить иконку в заголовок:

<h3 class="block-minorHeader"><xf:fa icon="fa-comments" /> Название виджета</h3>

Свой класс оформления — custom-widget позволяет задать стили только этому виджету через extra.less

Пример оформления в extra.less

.custom-widget {
    background: #f9f9f9;
    border: 1px solid #ccc;

    .block-body {
        font-size: 14px;
        color: #333;
    }

    .block-footer {
        font-size: 12px;
        color: #888;
        text-align: right;
    }
}