Код: Выделить всё

[more={TEXT1}]{TEXT2}[/more]

Код: Выделить всё

<dl class="codebox"><dt>{TEXT2} | <a href="javascript&#058; void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = '-'; } else { spoiler.style.display = 'none'; this.innerHTML = '+'; };">+</a></dt><dd style="background-color: #f8f5ef; display: none;">{TEXT1}</dd></dl>
Стандартный BBcode скрытого текста. Хочу использовать его в качестве примечаний в тексте поста. То есть, во-первых нужно, чтобы он оставался в той же строке (то есть рядом со словом, к которому его нужно поставить; во-вторых, не “перепрыгивал” на начало другой строки; и третье — вместо длиннющей полосы на всю ширину, оставалось только: примерно так: —слово*+”. А дальше опять с той же позиции продолжается текст. Само примечание в скрытом тексте. И если только нажать на +, появится скрытый текст.
Комментарии: 32

CabinetAdmin 23 окт 2023, 20:32 Сообщение

А открывающийся блок должен как появляться? Раздвигая текст или типа всплывашки?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 23 окт 2023, 20:34 Сообщение

CabinetAdmin, Раздвигая тект. Кто хочет — открыл и посмотрел. Кто не хочет, не обращает внимания и читает дальше.
  • 0

CabinetAdmin 23 окт 2023, 20:47 Сообщение

Тогда так:

Код: Выделить всё

<dl class="codebox" style="display: inline-flex;"><dt>{TEXT2} | <a href="javascript&#058; void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = '-'; } else { spoiler.style.display = 'none'; this.innerHTML = '+'; };">+</a></dt><dd style="background-color: #f8f5ef; display: none;">{TEXT1}</dd></dl>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 23 окт 2023, 21:06 Сообщение

   Класс. Нужно только “отшлифовать” немного. Во-первых беловатый цвет не нужен. Просто чтобы оставался фон сообщения. Само пояснение должно быть другим шрифтом. Где это исправить в вашем коде?
  • 0

CabinetAdmin 24 окт 2023, 17:22 Сообщение

Это уже тянется из стилей от класса codebox, т.е. нужно удалить class="codebox".
Далее. В коде есть цвет фона у раскрытого элемента: background-color: #f8f5ef;. Если он тоже не нужен, то его тоже удалить, а на его место добавить font-family: Arial; (Arial - имя шрифта, заменить на любое на свой вкус).
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 24 окт 2023, 19:37 Сообщение

Изображение

Код: Выделить всё

<dl style="display: inline-flex;"><dt>{TEXT2} <a href="javascript&#058; void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = '-'; } else { spoiler.style.display = 'none'; this.innerHTML = '*'; };">*</a></dt><dd style= "background-color: #f8f5ef; display: none;">{TEXT1}</dd></dl>
Я сознательно убрал все лишнее (|, + и -) и заменил на *
Есть ли возможность придвинуть звездочку вплотную к слову, к которому есть пояснение и прямо в замене HTML красного цвета?
Насчет

Код: Выделить всё

background-color: #f8f5ef;
Это остается. Где конкретно добавлять

Код: Выделить всё

font-family: Tektur; 
? Я поставил сразу после

Код: Выделить всё

dd style=
— только сбило ббкод. Стиль Tektur — это один из шрифтов Google, который подключен и корректно работает на форуме.
  • 0

CabinetAdmin 24 окт 2023, 20:45 Сообщение

Вот так:

Код: Выделить всё

style="background-color: #f8f5ef; font-family: Tektur; display: none;"
и пробела после style= быть не должно.
Питер писал(а): 24 окт 2023, 19:37 придвинуть звездочку вплотную к слову
Пробел надо удалить сразу после {TEXT2}. Красный цвет:

Код: Выделить всё

<a style="color: red;" href="javascript&#058; void(0);"
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 25 окт 2023, 07:39 Сообщение

   CabinetAdmin,

Код: Выделить всё

<a style="color: red;" href="javascript&#058; void(0);"
сбивает код (пропадают превращение курсора мышки в “руку”. Удалил. На данный момент

Код: Выделить всё

<dl style="display: inline-flex;"><dt>{TEXT2}<a href="javascript&#058; void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = '-'; } else { spoiler.style.display = 'none'; this.innerHTML = '*'; };">*</a></dt><dd style="background-color: #f8f5ef; font-size: 80%; font-family: Tektur; display: none;">{TEXT1}</dd></dl>
Все корректно работает. Только выделить звездочку цветом.
  • 0

CabinetAdmin 26 окт 2023, 16:36 Сообщение

Дык, style="color: red;" как раз и выделял звёздочку цветом...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 26 окт 2023, 16:43 Сообщение

Звездочка, да, становится красной. Но, добавив этот фрагмент, так как написал выше, пропадает превращение курсора мышки в “руку”. Возможно поставил не в том месте? Полный код на данный момент приведен выше. Куда вписать style="color: red;" чтобы и то (цвет) и эффект “руки” работали корректно?
  • 0

CabinetAdmin 26 окт 2023, 17:55 Сообщение

Можно добавить класс и прописать стили, можно использовать уже существующие, например:

Код: Выделить всё

<a class="icon icon-red" href="javascript&#058; void(0);"
либо:

Код: Выделить всё

<a class="error" href="javascript&#058; void(0);"
либо придумать свой класс и свой вариант цвета. например:

Код: Выделить всё

<a class="more-open" href="javascript&#058; void(0);"

Код: Выделить всё

.more-open {
	color: red;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 26 окт 2023, 18:15 Сообщение

Честно говоря, не совсем понял. Где эти варианты (один из них) прописывать?
  • 0

CabinetAdmin 27 окт 2023, 16:36 Сообщение

Ну как..., ну вот в коде:

Код: Выделить всё

<dl style="display: inline-flex;"><dt>{TEXT2}<a href="javascript&#058; void(0);"
последний фрагмент, добавляете в него класс из примера и пробуете.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 27 окт 2023, 16:47 Сообщение

   Я “чайник” в этом. Где именно в этой строке добавить фрагмент, чтобы “звездочка” покраснела? Я поставил, но сбился код — пропал эффект курсора мышки (превращение а “руку”. Вы можете просто написать как должна выглядеть строка?
  • 0

Похожие темы