From Brotato Wiki

< User:Darkly77

(remove stuff that's ben made into a proper template (Template:Itembox + ItemboxWeapon))
Tag: Replaced
(tabbed itembox)
Line 30: Line 30:
</tr>
</tr>
</table>
</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 23:18, 4 December 2022

Itembox

Testing a new template, intended for use on mod pages.

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.

Mod-Isaac-isaacs tears icon.png

Isaac's Tears
Tears
  • Damage: 7/14/28/45 (Ranged Damage.png)
  • Critical: x2 (3% chance)
  • Cooldown: 0.7/0.62/0.53/0.45s
  • Knockback: 10
  • Range: 700 (Ranged)
  • Piercing: 0/0/1/1

Itembox: Tabbed

<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">

<img src="img/Circular_Saw.png" width="60" height="60">

Circular Saw
Medical
  • Damage: 14 (50%<img src="img/stat/20px-Melee_Damage.png">)
  • Critical: x2 (10% chance)
  • Cooldown: 0.5s
  • Knockback: 10
  • Range: 350 (Melee)
  • Piercing: 2 (-20% damage)
  • Life Steal: 5%

<img src="img/Circular_Saw.png" width="60" height="60">

Circular Saw
Medical
  • Damage: 14 (50%<img src="img/stat/20px-Melee_Damage.png">)
  • Critical: x2 (10% chance)
  • Cooldown: 0.5s
  • Knockback: 10
  • Range: 350 (Melee)
  • Piercing: 2 (-20% damage)
  • Life Steal: 5%

<img src="img/Circular_Saw.png" width="60" height="60">

Circular Saw
Medical
  • Damage: 14 (50%<img src="img/stat/20px-Melee_Damage.png">)
  • Critical: x2 (10% chance)
  • Cooldown: 0.5s
  • Knockback: 10
  • Range: 350 (Melee)
  • Piercing: 2 (-20% damage)
  • Life Steal: 5%

<img src="img/Circular_Saw.png" width="60" height="60">

Circular Saw
Medical
  • Damage: 14 (50%<img src="img/stat/20px-Melee_Damage.png">)
  • Critical: x2 (10% chance)
  • Cooldown: 0.5s
  • Knockback: 10
  • Range: 350 (Melee)
  • Piercing: 2 (-20% damage)
  • Life Steal: 5%

<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>