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 some CSS help

1433859093

Edited 1433859141
Alicia
Sheet Author
As the fitle indicates, I'm having issue getting a bit of CSS to work, specifically to get sections of the sheet hidden based on a checkbox input. The files are below and I'll excerpt the lines I'm having trouble with In the HTML I'm first attempting to hide anything Force related using the checkbox located on line 69 <p>Force Sensitive? <input type="checkbox" class="sheet-forceShow" value="1" name="attr_force-Show" title="Force Sensitive character?" /></p> Sections I'm trying to hide: Lines 739-754 <tr class="sheet-forceBody"> <td class="skillsCol1">Use the Force</td> <td><button type="roll" name="roll_UsetheForceCheck" value="&{template:skill} {{name=Use the Force}} {{skill=[[1d20+@{UsetheForce}+?{Other Modifiers|0}[Other]]]}}" title="Roll Use the Force"></button></td> <td><input type="number" class="skills" name="attr_UsetheForce" value="@{level|max}[Half Level]+@{UsetheForceMod}[Mod]+@{UsetheForceFeat}[Training]+@{UsetheForceFeat|max}[Focus]+@{UsetheForceMisc}[Misc]+@{CT}[CT]" disabled="true" title="Use the Force Total" /></td> <td> = </td> <td><select name="attr_UsetheForceMod" class="modtype" title="Use the Force Mod (default CHA)"> <option value="@{str|max}">STR</option> <option value="@{dex|max}">DEX</option> <option value="@{con|max}">CON</option> <option value="@{int|max}">INT</option> <option value="@{wis|max}">WIS</option> <option value="@{cha|max}" selected>CHA</option> </select></td> <td><input type="checkbox" value="5" name="attr_UsetheForceFeat" title="Trained in Use the Force?" /></td> <!-- Skill Training --> <td><input type="checkbox" value="5" name="attr_UsetheForceFeat_max" title="Focused in Use the Force?" /></td> <!-- Skill Focus --> <td><input type="number" class="skills" name="attr_UsetheForceMisc" title="Use the Force Miscellaneous Modifier" value="0" /></td> </tr> and Lines 762-763 <div class="textHead sheet-forceBody">Force Powers</div> <textarea type="text" name="attr_ForcePowers" rows="2" class="ActionNotes forceBody" title="Force Power Suite"></textarea> I'm using the following CSS for the attempt Lines 161-165 input.sheet-forceShow:not(:checked) ~ .sheet-forceBody{ display: none; height: 0;} Any help you can give would be appreciated as there's quite a bit I'd like to do with hidden sections. Provided I could get them to work. HTML Code CSS Code
Tinkered with it for a bit, and I got part of it to work by moving the checkbox into the same col as the Force Powers box. But that's all I've managed thus far. I will get back to you if I find something new.
1433879967
Alicia
Sheet Author
Thanks for looking into it! About at my wits end.
Okay, I got it. Mostly. Shortest explanation : added hidden checkboxes in front of each thing that's suppose to disappear. Longer explanation : The inelegant way I made it work was to add the following css: /* ******** Start code for hiding sections ******* */ .sheet-forceShow:not(:checked) ~ .sheet-forceBody, .sheet-forceShow:not(:checked) ~ textarea.sheet-forceBody .sheet-forceShow:not(:checked) + tr.sheet-forceBody, .sheet-forceShow:not(:checked) + input.sheet-forceBody, .sheet-forceShow:not(:checked) ~ span.sheet-forceBody, .sheet-forceShow:not(:checked) ~ div.sheet-forceBody, .sheet-forceShow:not(:checked) + div.sheet-forceBody { display: none; } .sheet-hidden { display: none; } /* ******** Start code for tabs ******* */ ...and put a hidden checkbox in the skill col (this matches the checkbox under the attributes so when one is checked the other is too)... <div class="col"> <input type="checkbox" class="sheet-forceShow sheet-hidden" value="1" name="attr_force-Show"/> <table> <tr><div class="textHead">Skills</div></tr> ...followed by putting the Use Force skill in it's own table, enclosed in a div (also with a hidden checkbox)... <input type="checkbox" class="sheet-forceShow sheet-hidden" value="1" name="attr_force-Show" /> <div class="sheet-forceBody"> <table> <tr> <td class="skillsCol1">Use the Force</td> <td><button type="roll" name="roll_UsetheForceCheck" value="&{template:skill} {{name=Use the Force}} {{skill=[[1d20+@{UsetheForce}+?{Other Modifiers|0}[Other]]]}}" title="Roll Use the Force"></button></td> <td><input type="number" class="skills" name="attr_UsetheForce" value="@{level|max}[Half Level]+@{UsetheForceMod}[Mod]+@{UsetheForceFeat}[Training]+@{UsetheForceFeat|max}[Focus]+@{UsetheForceMisc}[Misc]+@{CT}[CT]" disabled="true" title="Use the Force Total" /></td> <td> = </td> <td><select name="attr_UsetheForceMod" class="modtype" title="Use the Force Mod (default CHA)"> <option value="@{str|max}">STR</option> <option value="@{dex|max}">DEX</option> <option value="@{con|max}">CON</option> <option value="@{int|max}">INT</option> <option value="@{wis|max}">WIS</option> <option value="@{cha|max}" selected>CHA</option> </select> </td> <td><input type="checkbox" value="5" name="attr_UsetheForceFeat" title="Trained in Use the Force?" /></td> <!-- Skill Training --> <td><input type="checkbox" value="5" name="attr_UsetheForceFeat_max" title="Focused in Use the Force?" /></td> <!-- Skill Focus --> <td><input type="number" class="skills" name="attr_UsetheForceMisc" title="Use the Force Miscellaneous Modifier" value="0" /></td> </tr> </table> </div> ...and make the text area behave with this (another hidden checkbox)... <input type="checkbox" class="sheet-forceShow sheet-hidden" value="1" name="attr_force-Show" /> <div class="textHead sheet-forceBody">Force Powers</div> <textarea type="text" name="attr_ForcePowers" rows="2" class="ActionNotes sheet-forceBody" title="Force Power Suite"></textarea> You will have to tinker with the Use Force to get it to line up with the rest of the skills, but it disappears when its suppose to:.
1434046825

