Template:KeySmall: Difference between revisions

From OniGalore
(added ability to show two-symbol keys)
(tweaked vertical positioning of button; add a little to the docs)
Line 26: Line 26:
     position:relative;
     position:relative;
     vertical-align:middle;
     vertical-align:middle;
     top:-5px;">{{
     top:-3px;">{{
     #if:{{{2|}}}
     #if:{{{2|}}}
       |{{
       |{{
Line 60: Line 60:
     }}</span></includeonly><noinclude>
     }}</span></includeonly><noinclude>
Call this template and pass it a character or string that serves as the label of a keyboard button to see that text printed as a cute little key: {{KeySmall|esc}}
Call this template and pass it a character or string that serves as the label of a keyboard button to see that text printed as a cute little key: {{KeySmall|esc}}
Key combos should look decent: {{KeySmall|Ctrl}}+{{KeySmall|Shift}}+{{KeySmall|Y}}




You can also print two-symbol keys by passing in a second parameter with the second character: {{KeySmall|!|1}} {{KeySmall|@|2}} {{KeySmall|#|3}} {{KeySmall|$|4}} {{KeySmall|%|5}} {{KeySmall|^|6}} {{KeySmall|&|7}} {{KeySmall|*|8}} {{KeySmall|(|9}} {{KeySmall|)|0}}
You can also print two-symbol keys by passing in a second parameter with the second character: {{KeySmall|!|1}} {{KeySmall|@|2}} {{KeySmall|#|3}} {{KeySmall|$|4}} {{KeySmall|%|5}} {{KeySmall|^|6}} {{KeySmall|&|7}} {{KeySmall|*|8}} {{KeySmall|(|9}} {{KeySmall|)|0}}


The button is carefully designed to remain in line with the text and not interfere visually with surrounding lines too much:


The button is carefully designed to remain in line with text on the same line:
{{Quote|Push the {{KeySmall|~|`}} key to open the developer console.<br>Enter the command <tt>gs_show_ui{{=}}0</tt> to hide the HUD.|size=100%}}
 
{{Quote|Push the {{KeySmall|~|`}} key to open the developer console.|size=100%}}


It has not been tested with all possible keys on all possible keyboards so some characters may need special tweaking to look good or even be legible. The only special layout created so far is for the tilde key, so this can serve as a model for future special layouts being added to the template code.
It has not been tested with all possible keys on all possible keyboards so some characters may need special tweaking to look good or even be legible. The only special layout created so far is for the tilde key, so this can serve as a model for future special layouts being added to the template code.

Revision as of 21:33, 16 May 2025

Call this template and pass it a character or string that serves as the label of a keyboard button to see that text printed as a cute little key: esc


Key combos should look decent: Ctrl+Shift+Y


You can also print two-symbol keys by passing in a second parameter with the second character: !
1
@
2
#
3
$
4
%
5
^
6
&
7
*
8
(
9
)
0

The button is carefully designed to remain in line with the text and not interfere visually with surrounding lines too much:

Push the ~
`
key to open the developer console.
Enter the command gs_show_ui=0 to hide the HUD.


It has not been tested with all possible keys on all possible keyboards so some characters may need special tweaking to look good or even be legible. The only special layout created so far is for the tilde key, so this can serve as a model for future special layouts being added to the template code.


If you want to display a larger key onscreen, see Template:KeyLarge.