====== box plugin ====== ---- plugin ---- description: Highlight particularly important parts of your wiki in boxes that stand out author : Christopher Smith email : chris@jalakai.co.uk type : syntax lastupdate : 2008-03-03 compatible : depends : conflicts : similar : tags : boxes, highlight, div ---- This [[plugin]] brings boxes to [[:Dokuwiki]] allowing you to highlight particularly important parts of your wiki in boxes that standout. The plugin comes with the ability to make ordinary square boxes, snazzyTM boxes with rounded corners, boxes with titles and boxes of varying widths. Dokuwiki markup is allowed inside the box - where pretty well anything goes - and inside the title where only text markup, links, smileys and the like should be used. It is probably sensible to set the style of the box you will most commonly use to be the default box. For details refer to the [[#style.css]] ==== Notes ==== * My version of this page - which could be more recently updated - can be found [[http://wiki.jalakai.co.uk/dokuwiki/doku.php/tutorial/boxes|here]] =====Acknowledgement===== The rounded corners are based on [[http://www.cssplay.co.uk/boxes/snazzy.html|snazzy borders]] by Stu Nicholls of [[http://www.cssplay.co.uk|CSS Play]] which in turn were inspired by Alessandro Fulciniti's [[http://pro.html.it/esempio/nifty/|nifty corners]]. ===== Syntax ===== A simple box: the box contents Some more complex boxes the box contents the box contents the box contents> The full syntax: ''**** contents text ****'' * //width// --- any legal CSS width value * //classes// --- any number of classes which use the styles in your template or the plugin's own stylesheet to determine the look of the box. The box plugins comes with the following classes already defined: * //round// --- box will have rounded corners * //blue// --- blue colour scheme * //red// --- red colour scheme * //green// --- green colour scheme * //orange// --- orange colour scheme * //left// --- float the box left within the wiki page * //right// --- float the box right within the wiki page if no classes are specified the default styles will be used, that is square corners in a colour scheme based on the default Dokuwiki colour scheme. * //colours// --- 1-4 colours in CSS hex or rgb notation, e.g. ''#F00 #fcab94 rgb(255,255,0)''. The colours are applied in order to: - content background - title background - outer box background - borders if less than four colours are specified, the first colour is used for the missing colours. * //title text// --- text (including dokuwiki markup) displayed above the box contents, with distinct style. * //caption text// --- text (no markup allowed) displayed below the box contents, with distinct style. The opening ''****'' including the title must all appear on one line. The box contents can appear over as many lines as are needed. See the plugin in action [[http://wiki.jalakai.co.uk/dokuwiki/doku.php/test/boxes|here]]. The sample page shows all the styles available with the plugin. ===== Configuration ===== The plugin has no configuration settings, although you may want to review the default colour scheme in [[#style.css]] to ensure it is appropriate for your wiki. ===== Installation ===== ==== Sources: ==== * Current: [[http://dokuwiki.jalakai.co.uk/plugin-box.zip|zip format (6k)]], [[http://dokuwiki.jalakai.co.uk/plugin-box.tar.gz|tar.gz format (5k)]] * Development: [[http://wiki.jalakai.co.uk/repo/dokuwiki/plugins/box|darcs repository]] * Previous DokuWiki versions: * for Dokuwiki 2006-03-xx [[http://dokuwiki.jalakai.co.uk/plugin-box-2006-03-xx.zip|zip format (5k)]], [[http://dokuwiki.jalakai.co.uk/plugin-box-2006-03-xx.tar.gz|tar.gz format (4k)]] **REQUIRES [[#security fix 2]]** * for Dokuwiki 2005-09-22 [[http://dokuwiki.jalakai.co.uk/plugin-box.2005-11-25.zip|zip format (4k)]], [[http://dokuwiki.jalakai.co.uk/plugin-box.2005-11-25.tar.gz|tar.gz format (3k)]] **REQUIRES [[#security fix]]** If your wiki uses either the [[plugin:plugin]] manager or the [[plugin:darcs|darcs plugin]] you can use them with the links above to install the plugin. To install the plugin manually, download the source to your plugin folder, ''lib/plugins'' and extract its contents. That will create a new plugin folder, ''lib/plugins/box'', and install the plugin. The folder will contain: style.css all the box styles syntax.php plugin script The plugin is now installed. ===== Details ===== The plugin consists of two files, the plugin script [[#syntax.php]], lots of style rules for diferent box appearances in [[#style.css]]. ==== syntax.php ==== This is the code for the release version of DokuWiki. Users of the development version of DokuWiki should get the source from the darcs repository, either through darcs or through the web browser interface. * width% width of the box, must use % unit * classes one or more classes used to style the box, several predefined styles included in style.css * title (optional) all text after '|' will be rendered above the main code text with a * different style. * * Acknowledgements: * Rounded corners based on snazzy borders by Stu Nicholls (http://www.cssplay.co.uk/boxes/snazzy) * which is in turn based on nifty corners by Alessandro Fulciniti (http://pro.html.it/esempio/nifty/) * * @license GPL 2 (http://www.gnu.org/licenses/gpl.html) * @author Christopher Smith */ if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/'); if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/'); require_once(DOKU_PLUGIN.'syntax.php'); /** * All DokuWiki plugins to extend the parser/rendering mechanism * need to inherit from this class */ class syntax_plugin_box extends DokuWiki_Syntax_Plugin { var $title_mode = false; // the following are used in rendering and are set by _xhtml_boxopen() var $_xb_colours = ''; var $_content_colours = ''; var $_title_colours = ''; /** * return some info */ function getInfo(){ return array( 'author' => 'Christopher Smith', 'email' => 'chris@jalakai.co.uk', 'date' => '2008-03-03', 'name' => 'Box Plugin', 'desc' => 'Boxes with titles, colour and rounded corners. Syntax: ... width, class, colours title & caption are optional. The title can include some wiki markup, the box contents can include almost any wiki markup.', 'url' => 'http://www.dokuwiki.org/plugin:boxes', ); } function getType(){ return 'protected';} function getAllowedTypes() { return array('container','substition','protected','disabled','formatting','paragraphs'); } function getPType(){ return 'block';} // must return a number lower than returned by native 'code' mode (200) function getSort(){ return 195; } // override default accepts() method to allow nesting // - ie, to get the plugin accepts its own entry syntax function accepts($mode) { if ($mode == substr(get_class($this), 7)) return true; return parent::accepts($mode); } /** * Connect pattern to lexer */ function connectTo($mode) { $this->Lexer->addEntryPattern('(?=.*?)',$mode,'plugin_box'); $this->Lexer->addEntryPattern('(?=.*?)',$mode,'plugin_box'); $this->Lexer->addEntryPattern('.*?)',$mode,'plugin_box'); $this->Lexer->addEntryPattern('.*?)',$mode,'plugin_box'); } function postConnect() { $this->Lexer->addPattern('>', 'plugin_box'); $this->Lexer->addExitPattern('', 'plugin_box'); } /** * Handle the match */ function handle($match, $state, $pos, &$handler){ switch ($state) { case DOKU_LEXER_ENTER: $data = $this->_boxstyle(trim(substr($match, 4, -1))); if (substr($match, -1) == '|') { $this->title_mode = true; return array('title_open',$data); } else { return array('box_open',$data); } case DOKU_LEXER_MATCHED: if ($this->title_mode) { $this->title_mode = false; return array('box_open',''); } else { return array('data', $match); } case DOKU_LEXER_UNMATCHED: return array('data', $match); case DOKU_LEXER_EXIT: $data = trim(substr($match, 5, -1)); $title = ($data && $data{0} == "|") ? substr($data,1) : ''; return array('box_close', $title); } return false; } /** * Create output */ function render($mode, &$renderer, $indata) { list($instr, $data) = $indata; if($mode == 'xhtml'){ switch ($instr) { case 'title_open' : $this->title_mode = true; $renderer->doc .= $this->_xhtml_boxopen($data)."

_title_colours}>"; break; case 'box_open' : if ($this->title_mode) { $this->title_mode = false; $renderer->doc .= "

\n
_content_colours}>"; } else { $renderer->doc .= $this->_xhtml_boxopen($data)."
_content_colours}>"; } break; case 'data' : $renderer->doc .= $renderer->_xmlEntities($data); break; case 'box_close' : $renderer->doc .= "
\n"; if ($data) { $renderer->doc .= "