Edited 1434046860
Alicia
Sheet Author
Thanks for your help. I haven't decided what I want to do about the Skills part of the hiding (probably end up rebuilding that section without a table as I ultimately wanted to give each skill a notes section that could be hidden/shown). I was however able to hide/show the other sets of inputs I wanted to have. I've updated the code linked in the first box if you want to see what I did.
1434958914

Edited 1434959096
Alicia
Sheet Author
Don't really feel like opening a new thread, but could use some more help with the sheet.. I got all my CSS formatted the way I want, and I'm attempting to create a stat block using the attributes from the sheet. It's all formatted the way I want except for 1 caveat: The result looks like: Nadia Medium Female Human Scout 2 / Jedi 4 / Soldier 2 / Jedi Knight 1 Background Exiled; Force 9 (2d6); Dark Side 2; Init 8; Senses Perception 7; Languages Basic, Binary, Shryiiwook ; Defenses Ref 26 (flat-footed 23), Fort 24, Will 23; HP 103/111; CT Penalty 0; Threshold 24; Speed 6; Melee by Weapon 9 dmg [[0+5]]; Ranged by Weapon [[9+3]] dmg 5; Base Atk 9; Grp [[9[BAB] + 3[Mod] + 0[Misc] +0[CT]]]; Atk Options Quick Draw; Special Actions Clear Mind, Force Haze, Vehicular Combat, Shake it Off, Telepathic Link; Force Powers Known (Use the Force +[[5[Half Level]+3[Mod]+5[Training]+5[Focus]+0[Misc]+0[CT]]]) Battle Strike, Levitate [TK], Move Object [TK], Negate Energy (2), Rebuke, Repulse [TK], Surge (2) Levitate (C50) - move (move to maintain) DC15: fly 2, vertical only, can move 1 sq onto horizontal surface or fall DC20: fly 4, vertical only, can move 1 sq onto horizontal surface or fall DC25: fly 6, vertical only, can move 1 sq onto horizontal surface or fall spend Force Point as reac when falling to reduce falling by fly speed Repulse (F87) - standard, adjacent targets make Str checks + BAB, if over push 1 sq + 1sq for every 5 over, into larger object 1d6 dam spend a Force Point to apply -5 to opponent's check, pushed into larger object = 2d6 dam Unleashed: opponents do not add size modifier, distance moved multiplied by2, damage 1d6 per square moved"; Force Techniques Improved Rebuke - can rebuke for an ally within 12sq & LOS; Abilities Str 10 (0), Dex 17 (3), Con 13 (1), Int 12 (1), Wis 14 (2), Cha 16 (3) Special Qualities Exiled - Plot safe course for hyperspace in half time. If trained in Knowledge (galactic lore) you gain the Skill Focus as conditional bonus feat. ; Talents Armored Defense, Ataru Clear Mind - may reroll Use the Force check to avoid detection Force Haze - spend FP; std action; hide you and allies equal to class level, Use the Force v. Will, 1min or if attack from haze Telepathic Link (K53)- link within 1km can communicate as if speaking, 1/encounter may share Force power of target or you Feats Armor Proficiency (light), Force Sensitivity, Force Training (3), Quick Draw, Shake it off, Skill Focus (Galactic Lore*, Pilot, Use the Force), Weapon Finesse, Weapon Proficiency (Lightsaber, pistol, rifle, simple), Vehicular Combat * Conditional Bonus Feat Notice that some inline results are not actually completing. The template code I'm using is: {{name=@{character_name}}} {{size=@{size}}}} {{gender=@{gender}}} {{race=@{species}}} {{class=@{rank}}} {{destiny=@{Destiny}}} {{background=@{background}}} {{force=@{fp}}} {{forcedice=@{fp|max}}} {{dsp=@{dsp}}} {{init=[[@{Initiative}]]}} {{perception=[[@{perception}]]}} {{perception-notes=@{perception|max}}} {{language=@{language}}} {{ref=[[@{Reflex}]]}} {{flatref=[[@{ReflexFlatFooted}]]}} {{fort=[[@{Fortitude}]]}} {{will=[[@{will}]]}} {{hp=@{hp}/@{hp|max}}} {{ct=@{ct}}} {{dt=[[@{dt}]]}} {{immune=@{immune}}} {{speed=@{speed}}} {{meleeatk=[[@{bab}+@{str|max}]]}} {{meleedmg=[[@{str|max}+@{level|max}]]}} {{rangedatk=[[@{bab}+@{dex|max}]]}} {{rangeddmg=@{level|max}}} {{bab=@{bab}}} {{grapple=[[@{Grapple}]]}} {{atkoptions=@{AttackOptions}}} {{specialactions=@{SpecialActions}}} {{utf=[[@{usetheforce}]]}} {{powers=@{ForcePowers}}} {{regimens=@{ForceRegimens}}} {{secrets=@{ForceSecrets}}} {{techniques=@{ForceTechniques}}} {{maneuvers=@{StarshipManeuvers}}} {{systems=@{DroidSystems}}} {{str=@{str} (@{str|max})}} {{dex=@{dex} (@{dex|max})}} You can see the full character sheet code in the first post. It's the most bizarre thing as it seems to want to stop doing the complete inline calculations after 9 sets.
1434999176
vÍnce
Pro
Sheet Author
You can try adding a space after [[ and before ]]. I've had issues with nested inline rolls not being formatted properly and that fixed it for me. Cheers
1435018609
Alicia
Sheet Author
That seems to have fixed the problem. Glad it was an easy fix. Thanks!
1435029242

Edited 1435029288
vÍnce
Pro
Sheet Author
Great. BTW, I think your "statblock" macro might make a nice option for people that want a printed character sheet. I did a similar statblock macro prior to roll templates and it wasn't pretty. But now with roll templates and formatting options...
1435068622
Alicia
Sheet Author
Ya.. That's very true about the printing. It's nice that the Saga books already laid out the formatting for the stat block so it makes it more uniform it's creation. I did a button for sending to chat, to player (using the character name) and to GM. I'm planning on expanding the use into the NPC and Vehicle portions and considered doing a status poster too to prettily display HP, etc during combat. Mainly I think I'm just bored ( :D ) but I do see some uses for it.