Создаем объявление

Совместимость с XenForo

Загружаем содержимое архива и
Создаем новое объявление /admin.php?notices/add.

Настройка объявления
Заголовок: Указываем какой надо
Сообщение:

HTML:

<link rel="stylesheet" href="/styles/notice/css/bubl.css">
<div class="notice--example">
    <h1>Добро пожаловать!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur adipisci qui repellendus <buy>500 рублей!</buy> lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero repellat consequuntur voluptates illo officiis. Ipsum minus, ad expedita quisquam sed. Consequatur adipisci qui repellendus.</p>
    <a href="#" data-xf-click="overlay" class="button button--primary button--icon--example">       
       <span class="button-text">Оформить подписку</span>       
    </a>
</div>
<div class="bubl1"></div>
<div class="bubl2"></div>
<div class="bubl3"></div>

Изображение: Без изображения
Ui.X Icon (для стилей UI.X): Оставляем пусто
Стиль отображения: Другой, используя своё имя CSS-класса: notice-example (класс для примера, указывайте какой вам нравится)
Видимость: Ни когда не скрывать
Тип объявления: Блочное
Настройки: Здесь главное отметить активность объявления, остальное можно не отмечать
Порядок отображения: Этот параметр устанавливается в зависимости от порядка отображения объявлений,

Критерии пользователя
Настраиваем как вам надо, в зависимости для кого надо отображать объявление.

Критерии страницы
Здесь тоже можно разные параметры настроить, но мы делаем объявление для главной, значит выбираем пункт:
Шаблоном контента является: forum_list

Делаем стиль объявления

Я подумал, как подключить стиль для объявления, как бы есть несколько вариантов, просто сунуть css в само сообщение для объявления, можно подключить в extra.less, это удобнее, что можно использовать less и переменные xenforo, но не удобно тем, если используется несколько стилей, надо в каждом вставить код, можно модификацией шаблона extra.less, удобнее и будет во всех стилях.

Создаем модификацию шаблона

Шаблон: extra.less
Ключ модификации: notice_example
Описание: Объявление
Тип поиска: Регулярное выражение
Найти: #^.*$#su
Заменить:

Less:

$0
@font-face {
    font-family: 'SKODANextArabic';
    src: url('/styles/notice/fonts/SKODANextArabic-Regular.woff2') format('woff2'),
         url('/styles/notice/fonts/SKODANextArabic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SKODANextArabic';
    src: url('/styles/notice/fonts/SKODANextArabic-Bold.woff2') format('woff2'),
         url('/styles/notice/fonts/SKODANextArabic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'SolomonSans';
    src: url('/styles/notice/fonts/Solomon-Sans-Normal.woff2') format('woff2'),
         url('/styles/notice/fonts/Solomon-Sans-Normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SolomonSans';
    src: url('/styles/notice/fonts/Solomon-Sans-Bold.woff2') format('woff2'),
         url('/styles/notice/fonts/Solomon-Sans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

.notice {
    &.notice-example {
        background: rgb(48,55,57) url(/styles/notice/images/notice-bg.jpg) no-repeat top;
        background-size: cover;
        color: #fff;
        overflow: hidden;
        position: relative;
        border: none;
        .uix_noticeIcon {
            display: none;
        }
        .notice--example {
            background: transparent url(/styles/notice/images/notice-logo.png) no-repeat 98% 50%;
            background-size: 160px;
            padding: 1em;
            z-index: 2;
            h1 {
                font-family: 'SKODANextArabic';
                font-size: 2.2em;
                font-weight: bold;
                text-transform: uppercase;
                background: linear-gradient(330deg, #130E54 0%, #C6AAD1 25%, #130E54 50%, #C6AAD1 75%, #130E54 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                -webkit-text-stroke: 1px #fff;
                padding: 0;
                margin: 0;                  
            }
            p {
                font-family: 'SolomonSans';
                font-size: 1em;
                max-width: 85%;
                padding: 0;
                margin: 0;
                buy {
                    font-size: 1em;
                    font-weight: bold;
                    color: red;              
                }
                @media (max-width: @xf-responsiveWide) {
                    max-width: 100%;
                }
            }
            a {
                margin-top: 1em;
                &.button--icon--example {
                    .button-text {
                        font-family: 'SolomonSans';
                        font-weight: bold;
                        text-transform: uppercase;
                        &:before {
                            .m-faBase();
                            .m-faContent(@fa-var-wallet);
                            margin-right: 3px;
                        }
                    }
                }
            }
            @media (max-width: @xf-responsiveWide) {
                background: transparent;
            }
            @media (max-width: @xf-responsiveMedium) {
                font-size: 90%;
            }
            @media (max-width: @xf-responsiveNarrow) {
                font-size: 80%;
            }          
        }
    }
}

Плагин: Должно быть пустым

Получаем