Template:MultiColumnBoxInstructions

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:

2-column boxes

• {{2ColumnBoxRed}}: Red
• {{2ColumnBoxBlue}}: Blue
• {{2ColumnBoxGreen}}: Green
• {{2ColumnBoxYellow}}: Yellow
• {{2ColumnBoxBoxGray}}: Gray

3-column boxes

• {{3ColumnBoxRed}}: Red
• {{3ColumnBoxBlue}}: Blue
• {{3ColumnBoxGreen}}: Green
• {{3ColumnBoxYellow}}: Yellow
• {{3ColumnBoxBoxGray}}: Gray

Basic uses

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

2-column boxes

• header = header text
• left = text for the left column
• right = text for the right column

3-column boxes

• header = header text
• left = text for the left column
• center = text for the center column
• right = text for the right column

2-Column Example:

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

Result:

Box header here

text for the left column text for the right column

3-Column Example:

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

Result:

Box header here

text for the left column text for the center column text for the right column

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

2-Column Example:

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

Result:

Box header here

text for the left column text for the right column

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.

2-Column Example:

{{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:

Box header here

text for the left column text for the center column text for the right column

Lists, unfortunately don't work well, please don't use

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 "*".

I cannot think of another solution, could we agree NOT to use these until we come up with something better? -- TedErnst (talk)

2-Column Example:

{{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:

Box header here

first item in list... second item in list... third item in list... fourth item in list... and so on...