Welcome to the private homepage of Stephan Klimek. Mainly this a place to publish articles of my current interests, to host some of my software projects in development and to provide some personal stuff. This site was developed using the excellent dokuwiki framework. For further info you can have a look at the Inprint page and use this Contact form for any feedback or requests.

Software Index

Divclass Plugin

The Divclass Plugin plugin allows to assign div and span classes to wiki text. The classes can be defined in in any css file of the templates in use. The Divclass Plugin has also some pre-defined classes which can be used out of the box. Those classes were inspired by other plugins like the boxes, note and styler plugin.

Syntax

Formatting inline text using span:
<spanclass classname>...wiki..text...</spanclass>
 
Formatting text blocks using div:
<divclass classname>...wiki..text...</divclass>
 
Adding a header:
<divclass classname|header text>...wiki..text...</divclass>
 
Adding a footer:
<divclass classname|header text>...wiki..text...</divclass|footer text>

See examples blow, how to use this plugin.

Pre-defined classes

div/spanbasicmodifier
div,spanboxsolid, flat, dashed, dotted, rounded, transparent, gray, green, red, yellow, blue, right, left, full, half, width100, width50, width33, width25, width20
divhint, warning, error, quote
div rsslinks, boldlinks, noindent, nobullets, neutral
div …%, …px, …em, …ex (width)
span code

For a complete and always up to date list of pre-defined classes take a look at the stlye.css file in the Divclass Plugin directory.

Installation

Download the plugin and unpack the archive under the dokuwiki plugin directory.

Download

Download files in zip or compressed tar format:

Examples

The following examples are using the pre-defined classes of Divclass Plugin. But Divclass Plugin can be used with any available css div or span class.

Spanclass

Marking a words

Source:
This is just a very <spanclass red box solid>important</spanclass> word. 
And this a <spanclass code>code</spanclass> word.
Result:

This is just a very important word. And this a code word.

Divclass

Quote with author name in footer

Source:
<divclass quote>
This is just a quote with footer
</divclass|by an author>
Result:

This is just a quote with footer

Warnings and hints

Source:
<divclass warning 40% left>
This is a warning
</divclass>
<divclass hint 40% right rounded>
This is a hint
</divclass>
Result:

This is a warning

This is a hint

Floating blocks with embedded content

Source:
<divclass green 40% box left|Left side>
^A^Table^
|A|Column|
</divclass|green box>
<divclass green 40% box right|Right side>
  * Point1
  * Point2
</divclass|green box>
Result:
Left side
ATable
AColumn
Right side
  • Point1
  • Point2

Code in a round box (Firefox only)

Source:
<divclass full green box rounded>
<.code perl>die "goodbye" unless $alive;<./code> # remove .
</divclass>
Result:
die "goodbye" unless $alive;

Split a list into columns using pre-defined classes

Source:
<divclass width33 left>
  * Point 1 
  * Point 2 
</divclass>
<divclass width33 left>
  * Point 3 
  * Point 4 
</divclass>
<divclass width33 left>
  * Point 5 
  * Point 6 
</divclass>
Result:
  • Point 1
  • Point 2
  • Point 3
  • Point 4
  • Point 5
  • Point 6

Split a list into columns using %/px/em/ex settings

Source:
<divclass 25% left>
  * Point 1 
  * Point 2 
</divclass>
<divclass 100px left>
  * Point 3 
  * Point 4 
</divclass>
<divclass 10em left>
  * Point 5 
  * Point 6 
</divclass>
Result:
  • Point 1
  • Point 2
  • Point 3
  • Point 4
  • Point 5
  • Point 6
software/dokuwiki/plugins/divclass.txt · Last modified: 2007-01-26 18:19 by admin
init24.de = chi`s home Mac OS X Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Valid CSS Valid XHTML 1.0 Recent changes RSS feed