Difference between revisions of "Template:Diagonal split color box"
(Compact output) |
(Compact) |
||
| Line 10: | Line 10: | ||
|{{#ifeq:{{{border2}}}|{{{border|}}}|border:{{{border-width|1px}}} solid {{{border|#000}}};|border-top:{{{border-width|1px}}} solid {{{border2|#000}}};border-left:{{{border-width|1px}}} solid {{{border|#000}}};border-right:{{{border-width|1px}}} solid {{{border2|#000}}};border-bottom:{{{border-width|1px}}} solid {{{border|#000}}};}}|{{#if:{{{border|}}} | |{{#ifeq:{{{border2}}}|{{{border|}}}|border:{{{border-width|1px}}} solid {{{border|#000}}};|border-top:{{{border-width|1px}}} solid {{{border2|#000}}};border-left:{{{border-width|1px}}} solid {{{border|#000}}};border-right:{{{border-width|1px}}} solid {{{border2|#000}}};border-bottom:{{{border-width|1px}}} solid {{{border|#000}}};}}|{{#if:{{{border|}}} | ||
|border:{{{border-width|1px}}} solid {{{border}}};|{{#ifeq:{{{1|}}}|{{{2}}}|border:{{{border-width|1px}}} solid {{{1|#000}}};|{{#if:{{{1|}}} | |border:{{{border-width|1px}}} solid {{{border}}};|{{#ifeq:{{{1|}}}|{{{2}}}|border:{{{border-width|1px}}} solid {{{1|#000}}};|{{#if:{{{1|}}} | ||
| − | |{{#if:{{{2|}}}|border-top:{{{border-width|1px}}} solid {{{2}}};border-left:{{{border-width|1px}}} solid {{{1|}}};border-right:{{{border-width|1px}}} solid {{{2}}};border-bottom:{{{border-width|1px}}} solid {{{1}}}|border:{{{border-width|1px}}} solid {{{1}}}}}|border:{{{border-width|1px}}} solid #000}};}}}}}}}} font-size:{{{font-size|1em}}};">{{#ifexpr:{{#ifeq:{{{3|}}}|{{{4|}}}|1|0}} and {{#if:{{{3|}}}|1|0}} | + | |{{#if:{{{2|}}}|border-top:{{{border-width|1px}}} solid {{{2}}};border-left:{{{border-width|1px}}} solid {{{1|}}};border-right:{{{border-width|1px}}} solid {{{2}}};border-bottom:{{{border-width|1px}}} solid {{{1}}}|border:{{{border-width|1px}}} solid {{{1}}}}}|border:{{{border-width|1px}}} solid #000}};}}}}}}}}font-size:{{{font-size|1em}}};">{{#ifexpr:{{#ifeq:{{{3|}}}|{{{4|}}}|1|0}} and {{#if:{{{3|}}}|1|0}} |
|{{#ifeq:{{{5|}}}|{{{6|}}}|{{#if:{{{corner|}}} | |{{#ifeq:{{{5|}}}|{{{6|}}}|{{#if:{{{corner|}}} | ||
|{{#if:{{{far-corner|}}} | |{{#if:{{{far-corner|}}} | ||
| Line 26: | Line 26: | ||
|#000|#fff}}}}}};">{{{corner}}}</span></div><div style="text-align:center;line-height:0.85;font-size:0.85em;margin: -1px 2px -3px 2px;color:{{#if:{{{5|}}} | |#000|#fff}}}}}};">{{{corner}}}</span></div><div style="text-align:center;line-height:0.85;font-size:0.85em;margin: -1px 2px -3px 2px;color:{{#if:{{{5|}}} | ||
|{{{5}}}|{{greater color contrast ratio|{{{1|}}}|#000|#fff}}}};{{#ifexpr:{{#ifeq:{{str len|{{{3|}}}}}|4|1|0}}|font-size:0.65em;|}}">{{#if:{{{3|}}}|{{{3}}}| }}</div><div style="margin:0px 0px 0px 1px;text-align:right;"><div style="display:inline;margin: 0px -1px 0px 0px;"> </div><span style="font-size:0.75em;margin:0px;padding:0px 1px 0px 2px;text-align:right;color:{{#if:{{{far-corner-color|}}} | |{{{5}}}|{{greater color contrast ratio|{{{1|}}}|#000|#fff}}}};{{#ifexpr:{{#ifeq:{{str len|{{{3|}}}}}|4|1|0}}|font-size:0.65em;|}}">{{#if:{{{3|}}}|{{{3}}}| }}</div><div style="margin:0px 0px 0px 1px;text-align:right;"><div style="display:inline;margin: 0px -1px 0px 0px;"> </div><span style="font-size:0.75em;margin:0px;padding:0px 1px 0px 2px;text-align:right;color:{{#if:{{{far-corner-color|}}} | ||
| − | |{{{far-corner-color}}} | + | |{{{far-corner-color}}}|{{greater color contrast ratio|{{#if:{{{far-corner-background|}}} |
| − | |||
|{{{far-corner-background}}} | |{{{far-corner-background}}} | ||
|{{#if:{{{far-border|}}} | |{{#if:{{{far-border|}}} | ||
| Line 39: | Line 38: | ||
|{{{far-corner-background}}}|{{#if:{{{far-border|}}} | |{{{far-corner-background}}}|{{#if:{{{far-border|}}} | ||
|{{{far-border}}}|{{#if:{{{border|}}}|{{{border}}}|{{greater color contrast ratio|{{#if:{{{far-corner-color|}}} | |{{{far-border}}}|{{#if:{{{border|}}}|{{{border}}}|{{greater color contrast ratio|{{#if:{{{far-corner-color|}}} | ||
| − | |{{{far-corner-color}}} | + | |{{{far-corner-color}}}|{{greater color contrast ratio|{{{2|}}}|#000|#fff}}}} |
| − | |||
| − | |||
|#000|#fff}}}}}}}};">{{{far-corner}}}</div></div> | |#000|#fff}}}}}}}};">{{{far-corner}}}</div></div> | ||
|<div style="margin-left:0px;margin-top:-1px;line-height:{{#ifexpr:{{#ifeq:{{str len|{{{3|}}}}}|4|1|0}}|1|0.95}};text-align:left;"><span style="font-size:0.85em;margin-left:0px;padding:1px 1px 0px 2px;margin-top:0px;text-align:left;color:{{#if:{{{corner-color|}}} | |<div style="margin-left:0px;margin-top:-1px;line-height:{{#ifexpr:{{#ifeq:{{str len|{{{3|}}}}}|4|1|0}}|1|0.95}};text-align:left;"><span style="font-size:0.85em;margin-left:0px;padding:1px 1px 0px 2px;margin-top:0px;text-align:left;color:{{#if:{{{corner-color|}}} | ||
| − | |{{{corner-color}}} | + | |{{{corner-color}}}|{{greater color contrast ratio|{{#if:{{{corner-background|}}} |
| − | |||
|{{{corner-background}}} | |{{{corner-background}}} | ||
|{{#if:{{{border|}}} | |{{#if:{{{border|}}} | ||
| Line 96: | Line 92: | ||
}}|#000|#fff}}}};text-align:left;margin-left:0px;padding:1px 1px 0px 2px;margin-top:0px;background-color:{{#if:{{{corner-background|}}} | }}|#000|#fff}}}};text-align:left;margin-left:0px;padding:1px 1px 0px 2px;margin-top:0px;background-color:{{#if:{{{corner-background|}}} | ||
|{{{corner-background}}}|{{#if:{{{border|}}}|{{{border}}}|{{greater color contrast ratio|{{#if:{{{corner-color|}}} | |{{{corner-background}}}|{{#if:{{{border|}}}|{{{border}}}|{{greater color contrast ratio|{{#if:{{{corner-color|}}} | ||
| − | |{{{corner-color}}} | + | |{{{corner-color}}}|{{greater color contrast ratio|{{{1|}}}|#000|#fff}}}} |
| − | |||
|#000|#fff}}}}}};">{{{corner}}}</span><span style="margin-left:0.3em;margin-right:2px;text-align:right;color:{{#if:{{{6|}}} | |#000|#fff}}}}}};">{{{corner}}}</span><span style="margin-left:0.3em;margin-right:2px;text-align:right;color:{{#if:{{{6|}}} | ||
|{{{6}}}|{{greater color contrast ratio|{{{2|}}}|#000|#fff}}}};">{{#if:{{{4|}}}|{{{4}}}| }}</span></div><div style="float:left;margin-left:2px;text-align:left;color:{{#if:{{{5|}}} | |{{{6}}}|{{greater color contrast ratio|{{{2|}}}|#000|#fff}}}};">{{#if:{{{4|}}}|{{{4}}}| }}</span></div><div style="float:left;margin-left:2px;text-align:left;color:{{#if:{{{5|}}} | ||
Revision as of 18:32, 24 September 2019
Contents
Usage
TemplateData for Diagonal split color box
{{diagonal split color box|left color|right color|left text|right text|left text color|right text color|border=|border2=|far-border=|border-width=|font=|font-size=|maximize=|no-diagonal=|corner=|corner-color=|corner-background=|far-corner=|far-corner-color=|far-corner-background=}}Adds a rectangular color box.
- Colors are most commonly specified as either a color keyword or as the hexadecimal triplet representing an RGB combination. See the article web colors for details.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Left color | 1 | Left background color of the box.
| String | suggested |
| Right color | 2 | Right background color of the box.
| String | suggested |
| Left text | 3 | Adds text inside the left triangle; box otherwise has no text.
| String | suggested |
| Right text | 4 | Adds text inside the right triangle; otherwise it is empty.
| String | suggested |
| Left text color | 5 | Sets the color of the text inside the left triangle.
| String | suggested |
| Right text color | 6 | Sets the color of the text inside the right triangle.
| String | suggested |
| Border color | border | Sets the color of the border around the box.
| String | optional |
| Border 2 color | border2 | Sets the color of the border next to the right triangle.
| String | optional |
| Far border color | far-border | Sets the color of the border next to the far corner.
| String | optional |
| Border width | border-width | Sets the width of the border around the box.
| String | optional |
| Font | font | Sets the font size.
| String | optional |
| Font size | font-size | Sets the font size.
| String | optional |
| Maximize | maximize | Fits bigger font.
| String | optional |
| No diagonal | no-diagonal | Do not draw the diagonal.
| String | optional |
| Corner | corner | Sets the top left text.
| String | optional |
| Corner color | corner-color | Sets the color of the top left text.
| String | optional |
| Corner background | corner-background | Sets the background color of the top left text.
| String | optional |
| Far corner | far-corner | Sets the bottom right text.
| String | optional |
| Far corner color | far-corner-color | Sets the color of the bottom right text.
| String | optional |
| Far corner background | far-corner-background | Sets the background color of the bottom right text.
| String | optional |
Format: inline
Adds a rectangular color box. Colors are most commonly specified as either a color keyword or as the hexadecimal triplet representing an RGB combination. See the article web colors for details.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Left color | 1 | Left background color of the box.
| String | suggested |
| Right color | 2 | Right background color of the box.
| String | suggested |
| Left text | 3 | Adds text inside the left triangle; box otherwise has no text.
| String | suggested |
| Right text | 4 | Adds text inside the right triangle; otherwise it is empty.
| String | suggested |
| Left text color | 5 | Sets the color of the text inside the left triangle.
| String | suggested |
| Right text color | 6 | Sets the color of the text inside the right triangle.
| String | suggested |
| Border color | border | Sets the color of the border around the box.
| String | optional |
| Border 2 color | border2 | Sets the color of the border next to the right triangle.
| String | optional |
| Far border color | far-border | Sets the color of the border next to the far corner.
| String | optional |
| Border width | border-width | Sets the width of the border around the box.
| String | optional |
| Font | font | Sets the font size.
| String | optional |
| Font size | font-size | Sets the font size.
| String | optional |
| Maximize | maximize | Fits bigger font.
| String | optional |
| No diagonal | no-diagonal | Do not draw the diagonal.
| String | optional |
| Corner | corner | Sets the top left text.
| String | optional |
| Corner color | corner-color | Sets the color of the top left text.
| String | optional |
| Corner background | corner-background | Sets the background color of the top left text.
| String | optional |
| Far corner | far-corner | Sets the bottom right text.
| String | optional |
| Far corner color | far-corner-color | Sets the color of the bottom right text.
| String | optional |
| Far corner background | far-corner-background | Sets the background color of the bottom right text.
| String | optional |
| Visual effect | Markup |
|---|---|
{{diagonal split color box}}
| |
{{diagonal split color box|Green}}
| |
{{diagonal split color box||Green}}
| |
{{diagonal split color box|Green|Green}}
| |
{{diagonal split color box|Green|border=Green}}
| |
{{diagonal split color box|Yellow|Blue}}
| |
C R |
{{diagonal split color box|||R|C|#f00|#0ff}}
|
C R |
{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff}}
|
C R |
{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|no-diagonal=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|no-diagonal=yes}}
|
C R |
{{diagonal split color box|#999|#999|R|C|#f00|#0ff}}
|
C R |
{{diagonal split color box|#999||R|C|#f00|#0ff}}
|
C R |
{{diagonal split color box||#999|R|C|#f00|#0ff}}
|
R R |
{{diagonal split color box|Yellow||R|R|#f00}}
|
R R |
{{diagonal split color box|Yellow||R|R||#f00}}
|
A R |
{{diagonal split color box|Yellow||R|A|#f00|#f00}}
|
R |
{{diagonal split color box|||R|R|#f00|#f00}}
|
R |
{{diagonal split color box|Yellow|Yellow|R|R|#f00|#f00}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00}}
|
R |
{{diagonal split color box||Yellow|R|R|#f00|#f00}}
|
R |
{{diagonal split color box|Yellow||R||#f00}}
|
R |
{{diagonal split color box|Yellow|||R|#f00}}
|
R |
{{diagonal split color box|Yellow|||R||#f00}}
|
R |
{{diagonal split color box|#999||R|#f00|#f00}}
|
R |
{{diagonal split color box|#999|||R|#f00|#f00}}
|
R |
{{diagonal split color box|#999||R||#f00|#0ff}}
|
R |
{{diagonal split color box|#999|||R|#f00|#0ff}}
|
{{diagonal split color box|font-size=0.6em}}
| |
{{diagonal split color box|Yellow|font-size=0.6em}}
| |
{{diagonal split color box|LightGray|Yellow|font-size=0.6em}}
| |
{{diagonal split color box|LightGray|Yellow|font-size=0.6em|no-diagonal=yes}}
| |
C R |
{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.6em}}
|
R R |
{{diagonal split color box|Yellow||R|R|#f00|font-size=0.6em}}
|
R R |
{{diagonal split color box|Yellow||R|R||#f00|font-size=0.6em}}
|
R |
{{diagonal split color box|Yellow||R|font-size=0.6em}}
|
R |
{{diagonal split color box|Yellow|||R|font-size=0.6em}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.6em}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|maximize=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|maximize=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|maximize=yes|no-diagonal=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.2em|maximize=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.2em|maximize=yes|no-diagonal=yes}}
|
B R |
{{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|corner=B|corner-color=#00f}}
|
R B |
{{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|far-corner=B|far-corner-color=#00f}}
|
B R |
{{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}}
|
C R |
{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.7em}}
|
BC R |
{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.7em|corner=B|corner-color=#00f}}
|
P E100 |
{{diagonal split color box|green||E100|E100|font-size=0.7em|corner=P|corner-color=white|corner-background=green}}
|
P E85 |
{{diagonal split color box|green||E85|E85|font-size=0.7em|corner=P|corner-color=white|corner-background=green}}
|
E100 |
{{diagonal split color box|green||E100|E100|font-size=0.61em}}
|
E85 |
{{diagonal split color box|green||E85|E85|font-size=0.61em}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.7em}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=1.2em|maximize=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.37em|maximize=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.37em|maximize=yes|no-diagonal=yes}}
|
C R |
{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.8em}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.8em}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=1.35em|maximize=yes}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.7em|maximize=yes}}
|
{{diagonal split color box|Yellow|border=Yellow|font-size=0.7em|maximize=yes}}
| |
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.6em|maximize=yes}}
|
{{diagonal split color box|Yellow|border=Yellow|font-size=0.6em|maximize=yes}}
| |
{{diagonal split color box|Yellow|Blue|font-size=0.45em}}
| |
Red Blue |
{{diagonal split color box|LightGray|Yellow|Blue|Red|#00f|#f00}}
|
Red Blue |
{{diagonal split color box|LightGray|Yellow|Blue|Red|#00f|#f00|font=Helvetica, Sans-serif}}
|
Blue Red |
{{diagonal split color box|LightGray|Yellow|Red|Blue|#f00|#00f}}
|
Blue Red |
{{diagonal split color box|LightGray|Yellow|Red|Blue|#f00|#00f|font=Helvetica, Sans-serif}}
|
Default color for this text |
{{diagonal split color box|Green|Green|Default color for this text|Default color for this text|font=Helvetica, Sans-serif}}
|
Default color for this text |
{{diagonal split color box|Yellow|Blue|Default color for this text|font=Helvetica, Sans-serif}}
|
Default color for this text |
{{diagonal split color box|Yellow|Blue||Default color for this text|font=Helvetica, Sans-serif}}
|
Default color for this text |
{{diagonal split color box|Yellow|Blue|Default color for this text|Default color for this text|font=Helvetica, Sans-serif}}
|
Default color for this text |
{{diagonal split color box|Blue|Yellow|Default color for this text|Default color for this text|font=Helvetica, Sans-serif}}
|
Default color for right text Default color for left text |
{{diagonal split color box|Yellow|Blue|Default color for left text|Default color for right text|font=Helvetica, Sans-serif}}
|
Default color for right text Default color for left text |
{{diagonal split color box|Blue|Yellow|Default color for left text|Default color for right text|font=Helvetica, Sans-serif}}
|
Using X11 color names Using X11 color names |
{{diagonal split color box|SteelBlue|Coral|'''Using X11 color names'''|'''Using X11 color names'''|Gold|Silver|font=Helvetica, Sans-serif}}
|
Default color for this text Using RGB hex triplets |
{{diagonal split color box|#012345|#BA9876|''Using RGB hex triplet''|''Default color for this text''|#FEDCBA|font=Helvetica, Sans-serif}}
|
bordercolor like wikitable |
{{diagonal split color box|white|lightgray|bordercolor like wikitable|border=#A2A9B1|border-width=4px|font=Helvetica, Sans-serif}}
|
two border colors |
{{diagonal split color box|white|lightgray|two border colors|border=yellow|border2=red|border-width=4px|font=Helvetica, Sans-serif}}
|
far border color |
{{diagonal split color box|white|lightgray|far border color|border=yellow|far-border=red|border-width=4px|font=Helvetica, Sans-serif}}
|
Variants
| Template | Description | Example |
|---|---|---|
| {{Color box}} | a small color box with black borders and text color | or ORANGE |
| {{Color box striped}} | a striped version | |
| {{RouteBox}} | a borderless version with text color and wikilinks | Template:RouteBox |
| {{Colorbull}} | a colored bullet with wikilinks | ■ |
| {{Legend2}} | another borderless version | |
| {{Color sample}} | a small color box with black borders | |
| {{Swatch inline}} | Template:Swatch inline | |
| {{Background color}} | orange | |
| {{Rail color box}} | a version with more display options (part of Module:Adjacent stations) |
Template:Rcb, Template:Rcb, etc. |
| {{Diagonal split color box}} | a small color box split diagonally | |
| {{Motor type}} | A small color box corresponding to the motor type | Template:Motor type, etc. |
Supporting template
See also
- {{Infobox color}}, an infobox for the detailed description of a color.
- {{Legend}}
- {{Diagonal split header}}
| The above documentation is transcluded from Template:Diagonal split color box/doc. (edit | history) Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages. Please add categories to the /doc subpage. Subpages of this template. |