Difference between revisions of "Template:MultiColumnBoxInstructions"

(Color Variants: fix)
(Replacing example with AboutUsColorTemplates)
 
(2 intermediate revisions by the same user not shown)
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}}
 
}}
 
}}
  
 +
====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.
  
 
====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?''  -- [[User:TedErnst|TedErnst]] ([[User talk:TedErnst|talk]])''
 
 
<div style="width:55%;">
 
<div style="width:55%;">
 
'''2-Column Example:'''
 
'''2-Column Example:'''
Line 140: Line 138:
 
{{2ColumnBoxGray
 
{{2ColumnBoxGray
 
| header = Box header here
 
| header = Box header here
| left =
+
| left = {{ClearList}}
<li> first item in list...
+
* first item in list...
<li> second item in list...
+
* second item in list...
<li> third item in list...
+
* third item in list...
| right =
+
| right = {{ClearList}}
<li> fourth item in list...
+
* fourth item in list...
<li> and so on...
+
* and so on...
 
}}</pre>
 
}}</pre>
 
</div>
 
</div>
Line 152: Line 150:
 
{{2ColumnBoxGray
 
{{2ColumnBoxGray
 
| header = Box header here
 
| header = Box header here
| left =
+
| left = {{ClearList}}
<li> first item in list...
+
* first item in list...
<li> second item in list...
+
* second item in list...
<li> third item in list...
+
* third item in list...
| right =
+
| right = {{ClearList}}
<li> fourth item in list...
+
* fourth item in list...
<li> and so on...
+
* 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...