Template:Clickable button-toolbar
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:
→ {{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.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Scale | scale | Up- or downscaling the button size (in regard to base = 1 which is default text size).
| Number | optional |
| Image or Icon | IconImage | 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). | String | optional |
| Picture Size | picsize | Size of the image or icon in pixels (px). Scaling will be applied, so this pixel size is the default size at scale=1.
| Number | optional |
| Button background colour | bckcolor | 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).
| String | suggested |
| Link for the button | ButtonLink | The link the button will use. If the link does not exist the button face will be faded (opacity of 30%).
| String | suggested |
| Label for the button | ButtonLabel | 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.
| String | optional |
| Label text colour | txtcolor | Any HTML colour name or code. If no text colour is given the default link colours of MediaWiki will be used (2).
| String | suggested |
| Button Enabled | enable | 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%).
| String | suggested |
| Should Label be displayed ? | HasLabel | Use this (any value) to indicate if the button should be visualised with a label.
| String | suggested |
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:
- Dark colours that work nice with light text colours:
- Some bright colours that work ok with white or black text colours:
(2) Default MediaWiki link colours [2]:
| local | interwiki | external | local:visted | interwiki:visited | external:visited |
|
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
- ↑ https://en.wikipedia.org/wiki/Help:Link_color
- ↑ https://phabricator.wikimedia.org/source/mediawiki/browse/master/resources/src/mediawiki.skinning/elements.css
- ↑ https://phabricator.wikimedia.org/diffusion/SVN/browse/trunk/phase3/skins/monobook/main.css;79011$74
- ↑ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MinervaNeue/+/master/resources/skins.minerva.content.styles/links.less
- ↑ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MinervaNeue/+/master/minerva.less/minerva.variables.less
- ↑ https://design.wikimedia.org/style-guide/visual-style_colors.html
- ↑ https://www.w3.org/TR/html5/rendering.html#phrasing-content-0
- ↑ e.g. https://www.w3.org