Как сделать обычный ббсоде "скрытый текст" (типа more), но чтобы можно было изменить цвет фона?
Комментарии: 28

CabinetAdmin 21 июл 2018, 10:51 Сообщение

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

ПитерПетр 21 июл 2018, 13:16 Сообщение

Давайте так.
Пример:

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

[more=Заголовок|#ede7d9]Скрытый текст[/more]
Замена:

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

<div id="spoil_wrap">
	<div title="Скрытый текст" class="spoil_title" onclick="hidn = this.parentNode.getElementsByTagName('div')[1]; btn = this.getElementsByTagName('img')[0]; if (hidn.style.display != '') { hidn.style.display = ''; orimg = btn.src; btn.src = 'data:image/gif;base64,R0lGODlhCQAJAMQeAOLt+ff8//z+/4CRxo2by7vF6a254X6PxICQw87a74CQxuXo84CQxM/b7/H6/v7+/oGRxouayoGSxv7+/8LN7IqZyv7//4KSxur0/MrV74OTx9Ld8trl9gwMDP///wAAACH5BAEAAB4ALAAAAAAJAAkAAAU4oFcpwzFAkWgUVLZxCQGxLgdgGtS+t6NJmY5QOEFcNo/kZGLRXGwYR0DQjDSiU8uCIJJIGJdLKgQAOw=='; } else { hidn.style.display = 'none'; btn.src = orimg; };  hidn = this.parentNode.getElementsByTagName('span')[0]; if (hidn.style.display != '') { hidn.style.display = ''; } else { hidn.style.display = 'none'; btn.src = orimg; }">
		<img style="margin: 0; padding: 5px 5px 0" src="data:image/gif;base64,R0lGODlhCQAJAMQfAIqZyoGSxv3+/trl84CQxYCRxn6PxMXQ7efq9H+Pwtnk8oKTxoCQxKy44QAAANvl9rvG6fD5/o2by4GRxvb8//v9//7+/ubw+v39/ouayoKSxoOTx/7+/wwMDP///////yH5BAEAAB8ALAAAAAAJAAkAAAU84AdoGkNmX4Z4HldRirSxXMdF1zK7nXU9mk2t4+h0BIlNhWPpYTCBDQXXwRwggczgJ8BAGhLRZGIoEFAhADs=" alt="{L_EXPAND_VIEW}" width="9" height="9" border="0" />
		<h>{TEXT1}</h>
	</div>
	<span class="spoil_close" title="{L_COLLAPSE_VIEW}" onclick="hidn = this.parentNode.getElementsByTagName('div')[1]; { hidn.style.display = 'none'; }; hidn = this.parentNode.getElementsByTagName('span')[0]; if (hidn.style.display != '') { hidn.style.display = ''; } else { hidn.style.display = 'none'; btn.src = orimg; }" style="display: none;">
		[ {L_COLLAPSE_VIEW} ]
	</span>
	<div class="spoil_body" style="background-color: {COLOR}; display: none;">
		{TEXT2}
	</div>
</div>
Подсказка:

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

 [more={Заголовок}|{цвет}]{Скрытый текст}[/more]
content.css

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

/* Spoiler */
#spoil_wrap {
	margin: 8px auto;
	border-color: #666666;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	position: relative;
}
.spoil_title {
	height: 19px;
	cursor: pointer;
}
.spoil_title h {
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-style: italic;
	font-weight: bold;
	color: #666;
}
.spoil_close {
	text-align: right; 
	font-size: 10px; 
	cursor: pointer; 
	position: absolute;
	bottom: 0;
	right: 5px;
}
.spoil_body {
	border-color: #666666;
	border-style: solid;
	padding: 6px 6px 15px;
	border-width: 1px 1px 0px 1px;
}

Все верно?
  • 0

CabinetAdmin 21 июл 2018, 14:02 Сообщение

Почти:

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

[more={TEXT1}|{COLOR}]{TEXT2}[/more]
Замена та, стили те, но на скриншоте не тот ббкод. В моём предыдущем посте я показал как он должен выглядеть. На вашем скриншоте ббкод выглядит не так и я ещё раз говорю - это другой ббкод.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 21 июл 2018, 14:36 Сообщение

