Гайд Создаем уведомления в темах | xenForo

[DESALIN]

Уведомления в темах с цветными баннерами​

С помощью рекламного блока и простого условия xf:if, можно создать внутритемовые уведомления, которые будут отображаться:

• только в нужных темах
• для нужных пользователей
• в нужных цветах (по смыслу: ошибка, информация, подтверждение и т.д.)

Шаг 1: Создание рекламного блока​

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

• Позиция: Просмотр темы: ниже списка сообщений (или выше — на ваше усмотрение)
• Тип содержимого: HTML
• Включи режим условий показа (расширенный)

Пример шаблона уведомления (на основе ID темы)

Красное уведомление (ошибка, предупреждение)

<xf:if is="{$thread.thread_id} == 123">
    <div class="thread-notice red">
        <div class="item thread-notice--icon"></div>
        <div class="item thread-notice--text">
            Это критическое уведомление. Пожалуйста, обратите внимание!
        </div>
    </div>
</xf:if>

Зелёное (успех, подтверждение)

<xf:if is="{$thread.thread_id} == 123">
    <div class="thread-notice green">
        <div class="item thread-notice--icon"></div>
        <div class="item thread-notice--text">
            Операция завершена успешно!
        </div>
    </div>
</xf:if>

Синее (информация)

<xf:if is="{$thread.thread_id} == 123">
    <div class="thread-notice blue">
        <div class="item thread-notice--icon"></div>
        <div class="item thread-notice--text">
            Информационное уведомление.
        </div>
    </div>
</xf:if>

Жёлтое (внимание, предупреждение)

<xf:if is="{$thread.thread_id} == 123">
    <div class="thread-notice yellow">
        <div class="item thread-notice--icon"></div>
        <div class="item thread-notice--text">
            Внимание! Проверьте информацию.
        </div>
    </div>
</xf:if>

Шаг 2: Условие для нескольких тем​

Чтобы уведомление отображалось в нескольких темах:

<xf:if is="in_array({$thread.thread_id}, [123, 456, 789])">
    ...контент уведомления...
</xf:if>

Шаг 3: Стилизация в extra.less​

Добавь этот CSS в шаблон extra.less:

/* === THREAD NOTICE === */
.thread-notice {
    display: flex;
    align-items: center;
    border: 1px solid;
    padding: 10px 0;
    margin-bottom: 20px;

    .item {
        padding: 0 10px;

        &.thread-notice--icon {
            width: 10%;
            position: relative;

            &:before {
                .m-faBase();
                font-size: 2.5em;
                position: absolute;
                top: 50%; left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }

    &.red {
        color: red;
        border-color: red;

        .thread-notice--icon:before {
            .m-faContent(@fa-var-exclamation-circle);
        }
    }

    &.green {
        color: green;
        border-color: green;

        .thread-notice--icon:before {
            .m-faContent(@fa-var-check-circle);
        }
    }

    &.blue {
        color: blue;
        border-color: blue;

        .thread-notice--icon:before {
            .m-faContent(@fa-var-info-circle);
        }
    }

    &.yellow {
        color: yellow;
        border-color: yellow;

        .thread-notice--icon:before {
            .m-faContent(@fa-var-radiation-alt);
        }
    }
}