Template:Columns: Difference between revisions

From The Reed and Rite
← Older edit
mNo edit summary
m Removed background color to allow dynamic color shift in dark mode.
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly><div class="pillars" style="column-count: {{{count|3}}}; {{{style|}}}; margin-bottom: 0.5em;">
<includeonly><div class="pillars" style="column-count: {{{count|3}}}; text-align: left; {{{style|}}}; margin-bottom: 0.5em;">
   {{{1}}}
   {{{1}}}
</div></includeonly><noinclude>
</div></includeonly><noinclude>
==Description==
==Description==
This template allows you to display content in multiple columns on a page. By default, it divides the content into three columns, but you can customize the number of columns by using the <code>count=</code> parameter. Optionally, you can add custom inline styles using the <code>style=</code> parameter to adjust the appearance of the columns.
This template allows you to display content in multiple columns on a page as a bulleted list.


==Usage==
==Usage==
{| style="width: 100%; text-align: left; margin: auto;" class="wikitable"
{| style="width: 100%; text-align: left; margin: auto;" class="wikitable"
|-
|-
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Default Usage</span><br><span style="font-weight: normal;">When used with no additional parameters, the template will return a list split in 3 columns.</span>
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Default Usage</span><br><div style="text-align: left;"><span style="font-weight: normal;">When used with no additional parameters, the template will return a list split in 3 columns.</span></div>
|-
|-
! width=25%|You Type
! width=25%|You Type
!You Get
!You Get
|-
|-
| style="text-align: left; background-color: white;" |<pre>
| style="text-align: left;" |<pre>
{{columns|
{{columns|
* Item 1
* Item 1
Line 23: Line 23:
}}
}}
</pre>
</pre>
| style="background-color: white;" |{{columns|
|{{columns|
* Item 1
* Item 1
* Item 2
* Item 2
Line 32: Line 32:
}}
}}
|-
|-
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Count Parameter</span><br><span style="font-weight: normal;">You can specify the number of columns in the output through use of the <code>|count=</code> parameter.</span>
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Count Parameter</span><br><div style="text-align: left;"><span style="font-weight: normal;">You can specify the number of columns in the output through use of the <code>count=</code> parameter.</span></div>
|-
|-
! width=25%|You Type
! width=25%|You Type
!You Get
!You Get
|-
|-
| style="text-align: left; background-color: white;" |<pre>
| style="text-align: left;" |<pre>
{{columns|count=2|
{{columns|count=2|
* Item 1
* Item 1
Line 47: Line 47:
}}
}}
</pre>
</pre>
| style="background-color: white;" |{{columns|count=2|
|{{columns|count=2|
* Item 1
* Item 1
* Item 2
* Item 2
Line 56: Line 56:
}}
}}
|-
|-
| style="text-align: left; background-color: white;" |<pre>
| style="text-align: left;" |<pre>
{{columns|count=4|
{{columns|count=4|
* Item 1
* Item 1
Line 64: Line 64:
}}
}}
</pre>
</pre>
| style="background-color: white;" |{{columns|count=4|
|{{columns|count=4|
* Item 1
* Item 1
* Item 2
* Item 2
Line 71: Line 71:
}}
}}
|-
|-
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Style Parameter</span><br><span style="font-weight: normal;">By passing the <code>|style=</code> parameter, you can alter the appearance of the column container using inline CSS styles.<br>'''Note:''' They styles used in the example below are by no means exhaustive of the possible styles.</span>
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Style Parameter</span><br><div style="text-align: left;"><span style="font-weight: normal;">By passing the <code>style=</code> parameter, you can alter the appearance of the column container using various CSS attributes.<br><br><span style="font-size: 85%;">'''Note:''' The attributes used in the example below are a small selection of the possible attributes available. You can find more information on possible attributes [https://coding-help.fandom.com/wiki/Attributes#List_of_commonly_used_attributes here].</span></span></div>
|-
|-
! width=25%|You Type
! width=25%|You Type
!You Get
!You Get
|-
|-
| style="text-align: left; background-color: white;" |<pre>
| style="text-align: left;" |<pre>
{{columns|style=font-size: 150%; border: 1px solid #ddd; background-color: #efefef;|
{{columns|
style=font-size: 150%; border: 1px solid #A2A7AF; background-color: #efefef; font-family: 'Libre Baskerville;|
* Item 1
* Item 1
* Item 2
* Item 2
Line 86: Line 87:
}}
}}
</pre>
</pre>
| style="background-color: white;" |{{columns|style=font-size: 150%; border: 1px solid #ddd; background-color: #efefef;|
|{{columns|style=font-size: 150%; border: 1px solid #A2A7AF; background-color: #efefef; font-family: 'Libre Baskerville;|
* Item 1
* Item 1
* Item 2
* Item 2
Line 95: Line 96:
}}
}}
|-
|-
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Numbered List</span><br><span style="font-weight: normal;">A numbered list can be used by replacing <code>*</code> with <code>#</code>.</span>
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Numbered List</span><br><div style="text-align: left;"><span style="font-weight: normal;">A numbered list can be used by replacing <code>*</code> with <code>#</code>.</span></div>
|-
|-
! width=25%|You Type
! width=25%|You Type
!You Get
!You Get
|-
|-
| style="text-align: left; background-color: white;" |<pre>
| style="text-align: left;" |<pre>
{{columns|
{{columns|
# Item A
# Item A
Line 110: Line 111:
}}
}}
</pre>
</pre>
| style="background-color: white;" |{{columns|
|{{columns|
# Item A
# Item A
# Item B
# Item B
Line 121: Line 122:


== Articles Using Template ==
== Articles Using Template ==
{{for|Special:WhatLinksHere/{{FULLPAGENAME}}|a full listing|here|pre=This list is limited to 25 pages}}
{{for|Special:WhatLinksHere/{{FULLPAGENAME}}|a full listing|here|pre=This list is limited to 100 pages}}
{{Special:WhatLinksHere/{{FULLPAGENAME}}|namespace=0|limit=25}}
{{Special:WhatLinksHere/{{FULLPAGENAME}}|namespace=0|limit=100}}{{Special:WhatLinksHere/{{FULLPAGENAME}}|namespace=100|limit=100}}




[[Category: Templates]]
[[Category:Article Elements]]

Latest revision as of 22:37, 27 May 2025

Description

This template allows you to display content in multiple columns on a page as a bulleted list.

Usage

Default Usage
When used with no additional parameters, the template will return a list split in 3 columns.
You Type You Get 
{{columns|
* Item 1
* Item 2
* Item 3
* Item 4
* Item 5
* Item 6
}}
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
Count Parameter
You can specify the number of columns in the output through use of the count= parameter.
You Type You Get 
{{columns|count=2|
* Item 1
* Item 2
* Item 3
* Item 4
* Item 5
* Item 6
}}
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
{{columns|count=4|
* Item 1
* Item 2
* Item 3
* Item 4
}}
  • Item 1
  • Item 2
  • Item 3
  • Item 4
Style Parameter
By passing the style= parameter, you can alter the appearance of the column container using various CSS attributes.

Note: The attributes used in the example below are a small selection of the possible attributes available. You can find more information on possible attributes here.
You Type You Get 
{{columns|
style=font-size: 150%; border: 1px solid #A2A7AF; background-color: #efefef; font-family: 'Libre Baskerville;|
* Item 1
* Item 2
* Item 3
* Item 4
* Item 5
* Item 6
}}
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
Numbered List
A numbered list can be used by replacing * with #.
You Type You Get 
{{columns|
# Item A
# Item B
# Item C
# Item D
# Item E
# Item F
}}
  1. Item A
  2. Item B
  3. Item C
  4. Item D
  5. Item E
  6. Item F

Articles Using Template

This list is limited to 100 pages. For a full listing, see here.
Retrieved from "https://thereedandrite.org/index.php?title=Template:Columns&oldid=6538"