_title_colours}>".$renderer->_xmlEntities($data)."

\n"; } $renderer->doc .= $this->_xhtml_boxclose(); break; } return true; } return false; } function _boxstyle($str) { if (!strlen($str)) return array(); $styles = array(); $tokens = preg_split('/\s+/', $str, 9); // limit is defensive foreach ($tokens as $token) { if (preg_match('/^\d*\.?\d+(%|px|em|ex|pt|cm|mm|pi|in)$/', $token)) { $styles['width'] = $token; continue; } if (preg_match('/^( (\#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}))| #colorvalue (rgb\(([0-9]{1,3}%?,){2}[0-9]{1,3}%?\)) #rgb triplet )$/x', $token)) { $styles['colour'][] = $token; continue; } // restrict token (class names) characters to prevent any malicious data if (preg_match('/[^A-Za-z0-9_-]/',$token)) continue; $styles['class'] = (isset($styles['class']) ? $styles['class'].' ' : '').$token; } if (!empty($styles['colour'])) { $styles['colour'] = $this->_box_colours($styles['colour']); } return $styles; } function _box_colours($colours) { $triplets = array(); // only need the first four colours if (count($colours) > 4) $colours = array_slice($colours,0,4); foreach ($colours as $colour) { $triplet[] = $this->_colourToTriplet($colour); } // there must be one colour to get here - the primary background // calculate title background colour if not present if (empty($triplet[1])) { $triplet[1] = $triplet[0]; } // calculate outer background colour if not present if (empty($triplet[2])) { $triplet[2] = $triplet[0]; } // calculate border colour if not present if (empty($triplet[3])) { $triplet[3] = $triplet[0]; } // convert triplets back to style sheet colours $style_colours['content_background'] = 'rgb('.join(',',$triplet[0]).')'; $style_colours['title_background'] = 'rgb('.join(',',$triplet[1]).')'; $style_colours['outer_background'] = 'rgb('.join(',',$triplet[2]).')'; $style_colours['borders'] = 'rgb('.join(',',$triplet[3]).')'; return $style_colours; } function _colourToTriplet($colour) { if ($colour{0} == '#') { if (strlen($colour) == 4) { // format #FFF return array(hexdec($colour{1}.$colour{1}),hexdec($colour{2}.$colour{2}),hexdec($colour{3}.$colour{3})); } else { // format #FFFFFF return array(hexdec(substr($colour,1,2)),hexdec(substr($colour,3,2)), hexdec(substr($colour,5,2))); } } else { // format rgb(x,y,z) return explode(',',substr($colour,4,-1)); } } function _xhtml_boxopen($styles) { $class = 'class="box' . (isset($styles['class']) ? ' '.$styles['class'] : '') . '"'; $style = isset($styles['width']) ? "width: {$styles['width']};" : ''; if (isset($styles['colour'])) { $colours = 'background-color: '.$styles['colour']['outer_background'].'; '; $colours .= 'border-color: '.$styles['colour']['borders'].';'; $this->_content_colours = 'style="background-color: '.$styles['colour']['content_background'].'; border-color: '.$styles['colour']['borders'].'"'; $this->_title_colours = 'style="background-color: '.$styles['colour']['title_background'].';"'; } else { $colours = ''; $this->_content_colours = ''; $this->_title_colours = ''; } if ($style || $colours) $style = ' style="'.$style.' '.$colours.'"'; if ($colours) $colours = ' style="'.$colours.'"'; $this->_xb_colours = $colours; $html = "
\n"; $html .=" \n"; $html .="
\n"; return $html; } function _xhtml_boxclose() { $colours = $this->_xb_colours; $html = "
\n"; $html .= " \n"; $html .= "
\n"; return $html; } } //Setup VIM: ex: et ts=4 enc=utf-8 : ==== style.css ==== These may be modified to suit your own requirements. /* plugin:box */ div.box { width: 50%; margin: 1em auto; border: 1px solid; padding: 4px; overflow: hidden; } /* rounded corners styles from Stu Nicholls snazzy borders, http://www.cssplay.co.uk/boxes/snazzy.html */ .xtop, .xbottom {background:transparent; font-size:0; line-height: 1px;} .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden; border-style: solid;} .xb2, .xb3 {height:1px;} .xb2, .xb3, .xb4 {border-width:0 1px;} .xb1 {height: 0; margin:0 5px; border-width:1px 0 0 0;} .xb2 {margin:0 3px; border-width:0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;} div.box .xtop, div.box .xbottom {display: none;} div.box.round > .xtop, div.box.round > .xbottom {display: block;} div.box.round { border: none; padding: 0;} div.box.round > .xbox {display:block; border-width:0 1px; border-style: solid; padding: 0 4px; } div.box p.box_title, div.box p.box_caption { font-size: 90%; margin: 0; padding: 2px 6px; line-height: 1.2; } div.box p.box_title { margin-bottom: 4px;} div.box p.box_caption { margin-top: 4px;} div.box .box_content { margin: 0; padding: 0 6px; border-width: 1px; border-style: dashed; line-height: 1.2; } /* floating alignment */ div.box.left { float: left; margin-right: 1em; } div.box.right { float: right; margin-left: 1em; } /* colours */ /* default */ div.box, div.box .box_content, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 { border-color: __dark__; } div.box, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 { background: __light__; } div.box p.box_title, div.box p.box_caption { background: __medium__;} div.box .box_content { background: __lighter__;} /* blue */ div.box.blue, div.box.blue > * > .box_content, div.box.blue > .xbox, div.box.blue > * > .xb1, div.box.blue > * > .xb2, div.box.blue > * > .xb3, div.box.blue > * > .xb4 { border-color: #bbbbdd; } div.box.blue, div.box.blue > .xbox, div.box.blue > * > .xb1, div.box.blue > * > .xb2, div.box.blue > * > .xb3, div.box.blue > * > .xb4 { background: #e4ecf8; } div.box.blue > * > p.box_title, div.box.blue > * > p.box_caption {background: #cad0ee;} div.box.blue > * > .box_content {background: #f4f8fd;} /* red */ div.box.red, div.box.red > * > .box_content, div.box.red > .xbox, div.box.red > * > .xb1, div.box.red > * > .xb2, div.box.red > * > .xb3, div.box.red > * > .xb4 { border-color: #ddbbbb; } div.box.red, div.box.red > .xbox, div.box.red > * > .xb1, div.box.red > * > .xb2, div.box.red > * > .xb3, div.box.red > * > .xb4 { background: #f8ece4; } div.box.red > * > p.box_title, div.box.red > * > p.box_caption {background: #eed0ca;} div.box.red > * > .box_content {background: #fdf4ec;} /* green */ div.box.green, div.box.green > * > .box_content, div.box.green > .xbox, div.box.green > * > .xb1, div.box.green > * > .xb2, div.box.green > * > .xb3, div.box.green > * > .xb4 { border-color: #bbddbb; } div.box.green, div.box.green > .xbox, div.box.green > * > .xb1, div.box.green > * > .xb2, div.box.green > * > .xb3, div.box.green > * > .xb4 { background: #e4f8f2; } div.box.green > * > p.box_title, div.box.green > * > p.box_caption {background: #c4e4d4;} div.box.green > * > .box_content {background: #ecfaf6;} /* orange */ div.box.orange, div.box.orange > * > .box_content, div.box.orange > .xbox, div.box.orange > * > .xb1, div.box.orange > * > .xb2, div.box.orange > * > .xb3, div.box.orange > * > .xb4 { border-color: #da3; } div.box.orange, div.box.orange > .xbox, div.box.orange > * > .xb1, div.box.orange > * > .xb2, div.box.orange > * > .xb3, div.box.orange > * > .xb4 { background: #f4e8ca; } div.box.orange > * > p.box_title, div.box.orange > * > p.box_caption {background: #f0d499;} div.box.orange > * > .box_content {background: #f8f0da;} /* must come last to override coloured background when using rounded corners */ div.box.round { background: transparent !important; } /* IE fixes for unsupported child selector \*/ * html div.box div.box, * html div.box div.box .box_content, * html div.box div.box .xbox, * html div.box div.box .xb1, * html div.box div.box .xb2, * html div.box div.box .xb3, * html div.box div.box .xb4 { border-color: __dark__; } * html div.box div.box, * html div.box div.box .xbox, * html div.box div.box .xb1, * html div.box div.box .xb2, * html div.box div.box .xb3, * html div.box div.box .xb4 { background: __light__; } * html div.box div.box p.box_title, * html div.box div.box p.box_caption { background: __medium__;} * html div.box div.box .box_content { background: __lighter__;} * html div.box.round .xtop, * html div.box.round .xbottom {display: block;} * html div.box.round .xbox {display:block; border-width:0 1px; border-style: solid; padding: 0 4px; } /* blue */ * html div.box.blue .box_content, * html div.box.blue .xbox, * html div.box.blue .xb1, * html div.box.blue .xb2, * html div.box.blue .xb3, * html div.box.blue .xb4 { border-color: #bbbbdd; } * html div.box.blue .xbox, * html div.box.blue .xb1, * html div.box.blue .xb2, * html div.box.blue .xb3, * html div.box.blue .xb4 { background: #e4ecf8; } * html div.box.blue p.box_title, * html div.box.blue p.box_caption {background: #cad0ee;} * html div.box.blue .box_content {background: #f4f8fd;} /* nested blue */ * html div.box div.box.blue .box_content, * html div.box div.box.blue .xbox, * html div.box div.box.blue .xb1, * html div.box div.box.blue .xb2, * html div.box div.box.blue .xb3, * html div.box div.box.blue .xb4 { border-color: #bbbbdd; } * html div.box div.box.blue .xbox, * html div.box div.box.blue .xb1, * html div.box div.box.blue .xb2, * html div.box div.box.blue .xb3, * html div.box div.box.blue .xb4 { background: #e4ecf8; } * html div.box div.box.blue p.box_title, * html div.box div.box.blue p.box_caption {background: #cad0ee;} * html div.box div.box.blue .box_content {background: #f4f8fd;} /* red */ * html div.box.red .box_content, * html div.box.red .xbox, * html div.box.red .xb1, * html div.box.red .xb2, * html div.box.red .xb3, * html div.box.red .xb4 { border-color: #ddbbbb; } * html div.box.red .xbox, * html div.box.red .xb1, * html div.box.red .xb2, * html div.box.red .xb3, * html div.box.red .xb4 { background: #f8ece4; } * html div.box.red p.box_title, * html div.box.red p.box_caption {background: #eed0ca;} * html div.box.red .box_content {background: #fdf4ec;} /* nested red */ * html div.box div.box.red .box_content, * html div.box div.box.red .xbox, * html div.box div.box.red .xb1, * html div.box div.box.red .xb2, * html div.box div.box.red .xb3, * html div.box div.box.red .xb4 { border-color: #ddbbbb; } * html div.box div.box.red .xbox, * html div.box div.box.red .xb1, * html div.box div.box.red .xb2, * html div.box div.box.red .xb3, * html div.box div.box.red .xb4 { background: #f8ece4; } * html div.box div.box.red p.box_title, * html div.box div.box.red p.box_caption {background: #eed0ca;} * html div.box div.box.red .box_content {background: #fdf4ec;} /* green */ * html div.box.green .box_content, * html div.box.green .xbox, * html div.box.green .xb1, * html div.box.green .xb2, * html div.box.green .xb3, * html div.box.green .xb4 { border-color: #bbddbb; } * html div.box.green .xbox, * html div.box.green .xb1, * html div.box.green .xb2, * html div.box.green .xb3, * html div.box.green .xb4 { background: #e4f8f2; } * html div.box.green p.box_title, * html div.box.green p.box_caption {background: #c4e4d4;} * html div.box.green .box_content {background: #ecfaf6;} /* nested green */ * html div.box div.box.green .box_content, * html div.box div.box.green .xbox, * html div.box div.box.green .xb1, * html div.box div.box.green .xb2, * html div.box div.box.green .xb3, * html div.box div.box.green .xb4 { border-color: #bbddbb; } * html div.box div.box.green .xbox, * html div.box div.box.green .xb1, * html div.box div.box.green .xb2, * html div.box div.box.green .xb3, * html div.box div.box.green .xb4 { background: #e4f8f2; } * html div.box div.box.green p.box_title, * html div.box div.box.green p.box_caption {background: #c4e4d4;} * html div.box div.box.green .box_content {background: #ecfaf6;} /* orange */ * html div.box.orange .box_content, * html div.box.orange .xbox, * html div.box.orange .xb1, * html div.box.orange .xb2, * html div.box.orange .xb3, * html div.box.orange .xb4 { border-color: #da3; } * html div.box.orange .xbox, * html div.box.orange .xb1, * html div.box.orange .xb2, * html div.box.orange .xb3, * html div.box.orange .xb4 { background: #f4e8ca; } * html div.box.orange p.box_title, * html div.box.orange p.box_caption {background: #f0d499;} * html div.box.orange .box_content {background: #f8f0da;} /* nestedorange */ * html div.box div.box.orange .box_content, * html div.box div.box.orange .xbox, * html div.box div.box.orange .xb1, * html div.box div.box.orange .xb2, * html div.box div.box.orange .xb3, * html div.box div.box.orange .xb4 { border-color: #da3; } * html div.box div.box.orange .xbox, * html div.box div.box.orange .xb1, * html div.box div.box.orange .xb2, * html div.box div.box.orange .xb3, * html div.box div.box.orange .xb4 { background: #f4e8ca; } * html div.box div.box.orange p.box_title, * html div.box div.box.orange p.box_caption {background: #f0d499;} * html div.box div.box.orange .box_content {background: #f8f0da;} /* end plugin:box */ ===== Revision History ===== * 2006-04-25 --- XSS vulnerability fixed * 2006-04-20 --- darcs update only * markup updated inline with Dokuwiki fixes for PType block * corrections to syntax description * minor style changes for line-heights * 2006-03-11 --- 2006-01-24 patch applied to non-darcs package; * support for all CSS length units added * styles added to support box nesting * lists can now be included in boxes * 2006-01-24 --- darcs update only (package release held until after next Dokuwiki update) * support nesting of boxes * default style now uses Dokuwiki CSS substitutions * 2005-11-25 --- Added caption text (displayed below main box content). Added left & right styles. * 2005-10-25 --- Bug fix for merged paragraphs in boxes (thanks Matthias). * 2005-10-17 --- Bug fix for some windows php installations (thanks Pablo). * 2005-10-12 --- Released. ===== Security Fix ===== This fix is only applicable to those using older versions box plugin with DokuWiki versions prior to March 2006. Those running a Mar 2006 or later version of DokuWiki should update the plugin using the [[#sources]] lists above. Also apply Fix #2 detailed below. === Instructions === * locate the file ''lib/plugins/box/syntax.php'' * open it for editing in a text editor * replace the function _boxstyle($str) (around line #150) with the code given below. function _boxstyle($str) { if (!strlen($str)) return array(); $styles = array(); $tokens = preg_split('/\s+/', $str, 9); // limit is defensive foreach ($tokens as $token) { if (preg_match('/^\d*\.?\d+(%|px|em|ex|pt|cm|mm|pi|in)$/', $token)) { $styles['width'] = $token; continue; } // restrict token (class names) characters to prevent any malicious data if (preg_match('/[^A-Za-z0-9_-]/',$token)) continue; $styles['class'] = (isset($styles['class']) ? $styles['class'].' ' : '').$token; } return $styles; } * save the file This restricts the characters available for use in any custom style names to alphanumerics plus dash and underscore (e.g. A-Z, a-z, 0-9, _ -). It also updates box width detection to support any valid CSS length value. See syntax for details. ===== Security Fix 2 ===== This fix applies to all versions of the plugin prior to Mar 3, 2008. It is recommended that users of the plugin upgrade DW and this plugin to the most recent versions. For those interested who wish to fix the vulnerability with out updating. case 'box_close' : $renderer->doc .= "
\n"; if ($data) { - $renderer->doc .= "

