Difference between revisions of "Template:MultiColumnBoxInstructions"

Revision as of 05:18, 21 October 2008

Multi-Column Box Instructions

For both 2- and 3-column boxes (collectively known as "MultiColumnBoxes"). For creating single-column boxes, please see AboutUsBasicBox.

Color Variants

There are five color variations for the MultiColumnBox templates, which use proven web-safe colors. Additionally, the {{2ColumnBoxGray}} and {{3ColumnBoxGray}} templates allows for customizing the colors via passed parameters:

Basic uses

There are only 3 (or 4) parameters needed to be passed in the template call:

{{2ColumnBoxBlue
| header = Box header here
| left = text for the left column
| right = text for the right column
}}

Result:

{{3ColumnBoxYellow
| header = Box header here
| left = text for the left column
| center = text for the center column
| right = text for the right column
}}

Result:

Intermediate uses

In addition to the basic uses, users can specify a border (border is the same color as the header), or use these boxes for list with WikiMarkup

Adding a border

{{2ColumnBoxGreen
| header = Box header here
| left = text for the left column
| right = text for the right column
| border = 2px
}}

Result:

Lists

Having your text blocks be lists is a common use for multi-column boxes and provides one small quirk due to how parameters are passed and how wikimarkup works with lists. When doing lists, the only way to work around this bug is to use HTML for the lists, instead of the wikimarkup way of starting lists with a "*".

{{2ColumnBoxGray
| header = Box header here
| left =
<li> first item in list...
<li> second item in list...
<li> third item in list...
| right =
<li> fourth item in list...
<li> and so on...
}}

Result:

Advanced uses

Changing Colors

For advanced users, the {{2ColumnBoxGray}} and {{3ColumnBoxGray}} templates offers a variety of customizations, please note, for best compatibility, use web-safe colors like those found on the W3 Schools website:

• header-color = specify color for header; defaults to dark gray if not present.
• body-color = specify color for body style (can be same as header for mono-toned boxes); defaults to light gray if not present.

{{3ColumnBoxGray
| header = Box header here
| left = text for the left column
| center = text for the center column
| right = text for the right column
| border = 2px
| header-color = CC00CC
| body-color = CC99CC
}}

Result:

Setting Width and Float

NOTE: The MultiColumnBoxes are designed to be used "full page" in the wiki, however, they have been created in such a way that it is possible for highly-advanced editors to wrap them in an "div" to make them smaller and "float" within a text block.

<div style="float:left; width:250px;
padding-right:10px;">
{{2ColumnBoxGray
| header = Box header here
| left = text for the left column
| right = text for the right column
}}</div>