From Brotato Wiki

< User:Darkly77

(tabbed itembox)
(remove old redundant stuff)
Tag: Replaced
Line 1: Line 1:
== Itembox ==
My sandbox, used for testing stuff. Not part of the wiki.
 
Testing a new template, intended for use on mod pages.
 
{{Color|pastelred|PLEASE USE CTRL+F5 TO SEE THE NEW STYLES}}
 
=== Itembox ===
 
[[Template:Itembox]] + [[Template:ItemboxWeapon]]
 
Testing full weapon stats. Looks kinda bad, hard to read, needs a better approach.
 
<table>
<tr>
<!-- Isaac's Tears -->
<td style="vertical-align: top; padding: 0 20px 20px 0;">
{{ItemboxWeapon
| name      = Isaac's Tears
| class    = Tears
| image    = Mod-Isaac-isaacs_tears_icon.png
| rarity    = 1
| damage    = {{Color|tier1|7}}/{{Color|tier2|14}}/{{Color|tier3|28}}/{{Color|tier4|45}} ({{StatIcon|Ranged Damage}})
| critical  = x2 (3% chance)
| cooldown  = {{Color|tier1|0.7}}/{{Color|tier2|0.62}}/{{Color|tier3|0.53}}/{{Color|tier4|0.45}}s
| knockback = 10
| piercing  = {{Color|tier1|0}}/{{Color|tier2|0}}/{{Color|tier3|1}}/{{Color|tier4|1}}
| range    = 700 (Ranged)
}}
</td>
</tr>
</table>
 
=== Itembox: Tabbed ===
 
<div id="mytabs">
<input class="mytabs__radio" name="tabby-a" id="mytabby-a-1" type="radio" checked>
<input class="mytabs__radio" name="tabby-a" id="mytabby-a-2" type="radio">
<input class="mytabs__radio" name="tabby-a" id="mytabby-a-3" type="radio">
<input class="mytabs__radio" name="tabby-a" id="mytabby-a-4" type="radio">
 
<div class="mytabs__panels">
<!-- Panel 1 -->
<!-- Circular Saw: Tier 1 -->
<!-- <input class="mytabs__radio" name="mytab" id="mytab-1" type="radio" checked> -->
<div class="mytabs__panel">
<div class="ibox rarity1 rarity1dark rounded">
<div class="ibox__top">
<div class="ibox__icon rounded">
<img src="img/Circular_Saw.png" width="60" height="60">
</div>
<div class="ibox__top-right">
<div class="ibox__name colorrarity1">Circular Saw</div>
<div class="ibox__class color-cream">Medical</div>
</div>
</div>
<div class="ibox__stats">
<ul>
<li> <span class="color-cream">Damage:</span> 14 (50%<img src="img/stat/20px-Melee_Damage.png">) </li>
<li> <span class="color-cream">Critical:</span> x2 (10% chance) </li>
<li> <span class="color-cream">Cooldown:</span> 0.5s </li>
<li> <span class="color-cream">Knockback:</span> 10 </li>
<li> <span class="color-cream">Range:</span> 350 (Melee) </li>
<li> <span class="color-cream">Piercing:</span> 2 (-<span class="color-green">20%</span> damage) </li>
<li> <span class="color-cream">Life Steal:</span> <span class="color-green">5%</span> </li>
</ul>
</div>
</div><!-- enditem -->
</div>
 
