View source for Template:ColorBox/doc

Colorbox is a customisable box that includes a colored title bar and seperate content area. It if often used in combination with {{Template|ContentGrid}}.

==How to use==
===Parameters===
All parameters are case sensitive.
{| class="wikitable" style="background: #e5f1ec;"
|-
! style="background: #d1e5d9" | Parameter
! style="background: #d1e5d9" | Allowed values
! style="background: #d1e5d9" | Notes
|-
| <code>t-background</code>
| [[Help:Color templates|List of colors »]]
| Sets the background color of the title bar. If using a color template, use the whole name, e.g. {{template|Emerald color}}. '''Don't''' include <code>#</code>. Defaults to <code><nowiki>{{bulba color light}}</nowiki></code>.
|-
| <code>t-background2</code>
| [[Help:Color templates|List of colors »]]
| '''Optional'''. Allows for a second title bar color. If using a color template, use the whole name, e.g. {{template|Emerald color}}. '''Don't''' include <code>#</code>.
|-
| <code>t-color</code>
| [[Help:Color templates|List of colors »]]
| Sets the title bar text color. '''Don't''' include <code>#</code>. Defaults to <code>000</code>.
|-
| <code>t-align</code>
| <code>left</code> • <code>right</code> • <code>center</code> • <code>justify</code>
| Sets the alignment of the tile in the title bar. Defaults to <code>center</code>.
|-
| <code>icon</code>
| ''File name''
| '''Optional'''. Allows for an icon to be displayed in the title bar. '''Don't''' include <code>File:</code>.
|-
| <code>icon-size</code>
| ''String''
| Sets the size of the icon. '''Must''' include <code>px</code>. Defaults to <code>20px</code>.
|-
| <code>title</code>
| ''String''
| The title to be displayed on the title bar.
|-
| <code>c-background</code>
| [[Help:Color templates|List of colors »]]
| Sets the background color of the content area. If using a color template, use the whole name, e.g. {{template|Emerald color}}. '''Don't''' include <code>#</code>. Defaults to <code>FFF</code>.
|-
| <code>c-color</code>
| [[Help:Color templates|List of colors »]]
| Sets the content area text color. '''Don't''' include <code>#</code>. Defaults to <code>000</code>.
|-
| <code>c-align</code>
| <code>left</code> • <code>right</code> • <code>center</code> • <code>justify</code>
| Sets the alignment of the text in the content area. Defaults to <code>left</code>.
|-
| <code>content</code>
| ''String''
| The content to be displayed in the content area.
|}

