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

[HTML/CSS] Checkbox issue...

1455466605

Edited 1455477557
Resolved... Can't figure out why the checkboxes aren't lining up properly.         <div class="charsheet">             <div class="sheet-topbar">                 <div style="float: right; width: 200px; color: white; border: 1px solid #FFF;">                     <div style="float: left;">                         <form action="">                             <input type="checkbox" name="attribute_check" value="Strength">Strength<br>                             <input type="checkbox" name="attribute_check" value="Stamina">Stamina<br>                             <input type="checkbox" name="attribute_check" value="Agility">Agility<br>                             <input type="checkbox" name="attribute_check" value="Intellect">Intellect                         </form>                     </div>                 </div>             </div>
1455475749

Edited 1455475785
vÍnce
Pro
Sheet Author
Must be some other css with higher specificity..?  If not in the sheet's css maybe Stylish perhaps?  Looks good for me with a quick test. NICE looking sheet BTW.  ;-)
1455476143

Edited 1455476813
Did you use Chrome or Firefox? And thank you. Hrm, I get the same issue regardless. Checking my CSS now and I've already disabled Stylish.
Ugh, I'm fuckin' stupid. It's cause there's a text-align right in the top bar that the checkbox div inherited. >_<
1455477522
vÍnce
Pro
Sheet Author
The best problems are the ones with solutions.  ;-P
While you're here... can I pick your brain? I want to set up those checkboxes and pull the appropriate stats into a dice roll button to send to chat. Got any advice or a direction to push me?
1455479480
vÍnce
Pro
Sheet Author
A simple solution would probably be to make each of those checkboxes a unique attribute with it's own value and include a button to roll the appropriate ability check.  I more complicated method, but possibly more "elegant" would be to set up a roll template that checks for the existence of the attribute checks (as determined by the checkbox) and only displays the roll(s) if present...
Well, I have a powercard macro that does the rolls. Just trying to make it so players can click Strength and Agility, then the Roll button and have the macro pull those two attributes.
And now it isn't letting me set more than one check...
Aha, I think I have it figured out now. 
1455492285

