Template:Button: Difference between revisions
Malcolmmcc (talk | contribs) Created page with "<div style="display: inline-block;text-decoration:none; margin-right: 20px;background-color: {{{4}}}; border: none;color: white;padding: 15px 32px; text-align: center;text-de..." |
Malcolmmcc (talk | contribs) No edit summary |
||
| (27 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div style="display: inline-block;text-decoration:none; | <noinclude> | ||
__NOTOC__ | |||
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> | |||
<big>Default button</big><br> | |||
<code><nowiki>{{Button|1=http://directory.mcgilleus.ca|2=Default button appearance|3=fas fa-folder|4=#C3423F}}</nowiki></code> | |||
{{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.<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|...}}</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|...|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|...|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|...|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|...|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|...|9=iright}}</nowiki></code> | |||
{{Button|1=http://mcgilleus.ca|2=Right Icon|3=fas fa-fast-forward|4=#3F7CAC|9=iright}} | |||
</noinclude> | |||
<includeonly><div class="no-link" id="butt" style=" | |||
display: inline-block; | |||
text-decoration:none; | |||
margin: 0px 8px 5px 8px; | |||
border-radius:inherit; | |||
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;}}|}};{{{extra|}}}"> | |||
{{#ifeq:{{{5|}}}|internal | |||
|[[{{{1}}}|{{#ifeq:{{{9|}}}|iright|<span style="color:{{#if:{{{6|}}}|{{{6}}}|#fff}}">{{#if:{{{2|}}}|{{{2}}} }}<i class="{{{3}}}"></i></span>|<span style="color:{{#if:{{{6|}}}|{{{6}}}|#fff}}"><i class="{{{3}}}"></i>{{#if:{{{2|}}}| {{{2}}}|}}</span>}}]] | |||
|{{#ifeq:{{{9|}}}|iright|[{{{1}}} <span style="color:{{#if:{{{6|}}}|{{{6}}}|#fff}}">{{#if:{{{2|}}}|{{{2}}} |}}<i class="{{{3}}}"></i></span>]|[{{{1}}} <span style="color:{{#if:{{{6|}}}|{{{6}}}|#fff}}"><i title="{{{10|}}}" class="{{{3}}}"></i>{{#if:{{{2|}}}| {{{2}}}}}</span>]}}}} </div></includeonly> | |||