Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

Difference between revisions of "Template:Button"

From Roll20 Wiki

Jump to: navigation, search
m (add light-blue option)
m
(2 intermediate revisions by one user not shown)
Line 1: Line 1:
 
<code style="{{#switch: {{{2|}}}
 
<code style="{{#switch: {{{2|}}}
 
  | blue      = color:#ffffff;background-color: #0064cd;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);border-color:black !important;background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);background-repeat: repeat-x;padding-top: 3px;font-family:Nimbus Sans;
 
  | blue      = color:#ffffff;background-color: #0064cd;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);border-color:black !important;background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);background-repeat: repeat-x;padding-top: 3px;font-family:Nimbus Sans;
  | bluelight = color:#ffffff;background-color: ##35c8f5;border-color:transparent !important;padding: 5px 8px 5px 5px;font-family:Nimbus Sans;
+
  | bluelight = color:#ffffff;background-color: #35c8f5;border-color:transparent !important;padding: 5px 8px 5px 5px;font-family:Nimbus Sans;
 +
| pink = color:#ffffff;background-color: #ec008c;border-color:transparent !important;padding: 5px 8px 5px 5px;font-family:Nimbus Sans;
 
  | red      = color:#ffffff;background-color: #bd362f;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);border-color:black !important;background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);background-repeat: repeat-x;padding-top: 3px;font-family:Nimbus Sans;
 
  | red      = color:#ffffff;background-color: #bd362f;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);border-color:black !important;background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);background-repeat: repeat-x;padding-top: 3px;font-family:Nimbus Sans;
 
  | white    = color:#333333;background-color: #f5f5f5;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);border-color:black !important;background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);background-repeat: repeat-x;padding-top: 3px;font-family:Nimbus Sans;
 
  | white    = color:#333333;background-color: #f5f5f5;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);border-color:black !important;background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);background-repeat: repeat-x;padding-top: 3px;font-family:Nimbus Sans;
Line 9: Line 10:
 
Press {{button|F12}}. Do {{button|Shift}}+{{button|Alt}}+{{button|K}}
 
Press {{button|F12}}. Do {{button|Shift}}+{{button|Alt}}+{{button|K}}
 
<pre>Press {{button|F12}}. Do {{button|Shift}}+{{button|Alt}}+{{button|K}}</pre>
 
<pre>Press {{button|F12}}. Do {{button|Shift}}+{{button|Alt}}+{{button|K}}</pre>
You can use {{code|blue}}, {{code|red}}, {{code|white}} as parameters to change the button to resemble buttons from the Roll20 UI, to give inline examples of what button to press.
+
You can define the looks of the button to resemble buttons from the Roll20 UI, to give inline examples of what button to press. By default, a {{tlx|button}} resembles a keyboard key.
 +
 
 +
Options:
 +
* {{c|blue}}, {{c|red}}, {{c|white}} are more compact
 +
* {{c|bluelight}}, {{c|pink}}, slightly larger
 
{{ex}}
 
{{ex}}
 
* Press the {{button|{{gear}}|blue}} to open Turn tracker settings.
 
* Press the {{button|{{gear}}|blue}} to open Turn tracker settings.
 
* Press the {{button|Apply Changes|white}} to continue.
 
* Press the {{button|Apply Changes|white}} to continue.
* {{button|Delete|red}} is permanent, and can only be recovered with a rollback.
+
* {{button|Delete|red}} is permanent, and can only be recovered with a [[rollback]].
 
* Press {{button|{{upload}}Upload|white}} to upload more content to your {{Art Library}}, or {{button|{{folder}}Add|white}} to add new folder to the {{Journal}}  
 
* Press {{button|{{upload}}Upload|white}} to upload more content to your {{Art Library}}, or {{button|{{folder}}Add|white}} to add new folder to the {{Journal}}  
 
* Icons from spans are a bit harder, like {{button|1 = <span style="font-family:Pictos;">@</span>Map layer |2 = white}}
 
* Icons from spans are a bit harder, like {{button|1 = <span style="font-family:Pictos;">@</span>Map layer |2 = white}}
Line 19: Line 24:
 
