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

Custom character sheet problems (script help)

<select class="hiding subclass" name="attr_subclass">     <option value="">Choose</option> <option value="@{martialartist}">Martial1</option> <option value="@{martialartist}">Martial2</option> <option value="@{magician}">Mage1</option> <option value="@{magician}">Mage2</option> <option value="@{ranger}">Ranger1</option> <option value="@{ranger}">Ranger2</option> <option value="@{mercenary}">Merc1</option> <option value="@{mercenary}">Merc2</option> <option value="@{cleric}">Cleric1</option> <option value="@{cleric}">Cleric2</option> </select> I have the classes attributed here hoping that would cause the subclass to only show when the main class is chosen. Like if a player picked Ranger as their main class, in the subclass dropdown it would only show Ranger1 and Ranger2. I've had the <option value="1.." and such for the base classes and the @{class} for the subclass for the reason listed earlier. I figured that was the wrong way of doing it and was one of my issues. <input type="hidden" class="class" name="attr_class" value="" /> I am curious in this part you've provided. Why, or what's the reason for should I say, the / is used for? Note: I'm a little wary of using a class name of class. I've never done that, and its just a string so it should work, but if it doesnt, its worth changing that class name just to check. If it causes an issue, I can relabel it to mainclass I'll apply the new coding and see what happens. Thank you again GiGs.
1601489085
GiGs
Pro
Sheet Author
API Scripter
Devildog said: <input type="hidden" class="class" name="attr_class" value="" /> I am curious in this part you've provided. Why, or what's the reason for should I say, the / is used for? In html tags typically have a start and end tag, the end tag starting with /, like <div></div> Input is a self-closing tag - you dont need an </input> tag, but it used to be necessary to put the / at the end of the input tag as I did above ensure html detects it has ended. That's not necessary any more, but it's still the "proper" syntax so I include it.
1601493015

Edited 1601494615
Andreas J.
Forum Champion
Sheet Author
Translator
GiGs said: Input is a self-closing tag - you dont need an </input> tag, but it used to be necessary to put the / at the end of the input tag as I did above ensure html detects it has ended. That's not necessary any more, but it's still the "proper" syntax so I include it. Proper, as in proper XHTML, or by some other metric, such as Roll20 mention? Interestingly enough, Google HTML/CSS Styleguide recommends against it, and even found that the W3C HTML 5 specs tells to not use closing thing for there these Void Elements . I've used them with inputs bc that's what I'm used to and have seen, but apparently missed the recommendation against their use. But as you said, they don't seem to cause troubles either way. Never questioned it, and was surprised when looking  it up just now. Edit: Hmm, this Stack Exchange paints more complex picture
1601500216
GiGs
Pro
Sheet Author
API Scripter
Thanks, Andreas. It looks like my knowledge was backwards - I knew &lt;input&gt; and &lt;input /&gt; would both be accepted, but remembered the latter as the "correct" one (though bear in mind, I never encouraged anyone to do it either way because both will be accepted). Your post sent me on a treasure hunt through ancient browser spec and discussion pages :) This page might be a description of how the /&gt; situation came about, but it's not very digestible :)&nbsp;&nbsp; <a href="http://jkorpela.fi/html/empty.html" rel="nofollow">http://jkorpela.fi/html/empty.html</a> This stack exchange adds more readable information:&nbsp; <a href="https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5" rel="nofollow">https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5</a>
Either I've misinterpreted your coding for the select dropdown or it's exactly the same as the current ones I have in other sections. What my end goal for these dropdowns was to have 2 individual dropdown bars. The first dropdown would have every base class listed for the player to choose from. Once the desired class was chosen, the second dropdown would only show the 2 subclasses that branch off that base class selected and hide the remaining.
1601580553
GiGs
Pro
Sheet Author
API Scripter
Ah, I misunderstood what you were asking. You are asking for a way to create a dynamic select, with options that appear only in certain situations. AFAIK that is impossibly on roll20. This is because you need to apply styling directly to the option tags, and they don't accept many styling options. You cant hide them. The only way I know of to do what you want is to create several separate selects - one for each pair of options. Then in the css, hide all the selects, and show only the one with the options you want.
So is that where the checkbox or radio would come into play or how would I go about doing that? If it's too much trouble or no doable, I'll just have to suck it up and let all classes show.
1601585779

