Box Plugin

Highlight particularly important parts of your wiki in boxes that stand out with Box Plugin.

A simple box:

<box> the box contents </box>

Some more complex boxes

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

<box 50% left blue>the box contents</box|a caption>

<box 60% round #f99 #fc9 #fcc #f60|title>the box contents</box|caption>

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

• width — any legal CSS width value
• classes — any number of classes which use the styles in your template or the plugin's own stylesheet to determine the look of the box. The box plugins comes with the following classes already defined:
  • round — box will have rounded corners
  • blue — blue colour scheme
  • red — red colour scheme
  • green — green colour scheme
  • orange — orange colour scheme
  • left — float the box left within the wiki page
  • right — float the box right within the wiki page

if no classes are specified the default styles will be used, that is square corners in a colour scheme based on the default DokuWiki colour scheme.

• colours — 1-4 colours in CSS hex or RGB notation, e.g. #F00 #fcab94 rgb(255,255,0). The colours are applied in order to:
  1. content background
  2. title background
  3. outer box background
  4. borders

if less than four colours are specified, the first colour is used for the missing colours.

• title text — text (including DokuWiki markup) displayed above the box contents, with distinct style.
• caption text — text (no markup allowed) displayed below the box contents, with distinct style.

The opening <box … > including the title must all appear on one line. The box contents can appear over as many lines as are needed.

See the plugin in action here. The sample page shows all the styles available with the plugin.

'let us start a quote and not finish it.

<div class='box'>
  <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 text would go here</p>
    <div class='box_content'>
      <p>Including this html snippet of a box</p>
      <p>All those &lt;b&gt; tags handle the rounded corners</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 will have to check this out
  * tomorrow
  * on my wiki

  * I will have to check this out
  * tomorrow
  * on my wiki

This is a right-hand side box with a picture and caption.

Boxes in boxes works but will create another line per box, an inline option would be nice.