".$data."

\n"; + $renderer->doc .= "

".$renderer->_xmlEntities($data)."

\n"; } $renderer->doc .= $this->_xhtml_boxclose(); break; Thanks to Andy Webber of Oracle's Ethical Hacking Team for discovering this flaw. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2008-03-03 17:46// ===== To Do ===== ===== Bugs ===== * Boxes can overlay TOC at top of the page. CSS fix needed. **Render bug with IE 6.0** - Running box plugin with roundbox template. Scrolling (or if box is big enough just page refreshes) sometimes causes lines/blocks of the box to not be updated leaving the background colour on display. Managed to replicate problem on box home dokuwiki [[http://wiki.jalakai.co.uk/dokuwiki/doku.php/tutorial/boxes|here]]. The bad region seems to be bigger if the box is larger (more text in it). --- //[[ja@vibtech.co.uk|Jonathan Alexander]] 2005-12-06 14:49// >Found a fix that seems to work for me from [[http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0|communitymx]] (thanks to Google) just inserted the code below under the "div.box .box_content" declaration in the style.css above. /* Hides from IE5-mac \*/ * html .div.box.box_content {height: 1%;} /* End hide from IE5-mac */ * **Missing

s (lots of ugly [[http://validator.w3.org|W3C-warnings]]):** foo bar results in this html:

foo

bar

as you can see, there's one

missing. --- //[[bernd@bzed.de|Bernd Zeimetz]] 2007-03-03 02:39 CET// \\ **solution**: change two lines in function render (near case 'box_open'): --- syntax.php 2008-02-27 23:44:08.000000000 +0100 +++ syntax.php.new 2008-02-27 23:55:23.000000000 +0100 @@ -129,9 +129,9 @@ case 'box_open' : if ($this->title_mode) { $this->title_mode = false; - $renderer->doc .= "

\n

"; + $renderer->doc .= "

\n
"; } else { - $renderer->doc .= $this->_xhtml_boxopen($data)."

"; + $renderer->doc .= $this->_xhtml_boxopen($data)."

"; } break; lines beginning with "-" are the original lines, the "+"-lines are the new ones. --- //[[stefan@kuchling.de|Stefan Kuchling]]// This patch has been added to the latest plugin version. Thanks Bernd and Stefan for your efforts. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2008-03-03 17:46// ===== Tips ===== ==== Alternate Syntax & Allowing markup in captions ==== Great plugin! I've modifed my copy and thought others might be interested. [[http://robmeerman.co.uk/coding/file_renamer|See example]]. Changes: - Syntax changed: ''**%%<<<%%** width classes | title ::: //content// ::: caption **%%>>>%%**'' - Markup allowed in captions - Title and caption may be over multple lines (i.e. multiple paragraphs) - Width may be specifed in %, px, em or ex //(now included in release version)// Being able to place markup in the caption is nice for when you want to draw attention to a note about, say, an alternative version of some software --- it looks really nice having the download link in the caption. It works well on my site, and the only problem it seems to have is that I can't nest boxes (not sure why). For complete code please see: [[:plugin:boxes_mod|Modifed Boxes]] --- //[[robert.meerman@gmail.com|Robert Meerman]] 2006/02/24 17:13// > Hi Robert, Have you tried your syntax with the nesting patch, I briefly looked at your code and didn't see anything that should prevent nesting. Cheers --- //[[chris@jalakai.co.uk|Christopher Smith]] 2006-02-24 19:26// ==== Backporting to 2005-07-13 ==== Here's what I did to backport this box plugin to the 2005-07-13 release. * Add style.css to the end of your template's ''design.css'' and ''print.css'': $ cd .../lib/plugins/box $ cat style.css >> ../../tpl/template_name/design.css $ cat style.css >> ../../tpl/template_name/print.css * Apply the following patch: --- box-orig/syntax.php 2005-11-24 13:28:17.000000000 -0800 +++ box/syntax.php 2005-12-16 14:52:48.000000000 -0800 @@ -45,6 +45,19 @@ function getType(){ return 'container';} function getAllowedTypes() { return array('container','substition','protected','disabled','formatting','paragraphs'); } + + function syntax_plugin_box(){ + global $PARSER_MODES; + $this->allowedModes = array_merge( + $PARSER_MODES['container'], + $PARSER_MODES['substition'], + $PARSER_MODES['protected'], + $PARSER_MODES['disabled'], + $PARSER_MODES['formatting'], + $PARSER_MODES['paragraphs'] + ); + } + function getPType(){ return 'normal';} // must return a number lower than returned by native 'code' mode (200) @@ -54,9 +67,9 @@ * Connect pattern to lexer */ function connectTo($mode) { - $this->Lexer->addEntryPattern('(?=.*?)',$mode,'plugin_box'); - $this->Lexer->addEntryPattern('(?=.*?)',$mode,'plugin_box'); - $this->Lexer->addEntryPattern('.*?)',$mode,'plugin_box'); + $this->Lexer->addEntryPattern('(?=.*?\x3C/box.*?\x3E)',$mode,'plugin_box'); + $this->Lexer->addEntryPattern('(?=.*?\x3C/box.*?\x3E)',$mode,'plugin_box'); + $this->Lexer->addEntryPattern('.*?\x3C/box.*?\x3E)',$mode,'plugin_box'); } function postConnect() { @@ -182,4 +195,4 @@ } ==== More Verbose CSS with More Color Options ==== This is a very handy plugin! I started to play with the CSS to do some custom things (I'm going to use this plugin in 3-4 Dokuwiki installations), namely to hide the inner border and a couple other small color tweaks. I ended up with something that I think it a bit more flexible to modify (separate definitions for separate borders), commented more (I tried to note some of the sections a bit better), and possibly more IE friendly (I think I fixed a problem with one of the background colors not displaying in IE 6). I'm no expert when it comes to css, so I can't guarantee I've done this 100% efficiently, but it holds up with every browser browsershots.org supports. The CSS can be see here: http://wiki.ryanjacobs.name/public/tech/dokuwiki_box_plugin_css In case anyone is interested... Cheers! --- //[[ryan.jake@gmail.com|Ryan Jacobs]]// ===== Discussion ===== Thanks, for the plugin, it looks really great. However I want to use it to highlight different content. For example I'd like to use to highlight math. How would I have to modify the source to parse a different css class to ? > You need to change the base pattern (in connectTo and postConnect) to math from box. For each different exit pattern you need another plugin, so the plugin name needs to be changed and the references to it in connectTo and postConnect. A better approach maybe to use ... , ... and adjust/add style names so the appropriate colours and corners show for the particular name. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2005-10-29 10:07// ---- Rather than using lots of different predefined styles, how about using a syntax similar to the phpBB colour plugin, and allow the user to define their choice of colours exactly? --- //[[webmaster@lajzar.co.uk|ta' Lajzar]] 2005-10-30 02:16// > Maybe. I didn't want to define styles as colours. It would be better to choose style names semantically, e.g. error, warning, information, syntax, formulae, alert, etc. However the meaning of each box style is likely to change from wiki to wiki, so I gave them neutral but descriptive names. For all that, I'll look at adding an optional syntax for those that want it. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2005-10-30 10:39// >> But if people use boxes in a page that is ''included'', they can then have the semantic context just as easily, and this retains the extra flexibility of freely defined colours for the box syntax. --- //[[webmaster@lajzar.co.uk|ta' lajzar]] 2005-10-31 07:27// Individual colour specification has been added to the latest release. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2008-03-03 17:46// ---- The code return by the plugin is not really standard xhtml, it's because all B tags are empty. In order to corect that, you must write   in all b tag in lines $html .=" \n"; //and $html .= " \n"; > To my knowledge the xhtml standard does't mind empty elements (refer [[http://www.w3.org/TR/xhtml1/#C_3]] and the w3c validator doesn't flag them either as an error or a warning. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2005-10-31 15:17// ---- Box plugin doesn't work for me. I'm running a fresh install of Doku 2006-03-09 with no other edits, plugins, or templates installed. Box plugin was installed via the plugin manager. [[http://www.ssdonline.us/wiki/doku.php?id=wiki:playground]] --- //[[smouser@verizon.net|Scott Mouser]]// > Plugin is working, styles aren't being picked up. I've added a comment and some ideas on your playground page. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2006-03-24 01:22// >;;>Thank you. Clearing the cache is exactly what was needed to get things working. I didn't see that mentioned anywhere else. I will go ahead and file a bug report, because you are right, the .css should have been regenerated after the plugin install. --- //[[smouser@verizon.net|Scott Mouser]]// >>>Dokuwiki and plugin manager have been patched to expire the cache and ensure a new CSS will be generated after any plugin is installed. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2006-04-19 03:14// >>>>Can someone post HERE how to clear the cache, because www.ssdonline.us seems to be down. >>>>I already sorted it out, and for everybody else, use the **[[plugin:cacherevisionseraser|Cache and Revisions Eraser]]** plugin! ---- This plugin has **XSS vulnerability**! Try this in IE: XSS test This fix works for me (lines 160-168): foreach ($tokens as $token) { if (preg_match('/^\d*\.?\d+(%|px|em|ex|pt|cm|mm|pi|in)$/', $token)) { $styles['width'] = $token; continue; } $token = trim(ereg_replace('[^a-zA-Z0-9_-]','',$token)); // <<-- this is new line $styles['class'] = (isset($styles['class']) ? $styles['class'].' ' : '').$token; } > Thanks Main script and plugin sources updated. Also see [[#security fix]]. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2006-04-25 18:17//. ---- Update of plugin silently overwrites style.css. Is there a solution preservingin localized style.css? E.g., a localization directory which overlays any CSS properties? Thanks. --- //[[burt@cs.miami.edu|Burt Rosenberg]] 2006-05-22 02:56// > How about [[devel:css|./conf/userstyle.css]]? That seems to work. Now, to figure out url() macro in .css file procesing --- //[[burt@cs.miami.edu|Burt Rosenberg]] 2006-05-22 04:12// ---- I'd like to use ''===== Level 2 Headline ====='' inside of the ''...''. How can I do that? Thank you in advance. > At present you can't, at least not directly. It should be possible to use the [[plugin:include|include plugin]] syntax within a box. The included page will then display inside the box. \\ \\ Note: It would be best to use my [[http://wiki.jalakai.co.uk/dokuwiki/doku.php/tutorials/include|alternate include plugin]] as it doesn't try to merge the included page into the current page's section structure - which could give unexpected results. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2006-06-16 01:41// >>That's exactly what I did but I didn't know about your "alternate" version of the include plugin so I hacked the original one:) ---- Looks like the layer for the box obscures the TOC box if a ''%%%%'' is placed in the first paragraph or two (content depending of course). > Yes. I have added it to bugs. I would guess a CSS fix is required either to TOC or box. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2006-07-04 23:42// ---- i think you should mention that the plugin will only work if you have //‘Allow embedded HTML’// turned on in dokuwiki's config. i just spent ages wondering why i couldn't get it to work, until i realised this. :-\ --- //[[xxxmadraxxx@gmail.com|madra]] 2006-08-05// > It doesn't require "allow embedded HTML" turned on. However, editing your wiki configuration files will have expired all DokuWiki's caches forcing regeneration of pages & css. Both of which are required for boxes to appear. As mentioned above, its a known bug fixed in [[changes#release 2006-11-06]] & preceding release candidates. \\ ---- \\ \\ I have a small issue with boxes and I was wondering if someone could help me perhaps? When I put a box on a page and try to put some spacing for new lines after the box with the usual markup it doesnt seem to display correctly. The text always appears to the right of the box no matter what I try. \\ I also noticed that on this site that there seems to be no need to use the typical markup for a new line. Why is that? \\ > Boxes styled left or right are floated. A cleared element will need to appear after the box to stop subsequent content floating next to it. You maybe able to work something with the div/span plugin. I'm not sure what you mean your last sentence. You only need to use %%\\%% for a single line break in a paragraph or to add extra line breaks between paragraphs. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2006-08-15 09:33// Cheers for the update Chris but Im not sure what you mean by a cleared element? So without the div/span plugin there is no way to resolve the issue? > You could also use the **clearfloat plugin** (search for it on [[plugins]]). Others suggested doing it via [[entities]] (unfortunately I haven't found the suggestion anywhere). Just put something like this ~CL~
into ''conf/entities.conf'' and use ''~CL~'' after each relevant box. What about a | before and after the text? ---- Thanks for the great plugin. I really enjoy the boxes :-) I have one suggestion/bug report. It seems that the current implementation of boxes do not like nested boxes. For example, I'd like to have something like this. {{xvdm:module:apdf:2d-apdf-overview-1.jpg?100|}} {{xvdm:module:apdf:2d-apdf-overview-2.jpg?100|}} {{xvdm:module:apdf:2d-apdf-overview-3.jpg?100|}} {{xvdm:module:apdf:2d-apdf-overview-4.jpg?100|}} {{xvdm:module:apdf:2d-apdf-overview-5.jpg?100|}} {{xvdm:module:apdf:2d-apdf-overview-6.jpg?100|}} If I do that I get overlapping boxes. However, If I do:
{{xvdm:module:apdf:2d-apdf-overview-1.jpg?100|}} {{xvdm:module:apdf:2d-apdf-overview-2.jpg?100|}} {{xvdm:module:apdf:2d-apdf-overview-3.jpg?100|}} {{xvdm:module:apdf:2d-apdf-overview-4.jpg?100|}} {{xvdm:module:apdf:2d-apdf-overview-5.jpg?100|}} {{xvdm:module:apdf:2d-apdf-overview-6.jpg?100|}}
Then it produces somthing what one would expect. Most probably my work around produces a completely incorrect html code, thought firefox shows quite nice results :-) ---- Please add a ''print.css''. I needs not very much content, just ''div.box.left{float:left}'' and such. Currently, a series of ''...'' looks pretty weared in print mode -- and takes up many papers -- without a float:left. --- //[[gviktor@gmail.com|Viktor Söderqvist]] 2007-02-28 05:06// ---- A toggle to clear the floats would make a nice option as I normally do not prefer text to wrap around the box. The only time I let the text wrap is when my boxes are near the ToC. I hard coded some float clearing since I generally do not want text wrapping around the boxes, however, that can mess with the ToC Div. Hence a toggle would be great. ---- :!: This creates bad xhtml, apparantly there are missing closing

in the box_content divs. FIXME\\ > fix? 143 $renderer->doc .= "

\n";

was missing ---- Hi - Thanks for a terrific plugin. I am having problems with boxes and captions when printing. I copied the plugins/box/style.css -> plugins/box/print.css and it works, but when I include a caption at the top an extra line is inserted between the box top and the caption. I'm using the monobook template. [[http://www.kabissa.org/wiki/doku.php?id=playground&rev=1178805954&mbdo=print|Click to see an example in my wiki playground]]. Would be most grateful for any suggestions. ---//[[http://www.saidia.org|Tobias]] (5/10/2007)// ---- Nice plugin. I'm wondering if it is possible to have the caption work like the title, where links can be embedded in it? ---- Hi, I have a lot of citation. I often copy and paste. Is it to possible to keep carriage return and avoid to add manually "%%\\%%" at the end of each new lines ?\\ Whereas good plugin. \\ \\ I noticed when I copy the code of the third box of [[http://wiki.jalakai.co.uk/dokuwiki/doku.php/test/boxes]] and paste here (or on my dokuwiki), the text box is on only one line. I don't include the caption \\ this is also boxed e.g. ** this is also boxed ** \\ \\ On your test page, the text box is on 3 lines. Why 1 line, me and you 3 lines on your page ? I copy and paste exactly the same source code. In your page, the carriage return is kept. \\ How can I have the same behavior ? So I will able to copy and paste keeping CR. > Yes. See the [[plugin:linebreak|linebreak plugin]] --- //[[chris@jalakai.co.uk|Christopher Smith]] 2007-07-26 13:08// ---- Hi Chris, Very nice and useful effects. Any thoughts about adding an icon on the title bar ?\\ See for example http://www.headshift.com/\\ I just don't understand how they did that!\\ Cheers, Peter Chan 2007-10-02 ---- Hi -- I am trying to use boxes in the latest Dokuwiki (2006-06-26b)but it doesn't seem to want to work. The only plug-in behavior that I've been able to identify is with markup in captions. If I bold the caption it displays the asterisks. If the plugin was just whiffing, wouldn't the markup work? Why would this not work? Thanks. Rick Reynolds 2008-01-16 > Formatting isn't currently supported in captions. However the modified boxes plugin, which uses a slightly different syntax does allow formatting in captions. See links above. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2008-03-03 17:46// >>That is right, but box_mod is not updated to support DW 2008-05-05: little layout errors, especially when there are more than one boxes on the page... In my experience works far more smoothly. [[gijsh@sherpanet.nl|Gijs van Gemert]] ---- It started working for me when I changed to the dokucms template. With the default template it won't work for me. 2008-02-11 ---- Is it possible to add support for absolute (or minimum) height for the boxes? I've tried doing it myself, but both my knowledge of PHP and CSS is insufficient to implement this. ---- Any chance of allowing the text colour to be altered (as black on dark colours is often unreadable)? Bob 4-Apr-08 ---- I noticed it was necessary to purge cache to allow new plugin's css instructions to be inserted: * I followed http://www.dokuwiki.org/wiki:caching advices, * I touched conf/local.php, edited and saved it ... * I selected 'embedded html' in config form still, no div.box css instruction in my css sheet, and box wont display properly. I finally found a file permission issue: ls -l box/style.css -rwx------ 1 box/style.css should that be fixed in archive.tgz ?