From Brotato Wiki
(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.
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">
- 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">
- 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">
- 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">
- 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%