Difference between revisions of "Template:Button"

From EUSwiki
Jump to: navigation, search
Line 24: Line 24:
 
Default the link is presumed to be external (meaning a page not on the wiki). 5 is therefore not necessary for this.<br>
 
Default the link is presumed to be external (meaning a page not on the wiki). 5 is therefore not necessary for this.<br>
 
<code><nowiki>
 
<code><nowiki>
{{Button|1=http://mcgilleus.ca|2=External Link|3=fas fa-external-link|4=#395C6B}}</nowiki></code>
+
{{Button|...}}</nowiki></code>
 
{{Button|1=http://mcgilleus.ca|2=External Link|3=fas fa-external-link|4=#395C6B}}
 
{{Button|1=http://mcgilleus.ca|2=External Link|3=fas fa-external-link|4=#395C6B}}
 
{{col-break}}
 
{{col-break}}
 
If you want it to got to a page on the wiki, ''you must specify that <code>5=internal</code>''.<br>
 
If you want it to got to a page on the wiki, ''you must specify that <code>5=internal</code>''.<br>
 
<code><nowiki>
 
<code><nowiki>
{{Button|1=Launchpad|2=Internal Article|3=far fa-file|4=#395C6B|5=internal}}</nowiki></code>
+
{{Button|...|5=internal}}</nowiki></code>
 
{{Button|1=Launchpad|2=Internal Article|3=far fa-file|4=#395C6B|5=internal}}
 
{{Button|1=Launchpad|2=Internal Article|3=far fa-file|4=#395C6B|5=internal}}
 
{{col-end}}
 
{{col-end}}
Line 35: Line 35:
 
If you'd like to change the link color, using either words, hex, or rgba(), set ''<code>6=color of choice</code>''.<br>
 
If you'd like to change the link color, using either words, hex, or rgba(), set ''<code>6=color of choice</code>''.<br>
 
<code><nowiki>
 
<code><nowiki>
{{Button|1=http://mcgilleus.ca|2=Text color|3=fas fa-i-cursor|4=#E6E1C5|6=Crimson}}</nowiki></code>
+
{{Button|...|6=Crimson}}</nowiki></code>
 
{{Button|1=http://mcgilleus.ca|2=Text color|3=fas fa-i-cursor|4=#E6E1C5|6=Crimson}}
 
{{Button|1=http://mcgilleus.ca|2=Text color|3=fas fa-i-cursor|4=#E6E1C5|6=Crimson}}
 
Default the text is white, 6= is not necessary for this case.
 
Default the text is white, 6= is not necessary for this case.
Line 42: Line 42:
 
If you want the button to float to the right of the page, use <code>7=right</code>. <br>
 
If you want the button to float to the right of the page, use <code>7=right</code>. <br>
 
<code><nowiki>
 
<code><nowiki>
{{Button|1=http://mcgilleus.ca|2=Float right|3=fas fa-indent|4=#3B252C|7=right}}</nowiki></code>
+
{{Button|...|7=right}}</nowiki></code>
 
{{Button|1=http://mcgilleus.ca|2=Float right|3=fas fa-indent|4=#3B252C|7=right}}
 
{{Button|1=http://mcgilleus.ca|2=Float right|3=fas fa-indent|4=#3B252C|7=right}}
 
Additionally, if you want it to float=left (meaning that all other objects, headers included, will stay to the right of the block), you can specity <code>7=left</code>.  
 
Additionally, if you want it to float=left (meaning that all other objects, headers included, will stay to the right of the block), you can specity <code>7=left</code>.  
Line 48: Line 48:
 
You can make the button teeny, <code>8=small</code>.<br>
 
You can make the button teeny, <code>8=small</code>.<br>
 
<code><nowiki>
 
<code><nowiki>
{{Button|1=http://mcgilleus.ca|2=Smol|3=fas fa-compress-alt|4=#8F6593|8=small}}</nowiki></code>
+
{{Button|...|8=small}}</nowiki></code>
 
{{Button|1=http://mcgilleus.ca|2=Smol|3=fas fa-compress-alt|4=#8F6593|8=small}}
 
{{Button|1=http://mcgilleus.ca|2=Smol|3=fas fa-compress-alt|4=#8F6593|8=small}}
 
==9 Icon placement==
 
==9 Icon placement==
 
The icon can be on the right side as well.<br>
 
The icon can be on the right side as well.<br>
 
<code><nowiki>
 
<code><nowiki>
{{Button|1=http://mcgilleus.ca|2=Right Icon|3=fas fa-fast-forward|4=#3F7CAC|9=iright}}</nowiki></code>
+
{{Button|...|9=iright}}</nowiki></code>
 
{{Button|1=http://mcgilleus.ca|2=Right Icon|3=fas fa-fast-forward|4=#3F7CAC|9=iright}}
 
{{Button|1=http://mcgilleus.ca|2=Right Icon|3=fas fa-fast-forward|4=#3F7CAC|9=iright}}
 
</noinclude>
 
</noinclude>

Revision as of 23:08, 12 May 2018


This button is versatile! It can be used most any which ways you need it to, but the default is really straight forward. You start by calling the button like {{Button}}, then piping each attribute afterwards, |1=link, |2=text, and so on. You must call the first four arguments, the rest are for extra control.
Default button
{{Button|1=http://directory.mcgilleus.ca|2=Default button appearance|3=fas fa-folder|4=#C3423F}}

Default attributes are: Internal link, large button, float left, white text.
Additional attributes can be added at will, as many or few in any order you'd like.

Attributes

Options 1 - 4 are necessary, 5-9 offer options

1 = Page title or Link (Link requires #5)
2 = Button text
3 = FontAwesome Icon
4 = Button Color
---
5 = internal/external (optional, external default)
6 = text color (optional, white default)
7 = Float Button position, left or right (optional, no float by default)
8 = Button size, small or large (optional, large default)
9 = Icon placement, ileft or iright (optional, default ileft)

5 Type of link

6 Text Color

If you'd like to change the link color, using either words, hex, or rgba(), set 6=color of choice.
{{Button|...|6=Crimson}}

Default the text is white, 6= is not necessary for this case.

7 Button position

If you want the button to float to the right of the page, use 7=right.
{{Button|...|7=right}}

Additionally, if you want it to float=left (meaning that all other objects, headers included, will stay to the right of the block), you can specity 7=left.

8 Button size

You can make the button teeny, 8=small.
{{Button|...|8=small}}

9 Icon placement

The icon can be on the right side as well.
{{Button|...|9=iright}}