DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:box

box plugin

Compatible with DokuWiki

  • 2013-12-08 "Binky" yes
  • 2013-05-10 "Weatherwax" yes
  • 2012-10-13 "Adora Belle" unknown
  • 2012-01-25 "Angua" yes

plugin Highlight particularly important parts of your wiki in boxes that stand out

Last updated on
2012-06-30
Provides
Syntax
Repository
Source
Conflicts with
boxes_mod, boxwh, workflow

Similar to block, boxes_mod, boxwh, class, note, wrap

Tagged with boxes, style

Needed for autoincludeindex

While this plugin still works just fine, its functionality is subsumed by the Wrap Plugin.

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 here
    • 2009-09-24 that link is broken :(
    • 2009-10-28 that link seems to work now :-)
    • 2009-12-13 again broken :(
    • 2010-01-30 Copied and pasted below code in style.css and syntax.php (./plugins/box/..). Works with latest 'Lemming' version.

Acknowledgment

The rounded corners are based on snazzy borders by Stu Nicholls of CSS Play which in turn were inspired by Alessandro Fulciniti's nifty corners.

Syntax

A simple box:

<box> the box contents </box>

Some more complex boxes

<box 80% round orange|a title> the box contents</box>
<box 50% left blue>the box contents</box|a caption>
<box 60% round #f99 #fc9 #fcc #f60|title>the box contents</box|caption>

The full syntax:

<box width classes colours | title text> contents text </box>

  • 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:
    1. content background
    2. title background
    3. outer box background
    4. 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 <box … > 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 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:

If your wiki uses either the plugin manager or the 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 different 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.

<?php
/**
 * Box Plugin: Draw highlighting boxes around wiki markup
 *
 * Syntax:     <box width% classes|title>
 *   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.
 *
 * Acknowledgments:
 *  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 <chris@jalakai.co.uk>  
 */
 
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-11-11',
        'name'   => 'Box Plugin',
        'desc'   => 'Boxes with titles, colour and rounded corners. 
                     Syntax: <box width class colours|title> ... </box|caption>
                     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('<box>(?=.*?</box.*?>)',$mode,'plugin_box');
      $this->Lexer->addEntryPattern('<box\s[^\r\n\|]*?>(?=.*?</box.*?>)',$mode,'plugin_box');
      $this->Lexer->addEntryPattern('<box\|(?=[^\r\n]*?\>.*?</box.*?\>)',$mode,'plugin_box');      
      $this->Lexer->addEntryPattern('<box\s[^\r\n\|]*?\|(?=[^\r\n]*?>.*?</box.*?>)',$mode,'plugin_box');      
    }
 
    function postConnect() {
      $this->Lexer->addPattern('>', 'plugin_box');
      $this->Lexer->addExitPattern('</box.*?>', '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:                
                $handler->_addCall('cdata',array($match), $pos);
                return false;
 
            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) {
 
      if (empty($indata)) return false;
      list($instr, $data) = $indata;
 
      if($mode == 'xhtml'){
          switch ($instr) {
          case 'title_open' : 
            $this->title_mode = true;
            $renderer->doc .= $this->_xhtml_boxopen($data)."<p class='box_title'{$this->_title_colours}>";
            break;
 
          case 'box_open' :   
            if ($this->title_mode) {
              $this->title_mode = false;
              $renderer->doc .= "</p>\n<div class='box_content'{$this->_content_colours}>";
            } else {
              $renderer->doc .= $this->_xhtml_boxopen($data)."<div class='box_content'{$this->_content_colours}>";
            }
            break;
 
          case 'data' :      
            $renderer->doc .= $renderer->_xmlEntities($data); 
            break;
 
          case 'box_close' : 
            $renderer->doc .= "</div>\n";
 
            if ($data) { 
              $renderer->doc .= "<p class='box_caption'{$this->_title_colours}>".$renderer->_xmlEntities($data)."</p>\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 = "<div $class$style>\n";
      $html .="  <b class='xtop'><b class='xb1'$colours></b><b class='xb2'$colours></b><b class='xb3'$colours></b><b class='xb4'$colours></b></b>\n";
      $html .="  <div class='xbox'$colours>\n";
 
      return $html;
    }
 
    function _xhtml_boxclose() {
 
      $colours = $this->_xb_colours;
 
      $html = "  </div>\n";
      $html .= "  <b class='xbottom'><b class='xb4'$colours></b><b class='xb3'$colours></b><b class='xb2'$colours></b><b class='xb1'$colours></b></b>\n";
      $html .= "</div>\n";
 
      return $html;
    }
 
}
 
//Setup VIM: ex: et ts=4 enc=utf-8 :

style.css

These may be modified to suit your own requirements.

The file print.css is a duplicate of this file.

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

  • 2008-11-11 — Add print.css, change plugin URL + other minor alterations
  • 2008-03-03 — Security fix + add support for specifying colours in box syntax
  • 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 alphanumeric characters 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 .= "</div>\n";
 
            if ($data) { 
-              $renderer->doc .= "<p class='box_caption'>".$data."</p>\n";
+              $renderer->doc .= "<p class='box_caption'>".$renderer->_xmlEntities($data)."</p>\n";
            }
            $renderer->doc .= $this->_xhtml_boxclose(); 
            break;

Thanks to Andy Webber of Oracle's Ethical Hacking Team for discovering this flaw. — 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 here. The bad region seems to be bigger if the box is larger (more text in it). — Jonathan Alexander 2005-12-06 14:49

Found a fix that seems to work for me from 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 </p>s (lots of ugly W3C-warnings):
    <box>
    foo
    
    bar
    </box>

    results in this HTML:

    <div class='box_content'><p> foo
    <p>
    bar 
    </p>
    </div>

    as you can see, there's one </p> missing. — 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 .= "</p>\n<div class='box_content'><p>";
    +                $renderer->doc .= "</p>\n<div class='box_content'>";
                 } else {
    -                $renderer->doc .= $this->_xhtml_boxopen($data)."<div class='box_content'><p>";
    +                $renderer->doc .= $this->_xhtml_boxopen($data)."<div class='box_content'>";
                 }
                 break;

    lines beginning with ”-” are the original lines, the ”+”-lines are the new ones. — Stefan Kuchling

This patch has been added to the latest plugin version. Thanks Bernd and Stefan for your efforts. — Christopher Smith 2008-03-03 17:46

Tips

Alternate Syntax & Allowing markup in captions

Great plugin! I've modified my copy and thought others might be interested. See example. FIXME

Changes:

  1. Syntax changed: <<< width classes | title ::: content ::: caption >>>
  2. Markup allowed in captions
  3. Title and caption may be over multiple lines (i.e. multiple paragraphs)
  4. Width may be specified 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: Modifed Boxes

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 — 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('<box>(?=.*?</box.*?>)',$mode,'plugin_box');
-      $this->Lexer->addEntryPattern('<box\s[^\r\n\|]*?>(?=.*?</box.*?>)',$mode,'plugin_box');
-      $this->Lexer->addEntryPattern('<box\s[^\r\n\|]*?\|(?=[^\r\n]*?>.*?</box.*?>)',$mode,'plugin_box');      
+      $this->Lexer->addEntryPattern('<box>(?=.*?\x3C/box.*?\x3E)',$mode,'plugin_box');
+      $this->Lexer->addEntryPattern('<box\s[^\r\n\|]*?>(?=.*?\x3C/box.*?\x3E)',$mode,'plugin_box');
+      $this->Lexer->addEntryPattern('<box\s[^\r\n\|]*?\|(?=[^\r\n]*?>.*?\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 Jacobs

Add support for ODT export

This adds very basic support for the OpenOffice/ODT export plugin; no colours; no alignment, no fancy formatting; but basic content is emitted.

$ diff -u syntax.php.dist syntax.php
--- syntax.php.dist        2009-06-22 06:45:22.000000000 +0100
+++ syntax.php        2009-06-24 12:55:14.000000000 +0100
@@ -157,6 +157,45 @@
         }

         return true;
+      } elseif($mode == 'odt'){
+          switch ($instr) {
+          case 'title_open' :
+            $this->title_mode = true;
+            $renderer->table_open(1);
+            $renderer->tablerow_open();
+            $renderer->tableheader_open(1, "left");
+            break;
+
+          case 'box_open' :
+            if ($this->title_mode) {
+              $this->title_mode = false;
+              $renderer->tableheader_close();
+              $renderer->tablerow_close();
+              $renderer->tablerow_open();
+              $renderer->tablecell_open();
+            } else {
+              $renderer->table_open(1);
+              $renderer->tablerow_open();
+              $renderer->tablecell_open();
+            }
+            break;
+
+          case 'data' :
+            $renderer->doc .= $renderer->cdata($data);
+            break;
+
+          case 'box_close' :
+            $renderer->tablecell_close();
+            $renderer->tablerow_close();
+            $renderer->table_close();
+            if ($data) {
+              $renderer->p_open('legendcenter');
+              $renderer->doc .= $renderer->cdata($data);
+              $renderer->p_close();
+            }
+            break;
+        }
+        return true;
       }
       return false;
     } 

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 <math> to highlight math. How would I have to modify the source to parse a different CSS class to <math>?

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 <box math> … </box>, <box somethingelse> … </box> and adjust/add style names so the appropriate colours and corners show for the particular name. — 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? — 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. — 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. — ta' lajzar 2005-10-31 07:27