Edited 1601585822
GiGs
Pro
Sheet Author
API Scripter
Here's code that will work if you copy it exactly as listed. The html: &nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="hidden"&nbsp;class="class"&nbsp;name="attr_class"&nbsp;value=""&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name="attr_class"&nbsp;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=""&gt;Choose&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="martial"&gt;Martial&nbsp;Artist&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="mage"&gt;Magician&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="ranger"&gt;Ranger&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="mercenary"&gt;Mercenary&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="cleric"&gt;Cleric&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Subclass&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="hidden"&nbsp;name="attr_subclass"&nbsp;value=""&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;class="subclass-none"&nbsp;name="attr_subclass"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=""&gt;Choose&nbsp;a&nbsp;Class&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;class="subclass-martial"&nbsp;name="attr_subclass"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=""&gt;Choose&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="martial1"&gt;Martial&nbsp;1&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="martial2"&gt;Martial&nbsp;2&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;class="subclass-mage"&nbsp;name="attr_subclass"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=""&gt;Choose&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;&nbsp;value="mage1"&gt;Mage&nbsp;1&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;&nbsp;value="mage2"&gt;Mage&nbsp;2&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;class="subclass-ranger"&nbsp;name="attr_subclass"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=""&gt;Choose&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="ranger1"&gt;Ranger&nbsp;1&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="ranger2"&gt;Ranger&nbsp;2&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;class="subclass-merc"&nbsp;name="attr_subclass"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=""&gt;Choose&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;&nbsp;value="merc1"&gt;Merc&nbsp;1&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;&nbsp;value="merc2"&gt;Merc&nbsp;2&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;class="subclass-cleric"&nbsp;name="attr_subclass"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=""&gt;Choose&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="cleric1"&gt;Cleric&nbsp;1&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="cleric2"&gt;Cleric&nbsp;2&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; The CSS: .charsheet&nbsp;[class^="sheet-subclass-"]&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; } .charsheet&nbsp;input.sheet-class[value=""]&nbsp;~&nbsp;select.sheet-subclass-none, .charsheet&nbsp;input.sheet-class[value="martial"]&nbsp;~&nbsp;select.sheet-subclass-martial, .charsheet&nbsp;input.sheet-class[value="mage"]&nbsp;~&nbsp;select.sheet-subclass-mage, .charsheet&nbsp;input.sheet-class[value="ranger"]&nbsp;~&nbsp;select.sheet-subclass-ranger, .charsheet&nbsp;input.sheet-class[value="mercenary"]&nbsp;~&nbsp;select.sheet-subclass-merc, .charsheet&nbsp;input.sheet-class[value="cleric"]&nbsp;~&nbsp;select.sheet-subclass-cleric&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;initial; } Note that in the html, there's a hidden input for subclass, but its not actually used. I included it just in case you need to use the subclass in other CSS.
1601589066
Andreas J.
Forum Champion
Sheet Author
Translator
GiGs said: Note that in the html, there's a hidden input for subclass, but its not actually used. I included it just in case you need to use the subclass in other CSS. Using the hidden input where it is enables us to place a checkbox/text/number input elsewhere on the sheet using the name, mirroring the value. If we didn't use hidden input here, we'd be forced to place another kind of input in that same spot that is then used for managing what the value is for that attribute. I this way you can create various show/hide options all over the sheet, and the collect all these toggles on a separate "Settings" page if you want.
1601589296
GiGs
Pro
Sheet Author
API Scripter
📜🗡Andreas J.🏹📜 said: GiGs said: Note that in the html, there's a hidden input for subclass, but its not actually used. I included it just in case you need to use the subclass in other CSS. Using the hidden input where it is enables us to place a checkbox/text/number input elsewhere on the sheet using the name, mirroring the value. If we didn't use hidden input here, we'd be forced to place another kind of input in that same spot that is then used for managing what the value is for that attribute. I this way you can create various show/hide options all over the sheet, and the collect all these toggles on a separate "Settings" page if you want. Just in case of confusion: that input doesnt need to be at that specific position. You can put it anywhere in the sheet, and might have several copies of it with different classes. But if I'm using a hidden input linked to a select, I usually put a copy of it right next to the select to remind me that it's necessary.
1601589729

