Revision [14643]

This is an old revision of SidenoteActions made by TormodHaugen on 2006-06-20 14:18:38.

 

Sidenote Actions


This set of actions allows the user to create sidenotes similar to post-it notes.

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


screen shot sidenote actions

Installation


First, put the following code in a file called css/sidenote.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
/*
        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 ($width == "") {
        $width = "200";
}

?>

<DIV ID="note" STYLE="width: <?php echo $width; ?>px">
        <DIV ID="text">
                <?php echo $text; ?>
        </DIV>
</DIV>


This file should be saved in actions/tip.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 ($width == "") {
        $width = "200";
}

?>

<DIV ID="tip" STYLE="width: <?php echo $width; ?>px">
        <DIV CLASS="title">TIP</DIV>
        <DIV ID="text">
                <?php echo $text; ?>
        </DIV>
</DIV>


And this file should be saved in actions/warn.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 ($width == "") {
        $width = "200";
}

?>

<DIV ID="warn" STYLE="width: <?php echo $width; ?>px">
        <DIV CLASS="title">WARNING</DIV>
        <DIV ID="text">
                <?php echo $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

Please make sure that the server has write access to a folder named uploads.





<?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 above:

/* 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;
}



CategoryUserContributions
There are 7 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki