This is a documentation for Board Game Arena: play board games online !
Template:GameIcon: Difference between revisions
Jump to navigation
Jump to search
(black)
(transparent white)
Sammy McSam (talk | contribs) (parameter) |
Sammy McSam (talk | contribs) (z-index) |
||
| Line 1: | Line 1: | ||
<span style="display:inline-flex;align-items:center;justify-content:space-around;position:relative;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|​}}}]]</span><span style="position:relative;white-space:nowrap;">{{{|​}}}</span></span><noinclude> | <span style="display:inline-flex;align-items:center;justify-content:space-around;position:relative;z-index:{{{z|1}}};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|​}}}]]</span><span style="position:relative;white-space:nowrap;">{{{|​}}}</span></span><noinclude> | ||
{{infoBox |maxWidth= |color=#37c |titleAlign=left | {{infoBox |maxWidth= |color=#37c |titleAlign=left | ||
| Line 96: | Line 96: | ||
}} | }} | ||
== | == Parameters == | ||
<div style="display:grid;grid-template-columns:repeat(3,max-content) 2fr;gap:0.5rem;overflow:auto;text-overflow:ellipsis;"> | <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;">Parameter</div> | ||
| Line 125: | Line 125: | ||
<div><code>0</code></div> | <div><code>0</code></div> | ||
<div><code><nowiki>|x=60</nowiki></code></div> | <div><code><nowiki>|x=60</nowiki></code></div> | ||
<div>'''''Optional:''''' specify the x position in px units.</div> | <div>'''''Optional:''''' specify the x-axis position in px units.</div> | ||
<div><code>y</code></div> | <div><code>y</code></div> | ||
<div><code>0</code></div> | <div><code>0</code></div> | ||
<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-axis position in px units.</div> | ||
<div><code>z</code></div> | |||
<div><code>1</code></div> | |||
<div><code><nowiki>|z=2</nowiki></code></div> | |||
<div>'''''Optional:''''' specify the z-axis position.</div> | |||
<div><code>null</code></div> | <div><code>null</code></div> | ||
<div><code><nowiki>&ZeroWidthSpace;</nowiki></code></div> | <div><code><nowiki>&ZeroWidthSpace;</nowiki></code></div> | ||
Revision as of 19:29, 24 May 2024
Step 1
Upload YourImage.png
Step 2
Create
https://en.doc.boardgamearena.com
Fill in the parameters:
{{gameIcon
|tooltip=
|imageFileName=
|scale=1
|width=
|height=
|x=0
|y=0
|={{{1|​}}}
|textColor=black
|outlineColor=white
}}<noinclude>
[[Category:YourIcons]]
<noinclude>
Step 3
Insert
{{YourIcon}}Examples
Jump Drive
Step 1
Upload 
.
JumpDriveIcons.png (450×30 pixels)
.Step 2
Create
https://en.doc.boardgamearena.com:
{{gameIcon
|tooltip=Genes
|imageFileName=JumpDriveIcons.png
|width=30
|height=30
|x=60
|y=0
|={{{1|​}}}
|textColor=black
|outlineColor=white
}}<noinclude>
[[Category:JumpDriveIcons]]
<noinclude>
Step 3
Insert
{{JumpDriveGenes|1}} in Gamehelpjumpdrive.Space Station Phoenix
Step 1
Upload 
SpaceStationPhoenixIcons.png (700×100 pixels).
Step 2
Create
https://en.doc.boardgamearena.com:
{{gameIcon
|tooltip=Farm ship
|imageFileName=SpaceStationPhoenixIcons.png
|width=85
|height=50
|x=500
|y=50
}}<noinclude>
[[Category:SpaceStationPhoenixIcons]]
<noinclude>
Step 3
Insert
{{SSPShipFarm}} in Gamehelpspacestationphoenix.Parameters
Parameter
Default value
Example
Description
tooltip​|tooltip=ResourceOptional: specify a tooltip to display on hover.
imageFileNamenull|imageFileName=JumpDriveIcons.pngscale1|scale=0.5Optional: scale the imageFile with origin in the top left corner.
widthnull|width=30Required: specify the icon width in px units.
heightnull|height=30Required: specify the icon height in px units.
x0|x=60Optional: specify the x-axis position in px units.
y0|y=30Optional: specify the y-axis position in px units.
z1|z=2Optional: specify the z-axis position.
null​|={{{1|​}}}Optional: specify text e.g. via another variable using triple curly braces.
textColor#000(black)
|textColor=greenOptional: specify the text variable color as a CSS color e.g.
green.outlineColor#fff0(transparent white)
|outlineColor=greenOptional: specify the text variable outline color as a CSS color e.g.
green.