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
(calc(-1px *)
(scale)
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}}});">[[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:scale({{{scale|1}}});">[[File:{{{imageFileName}}}|link=|{{{tooltip|}}}]]</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:
Use this <code><nowiki>{{gameIcon}}</nowiki></code> template to display a game-specific image:
Line 6: Line 6:
|tooltip=
|tooltip=
|imageFileName=
|imageFileName=
|scale=1
|width=
|width=
|height=
|height=
Line 32: Line 33:
   <div><code><nowiki>|imageFileName=JumpDriveIcons.png</nowiki></code></div>
   <div><code><nowiki>|imageFileName=JumpDriveIcons.png</nowiki></code></div>
   <div>'''''Required:''''' specify an '''[[Special:Upload|uploaded]]''' image file name including file format (i.e. <code>.png</code>, <code>.jpg</code> etc.).</div>
   <div>'''''Required:''''' specify an '''[[Special:Upload|uploaded]]''' image file name including file format (i.e. <code>.png</code>, <code>.jpg</code> etc.).</div>
  <div><code>scale</code></div>
  <div><code>1</code></div>
  <div><code><nowiki>|scale=0.5</nowiki></code></div>
  <div>'''''Optional:''''' scale the imageFile.</div>
   <div><code>width</code></div>
   <div><code>width</code></div>
   <div><code>null</code></div>
   <div><code>null</code></div>

Revision as of 13:50, 13 December 2023

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

Use this {{gameIcon}} template to display a game-specific image:

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

Available parameters

Parameter
Default value
Example
Description
tooltip
Game icon
|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.
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.
null
{{{|&#8203;}}}
(zero width space)
|={{{|&#8203;}}}
Optional: specify text e.g. via another variable using triple curly braces.
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.

Examples

Jump Drive

JumpDriveIcons.png

450×30 pixels

JumpDriveIcons.png

Genes

30×30 pixels

Genes

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

Space Station Phoenix

SpaceStationPhoenixIcons.png

700×100 pixels

SpaceStationPhoenixIcons.png

Farm ship

85×50 pixels

Farm ship

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