CompoWiki: Форматтеры Color Box

https://wiki.compowiki.info     Редакция: 2025-12-07 20:19:10

Форматтеры Color Box

Описание

Группа из 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)текст%%
Этот же блок но с параметром 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)текст%%
small mammut Три слепых слона решили узнать как выглядит человек.
Первый пощупал и сказал, что он плоский и мокрый.
Двое других пощупали и согласились….


Три слепца исследовали слона.
Один, дотронувшись до живота, говорит: “О, это похоже на бочку”.
Другой потрогал ногу слона и утверждает: “Это дерево”.
Третий хватает слона за хвост и заявляет: “Ну что вы, это же веревка!” ...
.
.
Код :
%%(cb-success wrapper=cb wrapper_align=left wrapper_width=600)текст%%
Вы уже заметили что внутри бокса работает Wacko Синтаксис, да ?
Включайте фантазию и креативность !
Создайте тестовую страницу, экспериментируйте и развлекайтесь.
И не забудьте за собой прибрать потом.

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

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

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

В папку \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)

Прочитано 3 886 раз