=====Sidenote Actions=====

This set of actions allows the user to create sidenotes similar to post-it notes. You can also find a version that integrates into wikka.css and combines the actions into a single action in SidenoteActionsTormodHaugen. However, this version keeps the actions seperate so that the user can choose not to include some of them.

===Syntax===

%%{{note text="This is a note." width="250"}}
{{tip text="This is a tip." width="250"}}
{{warn text="This is a warning." width="250"}}%%

##text## is a required field.  ##width## is optional and defaults to 200 pixels.

===Screenshot===

{{image url="http://wikka.jsnx.com/SidenoteActions/files.xml?action=download&file=sidenote.gif" alt="screen shot sidenote actions"}}

===Installation===

First, put the following code in a file called ##css/sidenote.css##:

%%(css)/* sidenote.css */
/* Contains css for tip, note and warn actions. */

/* postit note-style information box */
#note {
		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;
}

#note hr {
		height: 1px;
		border: 1px solid #AAAAAA;
		width: 100%;
}

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

#note #text {
		padding: 4px;
		color: #000000;
}

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

#tip hr {
		height: 1px;
		border: 1px solid #AAAAAA;
		width: 100%;
}

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

#tip #text {
		padding: 4px;
		color: #000000;
}

/* warning information box */
#warn {
		clear: both;
		font-size: 10pt;
		float: left;
		width: 200px;
		border: 1px solid #AAAAAA;
		margin: 15px 10px 0px 0px;
		padding: 0px;
		background-color: #FFAAAA;
		text-align: justify;
		vertical-align: top;
}

#warn hr {
		height: 1px;
		border: 1px solid #AAAAAA;
		width: 100%;
}

#warn .title {
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;
		background-color: #FF0000;
		border-bottom: 1px solid #AAAAAA;
}

#warn #text {
		padding: 4px;
		color: #000000;
}
%%

This file should be saved in ##actions/note.php##:

%%(php)<?php
/*
		note action
		Displays a sidebar note (like a post-it)
		Syntax: {{note text="text" width="width_in_pixels"}}
*/


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

if (is_numeric($width) ? intval($width) == $width : false) {
		$width = "200";
}

?>

<DIV ID="note" STYLE="width: <?php echo $width; ?>px">
		<DIV ID="text">
				<?php echo $this->Format($text); ?>
		</DIV>
</DIV>
%%

This file should be saved in ##actions/tip.php##:

%%(php)<?php
/*
		tip action
		Displays a sidebar tip (like a post-it)
		Syntax: {{tip text="text" width="width_in_pixels"}}
*/


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

if (is_numeric($width) ? intval($width) == $width : false) {
		$width = "200";
}

?>

<DIV ID="tip" STYLE="width: <?php echo $width; ?>px">
		<DIV CLASS="title">TIP</DIV>
		<DIV ID="text">
				<?php echo $this->Format($text); ?>
		</DIV>
</DIV>
%%

And this file should be saved in ##actions/warn.php##:

%%(php)<?php
/*
		warn action
		Displays a sidebar warning (like a post-it)
		Syntax: {{warn text="text" width="width_in_pixels"}}
*/


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

if (is_numeric($width) ? intval($width) == $width : false) {
		$width = "200";
}

?>

<DIV ID="warn" STYLE="width: <?php echo $width; ?>px">
		<DIV CLASS="title">WARNING</DIV>
		<DIV ID="text">
				<?php echo $this->Format($text); ?>
		</DIV>
</DIV>
%%

Finally, you need to add the stylesheet to ##actions/header.php##.  Find this line:

%%	<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />%%

add this line after it:

%%	<link rel="stylesheet" type="text/css" href="css/sidenote.css" />%%

If you find this action useful, post a comment and let me know! Also, feel free to comment with requests for feature enhancements. --JasonHuebel

{{files}}

----
CategoryUserContributions