If you want a sheet to store the data here is the code i have so far. Next I was going to work on macros, but they said they hope to have everything for roll20 by release date or soon after. (aug something) HTML: <div class="sheet-PC"> <div class="sheet-Info sheet-block"> <span></span> <select name="attr_kin" style="display: inline-block; position: relative; left: 65px; top: 55px; width: 120px; height: 17px; font-size: small;"> <option value="Human">Human</option> <option value="Halfling">Halfling</option> <option value="Dwarf">Dwarf</option> <option value="Elf">Elf</option> <option value="Mallard">Mallard</option> <option value="Wolfkin">Wolfkin</option> </select> <select name="attr_age" style="display: inline; position: relative; left: 195px; top: 20px; width: 75px; height: 20px; font-size: small; text-align: right;"> <option value="Young">Young</option> <option value="Adult">Adult</option> <option value="old">Old</option> </select> <select name="attr_profession" style="display: inline; position: relative; left: 105px; top: 7px; width: 150px; height: 20px; font-size: small;"> <option value="Artisan">Artisan</option> <option value="Bard">Bard</option> <option value="Fighter">Fighter</option> <option value="Hunter">Hunter</option> <option value="Knight">Knight</option> <option value="Mage">Mage - Animism</option> <option value="Mage">Mage - Elementalism</option> <option value="Mage">Mage - Mentalism</option> <option value="Mariner">Mariner</option> <option value="Merchant">Merchant</option> <option value="Scholar">Scholar</option> <option value="Thief">Thief</option> </select> <textarea name="attr_weakness" style="display: block; position: relative; left: 45px; top: -5px; resize:none; width: 215px; height: 50px; font-size: x-small;"></textarea> </span> </div> <div class="sheet-Name sheet-block"> <input type="text" name="attr_character_name" style="display: block; position: relative; left: 15px; top: 130px; width: 205px; height: 35px; text-align: center; font-size: Large;" /> </div> <div class="sheet-Appearance sheet-block"> <textarea name="attr_apperance" style="display: block; position: relative; left: 0px; top: 35px; resize:none; width: 205px; height: 85px; font-size: x-small;"></textarea> </div> <div class="sheet-Attributes sheet-block"> <span> <input type="text" name="attr_str" style="display: inline; position: relative; left: 190px; top: 9px; width: 40px; height: 40px; text-align: center; font-size: Large;" /> <input type="text" name="attr_con" style="display: inline; position: relative; left: 222px; top: 9px; width: 40px; height: 40px; text-align: center; font-size: Large;" /> <input type="text" name="attr_agl" style="display: inline; position: relative; left: 255px; top: 9px; width: 40px; height: 40px; text-align: center; font-size: Large;" /> <input type="text" name="attr_int" style="display: inline; position: relative; left: 287px; top: 9px; width: 40px; height: 40px; text-align: center; font-size: Large;" /> <input type="text" name="attr_wil" style="display: inline; position: relative; left: 320px; top: 9px; width: 40px; height: 40px; text-align: center; font-size: Large;" /> <input type="text" name="attr_cha" style="display: inline; position: relative; left: 350px; top: 9px; width: 40px; height: 40px; text-align: center; font-size: Large;" /> </span> <span> <input type="checkbox" name="attr_EXHAUSTED" style="left: 195px; width: 30px; height: 30px;"> <input type="checkbox" name="attr_SICKLY" style="left: 237px; width: 30px; height: 30px;"> <input type="checkbox" name="attr_DAZED" style="left: 279px; width: 30px; height: 30px;"> <input type="checkbox" name="attr_ANGRY" style="left: 323px; width: 30px; height: 30px;"> <input type="checkbox" name="attr_SCARED" style="left: 366px; width: 30px; height: 30px;"> <input type="checkbox" name="attr_DISHEARTENED" style="left: 408px; width: 30px; height: 30px;"> </span> </div> <div class="sheet-DamageBonSTR sheet-block"> <span> <input type="text" name="attr_DAMAGEBONSTR" style="position: relative; left: 195px; top: 10px; width: 50px; height: 30px; text-align: center; font-size: medium;" /> </span> </div> <div class="sheet-DamageBonAGL sheet-block"> <span> <input type="text" name="attr_DAMAGEBONAGL" style="position: relative; left: 160px; top: 10px; width: 50px; height: 30px; text-align: center; font-size: medium;" /> </span> </div> <div class="sheet-Movement sheet-block"> <span> <input type="text" name="attr_MOVEMENT" style="position: relative; left: 150px; top: 10px; width: 50px; height: 30px; text-align: center; font-size: medium;" /> </span> </div> <div class="sheet-Abillities sheet-block"> <div style="width: fit-content; display: block; position: relative; left: 45px; top: 45px; max-width: 170px; max-height: 280px; width: 170px; height: 280px;"> <fieldset class="repeating_abilitiesspells"> <input type="text" name="attr_abilitiesspellsname" value="" style="width: 120px; height: 18px; font-size: small;"> </fieldset> </div> <span> <input type="text" name="attr_gold" style="display: block; position: relative; left: 125px; top: 12px; width: 70px; height: 30px; text-align: center; font-size: medium;" /> <input type="text" name="attr_silver" style="display: block; position: relative; left: 125px; top: 23px; width: 70px; height: 30px; text-align: center; font-size: medium;" /> <input type="text" name="attr_copper" style="display: block; position: relative; left: 125px; top: 30px; width: 70px; height: 30px; text-align: center; font-size: medium;" /> </span> </div> <div class="sheet-Skills sheet-block"> <span> <div style="width: fit-content; display: block; position: relative; left: 10px; top: 45px; max-width: 100px; max-height: 370px; width: 100px; height: 370px;"> <input type="checkbox" name="attr_AcrobaticsAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Acrobatics" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_AwarenessAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Awareness" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_BarteringAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Bartering" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_BeastLoreAM" style="width: 20px; height: 17px;"><input type="text" name="attr_BeastLore" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_BluffingAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Bluffing" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_BushcraftAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Bushcraft" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_CraftingAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Crafting" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_EvadeAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Evade" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_HealingAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Healing" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_HuntingFishingAM" style="width: 20px; height: 17px;"><input type="text" name="attr_HuntingFishing" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_LanguagesAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Languages" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_MythsLegendsAM" style="width: 20px; height: 17px;"><input type="text" name="attr_MythsLegends" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_PerformanceAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Performance" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_PersuasionAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Persuasion" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_RidingAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Riding" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_SeamanshipAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Seamanship" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_SleightofHandAM" style="width: 20px; height: 17px;"><input type="text" name="attr_SleightofHand" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_SneakingAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Sneaking" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_SpotHiddenAM" style="width: 20px; height: 17px;"><input type="text" name="attr_SpotHidden" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_SwimmingAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Swimming" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 35px; height: 13px; border: none;"></button> </div> <div style="width: fit-content; display: inline-block; position: relative; left: 175px; top: -310px; max-width: 100px; max-height: 370px; width: 100px; height: 370px;"> <input type="checkbox" name="attr_AxesAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Axes" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 15px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_BowsAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Bows" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 15px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_BrawlingAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Brawling" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 15px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_CrossbowsAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Crossbows" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 15px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_HammersAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Hammers" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 15px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_KnivesAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Knives" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 15px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_SlingsAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Slings" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 15px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_SpearsAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Spears" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 15px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_StavesAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Staves" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 15px; height: 13px; border: none;"></button> <input type="checkbox" name="attr_SwordsAM" style="width: 20px; height: 17px;"><input type="text" name="attr_Swords" style="width: 30px; height: 17px; font-size: x-small;" /><button type="roll" style="background: transparent; width: 15px; height: 13px; border: none;"></button> </div> <div style="width: fit-content; display: inline-block; position: relative; left: 50px; top: -140px; max-width: 180px; max-height: 125px; width: 180px; height: 125px;"> <button type="roll" style="background: transparent; width: 10px; height: 13px; border: none;"></button><input type="checkbox" name="attr_secondaryskill1am" style="width: 20px; height: 17px;"><input type="text" name="attr_secondaryskill1" style="width: 30px; height: 17px; font-size: x-small;" /><input type="text" name="attr_secondaryskill1name" style="width: 100px; height: 17px; font-size: x-small;" /> <button type="roll" style="background: transparent; width: 10px; height: 13px; border: none;"></button><input type="checkbox" name="attr_secondaryskill2am" style="width: 20px; height: 17px;"><input type="text" name="attr_secondaryskill2" style="width: 30px; height: 17px; font-size: x-small;" /><input type="text" name="attr_secondaryskill2name" style="width: 100px; height: 17px; font-size: x-small;" /> <button type="roll" style="background: transparent; width: 10px; height: 13px; border: none;"></button><input type="checkbox" name="attr_secondaryskill3am" style="width: 20px; height: 17px;"><input type="text" name="attr_secondaryskill3" style="width: 30px; height: 17px; font-size: x-small;" /><input type="text" name="attr_secondaryskill3name" style="width: 100px; height: 17px; font-size: x-small;" /> <button type="roll" style="background: transparent; width: 10px; height: 13px; border: none;"></button><input type="checkbox" name="attr_secondaryskill4am" style="width: 20px; height: 17px;"><input type="text" name="attr_secondaryskill4" style="width: 30px; height: 17px; font-size: x-small;" /><input type="text" name="attr_secondaryskill4name" style="width: 100px; height: 17px; font-size: x-small;" /> <button type="roll" style="background: transparent; width: 10px; height: 13px; border: none;"></button><input type="checkbox" name="attr_secondaryskill5am" style="width: 20px; height: 17px;"><input type="text" name="attr_secondaryskill5" style="width: 30px; height: 17px; font-size: x-small;" /><input type="text" name="attr_secondaryskill5name" style="width: 100px; height: 17px; font-size: x-small;" /> <button type="roll" style="background: transparent; width: 10px; height: 13px; border: none;"></button><input type="checkbox" name="attr_secondaryskill6am" style="width: 20px; height: 17px;"><input type="text" name="attr_secondaryskill6" style="width: 30px; height: 17px; font-size: x-small;" /><input type="text" name="attr_secondaryskill6name" style="width: 100px; height: 17px; font-size: x-small;" /> <button type="roll" style="background: transparent; width: 10px; height: 13px; border: none;"></button><input type="checkbox" name="attr_secondaryskill7am" style="width: 20px; height: 17px;"><input type="text" name="attr_secondaryskill7" style="width: 30px; height: 17px; font-size: x-small;" /><input type="text" name="attr_secondaryskill7name" style="width: 100px; height: 17px; font-size: x-small;" /> </div> </span> </div> <div class="sheet-Inventory sheet-block"> <span> <div style="width: fit-content; display: inline-block; position: relative; left: 25px; top: 40px; max-width: 160px; max-height: 190px; width: 160px; height: 125px;"> <input type="text" name="attr_inventory1" style="width: 157px; height: 19px; font-size: x-small;" /> <input type="text" name="attr_inventory2" style="width: 157px; height: 19px; font-size: x-small;" /> <input type="text" name="attr_inventory3" style="width: 157px; height: 19px; font-size: x-small;" /> <input type="text" name="attr_inventory4" style="width: 157px; height: 19px; font-size: x-small;" /> <input type="text" name="attr_inventory5" style="width: 157px; height: 19px; font-size: x-small;" /> <input type="text" name="attr_inventory6" style="width: 157px; height: 19px; font-size: x-small;" /> <input type="text" name="attr_inventory7" style="width: 157px; height: 19px; font-size: x-small;" /> <input type="text" name="attr_inventory8" style="width: 157px; height: 19px; font-size: x-small;" /> <input type="text" name="attr_inventory9" style="width: 157px; height: 19px; font-size: x-small;" /> <input type="text" name="attr_inventory10" style="width: 157px; height: 19px; font-size: x-small;" /> <textarea name="attr_Memento" style="display: inline-block; position: relative; left: -10px; top: 15px; resize:none; width: 165px; height: 60px; font-size: small;"></textarea> <textarea name="attr_tinyitems" style="display: inline-block; position: relative; left: -5px; top: 20px; resize:none; width: 155px; height: 95px; font-size: small;"></textarea> </div> </span> </div> <div class="sheet-Rest sheet-block"> <span> <input type="checkbox" name="attr_roundrest" style="left: 555px; top: 7px; width: 20px; height: 17px;"> <input type="checkbox" name="attr_stretchrest" style="left: 615px; top: 7px; width: 20px; height: 17px;"> </span> </div> <div class="sheet-Armor sheet-block"> <input type="text" name="attr_armorrating" style="display: inline; position: relative; left: 67px; top: 18px; width: 25px; height: 25px;"> <input type="text" name="attr_armortype" style="display: inline; position: relative; left: 120px; top: -20px; width: 150px; height: 25px;"> <span> <input type="checkbox" name="attr_baneonsneaking" style="left: 108px; top: -12px; width: 20px; height: 17px;"> <input type="checkbox" name="attr_baneonevade" style="left: 156px; top: -12px; width: 20px; height: 17px;"> <input type="checkbox" name="attr_baneonacrobatics" style="left: 63px; top: 0px; width: 20px; height: 17px;"> </span> </div> <div class="sheet-Helmet sheet-block"> <span> <input type="text" name="attr_helmetrating" style="display: inline; position: relative; left: 25px; top: 5px; width: 25px; height: 25px;"> <input type="text" name="attr_helmettype" style="display: inline; position: relative; left: 50px; top: 13px; width: 150px; height: 25px;"> </span> <span> <input type="checkbox" name="attr_baneonawareness" style="left: 65px; top: 4px; width: 20px; height: 17px;"> <input type="checkbox" name="attr_baneonrangedattacks" style="left: 42px; top: 15px; width: 20px; height: 17px;"> </span> </div> <div class="sheet-Willpower sheet-block"> <span> <input type="text" name="attr_willpower" style="display: inline; position: relative; left: 15px; top: 30px; width: 50px; height: 25px;; text-align: center; font-size: Large;" /> <div style="display: inline; position: relative; left: 17px; top: 22px;"> <input type="checkbox" name="attr_wp1" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp2" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp3" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp4" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp5" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp6" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp7" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp8" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp9" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp10" style="width: 11px; height: 11px;"> </div> <div style="display: inline-block; position: relative; left: 70px; top: 20px;"> <input type="checkbox" name="attr_wp11" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp12" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp13" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp14" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp15" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp16" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp17" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp18" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp19" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_wp20" style="width: 11px; height: 11px;"> </div> </span> </div> <div class="sheet-Weapons"> <span style="display: block; position: relative; left: 40px; top: 38px;"> <table> <tr> <td><input type="text" name="attr_weapon_1_name" style="width: 135px; height: 20px;"></td> <td><input type="text" name="attr_weapon_1_grip" style="width: 40px; height: 20px;"></td> <td><input type="text" name="attr_weapon_1_range" style="width: 60px; height: 20px;"></td> <td><input type="text" name="attr_weapon_1_damage" style="width: 60px; height: 20px;"></td> <td><input type="text" name="attr_weapon_1_durability" style="width: 40px; height: 20px;"></td> <td><input type="text" name="attr_weapon_1_features" style="width: 135px; height: 20px; font-size: x-small;"></td> </tr> <tr> <td><input type="text" name="attr_weapon_2_name" style="width: 135px; height: 20px;"></td> <td><input type="text" name="attr_weapon_2_grip" style="width: 40px; height: 20px;"></td> <td><input type="text" name="attr_weapon_2_range" style="width: 60px; height: 20px;"></td> <td><input type="text" name="attr_weapon_2_damage" style="width: 60px; height: 20px;"></td> <td><input type="text" name="attr_weapon_2_durability" style="width: 40px; height: 20px;"></td> <td><input type="text" name="attr_weapon_2_features" style="width: 135px; height: 20px; font-size: x-small;"></td> </tr> <tr> <td><input type="text" name="attr_weapon_3_name" style="width: 135px; height: 20px;"></td> <td><input type="text" name="attr_weapon_3_grip" style="width: 40px; height: 20px;"></td> <td><input type="text" name="attr_weapon_3_range" style="width: 60px; height: 20px;"></td> <td><input type="text" name="attr_weapon_3_damage" style="width: 60px; height: 20px;"></td> <td><input type="text" name="attr_weapon_3_durability" style="width: 40px; height: 20px;"></td> <td><input type="text" name="attr_weapon_3_features" style="width: 135px; height: 20px; font-size: x-small;"></td> </tr> </table> </span> </div> <div class="sheet-HitPoints sheet-block"> <input type="text" name="attr_hitpoints" style="display: inline-block; position: relative; left: 15px; top: 30px; width: 50px; height: 25px; text-align: center; font-size: Large;" /> <div style="display: inline; position: relative; left: 70px; top: -10px;"> <input type="checkbox" name="attr_hp1" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp2" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp3" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp4" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp5" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp6" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp7" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp8" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp9" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp10" style="width: 11px; height: 11px;"> </div> <div style="display: inline-block; position: relative; left: 70px; top: -20px;"> <input type="checkbox" name="attr_hp11" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp12" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp13" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp14" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp15" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp16" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp17" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp18" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp19" style="width: 11px; height: 11px;"> <input type="checkbox" name="attr_hp20" style="width: 11px; height: 11px;"> </div> <span style="display: block; position: relative; left: 95px; top: -8px;"> <input type="checkbox" name="attr_DRS1" style="width: 15px; height: 15px;"> <input type="checkbox" name="attr_DRS2" style="width: 15px; height: 15px;"> <input type="checkbox" name="attr_DRS3" style="width: 15px; height: 15px;"> </span> <span style="display: inline; position: relative; left: 160px; top: -35px;"> <input type="checkbox" name="attr_DRF1" style="width: 15px; height: 15px;"> <input type="checkbox" name="attr_DRF2" style="width: 15px; height: 15px;"> <input type="checkbox" name="attr_DRF3" style="width: 15px; height: 15px;"> </span> </div> </div> CSS: /*Configure the tab buttons*/
.sheet-PC,
.sheet-config,
.sheet-journal {
display: none;
}
/* show the selected tab */
.sheet-tabstoggle[value="PC"] ~ div.sheet-PC,
.sheet-tabstoggle[value="configuration"] ~ div.sheet-config,
.sheet-tabstoggle[value="journal"] ~ div.sheet-journal {
display: block;
}
.sheet-PC {
background: url(<a href="https://s3.amazonaws.com/files.d20.io/images/338609416/D1AmTCQ6wCi2jD94pOg6wg/original.jpg" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/338609416/D1AmTCQ6wCi2jD94pOg6wg/original.jpg</a>);
width: 800px;
height: 1033px;
max-width: 800px;
max-height: 1033px;
border: none;
margin: 0px;
background-repeat: no-repeat;
}
.sheet-PC{
display: grid;
grid-template-columns: 40px 190px 45px 255px 40px 230px;
grid-template-rows: 180px 100px 45px 445px 30px 90px 143px;
grid-template-areas: "Info Info Info Name Appearance Appearance"
"Attributes Attributes Attributes Attributes Attributes Attributes"
"DamageBonSTR DamageBonSTR DamageBonSTR DamageBonAGL Movement Movement"
"Abillities Abillities Skills Skills Skills Inventory"
"Rest Rest Rest Rest Rest Rest"
"Armor Armor Armor Helmet Willpower Willpower"
"Weapons Weapons Weapons Weapons HitPoints HitPoints";
}
div.sheet-block{
display: grid;
}
div.sheet-Info{
grid-area: Info;
}
div.sheet-Name{
grid-area: Name;
}
div.sheet-Appearance{
grid-area: Appearance;
}
div.sheet-Attributes{
grid-area: Attributes;
}
div.sheet-DamageBonSTR{
grid-area: DamageBonSTR;
}
div.sheet-DamageBonAGL{
grid-area: DamageBonAGL;
}
div.sheet-Movement{
grid-area: Movement;
}
div.sheet-Abillities{
grid-area: Abillities;
}
div.sheet-Skills{
grid-area: Skills;
}
div.sheet-Inventory{
grid-area: Inventory;
}
div.sheet-Rest{
grid-area: Rest;
}
div.sheet-Armor{
grid-area: Armor;
}
div.sheet-Helmet{
grid-area: Helmet;
}
div.sheet-Willpower{
grid-area: Willpower;
}
div.sheet-Weapons{
grid-area: Weapons;
}
div.sheet-HitPoints{
grid-area: HitPoints;
}
input[type="text"], input[type="number"]
{
background: transparent;
border-color: transparent;
font-weight: bold;
}
textarea{
background: transparent;
border-color: transparent;
font-weight: bold;
-webkit-appearance: none;
}
select{
padding: 0px;
color: #000;
font-weight: bold;
border-color: transparent;
background: transparent;
-webkit-appearance: none;
}
select option{
color: #FFF;
background-color: #277158;
}
input[type="checkbox"]{
-webkit-appearance: initial;
appearance: initial;
background: transparent;
width: 20px;
height: 20px;
border: none;
position: relative;
}
input[type="checkbox"]:checked:after {
/* Heres your symbol replacement */
content: "X";
color: #FF0000;
font-size: large;
font-weight: bold;
/* The following positions my tick in the center,
* but you could just overlay the entire box
* with a full after element with a background if you want to */
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
/*
* If you want to fully change the check appearance, use the following:
* content: " ";
* width: 100%;
* height: 100%;
* background: blue;
* top: 0;
* left: 0;
*/
}
button.sheet-nod20:before {
content: "" !important;
}
.charsheet .repcontrol_add,
.charsheet .repcontrol_edit,
.charsheet .repcontrol_del {
background:#21674f;
color:white;
font-weight:bold;
font-family:mono;
border:1px solid black;
border-radius:5px;
font-size:9px;
box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.5);
}