XF 2.3 Оформление BB-Code OFF TOP

[Shumasick]

Приветствую. Ребята, интересует такой вопрос. Подскажи пожалуйста как можно создать точно такой-же BB-Code с таким-же оформлением как у вас на этом примере.

OFFTOP

Я об этом

И что нужно прописать в EXTRA.css с таким-же оформлением и увеличением при наведение курсора.

---

Заранее спасибо.

 

[25517]

Shumasick, Результаты поиска по запросу: Offtop

Буквально первая ссылка в поиске.

 

[Shumasick]

Shumasick, Результаты поиска по запросу: Offtop

Буквально первая ссылка в поиске.

Прошу прощения не воспользовался поиском. Спасибо Вам!

 

[Shumasick]

Возможно кому-нибудь пригодиться. Попытался сделать свой вариант пока ждал ответа в данной теме.

<div class="custom-box hover-effect" style="border-width: 1px 1px 1px 3px; border-style: solid; border-color: #ff4500; padding: 12px; transition: all 0.3s ease; margin-top: 10px;">
    <div class="box-title" style="background-color: #ff0000; color: white; padding: 2px 4px; font-weight: bold; position: relative; top: -25px; background: linear-gradient(to right, #ff0000, #ff0000); display: inline-block; margin-left: 25px;">
        <xf:fa icon="fas fa-exclamation-triangle" style="margin-right: 5px;" />Предупреждение
    </div>
    <div class="box-content" style="padding: 5px 10px; background-color: #e0e0e0; width: 100%; height: 100%; box-sizing: border-box; color: #000000; margin-top: -13px;">{text}</div>
</div>

Результат

Вставить код ниже в extra.less

.box-title::before {
    .m-faIcon(@fa-var-exclamation-triangle);
    margin-right: -2px;
}

---

Но это всё равно не тот результат, которого я хотел добиться. Но как на первое время думаю подойдёт.

 

[25517]

Shumasick, только лучше так не делать.
<xf:fa icon= убрать, ибо это уже ставится через extra.less.

Стили лучше устанавливать через extra.less.
Потому что при смене стиля - можно потом долго искать откуда ноги растут.
Да и в целом выглядит более опрятно.

В теории должно работать точно также, в случае чего - можно поправить.

<div class="custom-bbcode--warning">
    <div class="box-title">Предупреждение</div>
    <div class="box-content">{text}</div>
</div>

Это добавить в extra.less

extra.less

.custom-bbcode--warning
{
    border-width: 1px 1px 1px 3px;
    border-style: solid;
    border-color: #ff4500;
    padding: 12px;
    transition: all 0.3s ease;
    margin-top: 10px;

    .box-title
    {
        background-color: #ff0000;
        color: white;
        padding: 2px 4px;
        font-weight: bold;
        position: relative;
        top: -25px;
        background: linear-gradient(to right, #ff0000, #ff0000);
        display: inline-block;
        margin-left: 25px;
       
        &::before
        {
            .m-faIcon(@fa-var-exclamation-triangle);
            margin-right: -2px;
        }
    }

    .box-content
    {
        padding: 5px 10px;
        background-color: #e0e0e0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        color: #000000;
        margin-top: -13px;
    }
}

 

[Shumasick]

Shumasick, только лучше так не делать.
<xf:fa icon= убрать, ибо это уже ставится через extra.less.

Стили лучше устанавливать через extra.less.
Потому что при смене стиля - можно потом долго искать откуда ноги растут.
Да и в целом выглядит более опрятно.

В теории должно работать точно также, в случае чего - можно поправить.

<div class="custom-bbcode--warning">
    <div class="box-title">Предупреждение</div>
    <div class="box-content">{text}</div>
</div>

Это добавить в extra.less

extra.less

.custom-bbcode--warning
{
    border-width: 1px 1px 1px 3px;
    border-style: solid;
    border-color: #ff4500;
    padding: 12px;
    transition: all 0.3s ease;
    margin-top: 10px;

    .box-title
    {
        background-color: #ff0000;
        color: white;
        padding: 2px 4px;
        font-weight: bold;
        position: relative;
        top: -25px;
        background: linear-gradient(to right, #ff0000, #ff0000);
        display: inline-block;
        margin-left: 25px;
      
        &::before
        {
            .m-faIcon(@fa-var-exclamation-triangle);
            margin-right: -2px;
        }
    }

    .box-content
    {
        padding: 5px 10px;
        background-color: #e0e0e0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        color: #000000;
        margin-top: -13px;
    }
}

Вау. Так тоже всё отлично сработало. На заметку возьму себе вашу памятку. Спасибо.
P.S. Жаль не могу + к репутации поставить.

 

[Shumasick]

25517. Может у Вас получится довести мою задумку если есть желание.

Возможно ли реализовать систему предупреждений, чтобы текст где "Предупреждения" был таким "Предупреждение от модератора (Здесь ник пользователя кто прожимал иконку BB-Code). Он должен вставляться автоматически, а ниже сделать через нумерованный список "Причину". Так-же, чтобы рамка до Предупреждения" был таким "Предупреждение от модератора (Здесь ник пользователя кто прожимал иконку BB-Code) и после прерывалась, а дальше так-же продолжалась? Просто сейчас если я убираю красный фон, то моя надпись идёт по линии, нужного обрыва до и после нет.

У меня на скриншоте добавлено поле куда вводится сообщение и оно имеется фон(цвет) только в этом самом поле. Возможно его сделать так, и реализовать это как сделано здесь: [SVG] Offtop (То есть вся рамка в выбранном цвете.

Скриншот

Сам код в теме выглядит таким образом:

Скриншот

[WARNINGBOX=]Здесь нельзя выставить Маркированный список

• Здесь(Здесь можно)
• Проверка(Здесь можно)

[/WARNINGBOX]

Изначально код хочет, чтобы текст начинался здесь так [WARNINGBOX=]Вот здесь, но я хочу, чтобы можно было нажать ENTER и маркированный список так-же работал.[/WARNINGBOX]. А он сейчас работает вот так:

Скриншот

То есть он весь блок уводит в маркированный список, а не поле которое внутри рамки.

---

Пожалуйста, 25517, помогите разобраться если есть на это время.