View source for Template:Diagonal split color box/doc

{{Documentation subpage}}
{{tsh|Dscbox}}
<!-- PLEASE ADD CATEGORIES AT THE BOTTOM OF THIS PAGE -->

==Usage==
{{Format TemplateData|JSON=
{
	"params": {
		"1": {
			"label": "Left color",
			"description": "Left background color of the box.",
			"example": "Green",
			"type": "string",
			"suggested": true
		},
                "2": {
			"label": "Right color",
			"description": "Right background color of the box.",
			"example": "Green",
			"type": "string",
			"suggested": true
		},
		"3": {
			"label": "Left text",
			"description": "Adds text inside the left triangle; box otherwise has no text.",
			"example": "Hello, world!",
			"type": "string",
			"suggested": true
		},
                "4": {
			"label": "Right text",
			"description": "Adds text inside the right triangle; otherwise it is empty.",
			"example": "Hello, world!",
			"type": "string",
			"suggested": true
		},
		"5": {
			"label": "Left text color",
			"description": "Sets the color of the text inside the left triangle.",
			"example": "Yellow",
                        "type": "string",
			"suggested": true,
                        "default": "Either black or white; whichever has greater contrast."
		},
                "6": {
			"label": "Right text color",
			"description": "Sets the color of the text inside the right triangle.",
			"example": "Yellow",
                        "type": "string",
			"suggested": true,
                        "default": "Either black or white; whichever has greater contrast."
		},
		"border": {
                        "label": "Border color",
			"description": "Sets the color of the border around the box.",
			"example": "#FF0",
                        "type": "string",
                        "default": "black"
		},
                "border2": {
                        "label": "Border 2 color",
			"description": "Sets the color of the border next to the right triangle.",
			"example": "#FF0",
                        "type": "string",
                        "default": "'''border''' or black"
		},
                "far-border": {
                        "label": "Far border color",
			"description": "Sets the color of the border next to the far corner.",
			"example": "#FF0",
                        "type": "string",
                        "default": "'''border''' or black"
		},
                "border-width": {
                        "label": "Border width",
			"description": "Sets the width of the border around the box.",
			"example": "3px",
                        "type": "string",
                        "default": "1px"
		},
                "font": {
                        "label": "Font",
			"description": "Sets the font size.",
			"example": "Helvetica",
                        "type": "string",
                        "default": "Lucida Console, monospace"
		},
                "font-size": {
                        "label": "Font size",
			"description": "Sets the font size.",
			"example": "10px",
                        "type": "string",
                        "default": "1em"
		},
                "maximize": {
                        "label": "Maximize",
			"description": "Fits bigger font.",
			"example": "yes",
                        "type": "string",
                        "default": ""
		},
                "no-diagonal": {
                        "label": "No diagonal",
			"description": "Do not draw the diagonal.",
			"example": "yes",
                        "type": "string",
                        "default": ""
		},
                "corner": {
			"label": "Corner",
			"description": "Sets the top left text.",
			"example": "Hello, world!",
                        "type": "string"
		},
                "corner-color": {
			"label": "Corner color",
			"description": "Sets the color of the top left text.",
			"example": "Yellow",
                        "type": "string",
                        "default": "Either black or white; whichever has greater contrast."
		},
                "corner-background": {
			"label": "Corner background",
			"description": "Sets the background color of the top left text.",
			"example": "Yellow",
                        "type": "string",
                        "default": " '''border''', or either black or white whichever has greater contrast."
		},
                "far-corner": {
			"label": "Far corner",
			"description": "Sets the bottom right text.",
			"example": "Hello, world!",
                        "type": "string"
		},
                "far-corner-color": {
			"label": "Far corner color",
			"description": "Sets the color of the bottom right text.",
			"example": "Yellow",
                        "type": "string",
                        "default": "Either black or white; whichever has greater contrast."
		},
                "far-corner-background": {
			"label": "Far corner background",
			"description": "Sets the background color of the bottom right text.",
			"example": "Yellow",
                        "type": "string",
                        "default": " '''far-border''', '''border''', or either black or white whichever has greater contrast."
		}
	},
	"description": "<noexport><code>&#123;&#123;diagonal split color box&#124;''left color''&#124;''right color''&#124;''left text''&#124;''right text''&#124;''left text color''&#124;''right text color''&#124;''border=''&#124;''border2=''&#124;''far-border=''&#124;''border-width=''&#124;''font=''&#124;''font-size=''&#124;''maximize=''&#124;''no-diagonal=''&#124;''corner=''&#124;''corner-color=''&#124;''corner-background=''&#124;''far-corner=''&#124;''far-corner-color=''&#124;''far-corner-background=''&#125;&#125;</code><br></noexport>Adds a rectangular color box. <ul><li>Colors are most commonly specified as either a color keyword or as the [[Web colors#Hex triplet|hexadecimal triplet]] representing an RGB combination.  See the article [[web colors]] for details.</li></ul>",
	"format": "inline"	
} }}