* {{button|&#8942;|white}} to edit token settings
 
* {{button|&#8942;|white}} to edit token settings
 
* Arrow keys {{button|Alt}}+({{button|&larr;}}, {{button|&rarr;}}, {{button|&uarr;}} or {{button|&darr;}})
 
* Arrow keys {{button|Alt}}+({{button|&larr;}}, {{button|&rarr;}}, {{button|&uarr;}} or {{button|&darr;}})
 +
* {{button|Apply Settings|bluelight}}, {{button|Create New Wishlist|pink}}
 
<pre>Press the {{button|{{gear}}|blue}} to open Turn tracker settings.
 
<pre>Press the {{button|{{gear}}|blue}} to open Turn tracker settings.
Press the {{button|Apply Changes|white}} to continue.
+
* Press the {{button|Apply Changes|white}} to continue.
{{button|Delete|red}} is permanent, and can only be recovered with a rollback.
+
* {{button|Delete|red}} is permanent, and can only be recovered with a [[rollback]].
Press {{button|{{upload}}Upload|white}} to upload more content to your {{Art Library}}, or {{button|{{folder}}Add|white}} to add new folder to the {{Journal}}
+
* Press {{button|{{upload}}Upload|white}} to upload more content to your {{Art Library}}, or {{button|{{folder}}Add|white}} to add new folder to the {{Journal}}
Icons from spans are a bit harder, like {{button|1 = <span style="font-family:Pictos;">@</span>Map layer |2 = white}}
+
* Icons from spans are a bit harder, like {{button|1 = <span style="font-family:Pictos;">@</span>Map layer |2 = white}}
grab the {{button|{{3lines}}|white}} to move a character to a different spot
+
* grab the {{button|{{3lines}}|white}} to move a character to a different spot
{{button|&#8942;|white}} to edit token settings
+
* {{button|&#8942;|white}} to edit token settings
Arrow keys {{button|Alt}}+({{button|&larr;}}, {{button|&rarr;}}, {{button|&uarr;}} or {{button|&darr;}})</pre>
+
* Arrow keys {{button|Alt}}+({{button|&larr;}}, {{button|&rarr;}}, {{button|&uarr;}} or {{button|&darr;}})
 +
* {{button|Apply Settings|bluelight}}, {{button|Create New Wishlist|pink}}</pre>
 
[[Category:Templates]]
 
[[Category:Templates]]
 
[[Category:Template Documentation]]
 
[[Category:Template Documentation]]
 
</noinclude>
 
</noinclude>

Revision as of 09:13, 18 February 2022

{{{1}}}
Example:

Press F12. Do Shift+Alt+K

Press {{button|F12}}. Do {{button|Shift}}+{{button|Alt}}+{{button|K}}

You can define the looks of the button to resemble buttons from the Roll20 UI, to give inline examples of what button to press. By default, a {{button}} resembles a keyboard key.

Options:

  • blue, red, white are more compact
  • bluelight, pink, slightly larger


Example:

  • Press the y to open Turn tracker settings.
  • Press the Apply Changes to continue.
  • Delete is permanent, and can only be recovered with a rollback.
  • Press cUpload to upload more content to your P Art Library, or oAdd to add new folder to the N Journal
  • Icons from spans are a bit harder, like @Map layer
  • grab the to move a character to a different spot
  • to edit token settings
  • Arrow keys Alt+(, , or )
  • Apply Settings, Create New Wishlist
Press the {{button|{{gear}}|blue}} to open Turn tracker settings.
* Press the {{button|Apply Changes|white}} to continue.
* {{button|Delete|red}} is permanent, and can only be recovered with a [[rollback]].
* Press {{button|{{upload}}Upload|white}} to upload more content to your {{Art Library}}, or {{button|{{folder}}Add|white}} to add new folder to the {{Journal}}
* Icons from spans are a bit harder, like {{button|1 = <span style="font-family:Pictos;">@</span>Map layer |2 = white}}
* grab the {{button|{{3lines}}|white}} to move a character to a different spot
* {{button|⋮|white}} to edit token settings
* Arrow keys {{button|Alt}}+({{button|←}}, {{button|→}}, {{button|↑}} or {{button|↓}})
* {{button|Apply Settings|bluelight}}, {{button|Create New Wishlist|pink}}