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, snazzy^TM boxes with rounded corners, boxes with titles and boxes or 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

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.

A simple box:

<box> the box contents </box>

A more complex box:

<box 80% round red|a title> the box contents </box>

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.

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.

Plugin sources:

• Dokuwiki version 2006-03-09 - zip format (4k), tar.gz format (3k), darcs repository
• for Dokuwiki 2005-09-22 zip format (4k), tar.gz format (3k)

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.

The plugin consists of two files, the plugin script syntax.php, lots of style rules for different box appearances in style.css.

<?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.
 *
 * 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 <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;
 
    /**
     * return some info
     */
    function getInfo(){
      return array(
        'author' => 'Christopher Smith',
        'email'  => 'chris@jalakai.co.uk',
        'date'   => '2006-03-11',
        'name'   => 'Box Plugin',
        'desc'   => 'Boxes with titles, colour and rounded corners. 
                     Syntax: <box|title> ... </box> title is optional.',
        'url'    => 'http://wiki.splitbrain.org/plugin:boxes',
      );
    }
 
    function getType(){ return 'protected';}
    function getAllowedTypes() { return array('container','substition','protected','disabled','formatting','paragraphs'); }
    function getPType(){ return 'normal';}
 
    // 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:                
                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 .= "</p>\n".$this->_xhtml_boxopen($data)."<p class='box_title'>";
            break;
 
          case 'box_open' :   
            if ($this->title_mode) {
                $this->title_mode = false;
                $renderer->doc .= "</p>\n<div class='box_content'><p>";
            } else {
                $renderer->doc .= "</p>\n".$this->_xhtml_boxopen($data)."<div class='box_content'><p>";
            }
            break;
 
          case 'data' :      
            $renderer->doc .= $renderer->_xmlEntities($data); 
            break;
 
          case 'box_close' : 
            $renderer->doc .= "</p></div>\n";
 
            if ($data) { 
              $renderer->doc .= "<p class='box_caption'>".$data."</p>\n";    
            }
            $renderer->doc .= $this->_xhtml_boxclose()."<p>"; 
            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;
          }
 
          $styles['class'] = (isset($styles['class']) ? $styles['class'].' ' : '').$token;
      }
 
      return $styles;
    }
 
    function _xhtml_boxopen($style) {
      $class = "class='box" . (isset($style['class']) ? ' '.$style['class'] : '') . "'";
      $style = isset($style['width']) ? " style='width: {$style['width']};'" : '';
 
      $html = "<div $class$style>\n";
      $html .="  <b class='xtop'><b class='xb1'></b><b class='xb2'></b><b class='xb3'></b><b class='xb4'></b></b>\n";
      $html .="  <div class='xbox'>\n";
 
      return $html;
    }
 
    function _xhtml_boxclose() {
 
      $html = "  </div>\n";
      $html .= "  <b class='xbottom'><b class='xb4'></b><b class='xb3'></b><b class='xb2'></b><b class='xb1'></b></b>\n";
      $html .= "</div>\n";
 
      return $html;
    }
 
}
 
//Setup VIM: ex: et ts=4 enc=utf-8 :

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

2006-03-11

Major update

Add support for box nesting, including extensive style revisions. Proper nesting requires support for the CSS child selector >. IE/Win revisions 6 and below get their own styles which will support two levels of nesting. Nesting beyond two levels will favour styles occuring later in styles.css

Add support for all legal CSS length measurements

2005-11-25

Add support for a caption below box

Add left & right styles.

2005-10-25

Bug fix - correct a problem with blank lines in boxes not being translated into new paragraphs.

2005-10-17

Bug fix - correct a problem with some windows php installations

2005-10-12

Released.

• feature request: extend syntax to allow specification of box colours

I have used your boxes for several years without problems. I just reloaded my computer with the latest dokuwiki (8-1-2010) and the boxes no longer work. All you get is the title with the appropriate colored background streching accross the entire page. I hope you have this fixed soon :)

Update - I deleted the "Popularity" plugin and "Box" started working again. I suspect that the new DokuWiki release has changed CSS style behavior and some plugins may have some conflicts.

Jan Zumwalt - 9/1/2010

text floats to the right, whats up with that?

Maybe you can take a look at the ClearFloat plugin to see if this could solve your "problem"??

Mischa The Evil

Very nice plugin indeed, I will try to check if it works with inline styles as well (i mean parsed output from other plugins…)

Go on with it!

Additional styles from Jonnay (thanks )
included in 2005-11-25 release

div.box.left {
  float: left;
  margin-right: 1em;
}
 
div.box.right {
  float: right;
  margin-left: 1em;
}

