Изображение

BBCode представляет собой разделённое по смыслу сообщение, заключённое в разные блоки, открывающиеся по клику на соответствующий заголовок. Принцип как в личном разделе или при создании сообщения через форму ответа.

Далее представлен новый вариант двойного ббкода, старый, если вдруг он вам нужен, можно найти под спойлером в конце поста.

Табы состоят из двух ббкодов.

1 bbcode [tabs]

Использование BBCode:

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

[tabs]{TEXT}[/tabs]
Замена HTML:

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

<div class="tabs_block">
	<div id="tabs" class="tabs">
		<ul>
			{TEXT}
			<li class="tab" style="float: right;" onclick="this.closest('.tabs_block').querySelector('.tabs_cont').innerHTML='&nbsp;';" title="Закрыть" data-skip-responsive="true"><a href="#" onclick="return false"><span>&#215;</span></a></li>
		</ul>
	</div>
	<div class="tabs_cont panel">&nbsp;</div>
</div>
Подсказка:

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

Контейнер [tabs][tab=Заголовок]Содержимое[/tab][/tabs]

2 bbcode [tabs=]

Использование BBCode:

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

[tab={TEXT1}]{TEXT2}[/tab]
Замена HTML:

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

<li class="tab" onclick="this.closest('.tabs_block').querySelector('.tabs_cont').innerHTML=this.querySelector('.tab-html').innerHTML;">
	<a href="#" onclick="return false"><span>{TEXT1}</span></a>
	<div class="tab-html" style="display: none;">{TEXT2}</div>
</li>
Подсказка:

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

[tab=Заголовок]Содержимое[/tab]

Чтобы наш bbcode правильно отображался в сообщении, при его составлении не должно быть пробелов между:

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

[tab=][/tab][tab=][/tab]
Пример правильно составленного кода:

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

[tabs][tab=Заголовок 1]Содержимое[/tab][tab=Заголовок 2]Содержимое в котором могут быть

переносы слов, изображения и всё что вы захотите[/tab][tab=Заголовок 3]Содержимое[/tab][/tabs]

Стили.
В новой модификации практически все стили стандартные, но есть несколько элементов для стилизации.

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

.tabs_block {
	max-width: 95%;
	margin: 2px auto;
}
.tabs_block .tabs_cont {
	padding: 8px 10px;
}
.tabs_block .tabs_cont { - это фон блоков. По умолчанию в качестве фона используется цвет класса panel. Если нужно, сюда можно задать собственный цвет.
Так же можно совсем не добавлять стили и обойтись стандартными форумными.


При открытии страницы все вкладки по умолчанию скрыты, показывается пустое поле, чтобы добавить туда свой текст в первом bbcode [tabs] найдите:

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

<div class="tabs_cont">&nbsp;</div>
и укажите свой текст вместо: &nbsp;

Отличия от старого ббкода.
  • Стилизация ббкода подогнана под стиль. Табы имеют стили других табов используемых на форуме.
  • Вложенность других ббкодов. В любой таб можно добавлять другие ббкоды (за исключением конечно Tabs BBCode): спойлеры, стилизованные блоки и тп.
  • Ббкод одинаково работает на всех версиях phpbb. В новых версиях табы так же сворачиваются, но не открываются с тех, что находятся во всплывающем окне (возможно позже починю, если будет нужно).
+Старый вариант ббкода
Комментарии: 42

CabinetAdmin 15 июл 2018, 08:32 Сообщение

Питер, в hex коде цвет может состоять как из 3, так и из 6 символов. А вот фотошопы и др. предлагают только коды из шести символов.
А так никакой разницы, можно даже в rgb rgb(255, 255, 255).
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

LEOPARDАлександр 15 май 2019, 21:32 Сообщение

Очень классный и полезный ббкод!
Жаль, что спойлеры не обрабатывает.
  • 0

CabinetAdmin 13 июл 2021, 19:09 Сообщение

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

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

Напомните пожалуйста как называется файл css, в котором нужно поменять цвета. В какой папке форума?
Правда я не совсем понял; Я просто заменил сами bbcode, но в стилях все осталось как было. Почему фон стал по умолчанию?
  • 0

CabinetAdmin 14 июл 2021, 00:03 Сообщение

Стили должны находиться в css файле в стиле назначенном по умолчанию. В который вы добавили я не могу знать. Но можно примерно прикинуть с помощью редактора темы в адм. разделе.

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

ПитерПетр 14 июл 2021, 00:52 Сообщение

  Новый вариант отличный. И нет конфликта с другими bbcode. Дело в другом.
Фон (где название вкладки) меняется (темноголубой и более светло голубой). А по стилю моего форума, надо более темно-коричневый и менее коричневый). Как, к примеру, чередуются фон постов. И фон уже в самой вкладке и там где надпись своя (подробная инфа во вкладке) Вместо белого — #f8f5ef

  И, кстати. Я просматриваю темы с применением вкладок. По-моему есть конфликт с ббкодом двух колонок (col)