<!-- Panel 2 -->
<!-- Circular Saw: Tier 2 -->
<!-- <input class="mytabs__radio" name="mytab" id="mytab-2" type="radio"> -->
<div class="mytabs__panel">
<div class="ibox rarity2 rarity2dark rounded">
<div class="ibox__top">
<div class="ibox__icon rounded">
<img src="img/Circular_Saw.png" width="60" height="60">
</div>
<div class="ibox__top-right">
<div class="ibox__name colorrarity2">Circular Saw</div>
<div class="ibox__class color-cream">Medical</div>
</div>
</div>
<div class="ibox__stats">
<ul>
<li> <span class="color-cream">Damage:</span> 14 (50%<img src="img/stat/20px-Melee_Damage.png">) </li>
<li> <span class="color-cream">Critical:</span> x2 (10% chance) </li>
<li> <span class="color-cream">Cooldown:</span> 0.5s </li>
<li> <span class="color-cream">Knockback:</span> 10 </li>
<li> <span class="color-cream">Range:</span> 350 (Melee) </li>
<li> <span class="color-cream">Piercing:</span> 2 (-<span class="color-green">20%</span> damage) </li>
<li> <span class="color-cream">Life Steal:</span> <span class="color-green">5%</span> </li>
</ul>
</div>
</div><!-- enditem -->
</div>
 
<!-- Panel 3 -->
<!-- Circular Saw: Tier 3 -->
<!-- <input class="mytabs__radio" name="mytab" id="mytab-3" type="radio"> -->
<div class="mytabs__panel">
<div class="ibox rarity3 rarity3dark rounded">
<div class="ibox__top">
<div class="ibox__icon rounded">
<img src="img/Circular_Saw.png" width="60" height="60">
</div>
<div class="ibox__top-right">
<div class="ibox__name colorrarity2">Circular Saw</div>
<div class="ibox__class color-cream">Medical</div>
</div>
</div>
<div class="ibox__stats">
<ul>
<li> <span class="color-cream">Damage:</span> 14 (50%<img src="img/stat/20px-Melee_Damage.png">) </li>
<li> <span class="color-cream">Critical:</span> x2 (10% chance) </li>
<li> <span class="color-cream">Cooldown:</span> 0.5s </li>
<li> <span class="color-cream">Knockback:</span> 10 </li>
<li> <span class="color-cream">Range:</span> 350 (Melee) </li>
<li> <span class="color-cream">Piercing:</span> 2 (-<span class="color-green">20%</span> damage) </li>
<li> <span class="color-cream">Life Steal:</span> <span class="color-green">5%</span> </li>
</ul>
</div>
</div><!-- enditem -->
</div>
 
<!-- Panel 4 -->
<!-- Circular Saw: Tier 4 -->
<!-- <input class="mytabs__radio" name="mytab" id="mytab-4" type="radio"> -->
<div class="mytabs__panel">
<div class="ibox rarity4 rarity4dark rounded">
<div class="ibox__top">
<div class="ibox__icon rounded">
<img src="img/Circular_Saw.png" width="60" height="60">
</div>
<div class="ibox__top-right">
<div class="ibox__name colorrarity2">Circular Saw</div>
<div class="ibox__class color-cream">Medical</div>
</div>
</div>
<div class="ibox__stats">
<ul>
<li> <span class="color-cream">Damage:</span> 14 (50%<img src="img/stat/20px-Melee_Damage.png">) </li>
<li> <span class="color-cream">Critical:</span> x2 (10% chance) </li>
<li> <span class="color-cream">Cooldown:</span> 0.5s </li>
<li> <span class="color-cream">Knockback:</span> 10 </li>
<li> <span class="color-cream">Range:</span> 350 (Melee) </li>
<li> <span class="color-cream">Piercing:</span> 2 (-<span class="color-green">20%</span> damage) </li>
<li> <span class="color-cream">Life Steal:</span> <span class="color-green">5%</span> </li>
</ul>
</div>
</div><!-- enditem -->
</div>
</div>
 
<div class="mytabs__buttons">
<label class="mytabs__button rarity1 rarity1dark" for="mytabby-a-1">Tier I</label>
<label class="mytabs__button rarity2 rarity2dark" for="mytabby-a-2">Tier II</label>
<label class="mytabs__button rarity3 rarity3dark" for="mytabby-a-3">Tier III</label>
<label class="mytabs__button rarity4 rarity4dark" for="mytabby-a-4">Tier IV</label>
</div>
 
</div>

Revision as of 15:46, 9 December 2022

My sandbox, used for testing stuff. Not part of the wiki.