If a section ends with a left box, then the small "Edit" box on the right does not appear in the correct spot, since the left box if "floating". Any CSS wizards have a solution?

Try this …

.secedit { clear: both; }

I'll need to do some checking to see if there are any side-effects. If not its probably a change that should be added to Dokuwiki styles rather than this plugin. ie, I expect the same problem will effect left floated images. — Chris Smith 2005/12/17 09:28

my sample - doesn't work.

It appears Dokuwiki is not detecting the <box> syntax patterns. Early versions of the parser couldn't handle angle brackets in the look-ahead portions of patterns, hex entities needed to be used instead (e.g. "<" → \x3C & ">" → \x3E)

What version of Dokuwiki are you running? — Chris Smith 2006/02/07 15:32

It looks like he's running the same thing I am - a somewhat 'customized' version of Dokuwiki which has been turned into a module for Xoops. See Dokuwiki Xoops Module. It is not the standalone version of Dokuwiki and I'm not sure which version of DW was grafted into Xoops (possibly 9/22?). However, other less complex formatting plugins work, such as Esther's 'hilited' plugin. Box does not. Would you be able to supply a patch for Box's syntax.php file which replaces the angle brackets with hex entities so we know where to edit, pls? Would be greatly appreciated, since Box looks so darn nice. Dean-Ryan Stone 2006-03-09

Other changes have been made to the plugin class so it may not a be a straight forward patch. These are the entry pattern changes

    function connectTo($mode) {       
      $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]*?\x3E.*?\x3C/box.*?\x3E)',$mode,'plugin_box');      
    }

You may also need an updated base class file lib/plugins/syntax.php. A new release of Dokuwiki was made today. I'd strongly recommend upgrading to that or putting pressure on the Xoops module creator to upgrade to the new module. It should be possible now to contruct an Dokuwiki auth backend to properly link Dokuwiki's auth system with XOOPS users. — Chris Smith 2006/03/10 16:01

Almost there. Here's what my test boxes look like right now:

Here is the code for them:

<div class='box left round blue' style='width: 30%;'>
  <b class='xtop'><b class='xb1'></b><b class='xb2'></b><b class='xb3'></b><b class='xb4'></b></b>
  <div class='xbox'>
<div class='box_content'><p> testing </p></div>
  </div>
  <b class='xbottom'><b class='xb4'></b><b class='xb3'></b><b class='xb2'></b><b class='xb1'></b></b>
</div>
<p>   </p>
<div class='box right round green' style='width: 30%;'>
  <b class='xtop'><b class='xb1'></b><b class='xb2'></b><b class='xb3'></b><b class='xb4'></b></b>
  <div class='xbox'>
<div class='box_content'><p> testing </p></div>
  </div>
  <b class='xbottom'><b class='xb4'></b><b class='xb3'></b><b class='xb2'></b><b class='xb1'></b></b>
</div>
<p>  </p>
<div class='box green round'>
  <b class='xtop'><b class='xb1'></b><b class='xb2'></b><b class='xb3'></b><b class='xb4'></b></b>
  <div class='xbox'>
<p class='box_title'>&gt; BOX TITLE
</p>
<ul>
<li class="level1"><div class="li"> blah</div>
</li>
<li class="level1"><div class="li"> 2</div>
</li>
<li class="level1"><div class="li"> three</div>
</li>
</ul>
 
<p>
</p></div>
  </div>
  <b class='xbottom'><b class='xb4'></b><b class='xb3'></b><b class='xb2'></b><b class='xb1'></b></b>
</div>
<p>
</p>
 
<p>
</p>
<div class='box red square'>
  <b class='xtop'><b class='xb1'></b><b class='xb2'></b><b class='xb3'></b><b class='xb4'></b></b>
  <div class='xbox'>
<p class='box_title'>title&gt; contents </p></div>
  </div>
  <b class='xbottom'><b class='xb4'></b><b class='xb3'></b><b class='xb2'></b><b class='xb1'></b></b>
</div>

I know it's not your problem (there's obviously some issues that have come about where the Xoops body is rejecting the foreign grafted Dokuwiki code and the display is going fubar as a result) and it's unlikely that this guy will get around to porting the newer Dokuwiki to Xoops in the near future, I'm afraid. Maybe there's a quick fix for above? As you can see, when you add a |title to the box, the end tag appears to get translated into > instead. Any help would be appreciated. Also, the bottom curved border for any box with a title is busted. I updated syntax.php as advised. Sigh. Dean-Ryan Stone 2006-03-10

