Template:Infobox political party/seats: Difference between revisions
Jump to navigation
Jump to search
(Created page with "<div style="border: {{{border-width|1px}}} solid {{{border-color|#c0c0c0}}}; background-color: {{{background-color|#f0f0f0}}}; width: {{{width|100}}}px; height: 1.5em;"><div s...") |
(Potential fix on color interpretation; will revert if this breaks things) |
||
| Line 1: | Line 1: | ||
<div style="border: {{{border-width|1px}}} solid {{{border-color|#c0c0c0}}}; background-color: {{{background-color|#f0f0f0}}}; width: {{{width|100}}}px; height: 1.5em;"><div style="position: absolute; background-color:{{#if:{{both|{{{4|}}}|{{{5|}}}}} | <div style="border: {{{border-width|1px}}} solid {{{border-color|#c0c0c0}}}; background-color: {{{background-color|#f0f0f0}}}; width: {{{width|100}}}px; height: 1.5em;"><div style="position: absolute; background-color:{{#if:{{both|{{{4|}}}|{{{5|}}}}} | ||
|rgb({{#expr:255*{{{3|255}}}}},{{#expr:255*{{{4| | |rgb({{#expr:255*{{{3|255}}}}},{{#expr:255*{{{4|255}}}}},{{#expr:255*{{{5|255}}}}}) | ||
|{{{hex|{{{3|#CCCCCC}}}}}} }}; width: {{#expr:floor({{{width|100}}}*{{{1|{{#expr:{{{width|100}}}/2}}}}}/{{{2|{{{width|100}}}}}})}}px; height: 1.5em;"></div><div style="position: absolute; font-weight: bold; width: {{{width|100}}}px; height: 1.5em; text-align: center; z-index: 10; color: {{{color|#000}}};">{{formatnum:{{{1|50}}}}} / {{formatnum:{{{2|100}}}}}{{#if:{{{per|}}}| ({{#expr:(({{{1|50}}}/{{{2|100}}})*100)round 0}}%)}}</div></div><noinclude> | |{{{hex|{{{3|#CCCCCC}}}}}} }}; width: {{#expr:floor({{{width|100}}}*{{{1|{{#expr:{{{width|100}}}/2}}}}}/{{{2|{{{width|100}}}}}})}}px; height: 1.5em;"></div><div style="position: absolute; font-weight: bold; width: {{{width|100}}}px; height: 1.5em; text-align: center; z-index: 10; color: {{{color|#000}}};">{{formatnum:{{{1|50}}}}} / {{formatnum:{{{2|100}}}}}{{#if:{{{per|}}}| ({{#expr:(({{{1|50}}}/{{{2|100}}})*100)round 0}}%)}}</div></div><noinclude> | ||
Revision as of 00:33, 3 April 2022
50 / 100
This template displays the numeric composition of a thing in terms of its sub-units. For example, it is frequently used as part of {{Infobox political party}} to show the number of seats a given political party holds in a legislature.
Usage
{{Composition bar|amount|total|bar-color|color=color|background-color=background-color|per=0/1}}
- amount is the number of sub-units
- total is the total number of sub-units possible
- bar-color (default is light grey) is the background color of the left part of the bar - a valid web color, which can be specified by name, as a hex triplet (#rrbbgg), or rgb triplet (rgb(0–255,0–255,0–255)).
In the case of political parties, most will have their logo color available in Template:Tld templates. - color (default is black) is the text colour - a valid web color.
- background-color (default is very light grey) is the background color of the right part of the bar - a valid web color.
- width is the width of the bar in px.
- per (default is false), when set to 1 (true), adds a percentage to the bar as well.
If the bar-colour is dark, then the text may have insufficient contrast to show clearly for some readers. The text colour may be changed to white by specifying the color parameter. The background colour for the right part of the bar may then be too light to give sufficient contrast with white text, in which case the background-color parameter may be used to provide a dark background for that part of the bar. See the first three examples below. Snook's Colour Contrast Check may be used to check compliance with WCAG guidelines for contrast.
Examples
| Code | Result |
|---|---|
{{Composition bar|50|100|red}}
|
<div style="position: absolute; background-color:rgb(Expression error: Unrecognized word "red".,0,0); width: 50px; height: 1.5em;"> 50 / 100
|
{{Composition bar|50|100|red|color=#FFFFFF}}
|
<div style="position: absolute; background-color:rgb(Expression error: Unrecognized word "red".,0,0); width: 50px; height: 1.5em;"> 50 / 100
|
{{Composition bar|50|100|red|color=#FFFFFF|background-color=#000000}}
|
<div style="position: absolute; background-color:rgb(Expression error: Unrecognized word "red".,0,0); width: 50px; height: 1.5em;"> 50 / 100
|
{{Composition bar|50|100|#9999FF}}
|
<div style="position: absolute; background-color:rgb(Expression error: Unrecognized punctuation character "#".,0,0); width: 50px; height: 1.5em;"> 50 / 100
|
{{Composition bar|50|100|{{Green Party (UK)/meta/color}}}}
|
<div style="position: absolute; background-color:rgb(Expression error: Unrecognized punctuation character "[".,0,0); width: 50px; height: 1.5em;"> 50 / 100
|
{{Composition bar|50|100|rgb(255,255,16)}}
|
<div style="position: absolute; background-color:rgb(Expression error: Unrecognized word "rgb".,0,0); width: 50px; height: 1.5em;"> 50 / 100
|
{{Composition bar|75|100|#FF0|width=250}}
|
<div style="position: absolute; background-color:rgb(Expression error: Unrecognized punctuation character "#".,0,0); width: 187px; height: 1.5em;"> 75 / 100
|
{{Composition bar|90|100|#F00|width=500|per=1}}
|
<div style="position: absolute; background-color:rgb(Expression error: Unrecognized punctuation character "#".,0,0); width: 450px; height: 1.5em;"> 90 / 100 (90%)
|
{{Composition bar|90|100|#F00|width=500|per=1|color=#FFFFFF}}
|
<div style="position: absolute; background-color:rgb(Expression error: Unrecognized punctuation character "#".,0,0); width: 450px; height: 1.5em;"> 90 / 100 (90%)
|