Differences

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

--- plugin:box [2018-05-30 21:10] – Klap-in
+++ plugin:box [2023-10-31 00:58] (current) – Klap-in
@@ Line 1: / Line 1: @@
-====== box Plugin ======
+====== Box Plugin ======
 ---- plugin ----
@@ Line 6: / Line 6: @@
 email      : chris@jalakai.co.uk
 type       : syntax
-lastupdate : 2016-02-17
+lastupdate : 2022-08-16
-compatible : Elenor of Tsort, 2008-05-05 - 2005-09-22, Rincewind, Anteater, Angua, Weatherwax, Binky, Hrun, Detritus
+compatible : Elenor of Tsort, Frusterick Manners, Greebo, Hogfather, Igor
 depends    :
 conflicts  :
@@ Line 14: / Line 14: @@
 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 29: / 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 =====
@@ Line 94: / Line 90: @@
 ==== 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]]**
-===== 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 1045: / 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 1201: / 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//
+----