Did you try that code on my box test page? I think you need to put a space after the pipe. I should redo the entry pattern properly, it betrays my inexperience at regex at the time I wrote this. — Chris Smith 2006/03/11 03:00

Did you mean this page? If so I'm not sure what code you mean? Dean-Ryan Stone 2006-03-15

It could well have been a problem with the plugin itself. I have released an updated and improved version. Feel free to try any of your wiki syntax on my test page (the box test pages, the sandbox or the playground) and see if my wiki produces the same results as your Xoops version. — Chris Smith 2006/03/20 18:53

I'm using your plugin to make a navigation box, and it's got a small quirk, it seems. I can float a box to the right no problem, but if I try to float it to the left, it sits on the left side above the rest of the page content. If I don't specify a float it sits in the middle of the top of the page.

Chuck starchaser's test:

Hi, I met this problem too. It is since 2010-11-07 Dokuwiki. I am not a Dokuwiki programmer, So I dont understand the reasons maybe there is some change on rendering. I did a workaround - I killed one </div> tag in syntax.php as a workaround, round boxes are still broken, but normal works.

Hello and thank you for this great plugin.
I use it for 2 years within our dokuwiki and I'll try to give a proposal for a new feature.

I defined a lot of colours within the style.ini of my template and replaced the colours in the file style.css within the colour definitions of the style.ini.

; purple boxes
__purpleboxbor__ = "#8877bb";	;Box Border 
__purpleboxbgc__ = "#e4ecf8";	;Box Background 
__purpleboxtlc__ = "#cad0ee";	;Box Caption Background 
__purpleboxcbg__ = "#f4f8fd";	;Box Content Background 
__purpleboxtit__ = "#7755Bb";	;Box Title Color

But if I want to have an additional colour theme I have to copy and modify all CSS formats for a coloured box like following

/* purple */
div.box.purple, div.box.purple > * > .box_content, div.box.purple > .xbox, 
div.box.purple > * > .xb1, div.box.purple > * > .xb2, div.box.purple > * > .xb3, 
div.box.purple > * > .xb4 {
  border-color:  __purpleboxbor__;
}
 
div.box.purple, div.box.purple > .xbox, 
div.box.purple > * > .xb1, div.box.purple > * > .xb2, div.box.purple > * > .xb3, 
div.box.purple > * > .xb4 {
  background: __purpleboxbgc__;
}
 
div.box.purple > * > p.box_title, div.box.purple > * > p.box_caption {
   background: __purpleboxtlc__; color: __purpleboxtit__;}
div.box.purple > * > .box_content {background: __purpleboxcbg__;}

So it's possible to extend the plugin for more coloured boxes. But it's circuitous. So I thought, maybe it's possible to write only one CSS definition for all coloured boxes and the colours will be set by an other way. Maybe if you have more INI-Files within the plugin folder and if you want to have a blue box the colours from file "blue.ini" have to load.

I don't know if my proposal is understandable and possible, but I hope so. Regards, Anja Vag – 2007/01/08 11:06

The plug-in does not seem to work with the latest version of DokuWiki Antonino Sabetta – 2007-07-02 11:36

Can you be a little more specific. This wiki has run the current version and is generally updated regularly to the current development version. It runs the boxes plugin without an issue. — Chris Smith 2007/08/07 11:32

Experiencing the same. I'm using version dokuwiki-2007-06-26b. Here's my input/output:

In edit-modus (input):

<box 80% round orange|a title> the box contents</box>
<box 50% left blue>the box contents</box|a caption>

In view-modus (output):

a title
the box contents
the box contents
a caption

The <box> and </box> don't seem to be recognized. — Rogier 2007/08/07 16:00

Working now, don't know why? Something todo with cache? — Rogier 2007/08/07 17:23

The stylesheet is not loaded if you viewed the page just before. Clear browser cache and everything works fine. — Frank 2008/01/15 15:50

—-

I have tested this in the appropriate "box plugin" test area, and have found that the resulting boxes seem to always be the same width regardless of the xx% value placed in the opening "box" tag. Is this a temporary issue? My intention is to use these boxes as an alternative (or wrapper) for tables and/or images to "force" the page text to wrap around the table. I need the resulting boxes to be as compact as possible. — meztup 13.AUG.2007 05:38

Title are note allowed into box… for sure, But if you use the plugins blog inside a box it's became really magic, because the title are know parsed and moreover your Table of contents is okay :! (dokuwiki and dokuwiki developers are really wonderfull !!) exemple : http://jeanmarcmassou.free.fr/dokuwiki sorry (in french).

 
<box 75% round orange|a BLOG box exemple> 
{{blog>blogW&5}} 
</box>
 

may work too with include ?