Edited 1455492387
Finderski
Pro
Sheet Author
Compendium Curator
HoneyBadger, Not sure if this is what you're looking for or not, but it might give you an idea of how you could accomplish the checkbox thing and pulling in the appropriate stat/roll. <div class='sheet-col' style='width:280px; margin-left: 5px; margin-top: 5px;'> <input type="hidden" name="attr_Unskilled" value="4" /> <label style="width: 60px;">Unskilled</label> + <input type="checkbox" name="attr_JackOfAllTrades" value="2" style="width:15px" /> Jack of All Trades </div> <div class='sheet-col' style='width:115px;'> </div> <div class='sheet-col' style='width:120px;'> </div> <div class='sheet-col' style='width:135px; text-align:center;'> <input type="checkbox" name="attr_UnskilledEncumbrance" title="@{UnskilledEncumbrance}" value="1" style="width:20px;" /> </div> <div class='sheet-col' style='width:81px;'> <input class="sheet-buttonbox" type="checkbox" name="attr_skillrt" value="0" style="display:none;" /> <button class="sheet-templatebutton" type='roll' name='roll_tUnskilledRoll' title="@{tUnskilledRoll}" value='@{skillrt} @{defsTemplate} @{rolltUnskilled}'></button><button class="sheet-templatebutton sheet-GM-button" type='roll' name='roll_tgmUnskilledRoll' title="@{tgmUnskilledRoll}" value='/w gm @{skillrt} @{defsTemplate} @{rolltUnskilled}'></button> <button class="sheet-normalbutton" type='roll' name='roll_UnskilledRoll' title="@{UnskilledRoll}" value='/em @{character_name} attempts to not suck and rolls: @{rollUnskilled}!'></button><button type='roll' class="sheet-normalbutton sheet-GM-button" name='roll_gmUnskilledRoll' title="@{gmUnskilledRoll}" value='/w gm @{character_name} attempts to not suck and rolls: @{rollUnskilled}!'></button> <input type='hidden' name='attr_rollUnskilled' value='[[{1d@{Unskilled}![Unskilled], 1d@{wilddie}![Wild Die]}kh1 -2[Unskilled Penalty] + {0,@{JackOfAllTrades}}kh1[Jack of All Trades Modifier] + @{ttmod}[Trait Test Modifier] +(@{UnskilledEncumbrance}*@{encumbrance})[Encumbrance Penalty] - @{woundsMod}[Wounds] - @{fatigue}[Fatigue]]]!' /> <input type='hidden' name='attr_rolltUnskilled' value='{{name=@{character_name}}} {{skill_name=Unskilled}} {{skill_rank=@{Unskilled}}} {{skill_rank_mod=-2}} {{skill_mod=@{JackOfAllTrades}}} {{ttmod=@{ttmod}}} {{wounds= -[[@{woundsMod}]]}} {{fatigue= -@{fatigue}}} {{enc=[[@{UnskilledEncumbrance}*@{encumbrance}]]}} {{skill_roll=[[1d@{Unskilled}![Unskilled] -2[Unskilled Penalty] + {0,@{JackOfAllTrades}}kh1[Jack of All Trades Modifier] + @{ModSum}[Modifiers] +(@{UnskilledEncumbrance}*@{encumbrance})[Encumbrance Penalty]]]}} {{wild_die_rank=@{wilddie}}} {{wild_die=[[1d@{wilddie}! - 2 + {0,@{JackOfAllTrades}}kh1[Jack of All Trades Modifier] + @{ModSum}[Other Modifiers] +(@{UnskilledEncumbrance}*@{encumbrance})[Encumbrance Penalty]]]}}' /> </div> Not sure if that helps or not, but the bolded sections are the relevant parts (the rest was included for context). Essentially, if Jack of All Trades is included the value is greater than zero, so it is added to the die roll, and Encumbrance is always included, but if the checkbox for Encumbrance isn't checked, then it's multiplied by zero instead of one. I would imagine, that the the Jack of All Trades is something that may be more relevant for what you are wanting to accomplish. EDIT: I'd make the value the reference to the formula or what needs too be rolled etc. If you wanted text in there (similar to what the value is showing right now, you could use placeholder="whatever".
1455495203

Edited 1455495378
vÍnce
Pro
Sheet Author
I'm sure you've moved past this hurdle, but I thought I would share another option as well.  I know you might be partial to Powercards for some reason... ;-P but here's a method using a checkbox value and rolltemplate logic to hide/show a roll. <div class="charsheet">             <div class="sheet-topbar">                 <div style="float: right; width: 200px; color: red; border: 1px solid red;">                     <div style="float: left;">                         <form action="">                             <input type="checkbox" name="attr_strength_check" value="[[ 1d20+@{strength}+@{strength-mod} ]]" checked="checked" />Strength<br>     <input type="checkbox" name="attr_stamina_check" value="[[ 1d20+@{stamina}+@{stamina-mod} ]]" checked="checked" />Stamina<br>                         </form>                         <input type="hidden" name="attr_strength_check_toggle" value="{{strength_check=@{strength_check}}}" />                             <input type="hidden" name="attr_stamina_check_toggle" value="{{stamina_check=@{stamina_check}}}" /> <input type="hidden" name="attr_ability_checks" value="@{strength_check_toggle}@{stamina_check_toggle}" />                         <button type="roll" name="attr_ability_check_roll" value="&{template:foo}{{header=Ability Check}}@{ability_checks}">Ability Checks</button>                     </div>                 </div>             </div> <!-- Roll Template --> <rolltemplate class="sheet-rolltemplate-foo">     <table style="background-color: lightyellow; width: 100%; text-align: center; border: 1px solid gray;">     {{#header}}<tr><td colspan="2" style="padding:4px;background-color:#D5D4C3; font-size:1.5em;">{{header}}</td></tr>{{/header}}     {{#^rollTotal() strength_check 0}} {{#strength_check}}<tr><td style="padding:4px;">Strength Check: </td><td style="padding:4px;">{{strength_check}}</td></tr>{{/strength_check}}     {{/^rollTotal() strength_check 0}} {{#^rollTotal() stamina_check 0}} {{#stamina_check}}<tr><td style="padding:4px;">Strength Check: </td><td style="padding:4px;">{{stamina_check}}</td></tr>{{/stamina_check}}     {{/^rollTotal() stamina_check 0}}      </table> </rolltemplate>  
Actually I misspoke when I said powercards. I forgot I had written a specific script for this game system. It outputs to a scripted template similar to powercards, but looks like this below. Each die is a separate div that floats left using text over an image. The third die isn't always there, so the rank bonus (+1) slides left to fill the empty spot.  
Hrm, next step is a sheetworker to clear the checkboxes from the skill check attributes automatically.
1455524319
vÍnce
Pro
Sheet Author
HoneyBadger said: Actually I misspoke when I said powercards. I forgot I had written a specific script for this game system. It outputs to a scripted template similar to powercards, but looks like this below. Each die is a separate div that floats left using text over an image. The third die isn't always there, so the rank bonus (+1) slides left to fill the empty spot. That's tricky with the floats.  Very cool.
1455525117

Edited 1455525148
It took me awhile to get it right, but it was worth it in the end. Instead of having to create dozens and dozens of images, I can get away with five. d4, d6, d8, d10, and d12. Since they're transparent on the inside of the die, I use css to color the background. If the two d6's on the left both turn up 6, the colors change to green. Blue if doubles other than 6 and 1 and red if double 1's.