Красивый вид OFFTOP

[KnyazevGik]

Всем привет , кому нужно то юзайте, седня сделаем такой вид оффтопа:

Для начала включим режим разработчика, либо с помощью плагина :

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Либо через src/config.php :
$config['development']['enabled'] = true;
Итак , после того как мы включили режим разработчика , мы заходим в содержимое

Затем в Пользовательские BB-коды

Там мы ищем наш собственный бб код (OFFTOP)
И заходим в него, ставим галочку в Режиме замены:
Простая замена:

Затем спускаемся ниже и находим Замена HTML

Туда вставляем этот код.

<fieldset class="pf-offtop">
    <legend data-xf-init="tooltip" data-original-title="ОФФТОП — это сообщения, которые не относятся к данной теме">💬 OFFTOP</legend>
    <p>{text}</p>
</fieldset>

Когда вы все вставили , то сохраняйте, потом переходите в шаблон extra.less И там вставляйте этот код:

fieldset.pf-offtop {
    padding: 6px 12px 8px;
    border-radius: 12px;
    border: 3px solid #29b0f4;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    transition: background 0.3s ease;
    
    legend
    {
        font-weight: 600;
        padding: 2px 8px;
        margin-left: 10px;
        border-radius: 8px;
        font-size: 14px;
        color: #29b0f4;
        background-color: rgba(41, 176, 244, 0.15);
        transition: background-color 0.3s ease, font-size 0.3s ease;
    }
    
    &:hover legend
    {
        font-size: 15px;
        background-color: rgba(41, 176, 244, 0.25);
    }
    
    p
    {
        margin: 0;
    }
}

Готово, если вы сделали все правильно, то у вас сменится вид OFFTOP,

OFFTOP

после всей этой процедуры, на забудьте выключить режим разработчика