John - here's my attempt at explaining how to hide/unhide skills within a sheet using a Configuration "window". First thing I did was set up a configuration Window. But I want that to be able to collapse so it doesn't take up space. To do that, I created a DIV container preceded by a checkbox that can be selected or deselected to show the configuration "window". <div>
<input class="sheet-HideConfig" type="checkbox" checked name="attr_is_config" /><span class="sheet-is-config">Configuration</span>
<div class="sheet-config">
<div class='sheet-3colrow' style="padding: 10px;">
<div class='sheet-col'>
<input class="sheet-StaticSkill" type="checkbox" name="attr_staticBoating" style='width:15px;' /> Show Boating <br />
<input class="sheet-StaticSkill" type="checkbox" name="attr_staticClimbing" style='width:15px;' /> Show Climbing <br />
</div>
<div class='sheet-col'>
<input class="sheet-StaticSkill" type="checkbox" name="attr_staticLockpicking" style='width:15px;' /> Show Lockpicking <br />
<input class="sheet-StaticSkill" type="checkbox" name="attr_staticNotice" style='width:15px;' /> Show Notice <br />
</div>
<div class='sheet-col'>
<input class="sheet-StaticSkill" type="checkbox" name="attr_staticSpellcasting" style='width:15px;' /> Show Spellcasting <br />
<input class="sheet-StaticSkill" type="checkbox" name="attr_staticStealth" style='width:15px;' /> Show Stealth <br />
</div>
</div>
</div>
</div>
The checkbox needs to be right before the Config DIV so that they are siblings (right next to each other in the hierarchy. sheet-HideConfig and sheet-config are on the same level and so are siblings. However, sheet-HideConfig and sheet-3colrow are not, because sheet-3-colrow is a child of sheet-config. I hope that makes sense (and hopefully Brian reads this thread and can correct anything I state incorrectly. =) ) Anyway, here's the CSS with explanations: .sheet-HideConfig {
width: 20%;
height: 16px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999; /*Make the z-index high, so it is clickable*/
}
We are configuring the sheet-HideConfig class (which is the class of the checkbox that preceding the config DIV. With this bit, we are setting the width and height of the checkbox AND we are setting the opacity to 0 (making it invisible) AND setting the z-index to a high number so it will be "above" anything else, thus making it clickable (even though we can't see it). Now, to set up the span default state: .charsheet span.sheet-is-config { /*Set the initial view of the Configuration Show/Hide Button*/
text-align: center;
display: inline-block;
width: 20%;
height: 16px;
font-size: 9px;
background: #c7c3b0;
color: black; /*set the text color to black*/
font-weight: bold;
border-radius: 4px;
margin-left: -20%; /*shifts it to the left so that it is under the check box.*/
}
span.sheet-is-config::before { /*Close Config: grayish background with black text*/
content: "Close "; /*text in content will display in front of any text between the span tags*/
}
This says to set the width of the span with the class of sheet-is-config to 20%, with a grayish background color with black text. It also says to make the corner rounded and to shift the span to the left 20%. This will slide the span under the checkbox that we just configured. They share the same width, so they should line up perfectly. This may be a little confusing, but we are setting the default state of the span.sheet-is-config to display "Close " as part of the content, and it should appear before any text that exists between the span tags. This is what is displayed if the checkbox is unchecked (but remember, the checkbox is checked by default, so...) Now, to configure what the behavior should be if we check the checkbox. .sheet-HideConfig:checked + span.sheet-is-config { /*if the configuration window is hidden, set the Background color of the "button" to black with white text*/
background: black;
border-radius: 4px;
color: white;
}
.sheet-HideConfig:checked + span.sheet-is-config::before {
content: "Show "; /*text in content will display in front of any text between the span tags*/
}
If the checkbox is checked (which it is by default based on the html code above) AND if the class sheet-HideConfig (i.e. the checkbox) is immediately followed by a span with the class "sheet-is-config", then set the background color of the span to black, set the border radius of the span to 4px (giving it rounded corners) and set the text color of the span to white. We also change the preceding content from "Close" to Show". And now, to show/hide the config window... .sheet-HideConfig:checked ~ *.sheet-config {
display: none;
}
Here we're saying if the checkbox with the class sheet-HideConfig is checked, then the sibling "whatever with a class of sheet-config" should not be displayed. Again, this is the default state of the checkbox (checked, that is). The default state of the div with the class of sheet-config is to be displayed, so, by unchecking the checkbox, this bit of CSS is no longer relevant and the div will be displayed. The ~ is important for this, because there is a span separating the DIV from the checkbox. And now, for the skills... <input class="sheet-StaticSkill" type="checkbox" name="attr_staticBoating" style='display:none;'/>
<div class="sheet-staticBoating">
Boating: <input type="text" name="attr_boating" title="@{boating}"><br />
</div>
<input class="sheet-StaticSkill" type="checkbox" name="attr_staticClimbing" style='display:none;'/>
<div class="sheet-staticClimbing">
Climbing: <input type="text" name="attr_climbing" title="@{climbing}"><br />
</div>
<input class="sheet-StaticSkill" type="checkbox" name="attr_staticLockpicking" style='display:none;'/>
<div class="sheet-staticLockpicking">
Lockpicking: <input type="text" name="attr_lockpicking" title="@{lockpicking}"><br />
</div>
<input class="sheet-StaticSkill" type="checkbox" name="attr_staticNotice" style='display:none;'/>
<div class="sheet-staticNotice">
Notice: <input type="text" name="attr_notice" title="@{notice}"><br />
</div>
<input class="sheet-StaticSkill" type="checkbox" name="attr_staticSpellcasting" style='display:none;'/>
<div class="sheet-staticSpellcasting">
Spellcasting: <input type="text" name="attr_spellcasting" title="@{spellcasting}"><br />
</div>
<input class="sheet-StaticSkill" type="checkbox" name="attr_staticStealth" style='display:none;'/>
<div class="sheet-staticStealth">
Stealth: <input type="text" name="attr_stealth" title="@{stealth}"><br />
</div>
You'd just set these up wherever you'd want them to display, but there will be a slight difference. The checkboxes that were created to show/hide the skills will be placed right before the input field itself as well. The name will be the exact same name as what is in the configuration. One difference will be a change to the style, you'll need to include display:none; so that the checkbox is hidden on screen. I find it easier to work with DIVs for hiding/unhiding things, so I encapsulate my input field within a DIV. And the CSS: .sheet-staticBoating,
.sheet-staticClimbing,
.sheet-staticLockpicking,
.sheet-staticNotice,
.sheet-staticSpellcasting,
.sheet-staticStealth { /*Hide things that have the class of any of these things by default*/
display: none;
}
We initially set the DIV classes for each skill to not be displayed. And then... .sheet-StaticSkill:checked + *.sheet-staticBoating,
.sheet-StaticSkill:checked + *.sheet-staticClimbing,
.sheet-StaticSkill:checked + *.sheet-staticLockpicking,
.sheet-StaticSkill:checked + *.sheet-staticNotice,
.sheet-StaticSkill:checked + *.sheet-staticSpellcasting,
.sheet-StaticSkill:checked + *.sheet-staticStealth { /*If the checkbox preceding the skill div is checked, then show the skill*/
display: inline-block;
}
If the checkbox is checked and is immediately followed by a DIV with the appropriate class, then display that DIV (and all its contents). Here the + is very important. because all the DIVs and all the Checkboxes are on the same level (i.e. siblings), if I'd used the ~, then if Boating was checked, then all the other following skills would be visible as well, even though we don't have their checkboxes checked. If Notice was checked and we used the ~ then Spellcasting and Stealth would be visible as well. But, because we used the + then it will only work with the immediately following DIV. Oh, and I do have a jsfiddle that kind of works for this, but not completely, because the input boxes don't work the same as they do on roll20 (i.e. if I check a box in the config section, it doesn't also check the box above the skills input, because they aren't both looking at the Attributes and getting the value to update themselves. But it will give you something you can mess around with if you like. the link is: <a href="http://jsfiddle.net/finderski/s7swrsh6/" rel="nofollow">http://jsfiddle.net/finderski/s7swrsh6/</a> Anyway, I hope this helps. If you have any questions, just let me know. =)