==Examples==
'''Example 1'''
<pre>
{{ColorBox
| t-background = CCC
| icon = Bulbagarden Archives bulb.png
| title = {{color2|000|a:Main Page|Bulbagarden Archives}}
| content = <nowiki/>
* [[a:Archives:FAQ|FAQ]]
* [[a:Help:Uploading images|Uploading images]]
* [[a:Archives:Tagging images|Tagging images]]
* [[a:Archives:Manual of style|Manual of style]]
}}
</pre>
{{ColorBox
| t-background = CCC
| icon = Bulbagarden Archives bulb.png
| title = {{color2|000|a:Main Page|Bulbagarden Archives}}
| content = <nowiki/>
* [[a:Archives:FAQ|FAQ]]
* [[a:Help:Uploading images|Uploading images]]
* [[a:Archives:Tagging images|Tagging images]]
* [[a:Archives:Manual of style|Manual of style]]
}}
{{-}}
'''Example 2'''
<pre>
{{ColorBox
| c-align = center
| title = [[File:BMGf bulb.png|90px|link=https://forums.bulbagarden.net/index.php?forums/bulbawiki-forum.195/]]
| content = [https://forums.bulbagarden.net/index.php?forums/bulbawiki-forum.195/ Ask a question on the forums]
}}
</pre>
{{ColorBox
| c-align = center
| title = [[File:BMGf bulb.png|90px|link=https://forums.bulbagarden.net/index.php?forums/bulbawiki-forum.195/]]
| content = [https://forums.bulbagarden.net/index.php?forums/bulbawiki-forum.195/ Ask a question on the forums]
}}
{{-}}

'''Example 3'''
<pre>
{{ColorBox
| t-background = {{diamond color}}
| t-background2 = {{pearl color}}
| c-align = center
| title = {{color2|FFF|Appendix:Diamond and Pearl walkthrough|Pokémon Diamond & Pearl walkthrough}}
| content = [[File:Diamond EN boxart.jpg|150px|border|link=Appendix:Diamond and Pearl walkthrough]] [[File:Pearl EN boxart.jpg|150px|border|link=Appendix:Diamond and Pearl walkthrough]]
}}
</pre>
{{ColorBox
| t-background = {{diamond color}}
| t-background2 = {{pearl color}}
| c-align = center
| title = {{color2|FFF|Appendix:Diamond and Pearl walkthrough|Pokémon Diamond & Pearl walkthrough}}
| content = [[File:Diamond EN boxart.jpg|150px|border|link=Appendix:Diamond and Pearl walkthrough]] [[File:Pearl EN boxart.jpg|150px|border|link=Appendix:Diamond and Pearl walkthrough]]
}}

==TemplateData==
<templatedata>
{
	"params": {
		"t-background": {
			"label": "Title background",
			"description": "Sets the background color of the title bar. Either a hex value (don't include a #), or a color template.",
			"type": "line",
			"example": "CCC",
			"default": "{{bulba color light}}"
		},
		"t-background2": {
			"label": "Title background 2",
			"description": "Optional. Allows for a second title bar color. Either a hex value (don't include a #), or a color template.",
			"type": "line",
			"example": "000",
			"default": "{{bulba color light}}"
		},
		"t-color": {
			"label": "Title text color",
			"description": "Sets the title bar text color. Either a hex value (don't include a #), or a color template.",
			"example": "FFF",
			"type": "line",
			"default": "000"
		},
		"t-align": {
			"label": "Title alignment",
			"description": "Sets the alignment of the tile in the title bar.",
			"type": "line",
			"suggestedvalues": [
				"left",
				"right",
				"center",
				"justify"
			],
			"default": "center"
		},
		"icon": {
			"label": "Icon",
			"description": "Optional. Allows for an icon to be displayed in the title bar (don't include File:).",
			"example": "001Bulbasaur.png",
			"type": "wiki-file-name"
		},
		"icon-size": {
			"label": "Icon size",
			"description": "Sets the size of the icon. Must include px.",
			"type": "line",
			"default": "20px"
		},
		"title": {
			"label": "Title",
			"description": "The title to be displayed on the title bar.",
			"type": "line",
			"required": true
		},
		"c-background": {
			"label": "Content background",
			"description": "Sets the background color of the content area. Either a hex value (don't include a #), or a color template.",
			"type": "line",
			"example": "{{bulba color light}}",
			"default": "FFF"
		},
		"c-color": {
			"label": "Content text color",
			"description": "Sets the content area text color. Either a hex value (don't include a #), or a color template.",
			"example": "CCC",
			"type": "line",
			"default": "FFF"
		},
		"c-align": {
			"label": "Content alignment",
			"description": "Sets the alignment of the text in the content area.",
			"type": "line",
			"suggestedvalues": [
				"left",
				"right",
				"center",
				"justify"
			],
			"default": "left"
		},
		"content": {
			"label": "Content",
			"description": "The content to be displayed in the content area.",
			"type": "string",
			"required": true
		}
	},
	"format": "block",
	"description": "Colorbox is a customisable box that includes a colored title bar and seperate content area. It if often used in combination with the ContentGrid template.",
	"paramOrder": [
		"t-background",
		"t-background2",
		"t-color",
		"t-align",
		"icon",
		"icon-size",
		"title",
		"c-background",
		"c-color",
		"c-align",
		"content"
	]
}
</templatedata>
<noinclude>
[[Category:Documentation templates]]</noinclude>