From Dark and Darker Wiki

m (Adjusted the 'iconamount' span to not interact w/ the pointer. This allows the image to be clickable through the amount #. (Before it wouldn't work))
m (Removed unnecessary rarity check. Moved pipe character to beginning of then and else clauses. This brings it in line with the style used on other templates.)
Line 2: Line 2:
--><div class="iconbox" style="display:inline-flex;width:max-content;max-width:{{{maxwidth|initial}}}; {{#ifeq:{{{nobr}}}|1||flex-direction: column;}}align-items: center;flex-wrap: wrap; white-space: pre-wrap;"><!--
--><div class="iconbox" style="display:inline-flex;width:max-content;max-width:{{{maxwidth|initial}}}; {{#ifeq:{{{nobr}}}|1||flex-direction: column;}}align-items: center;flex-wrap: wrap; white-space: pre-wrap;"><!--
ICON
ICON
--><div class="rarity<!--
--><div class="rarity{{{rarity|5}}} rounded relative"><!--
    -->{{#ifeq:{{{rarity|}}}|Ruby Silver|5|{{{rarity|}}}}}<!--
    --> rounded relative"><!--
IMAGE
IMAGE
-->{{#ifeq:{{{nolink|}}}|1|<!--
-->{{#ifeq:{{{nolink|}}}|1<!--
No image link:
No image link:
-->[[File:{{{image|{{{name|{{{1|}}}}}}.png}}}|{{{size|60px}}}]]|<!--
-->|[[File:{{{image|{{{name|{{{1|}}}}}}.png}}}|{{{size|60px}}}]]<!--
            Has image link:
Has image link:
-->[[File:{{{image|{{{name|{{{1|}}}}}}.png}}}|{{{size|60px}}}|link={{{name|{{{1|}}}}}}|{{{name|{{{1|}}}}}}]]<!--
-->|[[File:{{{image|{{{name|{{{1|}}}}}}.png}}}|{{{size|60px}}}|link={{{name|{{{1|}}}}}}|{{{name|{{{1|}}}}}}]]}}<!--
-->}}<!--
AMOUNT
AMOUNT
-->{{#if:{{{amount|}}}|<!--
-->{{#if:{{{amount|}}}<!--
--><span class="iconamount" style="pointer-events:none">{{{amount}}}</span><!--
-->|<span class="iconamount" style="pointer-events:none">{{{amount}}}</span>}}</div><!--
-->|}}<!--
--></div><!--
TOP
TOP
-->{{#if:{{{top|}}}|<!--
-->{{#if:{{{top|}}}<!--
-->{{{top}}}<!--
-->|{{{top}}}}}<!--
-->|}}<!--
CAPTION
CAPTION
-->{{#ifeq:{{{caption}}}|no|<!--no caption-->|<!--
-->{{#ifeq:{{{caption}}}|no<!--
-->{{#ifeq:{{{nolink|}}}|1|<!--
-->||{{#ifeq:{{{nolink|}}}|1<!--
LINK: No
LINK: No
-->{{#if:{{{caption|}}}|<!--
-->|{{#if:{{{caption|}}}<!--
CAPTION: Custom
CAPTION: Custom
--><strong>{{{caption}}} </strong><!--
-->|<strong>{{{caption}}} </strong><!--
                    -->|<!--
CAPTION: Auto
CAPTION: Auto
--><strong>{{{name|{{{1|}}}}}}</strong><!--
-->|<strong>{{{name|{{{1|}}}}}}</strong>}}<!--
-->}}<!--
-->|<!--
LINK: Yes
LINK: Yes
-->{{#if:{{{caption|}}}|<!--
-->|{{#if:{{{caption|}}}<!--
CAPTION: Custom
CAPTION: Custom
-->[[{{{name|{{{1|}}}}}}|<strong>{{{caption}}} </strong>]]<!--
-->|[[{{{name|{{{1|}}}}}}|<strong>{{{caption}}} </strong>]]<!--
                    -->|<!--
CAPTION: Auto
CAPTION: Auto
-->[[{{{name|{{{1|}}}}}}|<strong>{{{name|{{{1|}}}}}}</strong>]]<!--
-->|[[{{{name|{{{1|}}}}}}|<strong>{{{name|{{{1|}}}}}}</strong>]]}} }} }}</div><!--
-->}}<!--
-->}}<!--
-->}}<!--
--></div><!--
--></includeonly><noinclude>
--></includeonly><noinclude>


Line 109: Line 95:
<code><nowiki>{{Iconbox|Arming Sword|image=Armingsword_1.png|size=60px|top=This text is quite long but maxwidth restrains it|maxwidth=120px}}</nowiki></code>
<code><nowiki>{{Iconbox|Arming Sword|image=Armingsword_1.png|size=60px|top=This text is quite long but maxwidth restrains it|maxwidth=120px}}</nowiki></code>
{{Iconbox|Arming Sword|image=Armingsword_1.png|size=60px|top=This text is quite long but maxwidth restrains it|maxwidth=120px}}Without max width:{{Iconbox|Arming Sword|image=Armingsword_1.png|size=60px|top=This text is quite long but maxwidth restrains it}}
{{Iconbox|Arming Sword|image=Armingsword_1.png|size=60px|top=This text is quite long but maxwidth restrains it|maxwidth=120px}}Without max width:{{Iconbox|Arming Sword|image=Armingsword_1.png|size=60px|top=This text is quite long but maxwidth restrains it}}
 
</noinclude>
 
<templatedata>
{
"params": {
"maxwidth": {
"label": "Max Width",
"description": "If set, constrains the box to the specified width. Accepts any valid CSS width (60px, 60%). If not set, uses max-width:initial.",
"example": "60px",
"type": "string",
"suggested": true
},
"rarity": {
"label": "Rarity",
"description": "Options: -1, 1, 2, 3, 4, 5, 6, 7",
"type": "number",
"suggested": true
},
"name": {
"aliases": [
"1"
],
"label": "Name",
"description": "Name of the character/item/weapon",
"type": "string",
"required": true,
"suggested": true
},
"image": {
"label": "Image Override",
"description": "If not set, uses the image that matches the name",
"type": "string",
"suggested": true
},
"size": {
"label": "Size",
"description": "Size with px to set width, eg. \"30px\" Size with xpx to set height, eg. \"x30px\"",
"type": "string",
"suggested": true
},
"amount": {
"label": "Amount",
"description": "Shows a number on the bottom right corner",
"type": "number",
"suggested": true
},
"top": {
"label": "Top Text",
"description": "Shown above the caption",
"suggested": true
},
"nobr": {
"label": "Prevent Line Breaks?",
"description": "If enabled, removes the line break, putting the icon and text on a single line. Use 1 to enable",
"type": "boolean",
"suggested": true
},
"caption": {
"label": "Caption Override",
"description": "If not set, uses the specified name. Always links to the name. Use \"no\" to hide the caption",
"type": "string",
"suggested": true
}
},
"paramOrder": [
"name",
"rarity",
"size",
"amount",
"image",
"caption",
"top",
"nobr",
"maxwidth"
]
}
</templatedata></noinclude>

Revision as of 03:49, 22 March 2024


Usage

This template can be used by entering the following onto a relevant page. Do not use this on your user page. It is reserved for content pages. 

{{Iconbox|Acid|size=30px|caption=caption|amount=1|rarity=1}}

Examples

Code Preview
{{Iconbox|Weapons}}Accessing Weapons.png
Weapons
Weapons
{{Iconbox|Arming Sword|image=Armingsword_1.png}}
Arming Sword
Arming Sword
{{Iconbox|Arming Sword|image=Armingsword_1.png|caption=Foobar}}
Arming Sword
Foobar
{{Iconbox|Arming Sword|image=Armingsword_1.png|caption=no}}
Arming Sword
{{Iconbox|Arming Sword|image=Armingsword_1.png|top=Foobar}}
Arming Sword
FoobarArming Sword
{{Iconbox|Arming Sword|image=Armingsword_1.png|rarity=-1}}


{{Iconbox|Arming Sword|image=Arming Sword 0.png|rarity=0}}
{{Iconbox|Arming Sword|image=Arming Sword 1.png|rarity=1}}
{{Iconbox|Arming Sword|image=Arming Sword 2.png|rarity=2}}
{{Iconbox|Arming Sword|image=Arming Sword 3.png|rarity=3}}
{{Iconbox|Arming Sword|image=Arming Sword 4.png|rarity=4}}
{{Iconbox|Arming Sword|image=Arming Sword 5.png|rarity=5}}
{{Iconbox|Arming Sword|image=Arming Sword 6.png|rarity=6}}
{{Iconbox|Arming Sword|image=Arming Sword 7.png|rarity=7}}
{{Iconbox|Adventurer Boots Ruby Silver|image=Adventurer Boots Ruby Silver.png|rarity=Ruby Silver}}
{{Iconbox|Frock|image=Frock Cobalt.png|rarity=4}}

Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Arming Sword
Frock
Frock
{{Iconbox|Arming Sword|image=Armingsword_1.png|nolink=1}}
Armingsword 1.png
Arming Sword
{{Iconbox|Arming Sword|image=Armingsword_1.png|size=30px}}
Arming Sword
Arming Sword
{{Iconbox|Arming Sword|image=Armingsword_1.png|size=x30px}}
Arming Sword
Arming Sword
{{Iconbox|Arming Sword|image=Armingsword_1.png|size=30px|nobr=1}}
Arming Sword
Arming Sword
{{Iconbox|Arming Sword|image=Armingsword_1.png|size=30px|nobr=1|top=Foobar}}
Arming Sword
FoobarArming Sword
{{Iconbox|Rubysilver Ore|size=30px|amount=5|top=Foobar}}
Rubysilver Ore5
FoobarRubysilver Ore

Other Options

The maxwidth option lets you restrain text that would otherwise be very long:

{{Iconbox|Arming Sword|image=Armingsword_1.png|size=60px|top=This text is quite long but maxwidth restrains it|maxwidth=120px}}

Arming Sword
This text is quite long but maxwidth restrains itArming Sword

Without max width:

Arming Sword
This text is quite long but maxwidth restrains itArming Sword
Retrieved from "http://darkanddarker.wiki.spellsandguns.com/index.php?title=Template:Iconbox&oldid=21502"