Hello all, like a fool, I didn't save a copy of my functional code before making a big change to everything. I added an NPC tab (I think this is the right word; I am very much a noob at this and kind of just stumbling my way through custom sheets). There are two buttons at the top to toggle between PC and NPC, and each has its own section divs which are called out in two separate grid elements in the CSS. There was also some CSS applying formatting (font family, header color, etc.) to the sheet. The grid seems to mostly still be working, but the PC sheet no longer fits within the grid. All the PC sheet formatting I mentioned is gone (but oddly, it is intact on the NPC side). Additionally, adding the buttons/tabs added this white row of nothingness to the top of my PC sheet (but not the NPC sheet). This may also be what's throwing off the grid. I have no idea where the problems are stemming from and am sure I am massively messing up with coding, especially on the CSS side which I have even less experience than my beginner experience with HTML. I can post my code here although it is pretty long and poorly commented (lots of repeating segments though, so that might help parsing it quicker). Any help that anyone can provide would be a godsend. Thank you! HTML: <main>
<section class="header f-center">
<!--<h1>Lord of Llamas</h1>-->
<img src="<a href="https://i.imgur.com/lZhnBkC.png" rel="nofollow">https://i.imgur.com/lZhnBkC.png</a>" width="360px" height="60px">
<span><b>Roll20 Beta Testing Sheet 1.03.16</b></span>
</section>
<!-- Sheet type switcher -->
<input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab" value="pc" />
<div>
<button type="action" name="act_pc" >PC</button>
<button type="action" name="act_npc" >NPC</button>
</div>
<!-- PC SHEET-->
<div class="sheet-pc">
<!-- basic character stats -->
<section class="common">
<label><h2>Primary Characteristics</h2></label>
<label>Name: <input name="attr_character_name" type="text"> Level: <input type="number" min="1" max="15" name="attr_level" value="1"></label>
<label>Lineage:
<select name="attr_lineage">
<option value="0" selected="selected">Select one:</option>
<option value="1">Aurok</option>
<option value="2">Devilspawn</option>
<option value="3">Grubling</option>
<option value="4">Human</option>
<option value="5">Llama</option>
<option value="6">Monkey</option>
<option value="7">Transfigured</option>
</select> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; XP: <input type="number" min="0" max="10" name="attr_xp" value="0">
</label>
<label>Discipline:
<select name="attr_discipline">
<option value="0" selected="selected">Select one:</option>
<option value="1">Accuser</option>
<option value="2">Beast-Tamer</option>
<option value="3">Chieftain</option>
<option value="4">Hellfriend</option>
<option value="5">Knave</option>
<option value="6">Prophet</option>
<option value="7">Ravager</option>
<option value="8">Warlock</option>
</select>
</label><br />
<b>Health: <input type="number" name="attr_health" value="5" size="3"> / <input type="number" name="attr_health_max" value="5" size="3">
&nbsp;
Willpower: <input type="number" name="attr_willpower" value="2"> / <input type="number" name="attr_willpower_max" value="2">
&nbsp;
Speed: <input type="number" name="attr_speed" value="5">
<br />
Defense: <input type="number" name="attr_defense" readonly="true" value=""><button type="roll" name="roll_defense" value="&{template:rolls} {{title=Defense}} {{subtitle=@{character_name} }} {{roll= [[[[@{defense}]]d6>?{Target Number?|4}]]}}"> </button>
&nbsp;
Initiative: <input type="number" name="attr_initiative" value="2"><button type="roll" name="roll_initiative" value="&{template:rolls} {{title=Initiative}} {{subtitle=@{character_name} }} {{roll= [[[[@{initiative}]]d6&{tracker}]]}}"> </button>
<br /><br />
<div class="desc">Physical Description: <textarea name="attr_physdesc" placeholder="Write a brief character description here"></textarea></div>
<div class="desc">Injuries: <textarea name="attr_injuries" placeholder="Record any injuries you've suffered here"></textarea></div></b>
</section>
<!--Attributes and Skills list -->
<section class="skill f-col nowrap">
<h2>Attributes</h2>
<!-- Mightiness -->
<div class="f-row nowrap">
<h3>Mightiness</h3>
<input type="number" name="attr_mightiness" value="0" min="0" max="6">
<button type="roll" name="roll_might" value="&{template:rolls} {{title=Mightiness}} {{subtitle=@{character_name} }} {{roll= [[[[@{mightiness}]]d6>?{Target Number?|4}]]}}"> </button>
<div class="f-row nowrap">
<b>Brawn</b>
<input type="number" name="attr_brawn" value="0" min="0" max="6">
<button type="roll" name="roll_brawn" value="&{template:rolls} {{title=Brawn}} {{subtitle=@{character_name} }} {{roll= [[[[@{mightiness}+@{brawn}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Grapple</b>
<input type="number" name="attr_grapple" value="0" min="0" max="6">
<button type="roll" name="roll_grapple" value="&{template:rolls} {{title=Grapple}} {{subtitle=@{character_name} }} {{roll= [[[[@{mightiness}+@{grapple}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Intimidate</b>
<input type="number" name="attr_intimidate" value="0" min="0" max="6">
<button type="roll" name="roll_intimidate" value="&{template:rolls} {{title=Intimidate}} {{subtitle=@{character_name} }} {{roll= [[[[@{mightiness}+@{intimidate}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Traverse</b>
<input type="number" name="attr_traverse" value="0" min="0" max="6">
<button type="roll" name="roll_traverse" value="&{template:rolls} {{title=Traverse}} {{subtitle=@{character_name} }} {{roll= [[[[@{mightiness}+@{traverse}]]d6>?{Target Number?|4}]]}}"> </button>
</div><br />
<!-- Craftiness -->
<div class="f-row nowrap">
<h3>Craftiness</h3>
<input type="number" name="attr_craftiness" value="0" min="0" max="6">
<button type="roll" name="roll_craft" value="&{template:rolls} {{title=Craftiness}} {{subtitle=@{character_name} }} {{roll= [[[[@{craftiness}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Deceive</b>
<input type="number" name="attr_deceive" value="0" min="0" max="6">
<button type="roll" name="roll_deceive" value="&{template:rolls} {{title=Deceive}} {{subtitle=@{character_name} }} {{roll= [[[[@{craftiness}+@{deceive}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Hide</b>
<input type="number" name="attr_hide" value="0" min="0" max="6">
<button type="roll" name="roll_hide" value="&{template:rolls} {{title=Hide}} {{subtitle=@{character_name} }} {{roll= [[[[@{craftiness}+@{hide}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Repair</b>
<input type="number" name="attr_repair" value="0" min="0" max="6">
<button type="roll" name="roll_repair" value="&{template:rolls} {{title=Repair}} {{subtitle=@{character_name} }} {{roll= [[[[@{craftiness}+@{repair}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Search</b>
<input type="number" name="attr_search" value="0" min="0" max="6">
<button type="roll" name="roll_search" value="&{template:rolls} {{title=Search}} {{subtitle=@{character_name} }} {{roll= [[[[@{craftiness}+@{search}]]d6>?{Target Number?|4}]]}}"> </button>
</div><br />
<!-- Worldliness -->
<div class="f-row nowrap">
<h3>Worldliness</h3>
<input type="number" name="attr_worldliness" value="0" min="0" max="6">
<button type="roll" name="roll_world" value="&{template:rolls} {{title=Worldliness}} {{subtitle=@{character_name} }} {{roll= [[[[@{worldliness}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Cook</b>
<input type="number" name="attr_cook" value="0" min="0" max="6">
<button type="roll" name="roll_cook" value="&{template:rolls} {{title=Cook}} {{subtitle=@{character_name} }} {{roll= [[[[@{worldliness}+@{cook}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Identify</b>
<input type="number" name="attr_identify" value="0" min="0" max="6">
<button type="roll" name="roll_identify" value="&{template:rolls} {{title=Identify}} {{subtitle=@{character_name} }} {{roll= [[[[@{worldliness}+@{identify}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Persuade</b>
<input type="number" name="attr_persuade" value="0" min="0" max="6">
<button type="roll" name="roll_persuade" value="&{template:rolls} {{title=persuade}} {{subtitle=@{character_name} }} {{roll= [[[[@{worldliness}+@{persuade}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Socialize</b>
<input type="number" name="attr_socialize" value="0" min="0" max="6">
<button type="roll" name="roll_socialize" value="&{template:rolls} {{title=socialize}} {{subtitle=@{character_name} }} {{roll= [[[[@{worldliness}+@{socialize}]]d6>?{Target Number?|4}]]}}"> </button>
</div><br />
<!--Holiness-->
<div class="f-row nowrap">
<h3>Holiness</h3>
<input type="number" name="attr_holiness" value="0" min="0" max="6">
<button type="roll" name="roll_holy" value="&{template:rolls} {{title=Holiness}} {{subtitle=@{character_name} }} {{roll= [[[[@{holiness}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Allure</b>
<input type="number" name="attr_allure" value="0" min="0" max="6">
<button type="roll" name="roll_allure" value="&{template:rolls} {{title=Allure}} {{subtitle=@{character_name} }} {{roll= [[[[@{holiness}+@{allure}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Invoke</b>
<input type="number" name="attr_invoke" value="0" min="0" max="6">
<button type="roll" name="roll_invoke" value="&{template:rolls} {{title=Invoke}} {{subtitle=@{character_name} }} {{roll= [[[[@{holiness}+@{invoke}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Praise</b>
<input type="number" name="attr_praise" value="0" min="0" max="6">
<button type="roll" name="roll_praise" value="&{template:rolls} {{title=praise}} {{subtitle=@{character_name} }} {{roll= [[[[@{worldliness}+@{praise}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
<div class="f-row nowrap">
<b>Wrangle</b>
<input type="number" name="attr_wrangle" value="0" min="0" max="6">
<button type="roll" name="roll_wrangle" value="&{template:rolls} {{title=wrangle}} {{subtitle=@{character_name} }} {{roll= [[[[@{worldliness}+@{wrangle}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
</section>
<!-- Traits and Feats sections -->
<section class="feat f-col">
<h2>Feats</h2>
<fieldset class="repeating_feat">
<input name="attr_feat" type="text" >
</fieldset>
</section>
<section class="trait f-col">
<h2>Traits</h2>
<fieldset class="repeating_trait">
<input name="attr_trait" type="text" >
</fieldset>
</section>
<!-- Weapons sections-->
<section class="weapon1">
<h2>Weapon One</h2>
Name: <input type="text" name="attr_weapon1name"><br />
Weapon Type:
<select name="attr_weapon1type">
<option value="0">n/a</option>
<option value="2">Melee, Simple</option>
<option value="4">Melee, Warrior</option>
<option value="6">Melee, Champion</option>
<option value="1">Ranged, Simple</option>
<option value="3">Ranged, Warrior</option>
<option value="5">Ranged, Champion</option>
</select><br />
Material:
<select name="attr_weapon1material">
<option value="" selected="selected">Select one:</option>
<option value="0">n/a</option>
<option value="-1">Clay</option>
<option value="0">Oxbone</option>
<option value="1">Wood</option>
<option value="2">Stone</option>
<option value="2">Bronze</option>
<option value="3">Starmetal</option>
<option value="3">Demonglass</option>
<option value="4">Cloudforged</option>
</select><br />
Durability: <input type="number" name="attr_weapon1durability" min="2" max="6"><button type="roll" name="durability1" value="&{template:rolls} {{title=Durability}} {{subtitle=@{weapon1name} }} {{roll= [[1d6>[[@{weapon1durability}]]]]}}"></button>
Wear: <input type="number" value ="0" min="0" max="3" name="attr_wear1"><br/><br />
Bonus Attack Dice: <input type="number" name="attr_weapon1attack" value="0"><br />
Properties: <input type="text" name="attr_w1prop"><br /><br />
<b>ATTACK</b> <button type="roll" name="attack1" value="&{template:rolls} {{title=Attack}} {{subtitle=@{weapon1name} }} {{roll= [[[[@{weapon1type}-@{wear1}+@{mightiness}+@{weapon1material}+@{weapon1attack}]]d6>?{Target Number?|4}]]}}"></button>
</section>
<section class="weapon2">
<h2>Weapon Two</h2>
Name: <input type="text" name="attr_weapon2name"><br />
Weapon Type:
<select name="attr_weapon2type">
<option value="0">n/a</option>
<option value="2">Melee, Simple</option>
<option value="4">Melee, Warrior</option>
<option value="6">Melee, Champion</option>
<option value="1">Ranged, Simple</option>
<option value="3">Ranged, Warrior</option>
<option value="5">Ranged, Champion</option>
</select><br />
Material:
<select name="attr_weapon2material">
<option value="" selected="selected">Select one:</option>
<option value="0">n/a</option>
<option value="-1">Clay</option>
<option value="0">Oxbone</option>
<option value="1">Wood</option>
<option value="2">Stone</option>
<option value="2">Bronze</option>
<option value="3">Starmetal</option>
<option value="3">Demonglass</option>
<option value="4">Cloudforged</option>
</select><br />
Durability: <input type="number" name="attr_weapon2durability" min="2" max="6"><button type="roll" name="durability1" value="&{template:rolls} {{title=Durability}} {{subtitle=@{weapon2name} }} {{roll= [[1d6>[[@{weapon2durability}]]]]}}"></button>
Wear: <input type="number" value ="0" min="0" max="3" name="attr_wear2"><br/><br />
Bonus Attack Dice: <input type="number" name="attr_weapon2attack" value="0"><br />
Properties: <input type="text" name="attr_w2prop"><br /><br />
<b>ATTACK</b> <button type="roll" name="attack2" value="&{template:rolls} {{title=Attack}} {{subtitle=@{weapon2name} }} {{roll= [[[[@{weapon2type}-@{wear2}+@{mightiness}+@{weapon2material}+@{weapon2attack}]]d6>?{Target Number?|4}]]}}"></button>
</section>
<!--Inventory -->
<section class="inv">
<h2>Inventory</h2>
<label>Food</label>
<textarea name="attr_food"></textarea>
<label>Garb</label>
<textarea name="attr_garb"></textarea>
<label>Sundries</label>
<textarea name="attr_sundries"></textarea>
</section>
<!-- Armor and Defenses -->
<section class="misc">
<h2>Defenses</h2>
<b>Equipped Garb 1:</b> <input type="text" name="attr_garb1name"> &nbsp; &nbsp; &nbsp; Defense: <input type="number" min="0" name="attr_garb1bonus"><br />
Properties: <input type="text" name="attr_garb1prop"><br />
<b>Equipped Garb 2:</b> <input type="text" name="attr_garb2name"> &nbsp; &nbsp; &nbsp; Defense: <input type="number" min="0" name="attr_garb2bonus"><br />
Properties: <input type="text" name="attr_garb2prop"><br />
<b>Equipped Shield:</b> <input type="text" name="attr_shieldname"> &nbsp; &nbsp; &nbsp; Defense: <input type="number" min="0" name="attr_shieldbonus">
<br />Durability: <input type="number" min="2" max="6" name="attr_shielddurability">
<button type="roll" name="attr_shield_durability" value="&{template:rolls} {{title=Durability}} {{subtitle=@{shieldname} }} {{roll= [[1d6>[[@{shielddurability}+@{shieldmod}]]]]}}"></button>
Wear: <input type="number" min="0" max="3" name="attr_wear">
<br />
Properties: <input type="text" name="attr_shieldprop">
<br />
<b>Other Defense Modifiers:</b> <input type="number" name="attr_otherdefmod"></b>
<br />
<h2>Backstory</h2> <!--there are probably a million better ways to align these elements but oh well -->
<div class="backs" style="text-align:justify;"><b>Kin: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Vocation: <br /><textarea name="attr_kin"></textarea> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea name="attr_vocation"></textarea> <br/>
Foes: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Religion: <br /><textarea name="attr_foes"></textarea> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea name="attr_religion"></textarea><br />
Flaws: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Aspiration: <br /><textarea name="attr_flaws"></textarea> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea name="attr_aspiration"></textarea><br />
</div>
</section>
<!-- Companions -->
<section class="companions">
<h2>Companions</h2>
<label>Attendants:</label>
<input type="number" name="attr_attendants" value="0" min="0">
<label>Craftspersons:</label>
<input type="number" name="attr_craftspersons" value="0" min="0">
<label>Shepherds:</label>
<input type="number" name="attr_shepherds" value="0" min="0">
<label>Other:</label>
<input type="number" name="attr_othercompanions" value="0" min="0">
<br /><br />
<label><b>Total Companion Upkeep:</b></label>
<input type="number" name="attr_upkeep" value="(2*@{attendants})+2*(@{craftspersons})+2*(@{shepherds})+2*(@{othercompanions})" disabled="true">
<br /><br /><br />
<h2>Livestock</h2>
<label>Sheep:</label>
<input type="number" name="attr_sheep" value="0" min="0">
</section>
</div>
<!-- NPC SHEET -->
<div class="sheet-npc">
<!-- basic NPC stats -->
<section class="npccommon">
<label><h2>NPC Characteristics</h2></label>
<b>Name: <input name="attr_npccharacter_name" type="text"><br />
Level: <input type="number" min="1" max="15" name="attr_npclevel" value="1"><br />
Order: <select name="attr_npcorder">
<option value="" selected="selected">Select one:</option>
<option value="B">Beast</option>
<option value="C">Celestial</option>
<option value="D">Demon</option>
<option value="M">Mortal</option>
<option value="T">Thoughtless</option>
</select><br />
Classification: <select name="attr_npcclass">
<option value="" selected="selected">Select one:</option>
<option value="brute">Brute</option>
<option value="controller">Controller</option>
<option value="guardian">Guardian</option>
<option value="leader">Leader</option>
<option value="mook">Mook</option>
<option value="opportunist">Opportunist</option>
<option value="sniper">Sniper</option>
</select><br />
Health: <input type="number" name="attr_npchealth" value=""> / <input type="number" name="attr_npchealth_max" value=""><br />
Willpower: <input type="number" name="attr_npcwillpower" value=""> / <input type="number" name="attr_npcwillpower_max" value=""><br />
Speed: <input type="number" name="attr_npcspeed" value=""><br />
Defense: <input type="number" name="attr_npcdefense" value=""><button type="roll" name="roll_npcdefense" value="&{template:rolls} {{title=Defense}} {{subtitle=@{npccharacter_name} }} {{roll= [[[[@{npcdefense}]]d6>?{Target Number?|4}]]}}"> </button><br />
Initiative: <input type="number" name="attr_npcinitiative" value=""><button type="roll" name="roll_npcinitiative" value="&{template:rolls} {{title=Initiative}} {{subtitle=@{npccharacter_name} }} {{roll= [[[[@{npcinitiative}]]d6&{tracker}]]}}"> </button><br />
<br />
LOOT: <input type="text" name="attr_npcloot"></b>
</section>
<!--NPC Attributes and Skills list -->
<section class="npcatts f-col nowrap">
<div class="f-row nowrap">
<h2>NPC Attributes</h2><br /><br />
<h4>Mightiness: </h4>
<input type="number" name="attr_npcmightiness" value="" min="0">
<button type="roll" name="roll_npcmightiness" value="&{template:rolls} {{title=Mightiness}} {{subtitle=@{npccharacter_name} }} {{roll= [[[[@{npcmightiness}]]d6>?{Target Number?|4}]]}}"> </button>
</div><br />
<div class="f-row nowrap">
<h4>Craftiness: </h4>
<input type="number" name="attr_npccraftiness" value="" min="0">
<button type="roll" name="roll_npccraftiness" value="&{template:rolls} {{title=Craftiness}} {{subtitle=@{npccharacter_name} }} {{roll= [[[[@{npccraftiness}]]d6>?{Target Number?|4}]]}}"> </button>
</div><br />
<div class="f-row nowrap">
<h4>Worldliness: </h4>
<input type="number" name="attr_npcworldliness" value="0" min="0" max="6">
<button type="roll" name="roll_npcworldliness" value="&{template:rolls} {{title=Worldliness}} {{subtitle=@{npccharacter_name} }} {{roll= [[[[@{npcworldliness}]]d6>?{Target Number?|4}]]}}"> </button>
</div><br />
<div class="f-row nowrap">
<h4>Holiness: </h4>
<input type="number" name="attr_npcholiness" value="0" min="0" max="6">
<button type="roll" name="roll_npcholiness" value="&{template:rolls} {{title=Holiness}} {{subtitle=@{npccharacter_name} }} {{roll= [[[[@{npcholiness}]]d6>?{Target Number?|4}]]}}"> </button>
</div>
</section>
<section class="npcskills f-col nowrap">
<h2>Skills</h2><b>
Skill: <input type="text" name="npcskill1"> <input type="number" name="npcskill1v" value="" min="0">
<button type="roll" name="roll_npcskill1" value="&{template:rolls} {{title=@{npcskill1} }} {{roll= [[[[@{npcskill1v}]]d6>?{Target Number?|4}]]}}"></button><br />
Skill: <input type="text" name="npcskill2"> <input type="number" name="npcskill2v" value="" min="0">
<button type="roll" name="roll_npcskill2" value="&{template:rolls} {{title=@{npcskill2} }} {{roll= [[[[@{npcskill2v}]]d6>?{Target Number?|4}]]}}"></button><br />
Skill: <input type="text" name="npcskill3"> <input type="number" name="npcskill3v" value="" min="0">
<button type="roll" name="roll_npcskill3" value="&{template:rolls} {{title=@{npcskill3} }} {{roll= [[[[@{npcskill3v}]]d6>?{Target Number?|4}]]}}"></button><br />
Skill: <input type="text" name="npcskill4"> <input type="number" name="npcskill4v" value="" min="0">
<button type="roll" name="roll_npcskill4" value="&{template:rolls} {{title=@{npcskill4} }} {{roll= [[[[@{npcskill4v}]]d6>?{Target Number?|4}]]}}"></button><br />
Skill: <input type="text" name="npcskill5"> <input type="number" name="npcskill5v" value="" min="0">
<button type="roll" name="roll_npcskill5" value="&{template:rolls} {{title=@{npcskill5} }} {{roll= [[[[@{npcskill5v}]]d6>?{Target Number?|4}]]}}"></button><br />
Skill: <input type="text" name="npcskill6"> <input type="number" name="npcskill6v" value="" min="0">
<button type="roll" name="roll_npcskill6" value="&{template:rolls} {{title=@{npcskill6} }} {{roll= [[[[@{npcskill6v}]]d6>?{Target Number?|4}]]}}"></button><br />
Skill: <input type="text" name="npcskill7"> <input type="number" name="npcskill7v" value="" min="0">
<button type="roll" name="roll_npcskill7" value="&{template:rolls} {{title=@{npcskill7} }} {{roll= [[[[@{npcskill7v}]]d6>?{Target Number?|4}]]}}"></button><br />
Skill: <input type="text" name="npcskill8"> <input type="number" name="npcskill8v" value="" min="0">
<button type="roll" name="roll_npcskill8" value="&{template:rolls} {{title=@{npcskill8} }} {{roll= [[[[@{npcskill8v}]]d6>?{Target Number?|4}]]}}"></button><br />
Skill: <input type="text" name="npcskill9"> <input type="number" name="npcskill9v" value="" min="0">
<button type="roll" name="roll_npcskill9" value="&{template:rolls} {{title=@{npcskill9} }} {{roll= [[[[@{npcskill9v}]]d6>?{Target Number?|4}]]}}"></button><br />
Skill: <input type="text" name="npcskill10"> <input type="number" name="npcskill10v" value="" min="0">
<button type="roll" name="roll_npcskill10" value="&{template:rolls} {{title=@{npcskill10} }} {{roll= [[[[@{npcskill10v}]]d6>?{Target Number?|4}]]}}"></button></b>
</section>
<!-- NPC Traits sections -->
<section class="npctrait f-col">
<h2>Traits</h2>
<fieldset class="repeating_trait">
<input name="attr_npctraits" type="text" >
</fieldset>
</section>
<!-- NPC Feats sections -->
<section class="npcfeat f-col">
<h2>Feats</h2>
<fieldset class="repeating_trait">
<input name="attr_npcfeats" type="text" >
</fieldset>
</section>
<!-- NPC Attacks -->
<!-- Attack One -->
<section class="npcattacks">
<h2>NPC Attacks</h2>
<h4>Attack One</h4>
Name: <input type="text" name="attr_npcattack1name"><br />
Damage: <input type="text" name="attr_npcattack1damage"><br />
Damage Type <select name="attr_npcattack1type">
<option value="" selected="selected">Select one:</option>
<option value="b">Bruising</option>
<option value="c">Cutting</option>
<option value="f">Freezing</option>
<option value="p">Piercing</option>
<option value="s">Scorching</option>
<option value="u">Unblockable</option>
<option value="z">Zapping</option>
</select><br />
Properties: <input type="text" name="attr_npcattack1prop"><br />
Attack <button type="roll" name="npcattack1" value="&{template:rolls} {{title=@{npccharacter_name}}} {{subtitle=@{npcattack1name} }} {{roll= [[[[@{npcattack1damage}]]d6>?{Target Number?|4}]]}}"></button>
<br /><br />
<!-- Attack Two -->
<h4>Attack Two</h4>
Name: <input type="text" name="attr_npcattack2name"><br />
Damage: <input type="text" name="attr_npcattack2damage"><br />
Damage Type <select name="attr_npcattack2type">
<option value="" selected="selected">Select one:</option>
<option value="b">Bruising</option>
<option value="c">Cutting</option>
<option value="f">Freezing</option>
<option value="p">Piercing</option>
<option value="s">Scorching</option>
<option value="u">Unblockable</option>
<option value="z">Zapping</option>
</select><br />
Properties: <input type="text" name="attr_npcattack2prop"><br />
Attack <button type="roll" name="npcattack2" value="&{template:rolls} {{title=@{npccharacter_name}}} {{subtitle=@{npcattack2name} }} {{roll= [[[[@{npcattack2damage}]]d6>?{Target Number?|4}]]}}"></button>
<br /><br />
<!-- Attack Three -->
<h4>Attack Three</h4>
Name: <input type="text" name="attr_npcattack3name"><br />
Damage: <input type="text" name="attr_npcattack3damage"><br />
Damage Type <select name="attr_npcattack3type">
<option value="" selected="selected">Select one:</option>
<option value="b">Bruising</option>
<option value="c">Cutting</option>
<option value="f">Freezing</option>
<option value="p">Piercing</option>
<option value="s">Scorching</option>
<option value="u">Unblockable</option>
<option value="z">Zapping</option>
</select><br />
Properties: <input type="text" name="attr_npcattack3prop"><br />
Attack <button type="roll" name="npcattack3" value="&{template:rolls} {{title=@{npccharacter_name}}} {{subtitle=@{npcattack3name} }} {{roll= [[[[@{npcattack3damage}]]d6>?{Target Number?|4}]]}}"></button>
</section>
<footer class="f-col f-center">
<span><b><i>©2024 Space Age Games</i></b></span>
</footer>
</main>
<!-- roll template -->
<rolltemplate class="sheet-rolltemplate-rolls">
<div class="sheet-container">
<div class="sheet-header">
{{#title}}<div class="sheet-title">{{title}}</div>{{/title}}
{{#name}}<div class="sheet-name">{{name}}</div>{{/name}}
{{#subtitle}}<div class="sheet-subtitle">{{subtitle}}</div>{{/subtitle}}
</div>
<div class="sheet-content">
{{#allprops() title name subtitle desc}}
<div class="sheet-key">{{key}}</div>
<div class="sheet-value">{{value}}</div>
{{/allprops() title name subtitle desc}}
{{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}
</div>
</div>
</rolltemplate>
<!-- sheetworker scripts -->
<script type="text/worker">
on("change:garb1bonus change:garb2bonus change:shieldbonus change:otherdefmod change:wear sheet:opened", function() {
getAttrs(["garb1bonus","garb2bonus","shieldbonus","otherdefmod","wear"], function(values) {
let garb1bonus = parseInt(values.garb1bonus)||0;
let garb2bonus = parseInt(values.garb2bonus)||0;
let shieldbonus = parseInt(values.shieldbonus)||0;
let otherdefmod = parseInt(values.otherdefmod)||0;
let wear = parseInt(values.wear)||0;
let def = garb1bonus + garb2bonus + shieldbonus + otherdefmod - wear;
setAttrs({
"defense": def
});
});
});
const buttonlist = ["pc","npc"];
buttonlist.forEach(button => {
on(`clicked:${button}`, function() {
setAttrs({
sheetTab: button
});
});
});
</script> CSS: /*----------------- Main Layout ------------------*/
/* A CSS Grid example using "grid-template-areas"
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas</a>
*/
/* PC Sheet Tab */
.sheet-pc {
display: grid;
width: 980px;
height: 1535px;
grid-gap: 5px;
grid-template-columns: 225px 245px 245px 235px;
grid-template-rows: 70px 415px 385px 625px 20px;
grid-template-areas:"header header header header"
"skill common common feat"
"skill weapon1 weapon2 trait"
"misc misc inv companions"
"footer footer footer footer";
}
/*-----------NPC Sheet Tab---------------*/
.sheet-npc {
display: grid;
grid-gap: 5px;
grid-template-columns: 225px 245px 245px 235px;
grid-template-rows: 460px 340px;
grid-template-areas:"npcskills npccommon npcattacks npctrait"
"npcskills npcatts npcattacks npcfeat";
/*----------------- GENERAL CSS ------------------*/
section {
padding: 5px;
border-style: solid;
}
/* CSS Flexbox styling, used for adjusting how content inside section behaves */
.f-col {
display: flex;
flex-direction: column;
}
.f-row {
display: flex;
flex-direction: row;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
.nowrap {
display: flex;
flex-wrap: nowrap;
}
.f-center {
align-items: center;
justify-content: center;
}
/*----------------- Text & Input styling -----------------*/
@import url("<a href="https://fonts.googleapis.com/css?family=Lexend&display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Lexend&display=swap</a>");
/* these are for overwriting default CSS that comes from Roll20 */
* {
font-family: "Lexend";
}
h2 {
text-align: center;
font-size: 1.4em;
color: #B27227;
}
.sheet-pc label{
margin: 2px;
padding: 2px;
}
.sheet-pc input[type="number"] input[type="text"]{
margin: 2px 4px;
}
.sheet-pc textarea {
width:95%;
height:95px;
}
#number {
width: 5em;
}
/*Configure the tab buttons*/
.charsheet .sheet-pc,
.charsheet .sheet-npc,
display: grid;
}
/* show the selected tab */
.charsheet .sheet-tabstoggle:not([value="pc"]) ~ div.sheet-pc,
.charsheet .sheet-tabstoggle:not([value="npc"]) ~ div.sheet-npc {
display: none;
}
/*------------- Section-specific CSS -------------*/
.desc textarea {
width:95%;
height:35px !important;
}
.backs textarea {
width:200px;
height:62px !important;
}
.header {
grid-area: header;
background-color: #C99439;
flex-direction: column;
}
.skill {
grid-area: skill;
background-color: #E3D9CA;
justify-content: space-evenly;
}
.common {
grid-area: common;
background-color: #E3D9CA;
}
.feat {
grid-area: feat;
background-color: #E3D9CA;
}
.feat .repcontainer[data-groupname="repeating_feat"]{
padding-bottom: 0.2em;
}
.feat .repcontainer[data-groupname="repeating_feat"] .repitem{
margin: 4px 0px;
}
.trait {
grid-area: trait;
background-color: #E3D9CA;
}
.trait .repcontainer[data-groupname="repeating_trait"]{
padding-bottom: 0.2em;
}
.trait .repcontainer[data-groupname="repeating_trait"] .repitem{
margin: 4px 0px;
}
.weapon1 {
grid-area: weapon1;
background-color: #E3D9CA;
}
.weapon2 {
grid-area: weapon2;
background-color: #E3D9CA;
}
.inv {
grid-area: inv;
background-color: #E3D9CA;
}
.misc {
grid-area: misc;
background-color: #E3D9CA;
}
.companions {
grid-area: companions;
background-color: #E3D9CA;
}
.npccommon {
grid-area: npccommon;
background-color: #E3D9CA;
}
.npcatts {
grid-area: npcatts;
background-color: #E3D9CA;
}
.npcskills {
grid-area: npcskills;
background-color: #E3D9CA;
}
.npctrait {
grid-area: npctrait;
background-color: #E3D9CA;
}
.npctrait .repcontainer[data-groupname="repeating_npctrait"]{
padding-bottom: 0.2em;
}
.npctrait .repcontainer[data-groupname="repeating_npctrait"] .repitem{
margin: 4px 0px;
}
.npcfeat {
grid-area: npcfeat;
background-color: #E3D9CA;
}
.npcfeat .repcontainer[data-groupname="repeating_npcfeat"]{
padding-bottom: 0.2em;
}
.npcfeat .repcontainer[data-groupname="repeating_npcfeat"] .repitem{
margin: 4px 0px;
}
.npcattacks {
grid-area: npcattacks;
background-color: #E3D9CA;
}
.npcloot {
grid-area: npcloot;
background-color: #E3D9CA;
}
footer {
grid-area: footer;
background-color: #C99439;
}
/*------------------------------------*\
#ROLL TEMPLATES
\*------------------------------------*/
.sheet-rolltemplate-rolls {
font-family: "Lexend";
}
.sheet-rolltemplate-rolls .sheet-container {
border: 3px solid black;
border-radius: 3px;
}
.sheet-rolltemplate-rolls .sheet-header {
background-color: var(--header-bg-color, #a83521);
color: var(--header-text-color, #FFF);
text-align: left;
text-transform: capitalize;
padding: 5px;
border-bottom: 2px solid black;
}
.sheet-rolltemplate-rolls .sheet-title,
.sheet-rolltemplate-rolls .sheet-name {
font-size: 1.4em;
font-weight: bold;
}
.sheet-rolltemplate-rolls .sheet-subtitle {
font-size: 1em;
}
.sheet-rolltemplate-rolls .sheet-container {
--header-bg-color: #a83521;
--header-text-color: #FFF;
}
.sheet-rolltemplate-rolls .sheet-content {
display: grid;
background: #FFF;
grid-template-columns: auto auto;
line-height: 1.4em;
}
.sheet-rolltemplate-rolls .sheet-content > div {
padding: 5px;
}
.sheet-rolltemplate-rolls .sheet-content .sheet-key {
font-weight: bold;
padding-right: 10px;
text-align: right;
}
.sheet-rolltemplate-rolls .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-rolls .sheet-content :nth-child(4n) {
background: #EEE;
}
