Описание

Группа из 8 форматтеров Color Box предназначена для расширения возможностей цветового форматирования страниц. При применении какого-либо из этих форматтеров на странице создаётся блок текста с заданным оформлением и цветами шрифта и фона.
В нашем распоряжении следующие форматтеры :

cb-notice

cb-success

cb-danger

cb-warning

cb-dab

cb-light

cb-dark

cb-info

Опциональные параметры обёртки

Можно использовать обёртку wrapper-cb чтобы оперировать двумя её параметрами wrapper-cb – шириной блока и горизонтальным выравниванием блока на странице (а также очисткой после этого выравнивания).
Полный синтаксис (на примере cb-info) :
%%(имя-форматтера имя-обёртки выравнивание=right ширина=300 сброс_выравнивания)какой-то текст%%
%%(cb-info wrapper=cb wrapper_align=right wrapper_width=300 clear)какой-то текст%%
и его отображение :

Краткий синтаксис :
%%(cb-info)какой-то текст%%
и его отображение :

Горизонтальное выравнивание блока

Задаётся параметром wrapper_align=, может быть left | center | right, по умолчанию right (хотя я советую не умалчивать а прямо указать)
Следует учесть что выравнивание производится применением тега css float. В некоторых случаях он может приводить к искажению дизайна после него. Если после выровненного блока сломалась дальнейшая часть страницы то примените параметр clear, он очистит влияние float. Также при применении clear прекратится обтекание дальнейшим текстом.

Ширина блока

Если нужен блок размером меньше ширины страницы то можно прямо указать нужный размер. Ширина блока задаётся параметром wrapper_width= в пикселях, например wrapper_width=400, по умолчанию 250. Если вы вообще не применяли wrapper=cb то блок растянется на всю ширину страницы.

Примеры применения

Код этого блока :
%%(cb-notice wrapper=cb wrapper_align=right wrapper_width=400)текст%%

Следите за высотой блока и обтекаюшего текста.
Если высота текста меньше блока то если следом идет другой блок то он может «наехать снизу». Я тут просто букв добавлю чтобы полюбоваться как оно обтекается... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Integer tincidunt.

Код :
%%(cb-notice wrapper=cb wrapper_align=right wrapper_width=400 clear)текст%%

Видите, этот текст его уже не обтекает а ушел вниз.

Код :
%%(cb-info wrapper=cb wrapper_align=center wrapper_width=500)текст%%

вот этим текстом.

Код :
%%(cb-warning wrapper=cb wrapper_align=right wrapper_width=400)текст%%

А еще можно вот так оформить оглавление, со сдвигом вправо. Или какое-то меню приукрасить.
Кстати, я говорил следить за высотой ... вот тут не хватает текста подровняться с блоком. Приходится добавить пустых строк.
.
.
.
.
.
.
.
.
.

Внутрь блока можно вставить картинку
Код :
%%(cb-dark wrapper=cb wrapper_align=right wrapper_width=630)текст%%

Три слепых слона решили узнать как выглядит человек.
Первый пощупал и сказал, что он плоский и мокрый.
Двое других пощупали и согласились….

Три слепца исследовали слона.
Один, дотронувшись до живота, говорит: “О, это похоже на бочку”.
Другой потрогал ногу слона и утверждает: “Это дерево”.
Третий хватает слона за хвост и заявляет: “Ну что вы, это же веревка!” ...
.
.

Код :
%%(cb-success wrapper=cb wrapper_align=left wrapper_width=600)текст%%

Включайте фантазию и креативность !
Создайте тестовую страницу, экспериментируйте и развлекайтесь.
И не забудьте за собой прибрать потом.

Хочу такой форматтер на свою Вики

Данные форматтеры это местная разработка и не поставляются в комплекте с движком. Чтобы добавить на свою инсталляцию этот набор форматтеров придётся поработать.

Файлы форматтеров

В папку \formatter\highlight\ надо добавить соответствующие файлы хайлайтеров :
cb-notice.php

<?php
echo '<div class="cb cb-notice">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>

	

cb-success.php

<?php
echo '<div class="cb cb-success">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>

	

cb-danger.php

<?php
echo '<div class="cb cb-danger">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>

	

cb-warning.php

<?php
echo '<div class="cb cb-warning">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>

	

cb-dab.php

<?php
echo '<div class="cb cb-dab">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>

	

cb-light.php

<?php
echo '<div class="cb cb-light">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>

	

cb-dark.php

<?php
echo '<div class="cb cb-dark">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>

	

cb-info.php

<?php
echo '<div class="cb cb-info">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>

	

Файл обёртки wrapper_cb

Обёртка wrapper_cb позволяет задействовать опциональные параметры. Для этого рядом с форматтерами, в той же папке \formatter\highlight\ надо создать файл wrapper_cb.php
со следующим содержимым :

<?php
/* Formatter Color Box = cb */
/*(Formatter
		wrapper="cb"
		[wrapper_align="left | center | right")]
		[wrapper_width="pixel"]
		[clear])
	content
*/

$align_class = '';

if (!isset($options['wrapper_align']))	$options['wrapper_align']	= 'right';
if (!isset($options['wrapper_width']))	$options['wrapper_width']	= 250;
if (!isset($options['clear']))		$options['clear']		= false;

if (in_array($options['wrapper_align'], ['center', 'left', 'right']))
{
	// wrapper-* align in wacko.css
	$align_class = ' wrapper-' . $options['wrapper_align'];
}

echo	'<div class="cb' . $align_class . '" style="width: ' . (int) $options['wrapper_width'] . 'px;">' . "\n" .
				$text.
		"</div>\n";
if ($options['clear'])
{
	echo '<span class="clearfix"></span>';
}
?>	

Файл стилей

Добавить в ваш css файл темы нижеследующий код

/*Formatter Color Box*/
.cb {
    position: relative;
    padding: .5rem .5rem;
    margin: .2rem .5rem;
    border: 1px solid transparent;
    border-radius: .4rem;
}
.cb-notice {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.cb-dab {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}
.cb-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.cb-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.cb-warning {
    color: #dd2404;
    background-color: #fff3cd;
    border-color: #eeccba;
}
.cb-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.cb-light {
    color: #818182;
    background-color: #fffaf0;
    border-color: #f0f0fe;
}
.cb-dark {
    color: #ffffff;
    background-color: #708090;
    border-color: #c6c8ca;
} 	

И если в вашем файле wacko.css не хватает этих строк

/* SYNTAX (wrapper xyz) */
.wrapper-center {
	margin: 0 auto !important;
}
.wrapper-left {
	float:left;
}
.wrapper-right {
	float:right;
} 	

то надо добавить и их.
Надеюсь вы поняли принцип и теперь сможете насоздавать сколько угодно таких блоков.

Если дизайн вашего сайта или цветовой вкус не позволяют использовать предложенную гамму то самое время взять палитру и вспомнить детские раскраски ...
Чтобы подобрать цвета и проверить как будет выглядеть раскрашенный вами цветной ящик можно подключить действие ColorBox
В общем, кисть в руки и творческих успехов !

Проверено на WackoWiki R.5.5.12

Abram4 (30.08.2019 23:03)