{| class="wikitable"
|+ '''Examples'''
|-
! Visual effect !! Markup
|-
| {{diagonal split color box}} || <code><nowiki>{{diagonal split color box}}</nowiki></code>
|-
| {{diagonal split color box|Green}} || <code><nowiki>{{diagonal split color box|Green}}</nowiki></code>
|-
| {{diagonal split color box||Green}} || <code><nowiki>{{diagonal split color box||Green}}</nowiki></code>
|-
| {{diagonal split color box|Green|Green}} || <code><nowiki>{{diagonal split color box|Green|Green}}</nowiki></code>
|-
| {{diagonal split color box|Green|border=Green}} || <code><nowiki>{{diagonal split color box|Green|border=Green}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|Blue}} || <code><nowiki>{{diagonal split color box|Yellow|Blue}}</nowiki></code>
|-
| {{diagonal split color box|||R|C|#f00|#0ff}} || <code><nowiki>{{diagonal split color box|||R|C|#f00|#0ff}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#999|R|C|#f00|#0ff}} || <code><nowiki>{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|no-diagonal=yes}} || <code><nowiki>{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|no-diagonal=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00}} || <code><nowiki>{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|no-diagonal=yes}} || <code><nowiki>{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|no-diagonal=yes}}</nowiki></code>
|-
| {{diagonal split color box|#999|#999|R|C|#f00|#0ff}} || <code><nowiki>{{diagonal split color box|#999|#999|R|C|#f00|#0ff}}</nowiki></code>
|-
| {{diagonal split color box|#999||R|C|#f00|#0ff}} || <code><nowiki>{{diagonal split color box|#999||R|C|#f00|#0ff}}</nowiki></code>
|-
| {{diagonal split color box||#999|R|C|#f00|#0ff}} || <code><nowiki>{{diagonal split color box||#999|R|C|#f00|#0ff}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R|#f00}} || <code><nowiki>{{diagonal split color box|Yellow||R|R|#f00}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R||#f00}} || <code><nowiki>{{diagonal split color box|Yellow||R|R||#f00}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|A|#f00|#f00}} || <code><nowiki>{{diagonal split color box|Yellow||R|A|#f00|#f00}}</nowiki></code>
|-
| {{diagonal split color box|||R|R|#f00|#f00}} || <code><nowiki>{{diagonal split color box|||R|R|#f00|#f00}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|Yellow|R|R|#f00|#f00}} || <code><nowiki>{{diagonal split color box|Yellow|Yellow|R|R|#f00|#f00}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R|#f00|#f00}} || <code><nowiki>{{diagonal split color box|Yellow||R|R|#f00|#f00}}</nowiki></code>
|-
| {{diagonal split color box||Yellow|R|R|#f00|#f00}} || <code><nowiki>{{diagonal split color box||Yellow|R|R|#f00|#f00}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R||#f00}} || <code><nowiki>{{diagonal split color box|Yellow||R||#f00}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|||R|#f00}} || <code><nowiki>{{diagonal split color box|Yellow|||R|#f00}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|||R||#f00}} || <code><nowiki>{{diagonal split color box|Yellow|||R||#f00}}</nowiki></code>
|-
| {{diagonal split color box|#999||R||#f00|#f00}} || <code><nowiki>{{diagonal split color box|#999||R|#f00|#f00}}</nowiki></code>
|-
| {{diagonal split color box|#999|||R|#f00|#f00}} || <code><nowiki>{{diagonal split color box|#999|||R|#f00|#f00}}</nowiki></code>
|-
| {{diagonal split color box|#999||R||#f00|#0ff}} || <code><nowiki>{{diagonal split color box|#999||R||#f00|#0ff}}</nowiki></code>
|-
| {{diagonal split color box|#999|||R|#f00|#0ff}} || <code><nowiki>{{diagonal split color box|#999|||R|#f00|#0ff}}</nowiki></code>
|-
| {{diagonal split color box|font-size=0.6em}} || <code><nowiki>{{diagonal split color box|font-size=0.6em}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|font-size=0.6em}} || <code><nowiki>{{diagonal split color box|Yellow|font-size=0.6em}}</nowiki></code>
|-
| {{diagonal split color box|LightGray|Yellow|font-size=0.6em}} || <code><nowiki>{{diagonal split color box|LightGray|Yellow|font-size=0.6em}}</nowiki></code>
|-
| {{diagonal split color box|LightGray|Yellow|font-size=0.6em|no-diagonal=yes}} || <code><nowiki>{{diagonal split color box|LightGray|Yellow|font-size=0.6em|no-diagonal=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.6em}} || <code><nowiki>{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.6em}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R|#f00|font-size=0.6em}} || <code><nowiki>{{diagonal split color box|Yellow||R|R|#f00|font-size=0.6em}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R||#f00|font-size=0.6em}} || <code><nowiki>{{diagonal split color box|Yellow||R|R||#f00|font-size=0.6em}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|font-size=0.6em}} || <code><nowiki>{{diagonal split color box|Yellow||R|font-size=0.6em}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|||R|font-size=0.6em}} || <code><nowiki>{{diagonal split color box|Yellow|||R|font-size=0.6em}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.6em}} || <code><nowiki>{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.6em}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R|#f00|#f00|maximize=yes}} || <code><nowiki>{{diagonal split color box|Yellow||R|R|#f00|#f00|maximize=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|maximize=yes}} || <code><nowiki>{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|maximize=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|maximize=yes|no-diagonal=yes}} || <code><nowiki>{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|maximize=yes|no-diagonal=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.2em|maximize=yes}} || <code><nowiki>{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.2em|maximize=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.2em|maximize=yes|no-diagonal=yes}} || <code><nowiki>{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.2em|maximize=yes|no-diagonal=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|corner=B|corner-color=#00f}} || <code><nowiki>{{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|corner=B|corner-color=#00f}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|far-corner=B|far-corner-color=#00f}} || <code><nowiki>{{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|far-corner=B|far-corner-color=#00f}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|corner=B|corner-color=#000|far-corner=W|far-corner-color=#fff}} || <code><nowiki>{{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|corner=B|corner-color=#000|far-corner=W|far-corner-color=#fff}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.7em}} || <code><nowiki>{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.7em}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.7em|corner=B|corner-color=#00f}} || <code><nowiki>{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.7em|corner=B|corner-color=#00f}}</nowiki></code>
|-
| {{diagonal split color box|green||E100|E100|font-size=0.7em|corner=P|corner-color=white|corner-background=green}} || <code><nowiki>{{diagonal split color box|green||E100|E100|font-size=0.7em|corner=P|corner-color=white|corner-background=green}}</nowiki></code>
|-
| {{diagonal split color box|green||E85|E85|font-size=0.7em|corner=P|corner-color=white|corner-background=green}} || <code><nowiki>{{diagonal split color box|green||E85|E85|font-size=0.7em|corner=P|corner-color=white|corner-background=green}}</nowiki></code>
|-
| {{diagonal split color box|green||E100|E100|font-size=0.61em}} || <code><nowiki>{{diagonal split color box|green||E100|E100|font-size=0.61em}}</nowiki></code>
|-
| {{diagonal split color box|green||E85|E85|font-size=0.61em}} || <code><nowiki>{{diagonal split color box|green||E85|E85|font-size=0.61em}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.7em}} || <code><nowiki>{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.7em}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=1.2em|maximize=yes}} || <code><nowiki>{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=1.2em|maximize=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.37em|maximize=yes}} || <code><nowiki>{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.37em|maximize=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.37em|maximize=yes|no-diagonal=yes}} || <code><nowiki>{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.37em|maximize=yes|no-diagonal=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.8em}} || <code><nowiki>{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.8em}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.8em}} || <code><nowiki>{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.8em}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=1.35em|maximize=yes}} || <code><nowiki>{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=1.35em|maximize=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.7em|maximize=yes}} || <code><nowiki>{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.7em|maximize=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|border=Yellow|font-size=0.7em|maximize=yes}} || <code><nowiki>{{diagonal split color box|Yellow|border=Yellow|font-size=0.7em|maximize=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.6em|maximize=yes}} || <code><nowiki>{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.6em|maximize=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|border=Yellow|font-size=0.6em|maximize=yes}} || <code><nowiki>{{diagonal split color box|Yellow|border=Yellow|font-size=0.6em|maximize=yes}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|Blue|font-size=0.45em}} || <code><nowiki>{{diagonal split color box|Yellow|Blue|font-size=0.45em}}</nowiki></code>
|-
| {{diagonal split color box|LightGray|Yellow|Blue|Red|#00f|#f00}} || <code><nowiki>{{diagonal split color box|LightGray|Yellow|Blue|Red|#00f|#f00}}</nowiki></code>
|-
| {{diagonal split color box|LightGray|Yellow|Blue|Red|#00f|#f00|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|LightGray|Yellow|Blue|Red|#00f|#f00|font=Helvetica, Sans-serif}}</nowiki></code>
|-
| {{diagonal split color box|LightGray|Yellow|Red|Blue|#f00|#00f}} || <code><nowiki>{{diagonal split color box|LightGray|Yellow|Red|Blue|#f00|#00f}}</nowiki></code>
|-
| {{diagonal split color box|LightGray|Yellow|Red|Blue|#f00|#00f|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|LightGray|Yellow|Red|Blue|#f00|#00f|font=Helvetica, Sans-serif}}</nowiki></code>
|-
| {{diagonal split color box|Green|Green|Default color for this text|Default color for this text|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|Green|Green|Default color for this text|Default color for this text|font=Helvetica, Sans-serif}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|Blue|Default color for this text|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|Yellow|Blue|Default color for this text|font=Helvetica, Sans-serif}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|Blue||Default color for this text|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|Yellow|Blue||Default color for this text|font=Helvetica, Sans-serif}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|Blue|Default color for this text|Default color for this text|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|Yellow|Blue|Default color for this text|Default color for this text|font=Helvetica, Sans-serif}}</nowiki></code>
|-
| {{diagonal split color box|Blue|Yellow|Default color for this text|Default color for this text|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|Blue|Yellow|Default color for this text|Default color for this text|font=Helvetica, Sans-serif}}</nowiki></code>
|-
| {{diagonal split color box|Yellow|Blue|Default color for left text|Default color for right text|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|Yellow|Blue|Default color for left text|Default color for right text|font=Helvetica, Sans-serif}}</nowiki></code>
|-
| {{diagonal split color box|Blue|Yellow|Default color for left text|Default color for right text|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|Blue|Yellow|Default color for left text|Default color for right text|font=Helvetica, Sans-serif}}</nowiki></code>
|-
| {{diagonal split color box|SteelBlue|Coral|'''Using X11 color names'''|'''Using X11 color names'''|Gold|Silver|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|SteelBlue|Coral|'''</nowiki>Using [[X11 color names]]<nowiki>'''|'''Using X11 color names'''|Gold|Silver|font=Helvetica, Sans-serif}}</nowiki></code>
|-
| {{diagonal split color box|#012345|#BA9876|''Using RGB hex triplets''|''Default color for this text''|#FEDCBA|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|#012345|#BA9876|''</nowiki>Using [[Web colors#Hex triplet|RGB hex triplet]]<nowiki>''|''Default color for this text''|#FEDCBA|font=Helvetica, Sans-serif}}</nowiki></code>
|-
| {{diagonal split color box|white|lightgray|bordercolor like wikitable||border=#A2A9B1|border-width=4px|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|white|lightgray|bordercolor like wikitable|border=#A2A9B1|border-width=4px|font=Helvetica, Sans-serif}} </nowiki></code>
|-
| {{diagonal split color box|white|lightgray|two border colors||border=yellow|border2=red|border-width=4px|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|white|lightgray|two border colors|border=yellow|border2=red|border-width=4px|font=Helvetica, Sans-serif}} </nowiki></code>
|-
| {{diagonal split color box|white|lightgray|far border color||border=yellow|far-border=red|border-width=4px|font=Helvetica, Sans-serif}} || <code><nowiki>{{diagonal split color box|white|lightgray|far border color|border=yellow|far-border=red|border-width=4px|font=Helvetica, Sans-serif}} </nowiki></code>
|}

== Variants ==
{{Color box templates}}

== Supporting template ==
* {{tl|Greater color contrast ratio}}

== See also ==
* {{tl|Infobox color}}, an infobox for the detailed description of a color.
* {{tl|Legend}}
* {{tl|Diagonal split header}}

<includeonly>{{Sandbox other|
| <!-- CATEGORIES BELOW THIS LINE, PLEASE: -->

[[Category:Color templates]]
[[Category:Box templates]]
[[Category:Box templates]]

}}</includeonly>