AboutUsMultiColumnBox
MultiColumn (2 or 3 column) templates are a set of boxes for use on various AboutUs pages designed to be easily added and understood by users and staff without having to know (or see) advanced MediaWiki syntax or HTML. They are a companion to the AboutUsBasicBox templates. See below for instructions.
Contents
Examples:
| |
|
This is a 2-Column Box in red, created with minimal parameters
This is what text looks like in the second column
|
| |
|
This is a 2-Column Box in blue, created with minimal parameters
This is what text looks like in the second column
|
| |
|
This is a 3-Column Box in yellow, created with minimal parameters
This is what text looks like in the second column
And what it looks like in the third column
|
| |
|
This is a 3-Column Box in Green, created with minimal parameters
This is what text looks like in the second column
And what it looks like in the third column
|
| |
|
This is a 3-Column Box box in gray, created with minimal parameters
This is what text looks like in the second column
And what it looks like in the third column
|
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
- {{2ColumnBoxGray}}: Gray
3-column boxes
- {{3ColumnBoxRed}}: Red
- {{3ColumnBoxBlue}}: Blue
- {{3ColumnBoxGreen}}: Green
- {{3ColumnBoxYellow}}: Yellow
- {{3ColumnBoxGray}}: 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:
| |
|
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:
| |
|
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:
| |
|
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. Note: Supports the AboutUsColorTemplates as well as hex colors.
- body-color = specify color for body style (can be same as header for mono-toned boxes); defaults to light gray if not present. Note: Supports the AboutUsColorTemplates as well as hex colors.
3-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 = {{DarkPurple}}
| body-color = {{Purple}}
}}
Result:
| |
|
text for the left column
text for the center column
text for the right column
|
Working with Lists
Having your text blocks be lists is a common use for multi-column boxes. Due to the way MediaWiki interprets parameters, a very small return is needed before a list, which is provided by {{ClearList}}. NOTE: This needs to be added for EACH column.
2-Column Example:
{{2ColumnBoxGray
| header = Box header here
| left = {{ClearList}}
* first item in list...
* second item in list...
* third item in list...
| right = {{ClearList}}
* fourth item in list...
* and so on...
}}
Result:
| |
|
