Differences

This shows you the differences between two versions of the page.

--- plugin:box [2014-02-17 10:23] – [box plugin] 182.72.62.190
+++ plugin:box [2023-10-31 00:58] (current) – Klap-in
@@ Line 1: / Line 1: @@
-====== box plugin ======
+====== Box Plugin ======
 ---- plugin ----
-description: Highlight particularly fghimportant parts of your wiki in boxes that stand out
+description: Highlight particularly important parts of your wiki in boxes that stand out
 author     : Christopher Smith
 email      : chris@jalakai.co.uk
 type       : syntax
-lastupdate : 2012-06-30
+lastupdate : 2022-08-16
-compatible : 2008-05-05 - 2005-09-22, Rincewind, Anteater, Angua, Weatherwax, Binky
+compatible : Elenor of Tsort, Frusterick Manners, Greebo, Hogfather, Igor
 depends    :
 conflicts  :
-similar    :
+similar    : note, wrap
 tags       : style, boxes
 downloadurl: https://github.com/Chris--S/dokuwiki-plugin-box/zipball/master
-bugtracker :
+bugtracker : https://github.com/Chris--S/dokuwiki-plugin-box/issues
 sourcerepo : https://github.com/Chris--S/dokuwiki-plugin-box
 donationurl:
@@ Line 22: / Line 21: @@
 ** While this plugin still works just fine, its functionality is subsumed by the [[plugin:wrap|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, snazzy<sup>TM</sup> 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
+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<sup>TM</sup> 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.
@@ Line 30: / Line 29: @@
 ==== 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]]
+  * 2010-01-30 Copied and pasted below code in style.css and syntax.php (./plugins/box/..). Works with latest 'Lemming' version.
-    * 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 [[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 =====
@@ Line 46: / Line 40: @@
   <box> the box contents </box>
 Some more complex boxes
@@ Line 91: / Line 84: @@
 ===== Installation =====
+Search and install the plugin using the [[plugin:extension|Extension Manager]].
+Alternatively, refer to [[:Plugins]] on how to install plugins manually. 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.
 ==== 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)]]
+  * Current:
+    * Please see download and git links above
   * Previous DokuWiki versions:
+    * [[http://dokuwiki.jalakai.co.uk/plugin-box.zip|zip format (6k)]], [[http://dokuwiki.jalakai.co.uk/plugin-box.tar.gz|tar.gz format (5k)]]
     * 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 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.
-<code php>
-<?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 :</code>
-==== style.css ====
-These may be modified to suit your own requirements.
-The file ''print.css'' is a duplicate of this file.
-<code css>
-/* 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 */
-</code>
 ===== Revision History =====
@@ Line 898: / Line 304: @@
 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
+The CSS can be see here: http://wiki.ryanjacobs.name/public/tech/dokuwiki_box_plugin_css  FIXME
 In case anyone is interested... Cheers! --- //[[ryan.jake@gmail.com|Ryan Jacobs]]//
@@ Line 960: / Line 366: @@
 ===== Discussion =====
+Thanks for the plugin. My question is if there is something I can do to preserve a blank line in the raw text without using the '<nowiki>\\ </nowiki>' syntax or by any other edit of the raw text? Thx & Bye
+ --- [[user>pronto|pronto]] //2014-07-30 11:31//
+----
 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>?
@@ Line 1050: / Line 462: @@
 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 <code>~CL~    <br style="clear: both;" /></code> into ''conf/entities.conf'' and use ''~CL~'' after each relevant box.
+> 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 <code>~CL~    <br style="clear: both;" /></code> into ''conf/entities.conf'' and use ''~CL~'' after each relevant box. (Better to use update-proof ''conf/entities.local.conf'', and add strings like
+<hr>     <hr />
+<br>     <br />
+<hrr>    <hr style="clear:both" />
+<brr>    <br style="clear:both" />
+ --- [[user>Rainbow_Spike@derpy.ru|dr-yukon]] //2020-09-06 14:32//)
 What about a | before and after the text?
@@ Line 1206: / Line 623: @@
  --- [[user>flam]] //2011/01/05 12:03//
+----
+Can we add a close button to it, so We can use it as notice?
 ----
-Can we add close button to it, so We can use it as notice ?
+:!: **Box** plugin not able to work correctly with **Include** plugin. Commonly **Box** hold any content in ''div.box div.xbox div.box_content''. But **Include** insertions drop down into ''div.box div.xbox''. Maybe it's due to incorrect state of //getType// or/and //getPType//. --- [[user>Rainbow_Spike@derpy.ru|dr-yukon]] //2019-01-03 13:26//
 ----
+Basic Dokuwiki engine works with images only through pixel widths. This plugin can be used as the percent zoomer. Add <code>div.box.img > .xbox > .box_content > a > img {
+	width: 100%;
+	width: -moz-available;
+	width: -webkit-fill-available;
+	width: stretch;
+}</code> in ''/lib/plugins/box/style.css'' and syntax it as ''<box center img 90%>%%{{%%your image}}</box>'' for inscreen zooming  --- [[user>Rainbow_Spike@derpy.ru|dr-yukon]] //2020-09-06 14:37//
+----