Individual colour specification has been added to the latest release. — 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 correct that, you must write &nbsp; in all b tag in lines

$html .="  <b class='xtop'><b class='xb1'></b><b class='xb2'></b><b class='xb3'></b><b class='xb4'></b></b>\n";
//and
$html .= "  <b class='xbottom'><b class='xb4'></b><b class='xb3'></b><b class='xb2'></b><b class='xb1'></b></b>\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. — Christopher Smith 2005-10-31 15:17

Box plugin doesn't work for me. I'm running a fresh install of DokuWiki 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:playgroundScott Mouser

Plugin is working, styles aren't being picked up. I've added a comment and some ideas on your playground page. — 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. — 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. — 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 Cache and Revisions Eraser plugin!

—-

This plugin has XSS vulnerability!

Try this in IE:

<box ' style="background-image:url(javascript:alert('bla'))">
  XSS test
</box>

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. — 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 Rosenberg 2006-05-22 02:56

How about ./conf/userstyle.css? That seems to work. Now, to figure out url() macro in .css file processing — Burt Rosenberg 2006-05-22 04:12

I'd like to use ===== Level 2 Headline ===== inside of the <box>…</box>. 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 include plugin syntax within a box. The included page will then display inside the box.

Note: It would be best to use my 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. — 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 <box></box> 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. — 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. :-\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 and CSS. Both of which are required for boxes to appear. As mentioned above, its a known bug fixed in release 2006-11-06 & preceding release candidates.




