Difference between revisions of "Template:Button"

From FlightGear wiki
Jump to: navigation, search
(Style)
m (Typo)
 
(4 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>
  
The only mandatory parameter is '''text'''.
+
All parameters are optional.
  
; text:  Button text
+
; text: Text to display on the button. Defaults to <code>Button</code>.
  
; tc<u>T</u>ext <u>c</u>olour, defaults to <tt>black</tt>
+
; padTB: Amount of padding above and below the text. Defaults to <code>.1em</code>.
  
; ccButton <u>c</u>ap <u>c</u>olour, defaults to <tt>white</tt>
+
; padLR: Amount of padding either side of the text. Defaults to <code>.4em</code>.
  
; bc: <u>B</u>order <u>c</u>olour, defaults to <tt>black</tt>
+
; style: Any additional styling you may want to add.
 
+
; bw:  <u>B</u>order <u>w</u>idth in pixels, defaults to <tt>1</tt>
+
 
+
=== Colours ===
+
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>.
+
  
 
== 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.