User:John Reid/divbox3
Basic
[edit]Markup: {{divbox |default |Example1001 |content}}
Markup: {{divbox |colorkey=default |title=Example1002 |content=content}}
Float & width
[edit]
Markup: {{divbox |width=2 |...|...}}
{{divbox| width=3 |...|...}}
{{divbox |width=300px |...|...}}
Markup: {{divbox |float=l |width=3 |...|...}}
Markup: {{divbox |float=r |width=3 |...|...}}
Markup: {{divbox |float=center |width=3 |...|...}}
Multi-column layout
[edit]- 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.
{{divbox |float=l|width=2 |...|...}}
{{divbox |float=l|width=2 |...|...}}
{{divbox |float=l|width=3 |...|...}}
{{divbox |float=l|width=3 |...|...}}
{{divbox |float=l|width=3 |...|...}}
{{divbox |float=l|width=4 |...|...}}
{{divbox |float=l|width=4 |...|...}}
{{divbox |float=l|width=4 |...|...}}
{{divbox |float=l|width=4 |...|...}}
{{divbox |float=l|width=5 |...|...}}
{{divbox |float=l|width=5 |...|...}}
{{divbox |float=l|width=5 |...|...}}
{{divbox |float=l|width=5 |...|...}}
{{divbox |float=l|width=5 |...|...}}
Color
[edit]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 oncolorkey
and whethermodelkey=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
[edit]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
[edit]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.
{{divbox |navy |reverse=title |model=thin |...|...}}
{{divbox |navy |reverse=title |model=bar |...|...}}
{{divbox |navy |reverse=title |model=fat |...|...}}
{{divbox |navy |reverse=title |model=none |...|...}}
Text-align
[edit]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 CSStext-align
; they also setfloat
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
oralign
andwidth
) apply only to the entire box. There is no interaction with the float/align of title and content.
Markup: {{divbox |brown |titlealign=none |contentalign=none |...|...}}
Markup: {{divbox |brown |titlealign=left |...|...}}
Markup: {{divbox |brown |titlealign=right |...|...}}
Markup: {{divbox |brown |contentalign=left |...|...}}
Markup: {{divbox |brown |contentalign=right |...|...}}
Markup: {{divbox |brown |contentalign=center|...|...}}
Icon
[edit]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.