Color Box Testing

Описание

Группа из 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) :
%%(cb-info wrapper=cb wrapper_align=right wrapper_width=300)какой-то текст%%
Краткий синтаксис :
%%(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)текст%%

Обратите внимание как блок сдвинут вправо и текст его обтекает

Следите за высотой блока и обтекаюшего текста.
Если высота текста меньше блока то если следом идет другой блок то он может "наехать снизу".

Код :
%%(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=600)текст%%

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

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

Код :
%%(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.php позволяет задействовать расширить возможности форматтера и задействовать опциональные параметры. Для этого рядом с форматтерами, в той же папке \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 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .3rem;
}
.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;
}

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

Abram4 (30.08.2019 23:03)

Прочитано 726 раз

Общая оценка документа [показать форму]

страница еще не оценена