Как протестировать

Перед отправкой на проверку вёрстку можно посмотреть прямо на форуме - без установки, через инструменты разработчика в браузере. Изменения видны только вам и пропадут после обновления страницы.

Порядок действий

1. Откройте свою тему на форуме.

2. Нажмите F12 (или Ctrl+Shift+I, на macOS - Cmd+Option+I) и перейдите на вкладку Elements.

3. Нажмите Ctrl+F в панели элементов и найдите messageContent — первое совпадение относится к первому сообщению темы.

4. Внутри него раскройте тег <article>, кликните по нему правой кнопкой и выберите Edit as HTML.

5. Замените содержимое <article> на вашу вёрстку вместе с блоком <style> и нажмите Ctrl+Enter.

<div class="messageContent">
  <article>
    <!-- сюда вставляется ваша вёрстка -->
    <div class="my-theme">
      ...
    </div>
    <style>
      .my-theme { ... }
    </style>
  </article>
</div>

На что обратить внимание

• Проверьте отображение на узком экране - сузьте окно браузера или включите режим устройства (Ctrl+Shift+M).

• Убедитесь, что стили не затронули другие сообщения, кнопки и остальные элементы страницы.

Ограничение

Теги xf:username, xf:avatar, xf:date и выражения {{ ... }} обрабатываются на сервере - в DevTools они не сработают. На этапе теста подставьте вместо них статичные значения, а серверный синтаксис добавьте перед отправкой на проверку.