Template:Clickable button-toolbar/doc

From OpenStreetMap Wiki
Jump to navigation Jump to search

Usage

Animated button for use in toolbars. Hoover and click animation in border area / background. Button action only possible with links as button text.
This template extends the clickable area from the link to the whole button.

Example

A button with all options (display + colouring of icon and label):

→ {{Clickable button-toolbar|scale=1|IconImage=File:OSM_UG_Guidlelines_Workgroup_logo.svg|picsize=20|bckcolor=HoneyDew|ButtonLink=WikiProject_Uganda|ButtonLabel=WikiProject|txtcolor=green|enable=yes|HasLabel=yes}}

A button with all options but not enabled, upscaled to double of normal text size (referencing a non-existant link). Notice that the actual button is not really enabled, it will create the non existing page. If you want to really disable the button, don't add the ButtonLink parameter, which will link through the label to the user page of the original creator of this template, the icon or image will have no link at all.

→ {{Clickable button-toolbar|scale=2|IconImage=File:OSM_UG_Guidlelines_Workgroup_logo.svg|picsize=20|bckcolor=HoneyDew|ButtonLink=No Page Yet|ButtonLabel=WikiProject|txtcolor=green|HasLabel=yes}}

Real disabled button (no link provided):

→ {{Clickable button-toolbar|scale=2|IconImage=File:OSM_UG_Guidlelines_Workgroup_logo.svg|picsize=20|bckcolor=HoneyDew|ButtonLabel=WikiProject|txtcolor=green|HasLabel=yes}}

A button with only an icon:

OSM UG Guidlelines Workgroup logo.svg
→ {{Clickable button-toolbar|scale=2|IconImage=File:OSM_UG_Guidlelines_Workgroup_logo.svg|picsize=20|bckcolor=HoneyDew|ButtonLink=WikiProject_Uganda|ButtonLabel=WikiProject|txtcolor=green|enable=yes}}

A button with only a label:

→ {{Clickable button-toolbar|scale=2|IconImage=File:OSM_UG_Guidlelines_Workgroup_logo.svg|picsize=20|bckcolor=HoneyDew|ButtonLink=No Page Yet|ButtonLabel=WikiProject|txtcolor=green|HasLabel=yes}}

An empty button (template used without parameters, default display, has no use, except as place holder, since no link is provided):

→ {{Clickable button-toolbar}}

Templatedata

Creates a toolbar button.

Template parameters

ParameterDescriptionTypeStatus
Scalescale

Up- or downscaling the button size (in regard to base = 1 which is default text size).

Default
1
Numberoptional
Image or IconIconImage