http://impossible-crimes.ru/Forum/viewt ... 235&t=2591 — в первой и третьей вкладки он установлен. И это же повлияло, что сбился размер шрифтов (по высоте) строк.

Причем уж совсем непонятно. http://impossible-crimes.ru/Forum/viewt ... 238&t=1226
Две предпоследние вкладки. В обоих установлены две колонки. В одной сбой, в другой все нормально.

  В продолжении проверки: Текстовая площадка все так же не работает. Стандартная на “гивах” вообще “убивает все. А на span работает и тут и на старом варианте
  • 0

CabinetAdmin 14 июл 2021, 15:58 Сообщение

Фон вкладок можно поменять так:

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

.tabs_block #tabs a, 
.tabs_block #tabs a span {
	background: #fff;
	color: #000;
}
Цвет белый, буквы чёрные. Например надо для белых вкладок сделать обводку, то добавить ещё:

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

.tabs_block #tabs a {
	border: 1px solid #999;
}
Вот так background-color: 248,245,239; не правильно.
Питер писал(а): 14 июл 2021, 00:52И, кстати.
У вас в исходном коде в одном месте отсутствуют кавычки, вот здесь:

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

<div class="tab-html" style="display: none;">{TEXT2}</div>
сразу после display: none;. Это в ббкоде [tab=]. Посмотрите на месте ли они.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 14 июл 2021, 17:05 Сообщение

С ошибками разобрался. Спасибо! (даже не пойму, как пропустил кавычки, я же просто скопировал и поставил)
А вот с фонами не совсем.
В старом варианте в стили добавлялось пять доп. фрагментов. В новом только два первых. Значит нужно те три (как бы лишних) удалить?
И. Фон внутри вкладки и меняющийся цвет самих названий. Ваше объяснение касается чего именно?
  • 0

CabinetAdmin 14 июл 2021, 18:33 Сообщение

Всё верно - удалить. Те стили теперь не нужны, поскольку сами табы переписаны и имеют другие классы.
Питер писал(а): 14 июл 2021, 17:05 А вот с фонами не совсем.
Выше я дал пример изменения цвета самих табов, на скриншоте из первого поста это: Вкладка 1, Вкладка 2 и тп.
Фон содержимого вкладки, если опять же смотреть на скриншот, то это большой текст начинающийся с Это пример сообщения на вашей конференции phpBB3, можно задать тут:

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

.tabs_block .tabs_cont {
	padding: 8px 10px;
}
так же как и с вкладками, например, сделать их белыми с чёрными буквами и, допустим, тёмной обводкой:

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

.tabs_block .tabs_cont {
	padding: 8px 10px;
	background: #fff;
	color: #000;
	border: 1px solid #999;
}
Если добавить код и предыдущего поста и вот этот, то ббкод будет выглядеть примерно так же как и раньше: белые и заголовки и содержимое вкладок.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 14 июл 2021, 19:17 Сообщение

Изображение

Вроде все. Осталось только понять что это за как бы “подложка” иного цвета. Словно “пробел”.
  • 0

CabinetAdmin 14 июл 2021, 20:07 Сообщение

Потому что вы немного изменили код, который я вам дал, поменяйте:

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

.tabs_block #tabs a span {
	background: #eee3cd;
	color: #000;
	border: 1px solid #999;
}
на:

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

.tabs_block #tabs a, 
.tabs_block #tabs a span {
	background: #eee3cd;
	color: #000;
}
.tabs_block #tabs a {
	border: 1px solid #999;
}
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 18 авг 2021, 20:25 Сообщение

Как и где возможно прописать стиль шрифта для названия вкладок?
  • 0

CabinetAdmin 18 авг 2021, 20:51 Сообщение

Можно прописать здесь:

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

.tabs_block #tabs a {
	border: 1px solid #999;
}
Добавляется как и в любом другом месте font-family: Arial, sans-serif;.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы