View source for Template:Branded Button/doc

{{documentation subpage}}
==Usage==
This template creates a clickable button with an image in the background to make it look a branded button. {{strong|It is not for use in articles}}, but in [[Wikipedia:Project namespace|project pages]], [[Wikipedia:Portal|portals]], [[Wikipedia:Template documentation|template documentation]], and [[Wikipedia:User pages|userspace]]. It offers various parameters to customize display.

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

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

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


== Parameters ==

; {{para|text}} <span style="font-weight: normal;">– a.k.a. {{para|name}}, {{para|title}}, {{para|content}}, to match similar parameters in other templates; {{para|1}}, first unnamed parameter</span>
: The displayed text inside the button.
:* This can be styled with markup like {{kbd|<nowiki>''...''</nowiki>}} or even something like {{kbd|<nowiki><span style="font-family: fantasy;">...</span></nowiki>}}. 
; {{para|link}} <span style="font-weight: normal;">– a.k.a. {{para|page}}, {{para|url}}, {{para|2}}, second unnamed parameter</span>
: The page to wikilink to (where the button goes if you click it).
:* {{em|Do not}} use a full URL, and {{em|do not}} include the wikilinking brackets – <code>{{!mxt|<nowiki>[[...]]</nowiki>}}</code> – around the page name.
:* You {{em|can}} use any valid wikilink target, including a special one, such as {{kbd|Special:MyPage/common.css}}, {{kbd|:Category:South American felids}} (note the <code>:</code>), or {{kbd|wiktionary:omphaloskepsis#Etymology}}.
; {{para|class}}
: Defines the visual type of the button. Can accept two values: <code>progressive</code> and <code>destructive</code>.
; {{para|file}} <span style="font-weight: normal;">– a.k.a. {{para|File}}, {{para|image}}, {{para|icon}}, {{para|3}}, third unnamed parameter</span>
: The name of the image to use, in {{kbd|File:<var>Image name here</var>}} format.
:* Again, {{em|leave out}} the wikilink brackets, and {{em|do not}} give a full URL.
; {{para|scale}} <span style="font-weight: normal;">– a.k.a. {{para|upright}}</span>
: Sets the image scale (actually a width-to-height ratio), using the <code>{{!}}frameless{{!}}upright={{var|value here}}</code> feature of the MediaWiki image syntax as described at [[WP:Picture tutorial]].  {{em|You simply supply the numeric value;}} no units like {{samp|{{!mxt|px}}}} are added. The default is {{samp|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.
; {{para|opacity}}
: The opacity (transparency) level of the image, from {{kbd|0}} to {{kbd|1}}, where {{samp|0}} is invisble and {{samp|1}} is completely opaque. The default is {{samp|0.3}}.  The closer you get to {{samp|1}} the harder the text will be to read, if you do not move it aside with {{para|offset}}, below.
; {{para|offset}}
: Moves the content of the {{para|text}} parameter to the right by the specified amount, to prevent overlapping of text and image, especially when not using the {{para|opacity}} default of a rather translucent image. {{em|Specify this is {{samp|em}} units}}, e.g. {{kbd|2.5em}} (note the lack of space between the measure and the unit name).  See the cat button example below.  If you use {{samp|{{!mxt|px}}}} units, it will look wrong on the screen of anyone with different settings from yours. If you use {{samp|{{!mxt|%}}}} units, it will change undesirably with window width.
; {{para|float}}
: A value or {{kbd|left}} or {{kbd|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).
; {{para|center|yes}}
: '''Not tested, and using long-invalid {{tag|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:<br />
{<code><nowiki>{{Branded button}}</nowiki></code>
<br />will produce the following:<br />

{{Branded button}}
----


This:<br />
<code><nowiki>{{Branded button|link=Main Page|name=Main Page}}</nowiki></code><br />
will produce the following, flush left with its container (in this case, the entire content area aside from the left sidebar):<br />
{{Branded button|name=Wikipedia Main Page|link=Main Page}}
----


This (notice the link change):<br />
<code><nowiki>{{Branded button|link=Portal:Contents|name=Wikipedia Contents|file=File:Wikipedia.png}}</nowiki></code><br />
will produce:<br />

{{Branded button|link=Portal:Contents|name=Wikipedia Contents|file=File:Wikipedia.png}}

----


Class parameter:<br />
<code><nowiki>{{Branded button|link=Portal:Contents|name=Wikipedia Contents|file=File:Wikipedia.png|class=progressive}}</nowiki></code><br />
will produce:<br />

{{Branded button|link=Portal:Contents|name=Wikipedia Contents|file=File:Wikipedia.png|class=progressive}}
----


Float left:<br />
<code><nowiki>{{Branded button|link=Main Page|name=Main Page|float=left}}</nowiki></code><br />
will produce the following:<br />

{{Branded button|name=Wikipedia Main Page|link=Main Page|float=left}}{{clear|left}}<br />
You may need to use {{tlx|clear|left}} after this if it interferes with other content.
----


Float right:<br />
<code><nowiki>{{Branded button|link=Main Page|name=Main Page|float=right}}</nowiki></code><br />
will produce the button to the far right:<br />

{{Branded button|name=Wikipedia Main Page|link=Main Page|float=right}}{{clear|right}}<br />
You may need to use {{tlx|clear|right}} after this if it interferes with other content.
----


Center:<br />
<code><nowiki>{{Branded button|link=Main Page|name=Main Page|center=yes}}</nowiki></code><br />
will produce the button to the far right:<br />

{{Branded button|name=Wikipedia Main Page|link=Main Page|center=yes}}<br />
----


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

{{Branded button|file=File:Brown spotted tabby bengal cat.jpg|scale=0.3|opacity=1|name=Bengal (hybrid)|offset=4em|link=Bengal cat}}

==Other buttons==
{{Button templates}}

<includeonly>{{Sandbox other||
<!-- Categories and interwikis go here: -->
[[Category:Wikipedia formatting and function templates]]
[[Category:Wikipedia button templates]]
}}</includeonly>