Difference between revisions of "Template:Button"

From FlightGear wiki
Jump to: navigation, search
m (Fix variables)
m (Typo)
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<noinclude>{{WIP}}</noinclude><span style="border: {{{bw|1}}}px solid {{{bc|black}}}; padding: 1px 3px; background: {{{cc|white}}}; font-family: inherit; color: {{{tc|black}}}; font-size: 0.85em;">{{{1|text}}}</span><noinclude>
+
<span class="nowrap" title="This is not a clickable button; it illustrates the button one should find." style="padding:{{{padTB|.1em}}} {{{padLR|.4em}}}; border:1px solid; border-color:#AAA #555 #555 #AAA; {{border-radius|3px}} background-color: {{{bgcolor|#F2F2F2}}}; {{linear-gradient|top|#FCFCFC, #E0E0E0}} {{{style|}}}">{{{1|Button}}}</span><noinclude>{{Informative template|1=
{{Informative template|1=
+
 
__NOTOC__
 
__NOTOC__
 
== Goal ==
 
== Goal ==
This template is used in running text to illustrate button presses and lit indicators. It allows the use of alternate colours and border widths.
+
This template provides a "button" formatting style for text.  
 +
 
 +
{{inote|This button is '''not''' clickable.}}
  
 
== Usage ==
 
== Usage ==
  <nowiki>{{</nowiki>'''button'''<nowiki>|</nowiki>text<nowiki>|</nowiki>''tc=black''<nowiki>|</nowiki>''cc=white''<nowiki>|</nowiki>''bc=black''<nowiki>|</nowiki>''bw=1''<nowiki>}}</nowiki>
+
  <nowiki>{{</nowiki>'''button'''{{!}}''text''{{!}}''padTB=''{{!}}''padLR=''{{!}}''style=''<nowiki>}}</nowiki>
=== Parameters ===
+
* <tt>'''text'''</tt>: The button text, the only mandatory parameter
+
* <tt>'''''tc='''''</tt>: <u>T</u>ext <u>c</u>olour, defaults to <tt>black</tt>
+
* <tt>'''''cc='''''</tt>: Button <u>c</u>ap <u>c</u>olour, defaults to <tt>white</tt>
+
* <tt>'''''bc='''''</tt>: <u>B</u>order <u>c</u>olour, defaults to <tt>black</tt>
+
* <tt>'''''bw='''''</tt>: <u>B</u>order <u>w</u>idth in pixels, defaults to <tt>1</tt>
+
  
=== Colours ===
+
All parameters are optional.
The template uses cascading style sheet (CSS) colours, and there are five ways to define the colours:
+
# Through colour keywords (either of aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white or yellow);
+
# as three hexadecimal values <tt>#rgb</tt>, like <tt>#F00</tt> for red,
+
# as six hexadecimal values <tt>#rrggbb</tt>, like <tt>#00FF00</tt> for green,
+
# as three integers 0-255 <tt>rgb(r,g,b)</tt>, like <tt>rgb(0,255,255)</tt> for yellow
+
# as three percentages <tt>rgb(r, g, b)</tt>, like <tt>rgb(100%, 0%, 0%)</tt> for red
+
  
In other words <tt>F = FF = 255 = 100%</tt>.
+
; text: Text to display on the button.  Defaults to <code>Button</code>.
 +
 
 +
; padTB: Amount of padding above and below the text.  Defaults to <code>.1em</code>.
 +
 
 +
; padLR: Amount of padding either side of the text.  Defaults to <code>.4em</code>.
 +
 
 +
; style: Any additional styling you may want to add.
  
 
== Examples ==
 
== Examples ==
<pre>{{button|HDG}}</pre>
+
<nowiki>Press the {{button|Next}} button.</nowiki>
<span style="border: 1px solid black; padding: 1px 3px; background: white; font-family: inherit; color: black; font-size: 0.85em;">HDG</span>
+
  
 +
Press the {{button|Next}} button.
  
<pre>{{button|'''ALT'''|tc=black|cc=#AFA|bc=gray|bw=2}}</pre>
+
<nowiki>{{button|[[File:Tick_32px.png|16px|link=]]|padTB=.4em|padLR=.4em}}</nowiki>
<span style="border: 2px solid gray; padding: 1px 3px; background: #AFA; font-family: inherit; color: black; font-size: 0.85em;">'''ALT'''</span>
+
  
== Known issues ==
+
{{button|[[File:Tick_32px.png|16px|link=]]|padTB=.4em|padLR=.4em}}
* There seems to be a problem adding parameters to the style attribute, in which case this would have been a futile exercise...
+
  
 +
<nowiki>{{button|Bold button|style=font-weight: bold}}</nowiki>
  
* In some cases workarounds will be required. One of them is for example text containing a {{key press|{{!}}}} which would require you to insert <code><nowiki>{{!}}</nowiki></code> instead of <code>{{!}}</code>, since using a "{{!}}" inside a template will break it.
+
{{button|Bold button|style=font-weight: bold}}
  
* This template currently wraps, so that for example {{button|ALT HOLD}} may end up having two half boxes with "Page" at the end of one line and "up" at the beginning of the following line.
+
== See also ==
 +
* {{tl|key press}} – ''Used to illustrate keystrokes.''
  
[[Category:Templates]]
 
 
}}
 
}}
 +
 +
[[Category:Templates]]
 +
 
</noinclude>
 
</noinclude>

Latest revision as of 07:40, 10 March 2015

Button

The following template description is not displayed when the template is inserted in an article.

Goal

This template provides a "button" formatting style for text.

Note This button is not clickable.

Usage

{{button|text|padTB=|padLR=|style=}}

All parameters are optional.

text
Text to display on the button. Defaults to Button.
padTB
Amount of padding above and below the text. Defaults to .1em.
padLR
Amount of padding either side of the text. Defaults to .4em.
style
Any additional styling you may want to add.

Examples

Press the {{button|Next}} button.

Press the Next button.

{{button|[[File:Tick_32px.png|16px|link=]]|padTB=.4em|padLR=.4em}}

Tick 32px.png

{{button|Bold button|style=font-weight: bold}}

Bold button

See also

  • {{key press}} – Used to illustrate keystrokes.