User:John Reid/divbox3

Basic

Example1001

Numbered parms are acceptable. In this case, the 1st parameter is colorkey; the 2nd is title; the 3rd is content.

Markup: {{divbox |default |Example1001 |content}}

Example1002

Named parms are also acceptable. They can be mixed with numbered parms but use caution.

Markup: {{divbox |colorkey=default |title=Example1002 |content=content}}

Float & width

Example1003a

Width can be set as number of columns or explicitly.

Markup: {{divbox |width=2 |...|...}}

Example1003b

Markup: {{divbox| width=3 |...|...}}

Example1003c

Markup: {{divbox |width=300px |...|...}}

Example1004a

Float can be set left or right.

Markup: {{divbox |float=l |width=3 |...|...}}

Example1004b

Float won't make much sense unless the box is less than full width.

Markup: {{divbox |float=r |width=3 |...|...}}

Example1004c

A box can also be centered. This is not technically a float but an align; either parm name will do, though.

Markup: {{divbox |float=center |width=3 |...|...}}

Multi-column layout

• Note that this does not work quite as expected. In CSS, width specifies the width of content, not including padding, margin, or border. So for example, width:33%; generates a box (including everything) wider than 1/3rd of the available width. To allow for some "wiggle room", the template-generated shortcuts are set 5% less than might be expected. To generate multi-column layouts that exactly fill the available width, use a table.

• Also note that these boxes are all set to float. You'd probably want to clear this float before proceeding.

Markup: {{divbox |float=l|width=2 |...|...}}

Markup: {{divbox |float=l|width=2 |...|...}}

Markup: {{divbox |float=l|width=3 |...|...}}

Markup: {{divbox |float=l|width=3 |...|...}}

Markup: {{divbox |float=l|width=3 |...|...}}

Markup: {{divbox |float=l|width=4 |...|...}}

Markup: {{divbox |float=l|width=4 |...|...}}

Markup: {{divbox |float=l|width=4 |...|...}}

Markup: {{divbox |float=l|width=4 |...|...}}

Markup: {{divbox |float=l|width=5 |...|...}}

Markup: {{divbox |float=l|width=5 |...|...}}

Markup: {{divbox |float=l|width=5 |...|...}}

Markup: {{divbox |float=l|width=5 |...|...}}

Markup: {{divbox |float=l|width=5 |...|...}}

Color

Box colors can be set with the colorkey parm; if using numbered parms, this is the 1st. This parm selects one from a table of color sets; box background, border color, and title background are set all together. You may also name this parm simply color.

• Note that black does indeed make the box background completely black; black text is invisible against this. It's necessary to reverse text, making it white and bold. Text is reversed and bolded at need, depending on colorkey and whether modelkey=bar.

• colorkey=none uses the same box model but with no colors; colorkey=plain sets the content background to transparent.

none none	gray gray	red red	blue blue	data data
green green	yellow yellow	amber amber	brown brown	french french
orange orange	purple purple	navy navy	forest forest	swamp swamp
white white	black black	bloodred bloodred	plain plain

Reverse

The reverse parm takes on one of four values: title, content, both, or none. If this parm is not supplied then both title and content default to black text. Reversed text appears white and bold; this is a typesetting convention as normal-weight text is often hard to read when reversed.

reverse=title Markup: {{divbox |forest |reverse=title |model=bar1 |...|...}}	reverse=content Markup: {{divbox |forest |reverse=content |model=bar1 |...|...}}
reverse=both Markup: {{divbox |forest |reverse=both |model=bar1 |...|...}}	reverse=none Markup: {{divbox |forest |reverse=none |model=bar1 |...|...}}
reverse=title Markup: {{divbox |bloodred |reverse=title |model=bar1 |...|...}}	reverse=content Markup: {{divbox |bloodred |reverse=content |model=bar1 |...|...}}
reverse=both Markup: {{divbox |bloodred |reverse=both |model=bar1 |...|...}}	reverse=none Markup: {{divbox |bloodred |reverse=none |model=bar1 |...|...}}

Model

The default box has a 1px solid border with a small amount of margin and padding. This is best for most purposes; many ugly colored boxes are created because the writer fails to include reasonable values for these spacings. The default box also may be called by either equivalent name: default or thin. Other models are available for more specialized purposes.

model=thin

Markup: {{divbox |navy |reverse=title |model=thin |...|...}}

model=bar

Markup: {{divbox |navy |reverse=title |model=bar |...|...}}

model=fat

Markup: {{divbox |navy |reverse=title |model=fat |...|...}}

model=none

Markup: {{divbox |navy |reverse=title |model=none |...|...}}

Text-align

Title text and content text may each be aligned left, right, or center. These may be set independently from one another and from the overall float/align of the entire box. The parms titlealign and contentalign are used; the alternate parm names titlefloat and contentfloat are also permitted and work identically. If params are omitted, the title defaults to centered and the content defaults to the left. The value none is equivalent.

• Note that titlealign left and right not only set CSS text-align; they also set float left or right for an internal, invisible box. You may wish to clear floats; in these examples floats are not cleared.

• The parms covered earlier (float or align and width) apply only to the entire box. There is no interaction with the float/align of title and content.

default

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

Markup: {{divbox |brown |titlealign=none |contentalign=none |...|...}}

titlealign=left

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

Markup: {{divbox |brown |titlealign=left |...|...}}

titlealign=right

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

Markup: {{divbox |brown |titlealign=right |...|...}}

contentalign=left

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

Markup: {{divbox |brown |contentalign=left |...|...}}

contentalign=right

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

Markup: {{divbox |brown |contentalign=right |...|...}}

contentalign=center

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

Markup: {{divbox |brown |contentalign=center|...|...}}

Icon

An image may be included with the icon parm. This may be floated left or right; it may also be centered. The parm iconfloat (or equivalently, iconfloat) may be set with any of the usual values. Size may be set as desired with iconsize. If parms are omitted, the default is a 48px image floated left. You may wish to clear this float.

default

Markup: {{divbox |purple |icon=God-dice.jpg |...|...}}

center

Markup: {{divbox |purple |title=default |icon=God-dice.jpg |iconalign=center |...|...}}