Table of Contents

block Plugin

Compatible with DokuWiki

  • 2024-02-06 "Kaos" unknown
  • 2023-04-04 "Jack Jackrum" unknown
  • 2022-07-31 "Igor" yes
  • 2020-07-29 "Hogfather" yes

plugin Create highly configurable boxes for text and image

Last updated on
2021-01-23
Provides
Syntax
Repository
Source
Conflicts with
cellbg

Similar to box, wrap

Tagged with style

By Myron Turner

Installation

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

Examples/Usage

This plugin has a toolbar icon which pops up a window with which you design your box, including border styles and colors, text color and box color, the width of the box in percentages, and the position of the box on the page.

You can either start by selecting your text and then designing your box or you can create your box and add text to it. You can also include images in these boxes; however, image position depends on the Dokuwiki markup.

The basic features of the box can be configured in the Configuration Manager. See below: configuration_options.

Main Dialog Window of Design Tool

Syntax is taken care of by the pop-up design tool.

Syntax Specification

/**
 *  <block width:alignment:background-color,text-color;border;font-family/font-size>
 *   text
 *  </block>
 *   width:  percent of window size
 *   alignment:  number of pixels from left margin, (0 or 'c' centers block), 'r' floats right
 *   border: CSS style: width type color
 *   font-family:  font name
 *   font size: specify points or pixels
 *
 *   Example:  
 *  <block 80:0:rgb(102, 51, 255);rgb(255, 255, 153);2px dashed rgb(255, 102, 255);Comic Sans MS /10pt> 
 *
 *  This creates a block 80% of page width,centered on page, background of block is rgb(102, 51, 255),
 *  text-color is rgb(255, 255, 153); the box border is 2px wide, dashed, its color is rgb(255, 102, 255).
 *  The font is 10pt Comic Sans MS.
 *   
 *  Only width and alignment are required. In this case, if alignment is 'c' or 'r', then you must follow it with a colon:  'c:'
 */
/**
* Default:
* <block 80:10:white;black;4px solid black;arial,sans-serif/10pt;>text</block>
* width: 80%
* alignment: 10 px from left
* background-color: white
* text-color: black
* border: 4px solid black
* font: 10pt Arial, Helvetica, sans-serif
*/

Rounded Corners

For rounded corners the syntax adds the rounded parameter to the end of the parameter list: 

<block 80:0:white;black;4px solid black;arial,sans-serif/9pt;rounded>

This option can be selected from the dialog.

Configuration Options

Option Description Default Notes
block_width Block width 80 Number of pixels specified as integer
bg Background color white Any valid css value
fg Text Color black Any valid css value
border_color Border color black Any valid css value
border_style Border style solid Selected from drop-down menu
border_width Border With 4px specified as pixels: <n>px
font_family Font or Font Family Arial, Helvetica, sans-serif Selected from drop-down menu
font_size Text size in points 10pt Specified as pt, px, or em
block_align Block Alignment 10 Either an integer representing number of pixels from left 1), or c for centered, or r for right aligned

Change Log

FAQ

The block plugin does not work with the ~~GOTO>[page]~~ syntax of the goto plugin in the hogfather distribution and later. All other functions are OK.

Discussion

I am having problem with heading used inside block as it swallows everything following. Input 

<block 100:0:#c7e1ff;black;0px solid black;;rounded>
=====heading=====
</block>

produces 

<div  class='blocks_round'  style='border: 0px solid black; width:100%; padding:8px;  margin: auto ;  background-color:#c7e1ff; color: black; '>
<h2 class="sectionedit4" id="heading">heading</h2>
<div class="level2">
</div>

Obviously one of the two <div>s is not terminated. I believe it is the second one <div class=“level2”>, because when not using heading inside the block, everything is ok. When adding a </div> after the block 

<html></div></html>

it works fine (although cumbersome) except for the inserted (undesirable) vertical space. I guess that inserting one more </div> before the block is ended might help. But only in the case that a heading was used within the block. I am afraid that block is not really aware of what is inside. Would it be a solution to create the block_heading (or somethink like that) plugin which assumes that heading is used inside the block and which generates one more </div> before the end? Or more elegantly to add to the current block plugin one more argument, specifying how many </div>s (I believe one should be enough) are to be generated before the block end.

Thanks for consideration :-)

I has an error when I clicked the menu button

I had to change the line of the file “script.js”, from 

     var url = encodeURI('lib/plugins/block/exe/block.php');

to 

     var url = encodeURI('lib/plugins/block/exe/block.php?');
Thank you. I've updated the plugin.

How can I get two 'blocks' next to each other?
Or some text and then a block to the right of it?
Every time I try it, the block doesn't 'share' its line with anything else. Thanks

Try it with the wrap plugin
Is there antother option except the wrap plugin? Because, when i try to use the wrap plugin, it doesn´t work.

Whenever I try to type in the box, Windows puts the text in the text Find (aka Search) box. Result is no text can go into the box.

Sorry I didn't see this eaarlier. But I can't reproduce this. The following page uses box throughout and from Windows: http://www.mturner.org/devel/doku.php — Myron Turner 2015-10-06 01:53

Is there any way to include the caption in a block with an image?

1)
0 will give you centered