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, помогите разобраться если есть на это время.

 

[25517]

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

Для начала, один вопрос - одна тема. 6.13

(Здесь ник пользователя кто прожимал иконку BB-Code)

Сомнительное, как по мне, решение.
Учитывая, что в самом посте и так видно, кто написал. Но ладно.



Реализовать это дело можно плагином.
Либо самостоятельно, либо через Ищу исполнителя.

По остальному сказать не могу, я не знаю как и какие параметры вы выставляли.

если есть на это время

Времени у меня, как раз, и нет.

 

[Shumasick]

Для начала, один вопрос - одна тема. 6.13

Прошу прощения :(

Сомнительное, как по мне, решение.
Учитывая, что в самом посте и так видно, кто написал. Но ладно.

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

Реализовать это дело можно плагином.

Это для меня нереальная задача.

Либо самостоятельно, либо через Ищу исполнителя.

Буду иметь ввиду.

Времени у меня, как раз, и нет.

Услышал Вас. Благодарю за ответ.