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
(Created page with "<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 {{{out...")
 
(improved examples)
 
(13 intermediate revisions by the same user not shown)
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:-{{{x|0}}}px;top:-{{{y|0}}}px;">[[File:{{{imageFileName}}}|link=|{{{tooltip|}}}]]</span><span style="position:relative;">{{{|&#8203;}}}</span></span><noinclude>
<span style="display:inline-flex;align-items:center;justify-content:space-around;position:relative;z-index:{{{z}}};height:calc(1px*{{{height}}});width:calc(1px*{{{width}}});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;">{{{|&ZeroWidthSpace;}}}</span></span><noinclude>


Use this <code><nowiki>{{gameIcon}}</nowiki></code> template to display a game-specific image:
{{infoBox |maxWidth= |color=#37c |titleAlign=left
<pre>
|title=Step 1
{{gameIcon
|body='''[[Special:Upload|Upload]]''' '''''YourImage'''''.png
|tooltip=
}}
|imageFileName=
 
|width=
{{infoBox |maxWidth= |color=#3aa |titleAlign=left
|height=
|title=Step 2
|x=0
|body=Go to <code>[https://en.doc.boardgamearena.com/Template: https://en.doc.boardgamearena.com<wbr>/Template:'''''YourIcon''''']</code>
|y=0
<div style="width:100%;text-align:right">(replace '''''<code>YourIcon</code>'''''🡅)</div>
|=
 
|textColor=black
Copy & paste this into it:
|outlineColor=white
:{{code|c=black|<nowiki>{{gameIcon</nowiki>}}
}}<nowiki><</nowiki>noinclude<nowiki>>
:{{code|c=black|<nowiki>|tooltip=</nowiki>}}
[[Category:GameNameIcons|GameName icons]]
:{{code|c=black|<nowiki>|imageFileName=</nowiki>}}
<</nowiki>noinclude<nowiki>></nowiki>
:{{code|c=black|<nowiki>|scale=</nowiki>}}{{code|c=black|1}}
</pre>
:{{code|c=black|<nowiki>|width=</nowiki>}}
:{{code|c=black|<nowiki>|height=</nowiki>}}
:{{code|c=black|<nowiki>|x=</nowiki>}}{{code|c=black|0}}
:{{code|c=black|<nowiki>|y=</nowiki>}}{{code|c=black|0}}
:{{code|c=black|<nowiki>|=</nowiki>}}{{code|c=black|<nowiki>{{{1|&amp;ZeroWidthSpace;}}}</nowiki>}}
:{{code|c=black|<nowiki>|textColor=</nowiki>}}{{code|c=black|black}}
:{{code|c=black|<nowiki>|outlineColor=</nowiki>}}{{code|c=black|white}}
:{{code|c=black|<nowiki>}}<</nowiki>noinclude<nowiki>></nowiki>}}
:{{code|c=black|<nowiki>[[Category:</nowiki>WikiTemplates<nowiki>]]</nowiki>}}
:{{code|c=black|<nowiki><</nowiki>noinclude<nowiki>></nowiki>}}
 
{{pill|Minimum:|#800|#620}}
:{{code|<nowiki>|imageFileName=</nowiki>}} paste the file name here
:{{code|<nowiki>|width=</nowiki>}} pixels width of your icon
:{{code|<nowiki>|height=</nowiki>}} pixels height of your icon


== Available parameters ==
You can check the file name via the '''[[Special:ListFiles|list of uploaded files]]'''.
<div style="display:grid;grid-template-columns:repeat(3,max-content) 2fr;gap:0.5rem;overflow:auto;text-overflow:ellipsis;">
  <div style="font-weight:bold;width:8rem;">Parameter</div>
  <div style="font-weight:bold;width:8rem;">Default value</div>
  <div style="font-weight:bold;width:8rem;">Example</div>
  <div style="font-weight:bold;width:8rem;">Description</div>
  <div><code>tooltip</code></div>
  <div><code>Game icon</code></div>
  <div><code><nowiki>|tooltip=Resource</nowiki></code></div>
  <div>'''''Optional:''''' specify a tooltip to display on hover.</div>
  <div><code>imageFileName</code></div>
  <div><code>null</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><code>width</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>|width=30</nowiki></code></div>
  <div>'''''Required:''''' specify the icon width in px units.</div>
  <div><code>height</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>|height=30</nowiki></code></div>
  <div>'''''Required:''''' specify the icon height in px units.</div>
  <div><code>x</code></div>
  <div><code>0</code></div>
  <div><code><nowiki>|x=60</nowiki></code></div>
  <div>'''''Optional:''''' specify the x position in px units.</div>
  <div><code>y</code></div>
  <div><code>0</code></div>
  <div><code><nowiki>|y=30</nowiki></code></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>|=2</nowiki></code></div>
  <div>'''''Optional:''''' specify a text value e.g. <code>3</code>.</div>
  <div><code>textColor</code></div>
  <div><code>#000</code></br>(black)</div>
  <div><code><nowiki>|textColor=green</nowiki></code></div>
  <div>'''''Optional:''''' specify the text color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
  <div><code>outlineColor</code></div>
  <div><code>#fff0</code></br>(transparent white)</div>
  <div><code><nowiki>|outlineColor=green</nowiki></code></div>
  <div>'''''Optional:''''' specify the text outline color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
</div>


== Examples ==
{{pill|Optional:|#026|#008}}
:{{code|c=#005|<nowiki>|scale=</nowiki>}} for smaller icons, set it somewhere between 0.1 and 1
:{{code|c=#005|<nowiki>|tooltip=</nowiki>}} one or more words that appear on hover


=== Jump Drive ===
If you create multiple icons:
:{{code|c=#005|<nowiki>|x=</nowiki>}} set the x(/y) position inside your image
:{{code|c=#005|<nowiki>[[Category:</nowiki>}}you can link them together in your own category<code><nowiki>]]</nowiki></code>
:e.g. {{code|c=#005|<nowiki>[[Category:</nowiki>'''GameNameIcons'''<nowiki>]]</nowiki>}}
}}


==== JumpDriveIcons.png ====
{{infoBox |maxWidth= |color=#3c7 |titleAlign=left
450×30 pixels
|title=Step 3
|body=Insert <code><nowiki>{{</nowiki>'''''YourIcon'''''<nowiki>}}</nowiki></code> into a wiki page!
}}


[[File:JumpDriveIcons.png|JumpDriveIcons.png]]
== Examples ==


==== Genes ====
=== Jump Drive ===
30×30 pixels


{{gameIcon
{{infoBox |maxWidth= |color=#37c |titleAlign=left
|tooltip=Genes
|title=Step 1
|imageFileName=JumpDriveIcons.png
|body=<span style="display:inline-flex;flex-direction:column;gap:0.5rem;"><span>'''[[Special:Upload|Upload]]''' <code>JumpDriveIcons.png</code> (450×30 pixels)</span>[[File:JumpDriveIcons.png]]</span>.
|width=30
|height=30
|x=60
|y=0
|=3
|textColor=black
|outlineColor=white
}}
}}


<pre>
{{infoBox |maxWidth= |color=#3aa |titleAlign=left
|title=Step 2
|body=Create <code>[https://en.doc.boardgamearena.com/Template:JumpDriveGenes https://en.doc.boardgamearena.com<wbr>/Template:'''''JumpDriveGenes''''']</code>:
<pre style="background:none;border:none;">
{{gameIcon
{{gameIcon
|tooltip=Genes
|tooltip=Genes
Line 94: Line 69:
|x=60
|x=60
|y=0
|y=0
|=3
|={{{1|&amp;ZeroWidthSpace;}}}
|textColor=black
|textColor=black
|outlineColor=white
|outlineColor=white
Line 101: Line 76:
<</nowiki>noinclude<nowiki>></nowiki>
<</nowiki>noinclude<nowiki>></nowiki>
</pre>
</pre>
}}
{{infoBox |maxWidth= |color=#3c7 |titleAlign=left
|title=Step 3
|body=Insert <code><nowiki>{{JumpDriveGenes|1}}</nowiki></code> {{JumpDriveGenes|1}} in '''[[Gamehelpjumpdrive]]'''.
}}


=== Space Station Phoenix ===
=== Space Station Phoenix ===


==== SpaceStationPhoenixIcons.png ====
{{infoBox |maxWidth= |color=#37c |titleAlign=left
700×100 pixels
|title=Step 1
 
|body=<span style="display:inline-flex;flex-direction:column;gap:0.5rem;"><span>'''[[Special:Upload|Upload]]''' <code>SpaceStationPhoenixIcons.png</code> (700×100 pixels).</span>[[File:SpaceStationPhoenixIcons.png]]</span>
[[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>
{{infoBox |maxWidth= |color=#3aa |titleAlign=left
|title=Step 2
|body=Create <code>[https://en.doc.boardgamearena.com/Template:SSPShipFarm https://en.doc.boardgamearena.com<wbr>/Template:'''''SSPShipFarm''''']</code>:
<pre style="background:none;border:none;">
{{gameIcon
{{gameIcon
|tooltip=Farm ship
|tooltip=Farm ship
Line 133: Line 105:
<</nowiki>noinclude<nowiki>></nowiki>
<</nowiki>noinclude<nowiki>></nowiki>
</pre>
</pre>
}}
{{infoBox |maxWidth= |color=#3c7 |titleAlign=left
|title=Step 3
|body=Insert <code><nowiki>{{SSPShipFarm}}</nowiki></code> {{SSPShipFarm}} in '''[[Gamehelpspacestationphoenix]]'''.
}}
== Parameters ==
<div style="display:grid;grid-template-columns:repeat(3,max-content) 2fr;gap:0.5rem;overflow:auto;text-overflow:ellipsis;">
  <div style="font-weight:bold;width:8rem;">Parameter</div>
  <div style="font-weight:bold;width:8rem;">Default value</div>
  <div style="font-weight:bold;width:8rem;">Example</div>
  <div style="font-weight:bold;width:8rem;">Description</div>
  <div><code>tooltip</code></div>
  <div><code>&amp;ZeroWidthSpace;</code></div>
  <div><code><nowiki>|tooltip=Resource</nowiki></code></div>
  <div>'''''Optional:''''' tooltip to display on hover.</div>
  <div><code>imageFileName</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>|imageFileName=YourImage.png</nowiki></code></div>
  <div>'''''Required:''''' '''[[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 image with its origin in the top left corner.</div>
  <div><code>width</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>|width=30</nowiki></code></div>
  <div>'''''Required:''''' icon width in px units.</div>
  <div><code>height</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>|height=30</nowiki></code></div>
  <div>'''''Required:''''' icon height in px units.</div>
  <div><code>x</code></div>
  <div><code>0</code></div>
  <div><code><nowiki>|x=60</nowiki></code></div>
  <div>'''''Optional:''''' x-axis (horizontal) position in px units.</div>
  <div><code>y</code></div>
  <div><code>0</code></div>
  <div><code><nowiki>|y=30</nowiki></code></div>
  <div>'''''Optional:''''' y-axis (vertical) position in px units.</div>
  <div><code>z</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>|z=2</nowiki></code></div>
  <div>'''''Optional:''''' z-axis (stacking order) position.</div>
  <div><code>null</code></div>
  <div><code><nowiki>&amp;ZeroWidthSpace;</nowiki></code></div>
  <div><code><nowiki>|={{{1|&amp;ZeroWidthSpace;}}}</nowiki></code></div>
  <div>'''''Optional:''''' text value e.g. via another variable using triple curly braces.</div>
  <div><code>textColor</code></div>
  <div><code>#000</code></br>(black)</div>
  <div><code><nowiki>|textColor=green</nowiki></code></div>
  <div>'''''Optional:''''' text color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
  <div><code>outlineColor</code></div>
  <div><code>#fff0</code></br>(transparent white)</div>
  <div><code><nowiki>|outlineColor=green</nowiki></code></div>
  <div>'''''Optional:''''' text outline color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
</div>


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

Latest revision as of 20:47, 1 July 2025

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

Step 1
Upload YourImage.png
Step 2
Go to https://en.doc.boardgamearena.com/Template:YourIcon
(replace YourIcon🡅)

Copy & paste this into it:

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

Minimum:

|imageFileName= paste the file name here
|width= pixels width of your icon
|height= pixels height of your icon

You can check the file name via the list of uploaded files.

Optional:

|scale= for smaller icons, set it somewhere between 0.1 and 1
|tooltip= one or more words that appear on hover

If you create multiple icons:

|x= set the x(/y) position inside your image
[[Category:you can link them together in your own category]]
e.g. [[Category:GameNameIcons]]
Step 3
Insert {{YourIcon}} into a wiki page!

Examples

Jump Drive

Step 1
Upload JumpDriveIcons.png (450×30 pixels)JumpDriveIcons.png.
Step 2
Create https://en.doc.boardgamearena.com/Template:JumpDriveGenes: 
{{gameIcon
|tooltip=Genes
|imageFileName=JumpDriveIcons.png
|width=30
|height=30
|x=60
|y=0
|={{{1|&ZeroWidthSpace;}}}
|textColor=black
|outlineColor=white
}}<noinclude>
[[Category:JumpDriveIcons]]
<noinclude>
Step 3
Insert {{JumpDriveGenes|1}} genes1 in Gamehelpjumpdrive.

Space Station Phoenix

Step 1
Upload SpaceStationPhoenixIcons.png (700×100 pixels).SpaceStationPhoenixIcons.png
Step 2
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 3
Insert {{SSPShipFarm}} Farm ship​ in Gamehelpspacestationphoenix.

Parameters

Parameter
Default value
Example
Description
tooltip
&ZeroWidthSpace;
|tooltip=Resource
Optional: tooltip to display on hover.
imageFileName
null
|imageFileName=YourImage.png
Required: uploaded image file name including file format (i.e. .png, .jpg etc.).
scale
1
|scale=0.5
Optional: scale the image with its origin in the top left corner.
width
null
|width=30
Required: icon width in px units.
height
null
|height=30
Required: icon height in px units.
x
0
|x=60
Optional: x-axis (horizontal) position in px units.
y
0
|y=30
Optional: y-axis (vertical) position in px units.
z
null
|z=2
Optional: z-axis (stacking order) position.
null
&ZeroWidthSpace;
|={{{1|&ZeroWidthSpace;}}}
Optional: text value e.g. via another variable using triple curly braces.
textColor
#000
(black)
|textColor=green
Optional: text color as a CSS color e.g. green.
outlineColor
#fff0
(transparent white)
|outlineColor=green
Optional: text outline color as a CSS color e.g. green.
Retrieved from "http:///index.php?title=Template:GameIcon&oldid=25655"