Give the file name for the image to be used on the button (with File: or Image: prefix,don't apply size or use any other markup).

Stringoptional
Picture Sizepicsize

Size of the image or icon in pixels (px). Scaling will be applied, so this pixel size is the default size at scale=1.

Default
20
Numberoptional
Button background colourbckcolor

Any HTML colour name or code. Make sure there is sufficient contrast with the label text colour. Some suggestions are below in the notes (1).

Default
Gainsboro
Stringsuggested
Link for the buttonButtonLink

The link the button will use. If the link does not exist the button face will be faded (opacity of 30%).

Default
User:Bert Araali
Stringsuggested
Label for the buttonButtonLabel

The label or text shown on the button. The default is in the users local language. No supported languages should be enetered directly as in this parameter or added to the template.

Default
Clickable button
Stringoptional
Label text colourtxtcolor

Any HTML colour name or code. If no text colour is given the default link colours of MediaWiki will be used (2).

Default
black
Stringsuggested
Button Enabledenable

Use this (any value) to indicate if the button should be visualised as enabled. Disabled buttons are shown with a faded face (opacity of 30%).

Default
yes
Stringsuggested
Should Label be displayed ?HasLabel

Use this (any value) to indicate if the button should be visualised with a label.

Default
yes
Stringsuggested

Notes

(1) Good design practices and W3C design guidelines ([[1]]) should be used for successful user interfaces. The following are just examples and intended as convenient references.

  • Pale colours that work nice with standard MediaWiki link colours and dark text colours:
Gainsboro
LightGrey
Snow
HoneyDew
MintCream
Azure
AliceBlue
GhostWhite
WhiteSmoke
SeaShell
Beige
OldLace
FloralWhite
Ivory
AnitqueWhite
Linen
LavenderBlush
MistyRose
Lavender
LightYellow
LemonChiffon
LightGoldenRodYellow
PapayaWhip
LightCyan
LightBlue
PowderBlue
CornSilk
BlanchedAlmond
Bisque
  • Dark colours that work nice with light text colours:
Black
DarkSlateGrey
SlateGrey
LightSlateGrey
Grey
DimGrey
Maroon
SaddleBrown
Olive
MidnightBlue
Navy
DarkBlue
SteelBlue
Teal
DarkCyan
DarkOliveGreen
DarkGreen
DarkKhaki
DarkRed
FireBrick
Indigo
DarkSlateBlue
  • Some bright colours that work ok with white or black text colours:
Pink
LightPink
HotPink
DeepPink
PaleVioletRed
MediumVioletRed
Thistle
Plum
Orchid
Violet
Fuchsia
Magenta
MediumOrchid
DarkOrchid
BlueViolet
DarkMagenta
Purple
MediumPurple
MediumSlateBlue
SlateBlue
RebeccaPurple
LightSalmon
Salmon
DarkSalmon
LightCoral
IndianRed
Crimson
Red
Orange
Coral
DarkOrange
Tomato
OrangeRed
Gold
Yellow
Moccasin
PeachPuff
PaleGoldenRod
Khaki
GreenYellow
Chartreuse
LawnGreen
Lime
PaleGreen
LightGreen
MediumSpringGreen
SpringGreen
LimeGreen
MediumSeaGreen
SeaGreen
ForestGreen
Green
YellowGreen
OliveDrab
DarkSlateBlue
MediumAquaMarine
DarkSeaGreen
LightSeaGreen
Aqua
Cyan
PaleTurquoise
AquaMarine
Turquoise
MediumTurquoise
DarkTurquoise
CadetBlue
LightSteelBlue
LightSkyBlue
SkyBlue
CornFlowerBlue
DeepSkyBlue
DodgerBlue
RoyalBlue
Blue
MediumBlue
NavajoWhite
Wheat
BurlyWood
Tan
RosyBrown
SandyBrown
GodlenRod
DarkGoldenRod
Peru
Chocolate
Sienna
Brown
Silver
DarkGrey


(2) Default MediaWiki link colours [2]:

local interwiki external local:visted interwiki:visited external:visited

local :active

non-local :active missing missing:visited usage and source
local link - #0645ad interwiki link - #3366bb external link - #3366bb :visited link - #0b0080 interwiki:visited - #663366 external:visited - #663366 :active link - #faa700 extiw:active link - #bb6633 missing link - #ba0000 missing:visited link - #a55858 Vector skin uses these link colors[1][2] (test)
local link - #002bb8 interwiki link - #3366bb external link - #3366bb :visited link - #5a3696 interwiki:visited - #663366 external:visited - #663366 :active link - #faa700 (only for unvisited links) extiw:active link - #bb6633 missing link - #cc2200 missing:visited link - #a55858 Monobook uses these link colors colors[3] [?] (test)
local link - #3366cc interwiki link - #3366cc external link - #3366cc :visited link - #5a3696 interwiki:visited - #663366 external:visited - #663366 :active link - #faa700 extiw:active link - #faa700 missing link - #dd3333 missing:visited link - #dd3333 MinervaNeue uses these link colors colors[4] [5] (test) (Accent50 color from Wikimedia Design Style Guide[6])
default link - #0000ee -- -- :visited link - #551a8b -- -- -- -- -- the default specified W3C link colors[7]
default link - #003366 -- -- :visited link - #006ec6 -- -- -- -- -- the W3C site itself uses these link colors in some locations (and varies elsewhere)[8]

See also

Similar MediaWiki template