{{toc}}
===Описание===
Группа из 8 форматтеров Color Box предназначена для расширения возможностей цветового форматирования страниц. При применении какого-либо из этих форматтеров на странице создаётся блок текста с заданным оформлением и цветами шрифта и фона.
В нашем распоряжении следующие форматтеры :
**cb-notice**
%%(cb-notice)
Это уведомление о важном событии
%%
**cb-success**
%%(cb-success)
Очень успешно завершилась операция !
%%
**cb-danger**
%%(cb-danger)
**Чрезвычайно опасно** пренебречь таким предостережением !
%%
**cb-warning**
%%(cb-warning)
А к такому __//предупреждению//__ следует отнестись серьёзно.
%%
**cb-dab**
%%(cb-dab)
Можно привлечь внимание серым пятном
%%
**cb-light**
%%(cb-light)
Или светлым пятном
%%
**cb-dark**
%%(cb-dark)
>>И даже таким __темным__<<
%%
**cb-info**
%%(cb-info)
Информация : Главное - держать себя в руках и не злоупотреблять !
%%
===Опциональные параметры обёртки==
Можно использовать обёртку **wrapper-cb** чтобы оперировать двумя её параметрами **wrapper-cb** - шириной блока и горизонтальным выравниванием блока на странице (а также очисткой после этого выравнивания).
Полный синтаксис (на примере cb-info) :
??**""%%(cb-info wrapper=cb wrapper_align=right wrapper_width=300)какой-то текст%%""**??
Краткий синтаксис :
??**""%%(cb-info)какой-то текст%%""**??
и его отображение :
%%(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)
Обратите внимание как блок сдвинут вправо и текст его обтекает
%%
Следите за высотой блока и обтекаюшего текста.
Если высота текста меньше блока то если следом идет другой блок то он может "наехать снизу".
----
Код :
??""%%(cb-notice wrapper=cb wrapper_align=right wrapper_width=400 clear)текст%%""??
%%(cb-notice wrapper=cb wrapper_align=right wrapper_width=400 clear)
Этот же блок но с параметром ??**clear**??
%%
Видите, этот текст его уже не обтекает а ушел вниз.
----
Код :
??""%%(cb-info wrapper=cb wrapper_align=center wrapper_width=500)текст%%""??
%%(cb-info wrapper=cb wrapper_align=center wrapper_width=500)
>>!!**Новость !**!!----
Отцентрированный блок не обтекается почему-то <<
%%
вот этим текстом.
----
Код :
??""%%(cb-warning wrapper=cb wrapper_align=right wrapper_width=400)текст%%""??
%%(cb-warning wrapper=cb wrapper_align=right wrapper_width=400)
{{toc}}
%%
А еще можно вот так оформить оглавление, со сдвигом влево. Или какое то меню.
Кстати, я говорил следить за высотой ... вот тут не хватает текста подровняться с блоком. Приходится добавить пустых строк.
.
.
.
.
.
.
.
.
.
.
----
//**Внутрь блока можно вставить картинку**//
Код :
??""%%(cb-dark wrapper=cb wrapper_align=right wrapper_width=600)текст%%""??
%%(cb-dark wrapper=cb wrapper_align=right wrapper_width=600)
file:/mammut_mascot.jpg Три слепых слона решили узнать как выглядит человек.
Первый пощупал и сказал, что он плоский и мокрый.
Двое других пощупали и согласились….
%%
Три слепца исследовали слона.
Один, дотронувшись до живота, говорит: “О, это похоже на бочку”.
Другой потрогал ногу слона и утверждает: “Это дерево”.
Третий хватает слона за хвост и заявляет: “Ну что вы, это же веревка!” ...
----
Код :
??""%%(cb-success wrapper=cb wrapper_align=left wrapper_width=600)текст%%""??
%%(cb-success wrapper=cb wrapper_align=left wrapper_width=600)
Вы уже заметили что внутри бокса работает **WackoСинтаксис** , да ?
%%
**//!!(blue)""Включайте фантазию и креативность !""!!//**
Создайте тестовую страницу, экспериментируйте и развлекайтесь.
И не забудьте за собой прибрать потом.
----
===Хочу такой форматтер на свою Вики==
Данные форматтеры это местная разработка и пока ещё не поставляются в комплекте с движком. Чтобы добавить на свою инсталляцию этот набор форматтеров придётся поработать.
====Файлы форматтеров==
В папку //**\formatter\highlight\**// надо добавить соответствующие файлы хайлайтеров :
**cb-notice.php**
%%(php)
<?php
echo '<div class="cb cb-notice">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>
%%
**cb-success.php**
%%(php)
<?php
echo '<div class="cb cb-success">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>
%%
**cb-danger.php**
%%(php)
<?php
echo '<div class="cb cb-danger">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>
%%
**cb-warning.php**
%%(php)
<?php
echo '<div class="cb cb-warning">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>
%%
**cb-dab.php**
%%(php)
<?php
echo '<div class="cb cb-dab">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>
%%
**cb-light.php**
%%(php)
<?php
echo '<div class="cb cb-light">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>
%%
**cb-dark.php**
%%(php)
<?php
echo '<div class="cb cb-dark">';
include Ut::join_path(FORMATTER_DIR, 'wiki.php');
echo '</div>';
?>
%%
**cb-info.php**
%%(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**
со следующим содержимым :
%%(code)<?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** файл темы нижеследующий код
%%(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;
}
%%
Если дизайн вашего сайта или цветовой вкус не позволяют использовать предложенную гамму то самое время взять палитру и вспомнить детские раскраски ... Чтобы подобрать цвета и проверить как будет выглядеть раскрашенный вами цветной ящик можно подключить ((https://wackowiki.org/doc/Dev/PatchesHacks/ColorBox действие ColorBox))
В общем, кисть в руки и творческих успехов !
----
((user:Abram4 Abram4)) (30.08.2019 23:03)
>>++**Прочитано {{hits}} раз**++<<
