{{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) :
??**""%%(имя-форматтера имя-обёртки выравнивание=right ширина=300 сброс_выравнивания)какой-то текст%%""**??
??**""%%(cb-info wrapper=cb wrapper_align=right wrapper_width=300 clear)какой-то текст%%""**??
и его отображение :
%%(cb-info wrapper=cb wrapper_align=right wrapper_width=300 clear)какой-то текст%%
Краткий синтаксис :
??**""%%(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)
Обратите внимание как блок сдвинут вправо и текст его обтекает
%%
Следите за высотой блока и обтекаюшего текста.
Если высота текста меньше блока то если следом идет другой блок то он может "наехать снизу". Я тут просто букв добавлю чтобы полюбоваться как оно обтекается ... 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-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=630)текст%%""??
%%(cb-dark wrapper=cb wrapper_align=right wrapper_width=630)
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** позволяет задействовать опциональные параметры. Для этого рядом с форматтерами, в той же папке //**\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 .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//** не хватает этих строк
%%(css)
/* SYNTAX (wrapper xyz) */
.wrapper-center {
margin: 0 auto !important;
}
.wrapper-left {
float: left;
}
.wrapper-right {
float: right;
}
%%
то надо добавить и их.
Надеюсь вы поняли принцип и теперь сможете насоздавать сколько угодно таких блоков.
Если дизайн вашего сайта или цветовой вкус не позволяют использовать предложенную гамму то самое время взять палитру и вспомнить детские раскраски ...
Чтобы подобрать цвета и проверить как будет выглядеть раскрашенный вами цветной ящик можно подключить ((https://wackowiki.org/doc/Dev/PatchesHacks/ColorBox действие ColorBox))
В общем, кисть в руки и творческих успехов !
----
**Проверено на ((https://wackowiki.org/doc/Doc/Russian WackoWiki R.5.5.12))**
((user:Abram4 Abram4)) (30.08.2019 23:03)
>>++**Прочитано {{hits}} раз**++<<
