Template:Button: Difference between revisions
Malcolmmcc (talk | contribs) No edit summary |
Malcolmmcc (talk | contribs) No edit summary |
||
| (19 intermediate revisions by the same user not shown) | |||
| 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|...}}</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> | </noinclude> | ||
<div class="no-link" style="display: inline-block;text-decoration:none; | <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> | |||