WackoWiki

View source for Re: Callouts

Info boxes are on the TODO list. The question is where and how it should be realized. Should the content of these boxes parsed dynamically, and do we want have these options also available for the ##shade## and ##box## ((/Doc/English/Formatting/Wrapper wrapper)) to avoid unnecessary wrapper nesting.

There are undocumented wrappers under **((source:master/src/formatter/highlight/ formatter/highlight/))** like ##info## or ##question## having all the same syntax except a different CSS class. There will be soon a ((/Dev/NewFeatures/Infobox dedicated page for this issue)) in the wiki.

For the meantime you can add your own callout wrapper:
##""%%(callout type="warning" title="Warning") Different info box wrappers and types are planned.%%""##

**formatter/highlight/callout.php**
%%(php)
<?php

/*
	% %(callout
		[type= "note | warning | error | important")]
		[style= "no use")])
	content
	% %
*/

$style_class	= 'callout';
$type_class		= '';
$types			= ['default', 'error', 'example', 'fail', 'important', 'note', 'question', 'quote', 'success', 'warning'];

if (!isset($options['type']))		$options['type']	= 'note';
if (!isset($options['title']))		$options['title']	= '';
if (!isset($options['style']))		$options['style']	= false;

if (in_array($options['type'], $types))
{
	// callout type-* in wacko.css
	$type_class = 'type-' . $options['type'];
}

$title = $options['title'] ?? null;

echo	'<ignore><div class="' . $style_class . ' ' . $type_class . '">' . "\n" .
		($title
			? '<p class="callout-title">' . Ut::html($title) . '</p>' . "\n"
			: '');
include Ut::join_path(FORMATTER_DIR, 'wiki.php');	// parsed with WackoFormatter
echo	"</div></ignore>\n";
%%

add the CSS classes to **wacko.css** of your theme
%%(css)
/* Callouts: SYNTAX % %(callout type="warning" title="Warning")text% % */
.callout {
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);
	position: relative;
	margin: 1.5625em 0;
	padding: 0 .6rem;
	border-left: .2rem solid #448aff;
	border-radius: .1rem;
	/* font-size: .64rem; */
	overflow: auto;
}

.callout-title {
	margin: 0 -.6rem;
	padding: .4rem .6rem .4rem 2rem;
	border-bottom: .05rem solid rgba(68,138,255,.1);
	background-color: rgba(68,138,255,.1);
	font-weight: 700;
}

.callout > .callout-title::before {
	position: absolute;
	left: .6rem;
	color: #448aff;
	font-size: 1rem;
	content: "✎";
}

.callout.type-warning {
	border-left-color: #ff9100;
}

.callout.type-warning > .callout-title {
	border-bottom-color: rgba(255,145,0,.1);
	background-color: rgba(255,145,0,.1);
}

.callout.type-warning > .callout-title::before {
	color: #ff9100;
	content: "⚠";
}

.callout.type-success {
	border-left-color: #00c853
}
.callout.type-success > .callout-title {
	border-bottom-color: rgba(0,200,83,.1);
	background-color: rgba(0,200,83,.1)
}
.callout.type-success > .callout-title::before {
	color: #00c853;
	content: "✓"
}

.callout.type-question {
	border-left-color: #64dd17
}
.callout.type-question > .callout-title {
	border-bottom-color: rgba(100,221,23,.1);
	background-color: rgba(100,221,23,.1)
}
.callout.type-question > .callout-title::before {
	color: #64dd17;
	content: "?"
}

.callout.type-fail {
	border-left-color: #ff5252
}
.callout.type-fail > .callout-title {
	border-bottom-color: rgba(255,82,82,.1);
	background-color: rgba(255,82,82,.1)
}
.callout.type-fail > .callout-title::before {
	color: #ff5252;
	content: "✕"
}

.callout.type-example {
	border-left-color: #651fff
}
.callout.type-example > .callout-title {
	border-bottom-color: rgba(101,31,255,.1);
	background-color: rgba(101,31,255,.1)
}
.callout.type-example > .callout-title::before {
	color: #651fff;
	content: "💡"
}

%%

The CSS was taken from the example above, modify it for your needs.

If you modify your theme, don't forget to copy and rename the theme folder, this will protect you from accidentally overwriting your theme with the default version during the next upgrade process.

**Example:**
##""
%%(callout type="note" title="Note")
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
%%
""##