This is a documentation for Board Game Arena: play board games online !

Template:GameIcon: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(transform-origin:top left;)
(tooltip|​ null parameter, steps)
Line 1: Line 1:
<span style="display:inline-flex;align-items:center;justify-content:space-around;position:relative;height:{{{height}}}px;width:{{{width}}}px;overflow:hidden;color:{{{textColor|#000}}};font-family:Roboto,Arial,sans-serif;font-weight:700;font-size:16px;text-shadow:0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}};"><span style="position:absolute;left:calc(-1px * {{{x|0}}});top:calc(-1px * {{{y|0}}});transform-origin:top left;transform:scale({{{scale|1}}});">[[File:{{{imageFileName}}}|link=|{{{tooltip|}}}]]</span><span style="position:relative;white-space:nowrap;">{{{|&#8203;}}}</span></span><noinclude>
<span style="display:inline-flex;align-items:center;justify-content:space-around;position:relative;height:{{{height}}}px;width:{{{width}}}px;overflow:hidden;color:{{{textColor|#000}}};font-family:Roboto,Arial,sans-serif;font-weight:700;font-size:16px;text-shadow:0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}},0 0 2px {{{outlineColor|#fff0}}};"><span style="position:absolute;left:calc(-1px * {{{x|0}}});top:calc(-1px * {{{y|0}}});transform-origin:top left;transform:scale({{{scale|1}}});">[[File:{{{imageFileName}}}|link=|{{{tooltip|&#8203;}}}]]</span><span style="position:relative;white-space:nowrap;">{{{|&#8203;}}}</span></span><noinclude>


Use this <code><nowiki>{{gameIcon}}</nowiki></code> template to display a game-specific image:
'''Step 1''': Create <code>[https://en.doc.boardgamearena.com/Template:YourNewIconTemplate https://en.doc.boardgamearena.com/Template:'''''YourNewIconTemplate''''']</code>
(replace '''''YourNewIconTemplate''''')
<pre>
<pre>
{{gameIcon
{{gameIcon
Line 11: Line 12:
|x=0
|x=0
|y=0
|y=0
|={{{|&amp;#8203;}}}
|textColor=black
|textColor=black
|outlineColor=white
|outlineColor=white
Line 18: Line 18:
<</nowiki>noinclude<nowiki>></nowiki>
<</nowiki>noinclude<nowiki>></nowiki>
</pre>
</pre>
'''Step 2''': Insert <code><nowiki>{{</nowiki>'''''YourNewIconTemplate'''''<nowiki>}}</nowiki></code> in a page
== Examples ==
=== Jump Drive ===
{{infoBox
|title=JumpDriveIcons.png (450×30 pixels)
|body=[[File:JumpDriveIcons.png]]
}}
'''Step 1''': Create <code>[https://en.doc.boardgamearena.com/Template:JumpDriveGenes https://en.doc.boardgamearena.com/Template:'''''JumpDriveGenes''''']</code>
<pre>
{{gameIcon
|tooltip=Genes
|imageFileName=JumpDriveIcons.png
|width=30
|height=30
|x=60
|y=0
|textColor=black
|outlineColor=white
}}<nowiki><</nowiki>noinclude<nowiki>>
[[Category:JumpDriveIcons]]
<</nowiki>noinclude<nowiki>></nowiki>
</pre>
'''Step 2''': Insert <code><nowiki>{{JumpDriveGenes|=1}}</nowiki></code> {{JumpDriveGenes|=1}} in '''[[Gamehelpjumpdrive]]'''
=== Space Station Phoenix ===
{{infoBox |maxWidth=
|title=SpaceStationPhoenixIcons.png (700×100 pixels)
|body=[[File:SpaceStationPhoenixIcons.png]]
}}
'''Step 1''': Create <code>[https://en.doc.boardgamearena.com/Template:SSPShipFarm https://en.doc.boardgamearena.com/Template:'''''SSPShipFarm''''']</code>
<pre>
{{gameIcon
|tooltip=Farm ship
|imageFileName=SpaceStationPhoenixIcons.png
|width=85
|height=50
|x=500
|y=50
}}<nowiki><</nowiki>noinclude<nowiki>>
[[Category:SpaceStationPhoenixIcons]]
<</nowiki>noinclude<nowiki>></nowiki>
</pre>
'''Step 2''': Insert <code><nowiki>{{SSPShipFarm}}</nowiki></code> {{SSPShipFarm}} in '''[[Gamehelpspacestationphoenix]]'''


== Available parameters ==
== Available parameters ==
Line 26: Line 79:
   <div style="font-weight:bold;width:8rem;">Description</div>
   <div style="font-weight:bold;width:8rem;">Description</div>
   <div><code>tooltip</code></div>
   <div><code>tooltip</code></div>
   <div><code>Game icon</code></div>
   <div><code>&amp;#8203;</code></br>(zero width space)</div>
   <div><code><nowiki>|tooltip=Resource</nowiki></code></div>
   <div><code><nowiki>|tooltip=Resource</nowiki></code></div>
   <div>'''''Optional:''''' specify a tooltip to display on hover.</div>
   <div>'''''Optional:''''' specify a tooltip to display on hover.</div>
Line 53: Line 106:
   <div><code><nowiki>|y=30</nowiki></code></div>
   <div><code><nowiki>|y=30</nowiki></code></div>
   <div>'''''Optional:''''' specify the y position in px units.</div>
   <div>'''''Optional:''''' specify the y position in px units.</div>
  <div><code>null</code></div>
  <div><code><nowiki>{{{|&amp;#8203;}}}</nowiki></code></br>(zero width space)</div>
  <div><code><nowiki>|={{{|&amp;#8203;}}}</nowiki></code></div>
  <div>'''''Optional:''''' specify text e.g. via another variable using triple curly braces.</div>
   <div><code>textColor</code></div>
   <div><code>textColor</code></div>
   <div><code>#000</code></br>(black)</div>
   <div><code>#000</code></br>(black)</div>
Line 66: Line 115:
   <div>'''''Optional:''''' specify the text variable outline color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
   <div>'''''Optional:''''' specify the text variable outline color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
</div>
</div>
== Examples ==
=== Jump Drive ===
==== JumpDriveIcons.png ====
450×30 pixels
[[File:JumpDriveIcons.png|JumpDriveIcons.png]]
==== Genes ====
30×30 pixels
{{gameIcon
|tooltip=Genes
|imageFileName=JumpDriveIcons.png
|width=30
|height=30
|x=60
|y=0
|={{{|&#8203;}}}
|textColor=black
|outlineColor=white
}}
<pre>
{{gameIcon
|tooltip=Genes
|imageFileName=JumpDriveIcons.png
|width=30
|height=30
|x=60
|y=0
|={{{|&amp;#8203;}}}
|textColor=black
|outlineColor=white
}}<nowiki><</nowiki>noinclude<nowiki>>
[[Category:JumpDriveIcons]]
<</nowiki>noinclude<nowiki>></nowiki>
</pre>
=== Space Station Phoenix ===
==== SpaceStationPhoenixIcons.png ====
700×100 pixels
[[File:SpaceStationPhoenixIcons.png|SpaceStationPhoenixIcons.png]]
==== Farm ship ====
85×50 pixels
{{gameIcon
|tooltip=Farm ship
|imageFileName=SpaceStationPhoenixIcons.png
|width=85
|height=50
|x=500
|y=50
}}
<pre>
{{gameIcon
|tooltip=Farm ship
|imageFileName=SpaceStationPhoenixIcons.png
|width=85
|height=50
|x=500
|y=50
}}<nowiki><</nowiki>noinclude<nowiki>>
[[Category:SpaceStationPhoenixIcons]]
<</nowiki>noinclude<nowiki>></nowiki>
</pre>


[[Category:GameIconTemplates]]
[[Category:GameIconTemplates]]
</noinclude>
</noinclude>

Revision as of 18:59, 14 December 2023

[[File:{{{imageFileName}}}|link=|​]]​

Step 1: Create https://en.doc.boardgamearena.com/Template:YourNewIconTemplate (replace YourNewIconTemplate) 

{{gameIcon
|tooltip=
|imageFileName=
|scale=1
|width=
|height=
|x=0
|y=0
|textColor=black
|outlineColor=white
}}<noinclude>
[[Category:GameNameIcons]]
<noinclude>

Step 2: Insert {{YourNewIconTemplate}} in a page

Examples

Jump Drive

JumpDriveIcons.png (450×30 pixels)
JumpDriveIcons.png

Step 1: Create https://en.doc.boardgamearena.com/Template:JumpDriveGenes 

{{gameIcon
|tooltip=Genes
|imageFileName=JumpDriveIcons.png
|width=30
|height=30
|x=60
|y=0
|textColor=black
|outlineColor=white
}}<noinclude>
[[Category:JumpDriveIcons]]
<noinclude>

Step 2: Insert {{JumpDriveGenes|=1}} genes​ in Gamehelpjumpdrive

Space Station Phoenix

SpaceStationPhoenixIcons.png (700×100 pixels)
SpaceStationPhoenixIcons.png

Step 1: Create https://en.doc.boardgamearena.com/Template:SSPShipFarm 

{{gameIcon
|tooltip=Farm ship
|imageFileName=SpaceStationPhoenixIcons.png
|width=85
|height=50
|x=500
|y=50
}}<noinclude>
[[Category:SpaceStationPhoenixIcons]]
<noinclude>

Step 2: Insert {{SSPShipFarm}} Farm ship​ in Gamehelpspacestationphoenix

Available parameters

Parameter
Default value
Example
Description
tooltip
&#8203;
(zero width space)
|tooltip=Resource
Optional: specify a tooltip to display on hover.
imageFileName
null
|imageFileName=JumpDriveIcons.png
Required: specify an uploaded image file name including file format (i.e. .png, .jpg etc.).
scale
1
|scale=0.5
Optional: scale the imageFile with origin in the top left corner.
width
null
|width=30
Required: specify the icon width in px units.
height
null
|height=30
Required: specify the icon height in px units.
x
0
|x=60
Optional: specify the x position in px units.
y
0
|y=30
Optional: specify the y position in px units.
textColor
#000
(black)
|textColor=green
Optional: specify the text variable color as a CSS color e.g. green.
outlineColor
#fff0
(transparent white)
|outlineColor=green
Optional: specify the text variable outline color as a CSS color e.g. green.
Retrieved from "http:///index.php?title=Template:GameIcon&oldid=19203"