Difference between revisions of "Template:MultiColumnBoxInstructions"
(I cannot think of another solution, but whoa is me!) |
TakKendrick (talk | contribs) (Replacing example with AboutUsColorTemplates) |
||
| (9 intermediate revisions by 3 users not shown) | |||
| Line 4: | Line 4: | ||
===Color Variants=== | ===Color Variants=== | ||
| − | There are five color variations for the [[AboutUsMultiColumnBox|MultiColumnBox]] templates, which use proven web-safe colors. Additionally, the | + | There are five color variations for the [[AboutUsMultiColumnBox|MultiColumnBox]] templates, which use proven web-safe colors. Additionally, the {{TemplateLink|2ColumnBoxGray}} and {{TemplateLink|3ColumnBoxGray}} templates allows for customizing the colors via passed parameters: |
{{clear}} | {{clear}} | ||
<div style="float:left; width:48%; padding-right:2%"> | <div style="float:left; width:48%; padding-right:2%"> | ||
<big>'''2-column boxes</big> | <big>'''2-column boxes</big> | ||
| − | * | + | * {{TemplateLink|2ColumnBoxRed}}: Red |
| − | * | + | * {{TemplateLink|2ColumnBoxBlue}}: Blue |
| − | * | + | * {{TemplateLink|2ColumnBoxGreen}}: Green |
| − | * | + | * {{TemplateLink|2ColumnBoxYellow}}: Yellow |
| − | * | + | * {{TemplateLink|2ColumnBoxGray}}: Gray |
</div> | </div> | ||
<div style="float:right; width:48%; padding-left:2%;"> | <div style="float:right; width:48%; padding-left:2%;"> | ||
<big>'''3-column boxes</big> | <big>'''3-column boxes</big> | ||
| − | * | + | * {{TemplateLink|3ColumnBoxRed}}: Red |
| − | * | + | * {{TemplateLink|3ColumnBoxBlue}}: Blue |
| − | * | + | * {{TemplateLink|3ColumnBoxGreen}}: Green |
| − | * | + | * {{TemplateLink|3ColumnBoxYellow}}: Yellow |
| − | * | + | * {{TemplateLink|3ColumnBoxGray}}: Gray |
</div> | </div> | ||
{{clear}} | {{clear}} | ||
| Line 98: | Line 98: | ||
}} | }} | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
===Advanced uses=== | ===Advanced uses=== | ||
====Changing Colors==== | ====Changing Colors==== | ||
For advanced users, the <nowiki>{{2ColumnBoxGray}} and {{3ColumnBoxGray}}</nowiki> templates offers a variety of customizations, please note, for best compatibility, use web-safe colors like those found on the [http://www.w3schools.com/html/html_colors.asp W3 Schools website]: | For advanced users, the <nowiki>{{2ColumnBoxGray}} and {{3ColumnBoxGray}}</nowiki> templates offers a variety of customizations, please note, for best compatibility, use web-safe colors like those found on the [http://www.w3schools.com/html/html_colors.asp W3 Schools website]: | ||
| − | * header-color = specify color for header; defaults to dark gray if not present. | + | * 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. | + | * 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.'' |
<div style="width:55%;"> | <div style="width:55%;"> | ||
| − | ''' | + | '''3-Column Example:''' |
<pre> | <pre> | ||
{{3ColumnBoxGray | {{3ColumnBoxGray | ||
| Line 142: | Line 115: | ||
| right = text for the right column | | right = text for the right column | ||
| border = 2px | | border = 2px | ||
| − | | header-color = | + | | header-color = {{DarkPurple}} |
| − | | body-color = | + | | body-color = {{Purple}} |
}}</pre> | }}</pre> | ||
</div> | </div> | ||
| Line 153: | Line 126: | ||
| right = text for the right column | | right = text for the right column | ||
| border = 2px | | border = 2px | ||
| − | | header-color = | + | | header-color = {{DarkPurple}} |
| − | | body-color = | + | | body-color = {{Purple}} |
}} | }} | ||
| − | ==== | + | ====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 {{TemplateLink|ClearList}}. NOTE: This needs to be added for EACH column. | |
| − | <div style=" | + | <div style="width:55%;"> |
| − | '''Example:''' | + | '''2-Column Example:''' |
<pre> | <pre> | ||
| − | |||
| − | |||
{{2ColumnBoxGray | {{2ColumnBoxGray | ||
| header = Box header here | | header = Box header here | ||
| − | | left = | + | | left = {{ClearList}} |
| − | | right = | + | * first item in list... |
| − | }} | + | * second item in list... |
| + | * third item in list... | ||
| + | | right = {{ClearList}} | ||
| + | * fourth item in list... | ||
| + | * and so on... | ||
| + | }}</pre> | ||
</div> | </div> | ||
| − | |||
| − | |||
'''Result:''' | '''Result:''' | ||
{{2ColumnBoxGray | {{2ColumnBoxGray | ||
| header = Box header here | | header = Box header here | ||
| − | | left = | + | | left = {{ClearList}} |
| − | | right = | + | * first item in list... |
| − | }} | + | * second item in list... |
| − | + | * third item in list... | |
| + | | right = {{ClearList}} | ||
| + | * fourth item in list... | ||
| + | * and so on... | ||
| + | }} | ||
<noinclude>[[Category:AboutUs:Templates]]</noinclude> | <noinclude>[[Category:AboutUs:Templates]]</noinclude> | ||
Latest revision as of 01:38, 5 November 2008
Contents
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:
| |
|