This is a documentation for Board Game Arena: play board games online !
Template:D6: Difference between revisions
Jump to navigation
Jump to search
Sammy McSam (talk | contribs) m (reduce block margin) |
Sammy McSam (talk | contribs) mNo edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
< | <span style="display:inline-flex;position:relative;height:{{{S|45}}}px;width:{{{S|45}}}px;margin:calc({{{S|45}}}*.25px);vertical-align:middle;font-family:Roboto,Arial,sans-serif;font-weight:700;transform-style:preserve-3d;transform:perspective(calc({{{S|45}}}*10px)) rotateX({{{Rx|15}}}deg) rotateY({{{Ry|-15}}}deg) rotateZ({{{R|0}}}deg);"><span style="position:absolute;transform:rotateZ(calc({{{tR|0}}}*-90deg)) rotateX(90deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{tI|{{{t|1}}}}}} - 1));background:{{{IB|{{{tIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{tH|{{{2|200}}}}}}));">[[File:{{{tI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{tTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{tTC|{{{TC|#000}}}}}};background:{{{B|{{{tB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{tT|}}}</span></span></span><span style="position:absolute;transform:rotateZ(calc({{{fR|0}}}*-90deg)) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{fI|{{{f|2}}}}}} - 1));background:{{{IB|{{{fIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{fH|{{{2|200}}}}}}));">[[File:{{{fI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{fTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{fTC|{{{TC|#000}}}}}};background:{{{B|{{{fB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{fT|}}}</span></span></span><span style="position:absolute;transform:rotateZ(calc({{{rR|0}}}*-90deg)) rotateY(90deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="\position:absolute;left:calc(-{{{S|45}}}px*({{{rI|{{{r|3}}}}}} - 1));background:{{{IB|{{{rIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{rH|{{{2|200}}}}}}));">[[File:{{{rI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{rTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{rTC|{{{TC|#000}}}}}};background:{{{B|{{{rB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{lT|}}}</span></span></span><span style="position:absolute;transform:rotateZ(calc({{{bkR|0}}}*-90deg)) rotateY(180deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{bkI|{{{bk|4}}}}}} - 1));background:{{{IB|{{{bkIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{bkH|{{{2|200}}}}}}));">[[File:{{{bkI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{bkTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{bkTC|{{{TC|#000}}}}}};background:{{{B|{{{bkB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{bkT|}}}</span></span></span><span style="position:absolute;transform:rotateZ(calc({{{lR|0}}}*-90deg)) rotateY(-90deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{lI|{{{l|5}}}}}} - 1));background:{{{IB|{{{lIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{lH|{{{2|200}}}}}}));">[[File:{{{lI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{lTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{lTC|{{{TC|#000}}}}}};background:{{{B|{{{lB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{rT|}}}</span></span></span><span style="position:absolute;transform:rotateZ(calc({{{bR|0}}}*-90deg)) rotateX(-90deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{bI|{{{b|6}}}}}} - 1));background:{{{IB|{{{bIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{bH|{{{2|200}}}}}}));">[[File:{{{bI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{bTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{bTC|{{{TC|#000}}}}}};background:{{{B|{{{bB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{bT|}}}</span></span></span></span><noinclude> | ||
{{infoBoxes |color1=#37c |color2=#3aa |titleAlign=left | {{infoBoxes |color1=#37c |color2=#3aa |titleAlign=left | ||
|title1=Step 1 | |title1=Step 1 | ||
|body1=<span style="display: | |body1=<span style="display:flex;flex-direction:column;gap:0.5rem;"> | ||
<div>'''[[Special:Upload|Upload]]''' '''YourDieFacesImage.png''' (an image of all six faces i.e. with ratio 6:1)</div> | |||
<div>e.g. <code>d6Faces.png</code> (1200×200 pixels)</div><div>[[File:d6Faces.png|x45px]]</div> | |||
</div> | |||
|title2=Step 2 | |title2=Step 2 | ||
|body2=< | |body2=<div style="display:flex;flex-direction:column;gap:0.5rem;"> | ||
<div>Insert <code><nowiki>{{d6|</nowiki>'''YourDieFacesImage.png'''<nowiki>|</nowiki>'''HeightInPixels'''<nowiki>}}</nowiki></code></div> | |||
<div>e.g. <code><nowiki>{{d6|</nowiki>d6Faces.png<nowiki>|</nowiki>200<nowiki>}}</nowiki></code></div> | |||
<div>{{d6}}</div> | |||
</div> | |||
}} | }} | ||
| Line 14: | Line 21: | ||
{{infoBoxes |color1=#37c |color2=#3aa |titleAlign=left | {{infoBoxes |color1=#37c |color2=#3aa |titleAlign=left | ||
|title1=Step 1 | |title1=Step 1 | ||
|body1=< | |body1=<div style="display:flex;flex-direction:column;gap:0.5rem;"> | ||
<div>'''[[Special:Upload|Upload]]''' <code>ParksDie.jpg</code> (324×54 pixels)</div> | |||
<div>[[File:ParksDie.jpg]]</div> | |||
</div> | |||
|title2=Step 2 | |title2=Step 2 | ||
|body2=< | |body2=<div style="display:flex;flex-direction:column;gap:0.5rem;"> | ||
<div>Insert <code><nowiki>{{d6|ParksDie.jpg|54}}</nowiki></code></div> | |||
<div>{{d6|ParksDie.jpg|54}}</div> | |||
<div>Insert <code><nowiki>{{</nowiki>{{text|c=#800|<nowiki>d6|ParksDie.jpg|54</nowiki>}}{{text|c=#080|<nowiki>|r=4|l=3|bk=5|bkR=2</nowiki>}}{{text|c=#008|<nowiki>|R=20|Rx=-170|Ry=30</nowiki>}}<nowiki>}}</nowiki></code></div> | |||
<div>{{d6|ParksDie.jpg|54|r=4|l=3|bk=5|bkR=2|R=20|Rx=-170|Ry=30}}</div> | |||
</div> | |||
# The die with image and size {{code|c=#800|<nowiki>d6|ParksDie.jpg|54</nowiki>}}: | |||
#* {{code|c=#800|<nowiki>|d</nowiki>}}ie {{code|c=#800|6}}-sided template | |||
#* {{code|c=#800|<nowiki>|ParksDie.jpg</nowiki>}} uploaded image | |||
#* {{code|c=#800|<nowiki>|54</nowiki>}} pixels tall | |||
# Adjust each face {{code|c=#080|<nowiki>|r=4|l=3|bk=5|bkR=2</nowiki>}}: | |||
#* {{code|c=#080|<nowiki>|r</nowiki>}}ight face {{code|c=#080|<nowiki>=4</nowiki>}}th part of image | |||
#* {{code|c=#080|<nowiki>|l</nowiki>}}eft face {{code|c=#080|<nowiki>=3</nowiki>}}rd part of image | |||
#* {{code|c=#080|<nowiki>|b</nowiki>}}ac{{code|c=#080|k}} face {{code|c=#080|<nowiki>=5</nowiki>}}th part of image | |||
#* {{code|c=#080|<nowiki>|b</nowiki>}}ac{{code|c=#080|k}} face {{code|c=#080|R}}otate {{code|c=#080|<nowiki>=2</nowiki>}} × 90° clockwise | |||
# Rotate the cube {{code|c=#008|<nowiki>|R=20|Rx=-170|Ry=30</nowiki>}}: | |||
#* {{code|c=#008|<nowiki>|R</nowiki>}}otate clockwise {{code|c=#008|<nowiki>=20</nowiki>}}° | |||
#* {{code|c=#008|<nowiki>|R</nowiki>}}otate around the {{code|c=#008|x}}-axis {{code|c=#008|<nowiki>=-170</nowiki>}}° (down) | |||
#* {{code|c=#008|<nowiki>|R</nowiki>}}otate around the {{code|c=#008|y}}-axis {{code|c=#008|<nowiki>=30</nowiki>}}° (right) | |||
}} | }} | ||
| Line 32: | Line 60: | ||
|title2=Property names | |title2=Property names | ||
|body2=Uppercase: | |body2=Uppercase: | ||
*<code>I</code>mage | |||
*<code>H</code>eight | |||
*<code>S</code>ize | |||
*<code>R</code>otate | |||
*<code>B</code>ackground | |||
*<code>T</code>ext | |||
*<code>C</code>olor | |||
}} | }} | ||
| Line 91: | Line 119: | ||
<div>{{d6|Ry=30}}</div> | <div>{{d6|Ry=30}}</div> | ||
<div>'''''Optional:''''' rotate the cube around the vertical y-axis (right) in degrees.</div> | <div>'''''Optional:''''' rotate the cube around the vertical y-axis (right) in degrees.</div> | ||
<div><code>B</code>/<br><code>[face]B</code></div> | <div><code>B</code>/<br><code>[face]B</code></div> | ||
<div>Background</div> | <div>Background</div> | ||
| Line 123: | Line 145: | ||
</div> | </div> | ||
[[Category:DiceIcons]] | [[Category:DiceIcons]] | ||
</noinclude> | </noinclude> | ||
Latest revision as of 22:10, 1 July 2025
Step 1
Upload YourDieFacesImage.png (an image of all six faces i.e. with ratio 6:1)
e.g.
d6Faces.png (1200×200 pixels)Step 2
Insert
{{d6|YourDieFacesImage.png|HeightInPixels}}e.g.
{{d6|d6Faces.png|200}}Examples
Parks
Step 1
Upload
ParksDie.jpg (324×54 pixels)Step 2
Insert
{{d6|ParksDie.jpg|54}}Insert
{{d6|ParksDie.jpg|54|r=4|l=3|bk=5|bkR=2|R=20|Rx=-170|Ry=30}}- The die with image and size d6|ParksDie.jpg|54:
- |die 6-sided template
- |ParksDie.jpg uploaded image
- |54 pixels tall
- Adjust each face |r=4|l=3|bk=5|bkR=2:
- |right face =4th part of image
- |left face =3rd part of image
- |back face =5th part of image
- |back face Rotate =2 × 90° clockwise
- Rotate the cube |R=20|Rx=-170|Ry=30:
- |Rotate clockwise =20°
- |Rotate around the x-axis =-170° (down)
- |Rotate around the y-axis =30° (right)
Parameters
[face] nameslowercase:
topfrontrightbkbackleftbottom
Property names
Uppercase:
ImageHeightSizeRotateBackgroundTextColor
Id
Name
Default
Example
Result
Description
1, 2 /
[face]I, [face]HImage, Height
d6Faces.png, 200{{d6|d6Faces.png|200}}/{{d6|fI=logo.png|fH=1842}} /
Required: image file name and its height in px units.
SSize
45{{d6|S=60}}Optional: size of cube in px units.
[face]Face number
[1-6]{{d6|f=3}}Optional: set which
[faceNumber] (1-6) displays on a specific [face].[face]RFace rotate
0{{d6|fR=1}}Optional: rotate a specific
[face] in units of 90° clockwise.RRotate clockwise
0{{d6|R=30}}Optional: rotate the cube around the perspective z-axis (clockwise) in degrees.
RxRotate up
15{{d6|Rx=30}}Optional: rotate the cube around the horizontal x-axis (up) in degrees.
RyRotate right
-15{{d6|Ry=30}}Optional: rotate the cube around the vertical y-axis (right) in degrees.
B/[face]BBackground
transparent
{{d6|B=lime}}/{{d6|fB=lime}}/
Optional: set a CSS background color or gradient.
[face]TText value
empty
{{d6|fT=💥}}Optional: set a text value for a specific
[face].TS/[face]TSText size
16px{{d6|fT=💥|TS=36px}}/{{d6|fT=💥|fTS=36px}}Optional: text size as a CSS <length> value.
TC/[face]TCText color
black
{{d6|fT=★|TC=green}}/{{d6|fT=★|fTC=green}}Optional: text color as a CSS <color> value.


