Template:Branded Button

Test button name

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

Usage

This template creates a clickable button with an image in the background to make it look a branded button. It is not for use in articles, but in project pages, portals, template documentation, and userspace. It offers various parameters to customize display.

To use the template, place {{Branded button}} anywhere on the page you want the button to appear, and customize the input with the optional parameters, listed below.

Just {{Branded button}} by itself will just produce the sample test button shown above, which links to the Wikipedia main page, as a demo.

Typical basic use: {{Branded button|link=Wikipedia page name here|name=Button text here}}

Parameters

|text= – a.k.a. |name=, |title=, |content=, to match similar parameters in other templates; |1=, first unnamed parameter

The displayed text inside the button.

• This can be styled with markup like ''...'' or even something like <span style="font-family: fantasy;">...</span>.

|link= – a.k.a. |page=, |url=, |2=, second unnamed parameter

The page to wikilink to (where the button goes if you click it).

• Do not use a full URL, and do not include the wikilinking brackets – [[...]] – around the page name.
• You can use any valid wikilink target, including a special one, such as Special:MyPage/common.css, :Category:South American felids (note the :), or wiktionary:omphaloskepsis#Etymology.

|class=

Defines the visual type of the button. Can accept two values: progressive and destructive.

|file= – a.k.a. |File=, |image=, |icon=, |3=, third unnamed parameter

The name of the image to use, in File:Image name here format.

• Again, leave out the wikilink brackets, and do not give a full URL.

|scale= – a.k.a. |upright=

Sets the image scale (actually a width-to-height ratio), using the |frameless|upright=value here feature of the MediaWiki image syntax as described at W:WP:Picture tutorial. You simply supply the numeric value; no units like px are added. The default is 0.135, and works well for square or nearly-square images. If you select an unusually wide or tall image, you will likely need to change this to get to not be tiny or to not be too tall for the button, respectively. See the cat button example below.

|opacity=

The opacity (transparency) level of the image, from 0 to 1, where 0 is invisble and 1 is completely opaque. The default is 0.3. The closer you get to 1 the harder the text will be to read, if you do not move it aside with |offset=, below.

|offset=

Moves the content of the |text= parameter to the right by the specified amount, to prevent overlapping of text and image, especially when not using the |opacity= default of a rather translucent image. Specify this is em units, e.g. 2.5em (note the lack of space between the measure and the unit name). See the cat button example below. If you use px units, it will look wrong on the screen of anyone with different settings from yours. If you use % units, it will change undesirably with window width.

|float=

A value or left or right will move the button the far left or right of the page (or of the contain in which the template is used, if narrower than page width).

|center=yes

Not tested, and using long-invalid <center>...</center> markup, which needs to be replaced. Presumably has some kind of centering effect, though whether this affects the text in the box or the button on the page is unclear.

Examples

The default:
     {{Branded button}}
will produce the following:
     Template:Branded button

---

This:
     {{Branded button|link=Main Page|name=Main Page}}
will produce the following, flush left with its container (in this case, the entire content area aside from the left sidebar):
     Template:Branded button

---

This (notice the link change):
     {{Branded button|link=Portal:Contents|name=Wikipedia Contents|file=File:Wikipedia.png}}
will produce:
     Template:Branded button

---

Class parameter:
     {{Branded button|link=Portal:Contents|name=Wikipedia Contents|file=File:Wikipedia.png|class=progressive}}
will produce:
     Template:Branded button

---

Float left:
     {{Branded button|link=Main Page|name=Main Page|float=left}}
will produce the following:

     Template:Branded button

You may need to use {{clear|left}} after this if it interferes with other content.

---

Float right:
     {{Branded button|link=Main Page|name=Main Page|float=right}}
will produce the button to the far right:

     Template:Branded button

You may need to use {{clear|right}} after this if it interferes with other content.

---

Center:
     {{Branded button|link=Main Page|name=Main Page|center=yes}}
will produce the button to the far right:
     Template:Branded button

---

Complex example of a cat breed button that could be used at W:WP:WikiProject Cats:
     {{Branded button|file=File:Brown spotted tabby bengal cat.jpg|scale=0.3|opacity=1|name=Bengal (hybrid)|offset=4em|link=Bengal cat}}
produces:
     Template:Branded button

Other buttons

The above documentation is transcluded from Template:Branded Button/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Add categories to the /doc subpage. Subpages of this template.