Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Need Help with Coding for D20 Modern Character Sheet

So I have created a D20 Character Sheet for a modern, zombie apocalypse game and wanted to incorporate a humanity counter - similar to the Vampire Masquerade/World of Darkness Humanity's system. My goal is to have a circle of boxes and when a player clicks on a box, they can select an x. I did that, it works for me, but my players can only select 4 or 5 x's in the boxes. The others, when they click on the box, disappears. If the hold down on the box, they can see the x, but cannot select it.  I am not entirely sure that I am explaining it well enough without showing it, so I've included a bit of my coding (from World of Darkness/Vampire Masquerade). Any help would be very appreciated! It would make it so much easier if my players could control it and I didn't have to stop what I was doing to open their character sheet, and mark an x - and then pick up where I left of every so often. Thanks again,  Emily <!---------------------------Humanity Points-----------------------------------> <h3 style="text-align: center;">Humanity Points</h3> <div> <div class='sheet-6colrow'> <div class='sheet-col'> <table style="width:848px;"> </table> <div> <div style="height:165px"> <div> <h1 style="text-align:center;"> <select name="attr_quintessence1"> <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence2" > <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence3" > <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence4"> <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence5"> <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence6"> <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence7"> <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence8"> <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence9"> <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence10" > <option></option> <option value="Paradox">✖</option> </select> </div> <div> <h1 style="text-align:center;"> <select name="attr_quintessence20"> <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence19" > <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence18" > <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence17" > <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence16"> <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence15"> <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence14" > <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence13"> <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence12"> <option></option> <option value="Paradox">✖</option> </select> <select name="attr_quintessence11" > <option></option> <option value="Paradox">✖</option> </select> </div> </div> </table> </span> </div> </div> <div class='sheet-col'> <div></div> </div> <div class='sheet-col'> <table> </div> </div> </div> <br> <br>
I am tired an going to bed, but I will take a shot tomorrow if some one better equipped doesn't beat me to it. 
Would appreciate all help, thanks in advance!
1478116128
Tomaxx
Sheet Author
Hi Emily M. Did you have a look at what Brian wrote in CSS Wizardry? He pretty much explains how to do this sort of stuff: <a href="https://app.roll20.net/forum/permalink/882997/" rel="nofollow">https://app.roll20.net/forum/permalink/882997/</a> The whole thread is a goldmine of information :)
Thanks for the website link. I will try to see if I can utilize it, I am still really new to coding - so I appreciate helpful reading material and examples.&nbsp;
Okay, so I was looking over the link and I was unable to get it to work completely.&nbsp; This is all I am getting. The coding that I used for HTML &lt;div&gt; &lt;div&gt; &lt;input type="checkbox" name="attr_quintessence1" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence2" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence3" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence4" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence5" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence6" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence7" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence8" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence9" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence10" /&gt;&lt;span&gt;&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="checkbox" name="attr_quintessence20" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence19" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence18" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence17" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence16" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence15" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence14" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence13" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence12" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="attr_quintessence11" /&gt;&lt;span&gt;&lt;/span&gt; &lt;/div&gt; &lt;div&gt;•&lt;/div&gt; &lt;/div&gt; And my CSS /* Hide actual checkbox */ input[type="checkbox"] { position: absolute; opacity: 0; width: 15px; height: 15px; cursor: pointer; z-index: 1; margin-top: 6px; } /* Fake checkbox */ input[type="checkbox"] + span::before { border: solid 1px #a8a8a8; line-height: 14px; text-align: middle; display: inline-block; vertical-align: middle; -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; box-shadow: 0 0 2px #ccc; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); position: relative; content: ""; width: 14px; height: 14px; font-size: 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /* Styles unique to fake checkbox (checked) */ input[type="checkbox"]:checked + span::before { content: "✓"; color: #a00; -moz-box-shadow: 0 0 2px transparent; -webkit-box-shadow: 0 0 2px transparent; box-shadow: 0 0 2px transparent; } input.top { margin-top: 5px; } input.top + span::before { top: 0px; } input.mid-eighth { margin-top: 12px; } input.mid-eighth + span::before { top: 7px; } input.mid-quarter { margin-top: 27px; } input.mid-quarter + span::before { top: 22px; } input.mid-three-eighth { margin-top: 45px; } input.mid-three-eighth + span::before { top: 40px; } input.middle { margin-top: 67px; } input.middle + span::before { top: 62px; } input.middle-2 { margin-top: 73px; } input.middle-2 + span::before { top: 68px; } input.mid-five-eighth { margin-top: 95px; } input.mid-five-eighth + span::before { top: 90px; } input.mid-three-quarter { margin-top: 113px; } input.mid-three-quarter + span::before { top: 108px; } input.mid-seven-eighth { margin-top: 127px; } input.mid-seven-eighth + span::before { top: 122px; } input.bottom { margin-top: 135px; } input.bottom+ span, input.bottom+ span::before { top: 130px; } input.left-1 { margin-left: 14px; } input.left-1 + span::before { left: 14px; } input.left-2 { margin-left: 1px; } input.left-2 + span::before { left: 1px; } input.left-3 { margin-left: -4px; } input.left-3 + span::before { left: -4px; } input.left-4 { margin-left: -5px; } input.left-4 + span::before { left: -5px; } input.left-5 { margin-left: -2px; } input.left-5 + span::before { left: -2px; } input.left-6 { margin-left: 1px; } input.left-6 + span::before { left: 1px; } input.left-7 { margin-left: 3px; } input.left-7 + span::before { left: 3px; } input.left-8 { margin-left: 2px; } input.left-8 + span::before { left: 2px; } input.left-9 { margin-left: -4px; } input.left-9 + span::before { left: -4px; } input.left-10 { margin-left: -16px; } input.left-10 + span::before { left: -16px; } input.wheel9, input.wheel9 + span::before { transform:rotate(9deg); -ms-transform:rotate(9deg); -webkit-transform:rotate(9deg); } input.wheel27, input.wheel27 + span::before { transform:rotate(27deg); -ms-transform:rotate(27deg); -webkit-transform:rotate(27deg); } input.wheel45, input.wheel45 + span::before { transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); } input.wheel63, input.wheel63 + span::before { transform:rotate(63deg); -ms-transform:rotate(63deg); -webkit-transform:rotate(63deg); } input.wheel81, input.wheel81 + span::before { transform:rotate(81deg); -ms-transform:rotate(81deg); -webkit-transform:rotate(81deg); } input.wheel99, input.wheel99 + span::before { transform:rotate(99deg); -ms-transform:rotate(99deg); -webkit-transform:rotate(99deg); } input.wheel117, input.wheel117 + span::before { transform:rotate(117deg); -ms-transform:rotate(117deg); -webkit-transform:rotate(117deg); } input.wheel135, input.wheel135 + span::before { transform:rotate(135deg); -ms-transform:rotate(135deg); -webkit-transform:rotate(135deg); } input.wheel153, input.wheel153 + span::before { transform:rotate(153deg); -ms-transform:rotate(153deg); -webkit-transform:rotate(153deg); } input.wheel171, input.wheel171 + span::before { transform:rotate(171deg); -ms-transform:rotate(171deg); -webkit-transform:rotate(171deg); } div.marker { margin: 36px 0px 0px 5px; font-size: 20px; }