Difference between revisions of "Template:Button"
Malcolmmcc (talk | contribs) |
Malcolmmcc (talk | contribs) |
||
| Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
| − | 1=Link<br> | + | __NOTOC__ |
| − | 2= | + | 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 <code><nowiki>{{Button}}</nowiki></code>, 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.<br> |
| − | 3=FontAwesome<br> | + | <big>Default button</big><br> |
| − | 4=Color<br> | + | <code><nowiki>{{Button|1=http://directory.mcgilleus.ca|2=Default button appearance|3=fas fa-folder|4=#C3423F}}</nowiki></code> |
| − | <code><nowiki>{{Button|1=http://wiki.mcgilleus.ca|2= | + | {{Button|1=http://directory.mcgilleus.ca|2=Default button appearance|3=fas fa-folder|4=#C3423F}} |
| − | {{Button|1=http:// | + | Default attributes are: Internal link, large button, float left, white text.<br> |
| + | 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<br> | ||
| + | ::1 = Page title or Link (Link requires #5)<br> | ||
| + | ::2 = Button text<br> | ||
| + | ::3 = FontAwesome Icon<br> | ||
| + | ::4 = Button Color<br> | ||
| + | ::---<br> | ||
| + | ::5 = internal/external (optional, external default)<br> | ||
| + | ::6 = text color (optional, white default)<br> | ||
| + | ::7 = Float Button position, left or right (optional, no float by default)<br> | ||
| + | ::8 = Button size, small or large (optional, large default)<br> | ||
| + | ::9 = Icon placement, ileft or iright (optional, default ileft) | ||
| + | |||
| + | ==5 Type of link== | ||
| + | {{col-begin}}{{col-break}} | ||
| + | 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> | ||
| + | {{Button|1=http://mcgilleus.ca|2=External Link|3=fas fa-external-link|4=#395C6B}}</nowiki></code> | ||
| + | {{Button|1=http://mcgilleus.ca|2=External Link|3=fas fa-external-link|4=#395C6B}} | ||
| + | {{col-break}} | ||
| + | If you want it to got to a page on the wiki, ''you must specify that <code>5=internal</code>''.<br> | ||
| + | <code><nowiki> | ||
| + | {{Button|1=Launchpad|2=Internal Article|3=far fa-file|4=#395C6B|5=internal}}</nowiki></code> | ||
| + | {{Button|1=Launchpad|2=Internal Article|3=far fa-file|4=#395C6B|5=internal}} | ||
| + | {{col-end}} | ||
| + | ==6 Text Color== | ||
| + | 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> | ||
| + | {{Button|1=http://mcgilleus.ca|2=Text color|3=fas fa-i-cursor|4=#E6E1C5|6=Crimson}}</nowiki></code> | ||
| + | {{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. | ||
| + | |||
| + | ==7 Button position== | ||
| + | If you want the button to float to the right of the page, use <code>7=right</code>. <br> | ||
| + | <code><nowiki> | ||
| + | {{Button|1=http://mcgilleus.ca|2=Float right|3=fas fa-indent|4=#3B252C|7=right}}</nowiki></code> | ||
| + | {{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>. | ||
| + | ==8 Button size== | ||
| + | You can make the button teeny, <code>8=small</code>.<br> | ||
| + | <code><nowiki> | ||
| + | {{Button|1=http://mcgilleus.ca|2=Smol|3=fas fa-compress-alt|4=#8F6593|8=small}}</nowiki></code> | ||
| + | {{Button|1=http://mcgilleus.ca|2=Smol|3=fas fa-compress-alt|4=#8F6593|8=small}} | ||
| + | ==9 Icon placement== | ||
| + | The icon can be on the right side as well.<br> | ||
| + | <code><nowiki> | ||
| + | {{Button|1=http://mcgilleus.ca|2=Right Icon|3=fas fa-fast-forward|4=#3F7CAC|9=iright}}</nowiki></code> | ||
| + | {{Button|1=http://mcgilleus.ca|2=Right Icon|3=fas fa-fast-forward|4=#3F7CAC|9=iright}} | ||
</noinclude> | </noinclude> | ||
| − | <div class="no-link" style="display: inline-block;text-decoration:none; | + | <includeonly><div class="no-link" style=" |
| + | display: inline-block; | ||
| + | text-decoration:none; | ||
| + | margin: 0px 8px; | ||
| + | background-color: {{{4}}}; | ||
| + | border: none; | ||
| + | padding: {{#ifeq:{{{8|}}}|small|8px 12px|15px 32px}}; | ||
| + | text-align: center; | ||
| + | text-decoration: none; | ||
| + | font-size: {{#ifeq: {{{8|}}}|small|14px|16px}}; | ||
| + | {{#if:{{{7|}}}|{{#ifeq:{{{7|}}}|right|float:right;|float:left;}}|}}"> | ||
| + | {{#ifeq:{{{5|}}}|internal | ||
| + | |[[{{{1}}}|{{#ifeq:{{{9|}}}|iright|<span style="color:{{#if:{{{6|}}}|{{{6}}}|#fff}}">{{{2}}} <i class="{{{3}}}"></i></span>|<span style="color:{{#if:{{{6|}}}|{{{6}}}|#fff}}"><i class="{{{3}}}"></i> {{{2}}}</span>}}]] | ||
| + | |{{#ifeq:{{{9|}}}|iright|[{{{1}}} <span style="color:{{#if:{{{6|}}}|{{{6}}}|#fff}}">{{{2}}} <i class="{{{3}}}"></i></span>]|[{{{1}}} <span style="color:{{#if:{{{6|}}}|{{{6}}}|#fff}}"><i class="{{{3}}}"></i> {{{2}}}</span>]}}}} </div></includeonly> | ||
Revision as of 22:59, 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)
- 1 = Page title or Link (Link requires #5)
5 Type of link
|
Default the link is presumed to be external (meaning a page not on the wiki). 5 is therefore not necessary for this. |
If you want it to got to a page on the wiki, you must specify that |
6 Text Color
If you'd like to change the link color, using either words, hex, or rgba(), set 6=color of choice.
{{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.
7 Button position
If you want the button to float to the right of the page, use 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 7=left.
8 Button size
You can make the button teeny, 8=small.
{{Button|1=http://mcgilleus.ca|2=Smol|3=fas fa-compress-alt|4=#8F6593|8=small}}
9 Icon placement
The icon can be on the right side as well.
{{Button|1=http://mcgilleus.ca|2=Right Icon|3=fas fa-fast-forward|4=#3F7CAC|9=iright}}