Template:Composition bar/advanced

Template documentation[view] [edit] [history] [purge]

The advanced Composition bar template can be used to show a composition bar split into different colours. It's intended use is on election articles to show the share of the vote in a given division/constituency/ward, but it can be used as a general composition bar, or as a more comprehensive progress bar.

The number of votes or percentages are entered using the party1/party2/party3 parameters, with the partycolor1/partycolor2/partycolor3 parameters allowing you to choose the colour of that part of the bar (using hexcode). In the examples below, political party templates are used to generate the specific colours (for example {{party color|Labour Party (UK)}} generates the following: #E4003B ).

The width of the whole box can be edited using the boxwidth parameter. If this parameter isn't used, it will default to 500px.

NOTE: This template does not currently add up your individual party1/party2/party3 parameters for the total, so you should ensure that you add up these numbers and enter it as the total parameter. If the total of your party parameters does not reach the total, the extra space will be shown as white on the bar.

<syntaxhighlight lang="wikitext">

<div style="position: absolute; left: px; width:px;height:20px; background-color: ">

</syntaxhighlight>

Color parameters

Colors (/colours) can be defined using hexcode (e.g. #7CFC00) or as color names (e.g. LawnGreen). For a comprehensive list of X11 color names, see here.

In the below example of an election result, a template (e.g. {{party color|Labour Party (UK)}}) is used to call the specific colour (in this case #DC241f).

Examples

Example 1: Election results

<syntaxhighlight lang="wikitext">

Cardiff South and Penarth by-election, 2012

<div style="position: absolute; left: 623px; width:76px;height:20px; background-color: ">

<div style="position: absolute; left: 700px; width:48px;height:20px; background-color: "> <div style="position: absolute; left: 748px; width:32px;height:20px; background-color: ">

</syntaxhighlight>

Cardiff South and Penarth by-election, 2012

<div style="position: absolute; left: 623px; width:76px;height:20px; background-color: ">

<div style="position: absolute; left: 700px; width:48px;height:20px; background-color: "> <div style="position: absolute; left: 748px; width:32px;height:20px; background-color: ">

Example 2: Demographics

<syntaxhighlight lang="wikitext">

Gender of the population of the UK (2011 census)

Gender of MPs elected in 2010

</syntaxhighlight>

Gender of the population of the UK (2011 census)

Gender of MPs elected in 2010

Example 3: Progress bar

(This example is taken from the WikiProject Spaceflight.) <syntaxhighlight lang="wikitext">*Phase 1 (orange)

• Phase 2 (green)

Space Shuttle missions

Overall

</syntaxhighlight>

• Phase 1 (orange)
• Phase 2 (green)

Space Shuttle missions

Overall