This is the TormodHaugen version of SidenoteActions.


~& Sorry; I had a lunchbreak, and made modification to this action(s). One action, set type, title and text (and width). Type is note|tip|warning and specify colors (yellow, white, red) - set to title if note|tip|warning, title is title (set to NOTE, TIP or WARNING if not specified - uppercase), text is text, and width should be width with a unit (250px/25em/40pt). see/test at http://wiki.tormodh.net/SandBox --TormodHaugen.

%%(php)
<?php
/*
	note action
	Displays a sidebar note (like a post-it)
	Type defaults to title (if given) or note (if no, or bad, title).
	Title defaults to type (in uppercase).
	Width defaults to 200px.
	Syntax: {{note type="note|tip|warning" title="title" text="text" width="width"}}
*/

	$type = htmlspecialchars($vars['type']);
	$title = htmlspecialchars($vars['title']);
	$text = htmlspecialchars($vars['text']);
	$width = htmlspecialchars($vars['width']);

	if (!$type) {
		if ($title) $type = strtolower($title);
		else $type = "note";
	}
	if (!$title) $title = strtoupper($type);
	if ($type != "note" && $type != "tip" && $type != "warning") $type = "note";
?>

	<div class="sidenote <?php echo $type; ?>"<?php if ($width) echo " style=\"width: $width;\"" ?>>
		<div class="title"><?php echo $title; ?></div>
		<div class="text">
			<?php echo $text; ?>
		</div>
	</div>
%%

Put these style definitions in wikka.css or link to it in header.php, as noted in SidenoteActions:

%%(css)
/* sidenote.css */
/* Contains css for sidenote action. */

/* postit note-style information box */
div.sidenote {
		clear: both;
		font-size: 10pt;
		float: left;
		width: 200px;
		border: 1px solid #AAAAAA;
		margin: 15px 10px 0px 0px;
		padding: 0px;
		background-color: #FFF900;
		text-align: justify;
		vertical-align: top;
}

div.sidenote hr {
		height: 1px;
		border: 1px solid #AAAAAA;
		width: 100%;
}

div.sidenote div.title {
		text-align: center;
		font-weight: bold;
		background-color: #EEE800;
		border-bottom: 1px solid #AAAAAA;
		color: #000000;
}

div.sidenote div.text {
		padding: 4px;
		color: #000000;
}

/* Spesific for (yellow) notes. */
div.note {
	background-color: #fff900;
}

div.note div.title {
	background-color: #eee800;
}

/* Spesific for (white) tips. */
div.tip {
	background-color: #ffffff;
}

div.tip div.title {
	background-color: #efefef;
}

/* Spesific for (red) warnings. */
div.warning {
	background-color: #ffaaaa;
}

div.warning div.title {
	background-color: #ff0000;
	color: #ffffff;
}
%%