Edited 1601589806
Andreas J.
Forum Champion
Sheet Author
Translator
GiGs said: Just in case of confusion: that input doesnt need to be at that specific position. You can put it anywhere in the sheet, and might have several copies of it with different classes. But if I'm using a hidden input linked to a select, I usually put a copy of it right next to the select to remind me that it's necessary. Oh right, it's more about how the General Sibling Combinator(~)/ Adjacent Sibling Combinator(+) works in the general cases, with how we make the CSS for these swap/toggle visible are section.
Thanks again GiGs. That code is working out perfectly.
1601660473
GiGs
Pro
Sheet Author
API Scripter
Great :)
Just so I'm understanding it correctly for future use, .charsheet&nbsp;input.sheet-class[value="cleric"] this section defines the dropdown value of the cleric base class correct? Where &nbsp;~&nbsp;select.sheet-subclass-cleric&nbsp;{ this section is only showing the clerics sublcass(es) that are written in the option values of &lt;select&nbsp;class="subclass-cleric"&nbsp;name="attr_subclass"&gt; Not fully understanding the general sibling which I'm assuming is the ~ . Is that what causes the swap between which group of subclasses is shown?
1601666004

Edited 1601666057
GiGs
Pro
Sheet Author
API Scripter
This part [value="cleric"] looks at the value of the attribute (whether its a select or input doesnt matter). Everything else is only looking at the class &nbsp;assigned to the input or select. So this part: &nbsp;~&nbsp;select.sheet-subclass-cleric&nbsp;{ is saying, look for the select with class="subclass-cleric". It can not read the actual attribute value, just the class. And this: input.sheet-class[value="cleric"] ~&nbsp;select.sheet-subclass-cleric&nbsp;{ is saying: if the input which has a class="class" &nbsp;also has a value of "cleric", then apply the CSS below to any sibling selects that have a class="subclass-cleric" A sibling is anything which is inside the same html container, and at the same level. So if you have something like &lt;div&gt; &nbsp; &nbsp; &lt;select&gt; &nbsp; &nbsp; &lt;input&gt; &nbsp; &nbsp; &lt;div&gt; the select, input, and inner div are all siblings. If you have &lt;div&gt; &nbsp; &nbsp; &lt;select&gt; &nbsp; &nbsp; &lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;input&gt; the select and inner div are siblings, but the input is not. And in &lt;div&gt; &nbsp; &nbsp; &lt;select&gt; &lt;div&gt; &nbsp; &nbsp;&lt;input&gt; the select and input are not siblings, because they in different containers. But the two divs are siblings, because they are att he same level in the hieraarchy, and also in the same container (the topmost container, the character sheet
That makes alot more sense and explains some of my issues. With that concept in mind, if I wanted to make a skills list (special attack such as crescent moon kick) If I only wanted that to show up as a skill under the martial artist, how would I go about that if it's in two different div? The HTML part I have so far with the knowledge you've shared is this (takes place under the same div for character sheet but branches off to &lt;div class="header-info sheet-options"&gt; for the class and subclass then another div to &lt;div class="skills-container skill-list"&gt; for the skills sections. This section is still a work in progress since it'll depend on the level you increase the skill to to see what the damage output would be. What I have thus far is: &lt;span&gt;Skills&lt;/span&gt; &lt;input name="attr_skill_name" type="text" placeholder="Skill Name" style=" width: 150px;"&gt; &lt;input type="hidden" name="attr_skills" value="" /&gt; &lt;select class="skills-martial" name="attr_skills"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=""&gt;Choose&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="cmk"&gt;Crescent Moon Kick&lt;/option&gt; &lt;/select&gt; &lt;input name="attr_skilllvl" type="number" value="" style="width: 60px;"&gt; &lt;select class="hiding skill bonus" name="attr_skill_bonus" style="width: 97px;" value=""&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="skillmod"&gt;Skill Modifier&lt;/option&gt; &lt;option value="@{strength_bonus}"&gt;Strength&lt;/option&gt; &lt;option value="@{dexterity_bonus}"&gt;Dexterity&lt;/option&gt; &lt;option value="@{intelligence_bonus}"&gt;Intelligence&lt;/option&gt; &lt;/select&gt; &lt;span&gt;Damage&lt;/span&gt; &lt;input name="attr_skill_damage" type="number" value="" class="small" style="width: 40px;"&gt; &lt;button name="roll_attack" type="roll" value="&amp;{template:default} {{name=@{skill_name}}} {attack=[[{@{skill_bonus}d6!}&gt;5f&lt;1]]}} {{location=[[1d6]]}} {{damage=[[(@{skill_damage}+@{skilllvl)d6]]}}" class="txt-btn medium"&gt;Skill Attack&lt;/button&gt; If the general sibling is used only for items in the same container, is there anything that would help this skill for the martial artist from showing up in say a clerics skill list? I figure it'd be something like the coding that was used for the classes but if the subclass isn't in the same contain as the skills section, how would that work out?
1601672102
GiGs
Pro
Sheet Author
API Scripter
I assume the visibility is being set by the class or subclass. You just make a copy of the hidden input, and move that to where it is needed, so you then will have a sibling arrangement.&nbsp;
For the skill to only show under the class or subclass, I'll have to make sure &lt;input&nbsp;type="hidden"&nbsp;name="attr_subclass"&nbsp;value=""&nbsp;/&gt; is in the same arrangement as the skill. So it can be in multiple areas?
1601674064
GiGs
Pro
Sheet Author
API Scripter
Yes, you can have as many copies of it as you need.
Okay, I'll work that in as well as the CSS reworded and let you know if I run into any issues. Appreciate it ^.^ Slowly learning these little tid bits
1601752778

Edited 1601757229
What I have for HTML so far is this: &nbsp; &lt;div class="skill"&gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;span&gt;Skills&lt;/span&gt; &lt;input type="hidden" name="attr_subclass" value="" /&gt; &lt;input type="hidden" name="attr_skills" value="" /&gt; &lt;select class="skills-martial1" name="attr_skills"&gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;option value=""&gt;Choose&lt;/option&gt; &lt;option value="dirty"&gt;Dirty Trick&lt;/option&gt; &lt;option value="cmk"&gt;Crescent Moon Kick&lt;/option&gt; &lt;option value="follow"&gt;Follow Through&lt;/option&gt; &lt;/select&gt; &lt;input name="attr_skilllvl" type="number" value="" style="width: 35px;"&gt; &lt;select class="hiding skill bonus" name="attr_skill_bonus" style="width: 110px;" value=""&gt; &nbsp;&nbsp;&nbsp; &lt;option value="skillmod"&gt;Skill Modifier&lt;/option&gt; &lt;option value="@{strength_bonus}"&gt;Strength&lt;/option&gt; &lt;option value="@{dexterity_bonus}"&gt;Dexterity&lt;/option&gt; &lt;option value="@{intelligence_bonus}"&gt;Intelligence&lt;/option&gt; &lt;/select&gt; &lt;span&gt;Damage&lt;/span&gt; &lt;input name="attr_skill_damage" type="number" disabled="disabled" value="[[@{weaponbase}+@{skilllvl}]]" class="small" style="width: 40px;"&gt; &lt;button name="roll_attack" type="roll" value="&amp;{template:default} {{name=@{skills}}} {attack=[[{@{skill_bonus}d6!}&gt;5f&lt;1]]}} {{location=[[1d6]]}} {{damage=[[@{skill_damage}d6]]}}" class="txt-btn medium"&gt;Skill Attack&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea name="attr_skilldesc" placeholder="Description" style="height: 50px; width: 700px;"&gt;&lt;/textarea&gt; &lt;input name="attr_skilllvl" type="number" value="" style="width: 35px;"&gt; &lt;select class="skills-martial2" name="attr_skills"&gt; &lt;option value="pp"&gt;Power Punch&lt;/option&gt; &lt;option value="twin"&gt;Twin Strike&lt;/option&gt; &lt;option value="lru"&gt;Left Right Uppercut&lt;/option&gt; &lt;/select&gt; &lt;input name="attr_skilllvl" type="number" value="" style="width: 35px;"&gt; &lt;select class="hiding skill bonus" name="attr_skill_bonus" style="width: 110px;" value=""&gt; &nbsp;&nbsp;&nbsp;&lt;option value="skillmod"&gt;Skill Modifier&lt;/option&gt; &lt;option value="@{strength_bonus}"&gt;Strength&lt;/option&gt; &lt;option value="@{dexterity_bonus}"&gt;Dexterity&lt;/option&gt; &lt;option value="@{intelligence_bonus}"&gt;Intelligence&lt;/option&gt; &lt;/select&gt; &lt;span&gt;Damage&lt;/span&gt; &lt;input name="attr_skill_damage" type="number" disabled="disabled" value="[[@{weaponbase}+@{skilllvl}]]" class="small" style="width: 40px;"&gt; &lt;button name="roll_attack" type="roll" value="&amp;{template:default} {{name=@{skills}}} {attack=[[{@{skill_bonus}d6!}&gt;5f&lt;1]]}} {{location=[[1d6]]}} {{damage=[[@{skill_damage}d6]]}}" class="txt-btn medium"&gt;Skill Attack&lt;/button&gt; &lt;textarea name="attr_skilldesc" placeholder="Description" style="height: 50px; width: 700px;"&gt;&lt;/textarea&gt; &lt;/div&gt; And for CSS I have this: .charsheet [subclass^="sheet-skills-"] { &nbsp;&nbsp;&nbsp;&nbsp;display: none; } .charsheet input.sheet-subclass[value="martial1"] ~ select.sheet-skills-martial1, .charsheet input.sheet-subclass[value="martial2"] ~ select.sheet-skills-martial2 { &nbsp;&nbsp;&nbsp;&nbsp;display: initial; } Currently, all skills are showing up on the page but they are separated by subclass. Is there a line I failed to put in or a piece of the coding that was entered wrong?
1601755211

Edited 1601755245
GiGs
Pro
Sheet Author
API Scripter
I cant read that code right now (it's important to use indenting to show the hierarchy), but a reminder: you need to either add the class (in this case skills-martial1) to every item you want to hide or show, or move them all into a container, and add that class to the container. Also your post doesnt say which elements in that screenshot should be being hidden or shown.
GiGs &nbsp;said: I cant read that code right now (it's important to use indenting to show the hierarchy), Sorry about that. I fixed it in original message. Not sure why it went like that. GiGs &nbsp;said: &nbsp;but a reminder: you need to either add the class (in this case skills-martial1) to every item you want to hide or show, or move them all into a container, and add that class to the container. I have skills-martial1 showing in the select class which is the line before the 3 skills under that subclass. Just like skills-martial2 is above the other three options for the next tree. Where else would I need to put skills-martial1?
1601760600
GiGs
Pro
Sheet Author
API Scripter
that layout is much more readable. You have these hidden inputs near the start: &nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="attr_subclass" value="" /&gt; &lt;input type="hidden" name="attr_skills" value="" /&gt; Look carefully - can you see what is missing? Now look at the CSS: .charsheet input.sheet-subclass[value="martial1"] ~ select.sheet-skills-martial1, Notice what that input has immediately after the . ? This only works if the input has a class. Remember what I said before:&nbsp; GiGs said: And this: input.sheet-class[value="cleric"] ~&nbsp;select.sheet-subclass-cleric&nbsp;{ is saying: if the input which has a class="class" &nbsp;also has a value of "cleric", then apply the CSS below to any sibling selects that have a class="subclass-cleric" So your hidden input needs a matching class, so roll20 knows which input's value to read. In this case it will be subclass, not class, so something like &lt;input type="hidden" class="subclass" name="attr_subclass" value="" /&gt;
Wow I feel dense right now. I changed input.sheet-class to input.sheet-subclass thinking it was referring to the base class x.x&nbsp; Maybe it would be better to change that name to job or something of the like.&nbsp;