Difference between revisions of "Template:MultiColumnBoxInstructions"

m (→‎Lists: moving down as they don't work the way we want)
(Replacing example with AboutUsColorTemplates)
 
(7 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 <nowiki>{{2ColumnBoxGray}} and {{3ColumnBoxGray}}</nowiki> templates allows for customizing the colors via passed parameters:
+
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>
−
* [[Template:2ColumnBoxRed|<nowiki>{{2ColumnBoxRed}}</nowiki>]]: Red
+
* {{TemplateLink|2ColumnBoxRed}}: Red
−
* [[Template:2ColumnBoxBlue|<nowiki>{{2ColumnBoxBlue}}</nowiki>]]: Blue
+
* {{TemplateLink|2ColumnBoxBlue}}: Blue
−
* [[Template:2ColumnBoxGreen|<nowiki>{{2ColumnBoxGreen}}</nowiki>]]: Green
+
* {{TemplateLink|2ColumnBoxGreen}}: Green
−
* [[Template:2ColumnBoxYellow|<nowiki>{{2ColumnBoxYellow}}</nowiki>]]: Yellow
+
* {{TemplateLink|2ColumnBoxYellow}}: Yellow
−
* [[Template:2ColumnBoxGray|<nowiki>{{2ColumnBoxBoxGray}}</nowiki>]]: Gray
+
* {{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>
−
* [[Template:3ColumnBoxRed|<nowiki>{{3ColumnBoxRed}}</nowiki>]]: Red
+
* {{TemplateLink|3ColumnBoxRed}}: Red
−
* [[Template:3ColumnBoxBlue|<nowiki>{{3ColumnBoxBlue}}</nowiki>]]: Blue
+
* {{TemplateLink|3ColumnBoxBlue}}: Blue
−
* [[Template:3ColumnBoxGreen|<nowiki>{{3ColumnBoxGreen}}</nowiki>]]: Green
+
* {{TemplateLink|3ColumnBoxGreen}}: Green
−
* [[Template:3ColumnBoxYellow|<nowiki>{{3ColumnBoxYellow}}</nowiki>]]: Yellow
+
* {{TemplateLink|3ColumnBoxYellow}}: Yellow
−
* [[Template:3ColumnBoxGray|<nowiki>{{3ColumnBoxBoxGray}}</nowiki>]]: Gray
+
* {{TemplateLink|3ColumnBoxGray}}: Gray
 
</div>
 
</div>
 
{{clear}}
 
{{clear}}
Line 103: Line 103:
 
====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%;">
−
'''2-Column Example:'''
+
'''3-Column Example:'''
 
<pre>
 
<pre>
 
{{3ColumnBoxGray
 
{{3ColumnBoxGray
Line 115: Line 115:
 
| right = text for the right column
 
| right = text for the right column
 
| border = 2px
 
| border = 2px
−
| header-color = CC00CC
+
| header-color = {{DarkPurple}}
−
| body-color = CC99CC
+
| body-color = {{Purple}}
 
}}</pre>
 
}}</pre>
 
</div>
 
</div>
Line 126: Line 126:
 
| right = text for the right column
 
| right = text for the right column
 
| border = 2px
 
| border = 2px
−
| header-color = CC00CC
+
| header-color = {{DarkPurple}}
−
| body-color = CC99CC
+
| body-color = {{Purple}}
 
}}
 
}}
  
−
====Setting Width and Float====
+
====Working with Lists====
−
NOTE: The [[AboutUsMultiColumnBox|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.
+
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="float:left; width:310px; padding-right:10px;">
+
<div style="width:55%;">
−
'''Example:'''
+
'''2-Column Example:'''
 
<pre>
 
<pre>
−
<div style="float:left; width:250px;
 
−
padding-right:10px;">
 
 
{{2ColumnBoxGray
 
{{2ColumnBoxGray
 
| header = Box header here
 
| header = Box header here
−
| left = text for the left column
+
| left = {{ClearList}}
−
| right = text for the right column
+
* first item in list...
−
}}</div></pre>
+
* second item in list...
 +
* third item in list...
 +
| right = {{ClearList}}
 +
* fourth item in list...
 +
* and so on...
 +
}}</pre>
 
</div>
 
</div>
−
<div style="float:right; width:250px;
 
−
padding-left:10px;">
 
 
'''Result:'''
 
'''Result:'''
 
{{2ColumnBoxGray
 
{{2ColumnBoxGray
 
| header = Box header here
 
| header = Box header here
−
| left = text for the left column
+
| left = {{ClearList}}
−
| right = text for the right column
+
* first item in list...
−
}}</div>
+
* second item in list...
−
{{clear}}
+
* 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

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

3-column boxes


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

Box header here
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:

Box header here

  • first item in list...
  • second item in list...
  • third item in list...

  • fourth item in list...
  • and so on...
Retrieved from "http://aboutus.com/index.php?title=Template:MultiColumnBoxInstructions&oldid=16891575"