<box 90% green round>
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 doesn't 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?
</box>

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. — Christopher Smith 2006-08-15 09:33

Cheers for the update Chris but I'm 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~    <br style="clear: both;" />

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.

  <box round 840px>
    <box round 120px left>{{xvdm:module:apdf:2d-apdf-overview-1.jpg?100|}}</box| Initial Partition>
    <box round 120px left>{{xvdm:module:apdf:2d-apdf-overview-2.jpg?100|}}</box| 1st Iteration>
    <box round 120px left>{{xvdm:module:apdf:2d-apdf-overview-3.jpg?100|}}</box| 2nd Iteration>
    <box round 120px left>{{xvdm:module:apdf:2d-apdf-overview-4.jpg?100|}}</box| 3rd Iteration>
    <box round 120px left>{{xvdm:module:apdf:2d-apdf-overview-5.jpg?100|}}</box| 4th Iteration>
    <box round 120px left>{{xvdm:module:apdf:2d-apdf-overview-6.jpg?100|}}</box| 5th Iteration>
  </box| Creation of the APDF Tree>

If I do that I get overlapping boxes. However, If I do:

<box round 840px>
<html>
<table><tr><td></html>
<box round 120px left>{{xvdm:module:apdf:2d-apdf-overview-1.jpg?100|}}</box| Initial Partition>
<box round 120px left>{{xvdm:module:apdf:2d-apdf-overview-2.jpg?100|}}</box| 1st Iteration>
<box round 120px left>{{xvdm:module:apdf:2d-apdf-overview-3.jpg?100|}}</box| 2nd Iteration>
<box round 120px left>{{xvdm:module:apdf:2d-apdf-overview-4.jpg?100|}}</box| 3rd Iteration>
<box round 120px left>{{xvdm:module:apdf:2d-apdf-overview-5.jpg?100|}}</box| 4th Iteration>
<box round 120px left>{{xvdm:module:apdf:2d-apdf-overview-6.jpg?100|}}</box| 5th Iteration>
<html></td></tr></table></html>
</box| Creation of the APDF Tree>

Then it produces something 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 <box 20% left>…</box> looks pretty weird in print mode – and takes up many papers – without a float:left. — Viktor Söderqvist 2007-02-28 05:06

Added — Christopher Smith 2008/11/11 06:26

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, apparently there are missing closing </p> in the box_content divs. FIXME

fix?
143 $renderer->doc .= "</p></div>\n";
</p> 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. Click to see an example in my wiki playground. Would be most grateful for any suggestions. —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

<box green > this is
also 
boxed
</box|boxed & captioned>

e.g. <box green > this is also boxed </box|boxed & captioned>

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 linebreak pluginChristopher Smith 2007-07-26 13:08
Also see the linebreak rendererChristopher Smith 2008/11/11 06:26

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. — Christopher Smith 2008-03-03 17:46
That is right, but box_mod is not updated to support DokuWiki 2008-05-05: little layout errors, especially when there are more than one boxes on the page… In my experience <box> works far more smoothly. 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.

Yes, there is a height support now. Check my modified plugin: boxwh plugin

—- 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 DokuWiki 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 ?


Thanks for this plugin.
I made a little change on 3 lines in syntax.php to produce an XHTML compliant document. (It is just some space missing characters…)

(line 133)  $renderer->doc .= $this->_xhtml_boxopen($data)."<p class='box_title' {$this->_title_colours}>";
...
(line 139)  $renderer->doc .= "</p>\n<div class='box_content' {$this->_content_colours}>";
...
(line 153)  $renderer->doc .= "<p class='box_caption' {$this->_title_colours}>".$renderer->_xmlEntities($data)."</p>\n";
  • Add a space character between class='box_title' and {$this→_title_colours}
  • Add a space character between class='box_content' and {$this→_content_colours}
  • Add a space character between class='box_caption' and {$this→_title_colours}

ZebulonT – 2009-07-05 16:37


I have new dokuwiki version (Anteater). Box plugin now puts one </div> more on the end of a box and kills all remaining layout and styles. Is it a bug of box plugin or dokuwiki itself? Pletiplot – 2010-12-20


Please correct your CSS.

The rule @CHARSET “UTF-8”; in your print.css is not valid.

flamflam

Aachen
2011/01/05 12:03


Can we add close button to it, so We can use it as notice ?


plugin/box.txt · Last modified: 2014/02/22 15:15 by ach