• Welcome to the Kancolle Wiki!
  • If you have any questions regarding site content, account registration, etc., please visit the KanColle Wiki Discord

Difference between revisions of "Template:ItemStack"

From Kancolle Wiki
Jump to navigation Jump to search
(Add clickbox overlay)
m (Try to prevent underlay mouse pointer events blocked by stacked texts)
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<span style="position:relative;display:{{#if:{{{1|}}}|block|inline}};">{{{item|[[File:Empty equipment card slot.png{{!}}50px{{!}}link={{{link|}}}]]}}}<span style="
+
<span style="position:relative;display:{{#if:{{{1|}}}|block|inline}};">{{{item|[[File:Empty Equipment Card.png{{!}}50px{{!}}link={{{link|}}}]]}}}<span style="
−
        font-size:{{{font-size|12px}}};
+
  font-size:{{{font-size|12px}}};
−
font-weight:800;
+
  font-weight:800;
−
position:absolute;
+
  position:absolute;
−
color:#{{{text-color|f61}}};
+
  pointer-events:none;
−
{{#if:{{{1|}}}|{{{position|}}}|{{{text-position|right:4px;bottom:-18px}}}}};
+
  color:#{{{text-color|f61}}};
−
text-shadow:
+
  {{#if:{{{1|}}}|{{{position|}}}|{{{text-position|right:4px;bottom:-18px}}}}};
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
  text-shadow:
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
#{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}}
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}},
−
">{{{1|{{{text|なのです！}}}}}}</span>
+
    #{{{glow-color|fff}}} 0px 0px {{{glow-size|5px}}}
−
<span style="position:absolute;{{{clickbox-pos|top:-15px;left:1px;}}}opacity:{{{clickable-opacity|1}}}">[[File:Blank_square.svg|{{{clickbox-size|50}}}px|link={{{link|}}}]]</span></span>
+
">{{{1|{{{text|{{{default-text|}}}}}}}}}</span>{{#if:{{{text2|}}}|<span style="
−
<noinclude>
+
  font-size:{{{font-size2|{{{font-size|12px}}}}}};
 +
  font-weight:800;
 +
  position:absolute;
 +
  pointer-events:none;
 +
  color:#{{{text-color2|{{{text-color|f61}}}}}};
 +
  {{#if:{{{2|}}}|{{{position2|}}}|{{{text-position2|right:4px;bottom:18px}}}}};
 +
  text-shadow:
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}},
 +
    #{{{glow-color2|{{{glow-color|fff}}}}}} 0px 0px {{{glow-size2|{{{glow-size|5px}}}}}}
 +
">{{{2|{{{text2|{{{default-text2|}}}}}}}}}</span>}}{{#if:{{{link|}}}|<span style="position:absolute;{{{clickbox-pos|top:-15px;left:1px;}}}opacity:{{{clickbox-opacity|0}}}">[[File:Blank_square.svg|{{{clickbox-size|50}}}px|link={{{link|}}}]]</span>|}}</span><noinclude>
 
{{documentation}}
 
{{documentation}}
 
</noinclude>
 
</noinclude>

Latest revision as of 07:40, 10 June 2023

Empty Equipment Card.png

Template-info.png Template documentation [view] [edit] [history] [purge]

Description
A template to generate stack counter for item icons.
Interestingly, the two main arguments of this template will work with most (if not all) existing viewer templates and can be used as a generic way to overlay text.
Standard usage with 50px item images
{{ItemStack
|item = [[File:Item Icon Improvement Material.png{{!}}50px{{!}}link=]]
|text = x7
}}

Item Icon Improvement Material.pngx7

Main arguments
item
The background image. Default value is Empty Equipment Card.png
text
The overlay text (images and audio also work). Defaults to default-text or empty string.
link
Embedded link using clickbox overlay.
[1]
Used for nested ItemStack calls, the generated element will be block-level.
Styling arguments
font-size
Set the size of the overlay text. Default value is 12px
text-position
Set the position of the overlay text. Default value is right:4px;bottom:-18px
position
Set the position of the overlay generated by nested ItemStack call.
text-color
Set the color of the text. Default value is f61
glow-size
Set the glow size of the text. Default value is 5px
glow-color
Set the color of the glow. Default value is fff
clickbox-opacity
Set the opacity of clickbox from 0 to 1 (used for aligning clickbox). Default value is 0.
clickbox-size
Set the size of the clickbox
clickbox-pos
Set the position of the clickbox
Custom usage with Template:Equipment/Card
{{ItemStack
|item = {{Equipment/Card|Prototype 51cm Twin Gun Mount|size=100px}}
|text-position = bottom:-40px;right:6px;
|font-size = 18px
|text = x9000
|glow-size = 15px
|text-color = fff
|glow-color = f00
}}

Equipment Card Prototype 51cm Twin Gun Mount.pngx9000

Nesting template usage
{{ItemStack
|item = {{Ship/Card|Ikazuchi/Kai|size=218px}}
|position = left:130px;
|{{ItemStack
|item = {{Ship/Card|Hibiki/Kai|size=218px}}
|position = left:130px;
|{{ItemStack
|item = {{Ship/Card|Akatsuki/Kai|size=218px}}
|position = left:130px;
|{{ItemStack
|item = {{Ship/Card|Inazuma/Kai|size=218px}}
|text = DesDiv6
|text-position = bottom:-130px;right:5px
|font-size = 20px
}}}}}}}}

Ship Card Ikazuchi Kai.pngShip Card Hibiki Kai.pngShip Card Akatsuki Kai.pngShip Card Inazuma Kai.pngDesDiv6

Image overlay
{{ItemStack
|item = {{Ship/Card|Ikazuchi/Kai|size=218px}}
|text-position = bottom:-135px;right:5px
|text = [[File:Marriage Ring Icon.png]]
}}

Ship Card Ikazuchi Kai.pngMarriage Ring Icon.png

Retrieved from "https://en.kancollewiki.net/w/index.php?title=Template:ItemStack&oldid=155042"