У меня [more=Заголовок|#ede7d9]Скрытый текст[/more]
У вас [more={TEXT1}|{COLOR}]{TEXT2}[/more]

В чем разница?
  • 0

CabinetAdmin 21 июл 2018, 19:28 Сообщение

Питер писал(а): У меня
Так используется в сообщении.
Питер писал(а): У вас
Это код использования ббкода в админке, добавляется в первом заполняемом поле при добавлении ббкода.

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

ПитерПетр 21 июл 2018, 20:23 Сообщение

Я сам не понимаю в чем дело.
Смотрите

Изображение
Изображение
  • 0

CabinetAdmin 22 июл 2018, 08:58 Сообщение

И я не понимаю, почему так-то?... Ну

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

[more={TEXT1}|{COLOR}]{TEXT2}[/more]
же надо, уже который раз говорю. Это первое.

Второе, ббкод используется в теле поста всегда в таком виде:

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

[more=Заголовок|#000000]Скрытый текст[/more]
где #000000 любой выбранный вами цвет.

Третье. Как я уже не один раз говорил - на скриншоте другой ббкод. Например на вашем скриншоте нет кнопки закрытия внизу, смотрите пример:
+Заголовок
и нет иконки плюс/минус.

Я не знаю как у вас там так получается... Работы на полторы минуты, добавить ббкод и стили. Стили можно даже вместе с ббкодом добавить в "Замена HTML", в вашем случае вся замена будет выглядеть так:

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

<div id="spoil_wrap">
	<div title="Скрытый текст" class="spoil_title" onclick="hidn = this.parentNode.getElementsByTagName('div')[1]; btn = this.getElementsByTagName('img')[0]; if (hidn.style.display != '') { hidn.style.display = ''; orimg = btn.src; btn.src = 'data:image/gif;base64,R0lGODlhCQAJAMQeAOLt+ff8//z+/4CRxo2by7vF6a254X6PxICQw87a74CQxuXo84CQxM/b7/H6/v7+/oGRxouayoGSxv7+/8LN7IqZyv7//4KSxur0/MrV74OTx9Ld8trl9gwMDP///wAAACH5BAEAAB4ALAAAAAAJAAkAAAU4oFcpwzFAkWgUVLZxCQGxLgdgGtS+t6NJmY5QOEFcNo/kZGLRXGwYR0DQjDSiU8uCIJJIGJdLKgQAOw=='; } else { hidn.style.display = 'none'; btn.src = orimg; };  hidn = this.parentNode.getElementsByTagName('span')[0]; if (hidn.style.display != '') { hidn.style.display = ''; } else { hidn.style.display = 'none'; btn.src = orimg; }">
		<img style="margin: 0; padding: 5px 5px 0" src="data:image/gif;base64,R0lGODlhCQAJAMQfAIqZyoGSxv3+/trl84CQxYCRxn6PxMXQ7efq9H+Pwtnk8oKTxoCQxKy44QAAANvl9rvG6fD5/o2by4GRxvb8//v9//7+/ubw+v39/ouayoKSxoOTx/7+/wwMDP///////yH5BAEAAB8ALAAAAAAJAAkAAAU84AdoGkNmX4Z4HldRirSxXMdF1zK7nXU9mk2t4+h0BIlNhWPpYTCBDQXXwRwggczgJ8BAGhLRZGIoEFAhADs=" alt="{L_EXPAND_VIEW}" width="9" height="9" border="0" />
		<h>{TEXT1}</h>
	</div>
	<span class="spoil_close" title="{L_COLLAPSE_VIEW}" onclick="hidn = this.parentNode.getElementsByTagName('div')[1]; { hidn.style.display = 'none'; }; hidn = this.parentNode.getElementsByTagName('span')[0]; if (hidn.style.display != '') { hidn.style.display = ''; } else { hidn.style.display = 'none'; btn.src = orimg; }" style="display: none;">
		[ {L_COLLAPSE_VIEW} ]
	</span>
	<div class="spoil_body" style="background-color: {COLOR}; display: none;">
		{TEXT2}
	</div>
</div>
<style>
/* Spoiler */
#spoil_wrap {
	margin: 8px auto;
	border-color: #666666;
	border-style: solid;
	border-width: 0 0 1px 0;
	position: relative;
}
.spoil_title {
	height: 19px;
	cursor: pointer;
}
.spoil_title h {
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-style: italic;
	font-weight: bold;
	color: #666;
}
.spoil_close {
	text-align: right; 
	font-size: 10px; 
	cursor: pointer; 
	position: absolute;
	bottom: 0;
	right: 5px;
}
.spoil_body {
	border-color: #666666;
	border-style: solid;
	padding: 6px 6px 15px;
	border-width: 1px 1px 0px 1px;
}
</style>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 22 июл 2018, 09:18 Сообщение

Уф. По моему мы пишем русскими буквами, но говорим на разных языках.
Мне не нужны кнопки закрытия снизу, сбоку или с третьего этажа!
Обычный скрытый текст. с заранее выбраним фоном #ede7d9
Его не нужно менять на разные в теле поста.
Кстати. Замена без изменения в стилях, дает ошибку. ББкод не добавляется.
Я вам дал два скриншота и спросил где что не так.
Неужели так тяжело ответить. В скриншотах видно что ббкод именно тот!

К примеру, вот тема, для которой нужен этот бблод
http://impossible-crimes.ru/Forum/viewt ... =238&t=184
вкладка "доп. информация". Там есть два сборника.
  • 0

CabinetAdmin 22 июл 2018, 14:33 Сообщение

Питер писал(а): Обычный скрытый текст. с заранее выбраним фоном #ede7d9
Его не нужно менять на разные в теле поста.
Во! А вот наконец-то начинаем подходить к самому главному. Оказывается нужен просто свой цвет, а не "с возможностью изменения фона", вы уж как нибудь по точнее формулируйте запросы. Я вам дал ббкод с возможностью изменения фона.

Копируете код вашего спойлера и вставляете в этот ббкод, в замене к <dd style="display: none;"> добавляете background-color: #ede7d9; должно получится так:

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

<dd style="background-color: #ede7d9; display: none;">
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 22 июл 2018, 15:42 Сообщение

Еще парочка вопросов
Изображение
  • 0

CabinetAdmin 22 июл 2018, 15:59 Сообщение

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

<dl class="codebox"><dt>
заменить на:

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

<dl class="codebox" style="padding: 0;"><dt style="padding: 3px; background-color: #ede7d9;">
#ede7d9; свой цвет.

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

<dd style="background-color: #ede7d9; display: none;">
заменить на:

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

<dd style="padding: 3px; background-color: #ede7d9; display: none;">
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 22 июл 2018, 16:13 Сообщение

СПАСИБО!
Еще малюсенькая доработка.
Изображение
  • 0

CabinetAdmin 22 июл 2018, 18:56 Сообщение

Если вы хотели весь белый цвет изменить на этот, то так:

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

<dl class="codebox" style="background-color: #ede7d9; padding: 0;"><dt style="padding: 3px;">
и:

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

<dd style="padding: 3px; display: none;">
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 22 июл 2018, 19:33 Сообщение

Спасибо за терпение. Все получилось!
  • 0

Похожие темы