I-TEC

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Box Plugin =====

Highlight particularly important parts of your wiki in boxes that stand out with [[doku>plugin:box|Box Plugin]].

A simple box:

  <box> the box contents </box>
<box> the box contents </box>


Some more complex boxes

  <box 80% round orange|a title> the box contents</box>
<box 80% round orange|a title> the box contents</box>
\\ \\
  <box 50% left blue>the box contents</box|a caption>
<box 50% left blue>the box contents</box|a caption>
\\ \\ \\ \\ 
  <box 60% round #f99 #fc9 #fcc #f60|title>the box contents</box|caption>
<box 60% round #f99 #fc9 #fcc #f60|title>the box contents</box|caption>
\\

=====Full syntax  ====

''**<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:
    - content background
    - title background
    - outer box background
    - 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 [[http://wiki.jalakai.co.uk/dokuwiki/doku.php/test/boxes|here]]. The sample page shows all the styles available with the plugin.


===== Box Plugin Examples====


<box left>
testing
</box>


<box 80% round red|a title> the box contents </box>
<box> 30% left[[ the most basic box]]</box>

'let us start a quote and not finish it.

<box white|Boxed & //titled// > this isn't
also 
boxed
</box>

<box round #f99 #99f #fc9 #f60|using hex colours>lorem ipsum dolor ...</box>

<box round rgb(0,255,127)|using rgb colours>lorem ipsum dolor ...</box>

-----------------------------------------------------
<box 98% round  blue> 
\\
This is a test of the box using named color <del>rgb colors</del> and I want a border but don't know how to add one. There, it's done... but what colors are available?
\\
\\
Oh, I see now (I read the docs) and everything is ok.
\\
\\
</box|The bottom credits goes here (if only I could align this right)>
-----------------------------------------------------

<box white > this is
also 
boxed
</box|boxed & captioned>

<box round orange>as is this</box>

<box round 75% | title **with //fo''rma''tt//ing**, a [[link]] and rounded corners :-) >boxes can also contain markup...
  * a list
  * of several 
  * items

<code html>
<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>
</code>

=== headings aren't allowed in boxes ===

| but | tables | are |

and plugins ... 
  ; definition : list : list : list

and a [[link]] </box|Wow, a lot of stuff>


<box |title>a box to match 
the default dokuwiki colour scheme</box>

<box |Example box>
to test what is possible:
**NICE PLUGIN:**
You can 
  * make Lists
  * other markup
  * set the color of the box
  * ...

looks good?

</box>


<box 70% red round| title>red box, 80% wide, with a title</box>

<box blue left> this is a blue box</box>

<box blue right> this is a blue box</box>

<box 40% blue round| title>blue box with a title</box>

<box 80% green round| title>a wide green box</box>

<box orange>and an orange box
</box>

<box 40% left round blue | title teste> testing </box>  
<box 40% right round green  | title test> testing </box> 
<box 45% left round blue | title teste> testing </box>  
<box 45% right round green  | title test> testing </box>
// 
// 
<box 45% left round black|Is the colour wrong?>
this is
also 
boxed
</box>
// 
// 
<box 45% right round green  | title test> 
testing 123456 gagagaga gaggagagaga gaagagagag agagagag agaga gaagagaga gagagagag agagaggag agagaga gag agag
</box>
// 
// 
<box 80% left round|**Simple box with rounded edges and title**>
I wonder what uses I could find for a box...
  * I will have to check this out
  * tomorrow
  * on my wiki
  <box 70% orange>But can there be a box inside of a box?</box|Yes! there can!>
</box>

 

<box 15% left round>
**Simple box with rounded edges and no title**
But with some "code", not really code, but just code layout
<code>
  * I will have to check this out
  * tomorrow
  * on my wiki
</code>
</box>


<box 25% right round>
**Same thing on the right handside**
But with some "code", not really code, but just code layout
<code>
  * I will have to check this out
  * tomorrow
  * on my wiki
</code>
</box>

===== Headline =====

<box 430px right round>
{{:cache_mathplugin:dokuwiki-64.png|}}
</box | 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.
<box 250px left blue|This is the parent>
<box 100px left red | this is a child>Child Box</box>
<box 100px right orange | this is another child>Another child that i would like inlined with one before</box>
</box>

<box 250px left blue|This is the parent>
<box 150px left red | this is a child>Child Box
<box 75px right orange | this is a nested child>Another child that i would like inlined with one before</box>
</box>
</box>
I-TEC

User Tools

Site Tools

Page Tools
