====== Box Plugin ======
---- plugin ----
description: Highlight particularly important parts of your wiki in boxes that stand out
author : Christopher Smith
email : chris@jalakai.co.uk
type : syntax
lastupdate : 2022-08-16
compatible : Elenor of Tsort, Frusterick Manners, Greebo, Hogfather, Igor
depends :
conflicts :
similar : note, wrap
tags : style, boxes
downloadurl: https://github.com/Chris--S/dokuwiki-plugin-box/zipball/master
bugtracker : https://github.com/Chris--S/dokuwiki-plugin-box/issues
sourcerepo : https://github.com/Chris--S/dokuwiki-plugin-box
donationurl:
----
** 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, 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 ====
* 2010-01-30 Copied and pasted below code in style.css and syntax.php (./plugins/box/..). Works with latest 'Lemming' version.
* 2025-03-03 Works with Kaos, but adding that to the list of compatible versions broke the this whole Wiki
===== 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 =====
A simple box:
".$data." ".$renderer->_xmlEntities($data)."
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 .= "\n";
if ($data) {
- $renderer->doc .= "
Thanks to Andy Webber of Oracle's Ethical Hacking Team for discovering this flaw. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2008-03-03 17:46//
===== To Do =====
===== Bugs =====
* Boxes can overlay TOC at top of the page. CSS fix needed.
**Render bug with IE 6.0** - Running box plugin with roundbox template. Scrolling (or if box is big enough just page refreshes) sometimes causes lines/blocks of the box to not be updated leaving the background colour on display. Managed to replicate problem on box home DokuWiki [[http://wiki.jalakai.co.uk/dokuwiki/doku.php/tutorial/boxes|here]]. The bad region seems to be bigger if the box is larger (more text in it). --- //[[ja@vibtech.co.uk|Jonathan Alexander]] 2005-12-06 14:49//
>Found a fix that seems to work for me from [[http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0|communitymx]] (thanks to Google) just inserted the code below under the "div.box .box_content" declaration in the style.css above.
/* Hides from IE5-mac \*/
* HTML .div.box.box_content {height: 1%;}
/* End hide from IE5-mac */
* **Missing
foo
bar
results in this HTML:
foo
bar
as you can see, there's one missing. --- //[[bernd@bzed.de|Bernd Zeimetz]] 2007-03-03 02:39 CET// \\ **solution**: change two lines in function render (near case 'box_open'):
--- syntax.php 2008-02-27 23:44:08.000000000 +0100
+++ syntax.php.new 2008-02-27 23:55:23.000000000 +0100
@@ -129,9 +129,9 @@
case 'box_open' :
if ($this->title_mode) {
$this->title_mode = false;
- $renderer->doc .= "\n";
+ $renderer->doc .= "
\n";
} else {
- $renderer->doc .= $this->_xhtml_boxopen($data)."";
+ $renderer->doc .= $this->_xhtml_boxopen($data)."
";
}
break;
lines beginning with "-" are the original lines, the "+"-lines are the new ones. --- //[[stefan@kuchling.de|Stefan Kuchling]]//
This patch has been added to the latest plugin version. Thanks Bernd and Stefan for your efforts. --- //[[chris@jalakai.co.uk|Christopher Smith]] 2008-03-03 17:46//
===== Tips =====
==== Alternate Syntax & Allowing markup in captions ====
Great plugin! I've modified my copy and thought others might be interested. [[http://robmeerman.co.uk/coding/file_renamer|See example]]. FIXME
Changes:
- Syntax changed: ''**%%<<<%%** width classes | title ::: //content// ::: caption **%%>>>%%**''
- Markup allowed in captions
- Title and caption may be over multiple lines (i.e. multiple paragraphs)
- 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: [[boxes_mod|Modifed Boxes]]
--- //[[robert.meerman@gmail.com|Robert Meerman]] 2006/02/24 17:13//
> Hi Robert, Have you tried your syntax with the nesting patch, I briefly looked at your code and didn't see anything that should prevent nesting. Cheers --- //[[chris@jalakai.co.uk|Christopher Smith]] 2006-02-24 19:26//
==== Backporting to 2005-07-13 ====
Here's what I did to backport this box plugin to the 2005-07-13 release.
* Add style.css to the end of your template's ''design.css'' and ''print.css'':
$ cd .../lib/plugins/box
$ cat style.css >> ../../tpl/template_name/design.css
$ cat style.css >> ../../tpl/template_name/print.css
* Apply the following patch:
--- box-orig/syntax.php 2005-11-24 13:28:17.000000000 -0800
+++ box/syntax.php 2005-12-16 14:52:48.000000000 -0800
@@ -45,6 +45,19 @@
function getType(){ return 'container';}
function getAllowedTypes() { return array('container','substition','protected','disabled','formatting','paragraphs'); }
+
+ function syntax_plugin_box(){
+ global $PARSER_MODES;
+ $this->allowedModes = array_merge(
+ $PARSER_MODES['container'],
+ $PARSER_MODES['substition'],
+ $PARSER_MODES['protected'],
+ $PARSER_MODES['disabled'],
+ $PARSER_MODES['formatting'],
+ $PARSER_MODES['paragraphs']
+ );
+ }
+
function getPType(){ return 'normal';}
// must return a number lower than returned by native 'code' mode (200)
@@ -54,9 +67,9 @@
* Connect pattern to lexer
*/
function connectTo($mode) {
- $this->Lexer->addEntryPattern('(?=.*?)',$mode,'plugin_box');
- $this->Lexer->addEntryPattern('(?=.*?)',$mode,'plugin_box');
- $this->Lexer->addEntryPattern('.*?)',$mode,'plugin_box');
+ $this->Lexer->addEntryPattern('(?=.*?\x3C/box.*?\x3E)',$mode,'plugin_box');
+ $this->Lexer->addEntryPattern('(?=.*?\x3C/box.*?\x3E)',$mode,'plugin_box');
+ $this->Lexer->addEntryPattern('.*?\x3C/box.*?\x3E)',$mode,'plugin_box');
}
function postConnect() {
@@ -182,4 +195,4 @@
}
==== More Verbose CSS with More Color Options ====
This is a very handy plugin! I started to play with the CSS to do some custom things (I'm going to use this plugin in 3-4 DokuWiki installations), namely to hide the inner border and a couple other small color tweaks. I ended up with something that I think it a bit more flexible to modify (separate definitions for separate borders), commented more (I tried to note some of the sections a bit better), and possibly more IE friendly (I think I fixed a problem with one of the background colors not displaying in IE 6).
I'm no expert when it comes to CSS, so I can't guarantee I've done this 100% efficiently, but it holds up with every browser browsershots.org supports.
The CSS can be see here: http://wiki.ryanjacobs.name/public/tech/dokuwiki_box_plugin_css FIXME
In case anyone is interested... Cheers! --- //[[ryan.jake@gmail.com|Ryan Jacobs]]//
==== Add support for ODT export ====
This adds very basic support for the [[plugin:odt|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. My question is if there is something I can do to preserve a blank line in the raw text without using the '\\ ' 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 \n";
was missing
----
Hi - Thanks for a terrific plugin. I am having problems with boxes and captions when printing. I copied the plugins/box/style.css -> plugins/box/print.css and it works, but when I include a caption at the top an extra line is inserted between the box top and the caption. I'm using the monobook template. [[http://www.kabissa.org/wiki/doku.php?id=playground&rev=1178805954&mbdo=print|Click to see an example in my wiki playground]]. Would be most grateful for any suggestions. ---//[[http://www.saidia.org|Tobias]] (5/10/2007)//
----
Nice plugin. I'm wondering if it is possible to have the caption work like the title, where links can be embedded in it?
----
Hi, I have a lot of citation. I often copy and paste.
Is it to possible to keep carriage return and avoid to add manually "%%\\%%" at the end of each new lines ?\\
Whereas good plugin. \\
\\
I noticed when I copy the code of the third box of [[http://wiki.jalakai.co.uk/dokuwiki/doku.php/test/boxes]] and paste here (or on my DokuWiki), the text box is on only one line. I don't include the caption \\
this is
also
boxed
e.g. ** this is
also
boxed
**
\\ \\
On your test page, the text box is on 3 lines. Why 1 line, me and you 3 lines on your page ? I copy and paste exactly the same source code. In your page, the carriage return is kept. \\
How can I have the same behavior ? So I will able to copy and paste keeping CR.
> Yes. See the [[plugin:linebreak|linebreak plugin]] --- //[[chris@jalakai.co.uk|Christopher Smith]] 2007-07-26 13:08//
>> Also see the [[plugin:xbr|linebreak renderer]] --- //[[chris@jalakai.co.uk|Christopher 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. --- //[[chris@jalakai.co.uk|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 works far more smoothly. [[gijsh@sherpanet.nl|Gijs van Gemert]]
----
It started working for me when I changed to the dokucms template. With the default template it won't work for me. 2008-02-11
----
Is it possible to add support for absolute (or minimum) height for the boxes? I've tried doing it myself, but both my knowledge of PHP and CSS is insufficient to implement this.
> Yes, there is a height support now. Check my modified plugin: [[plugin:boxwh|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 [[:devel: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)."_title_colours}>";
...
(line 139) $renderer->doc .= "
\n_content_colours}>";
...
(line 153) $renderer->doc .= "_title_colours}>".$renderer->_xmlEntities($data)."
\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}**
//---[[http://www.cyclotronp.net|ZebulonT]] -- 2009-07-05 16:37//
----
I have new dokuwiki version (Anteater). Box plugin now puts one 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.
--- [[user>flam]] //2011/01/05 12:03//
----
Can we add a 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 div.box.img > .xbox > .box_content > a > img {
width: 100%;
width: -moz-available;
width: -webkit-fill-available;
width: stretch;
}
in ''/lib/plugins/box/style.css'' and syntax it as ''%%{{%%your image}} '' for inscreen zooming --- [[user>Rainbow_Spike@derpy.ru|dr-yukon]] //2020-09-06 14:37//
----
Works with DokuWiki version Kaos, but when I added that to the list of compatible versions the whole page went blank. So I took out the change and put this comment in instead. James Powell, March 3, 2025.
----