Sheet Tabs

Hi, so I've been looking at updating the sheet I work on (Dragon Ball Universe) for a while and I'm planning on using the new CSE stuff in encoding it. However, as I try to get to grips with the new system some of my old code now no longer works and I don't know why. In this case it is tabs on the sheets. I've been trying to figure this out, so I stripped the HTML and the CSS down to the basics just to get it working, but I still can't figure it out. Below is the HTML and CSS if anyone could explain what I am doing wrong, that would be very much appreciated: HTML: &lt;div class="banner"&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;button type="action" name="act_attributes" &gt;Attributes&lt;/button&gt; &lt;button type="action" name="act_attacks" &gt;Attacks&lt;/button&gt; &lt;button type="action" name="act_abilities"&gt;Abilities&lt;/button&gt; &lt;button type="action" name="act_transformations"&gt;Transformations&lt;/button&gt; &lt;/div&gt; &lt;input type='hidden' class='tabstoggle' name='attr_sheetTab' value='attributes'/&gt; &lt;br&gt; &lt;main&gt; &lt;div class="attributes"&gt; &lt;input type="number" /&gt; &lt;/div&gt; &lt;div class="attacks"&gt; &lt;input type="text" /&gt; &lt;/div&gt; &lt;div class="abilities"&gt; &lt;input type="checkbox" /&gt; &lt;/div&gt; &lt;div class="transformations"&gt; &lt;input type="button" /&gt; &lt;/div&gt; &lt;/main&gt; CSS: /*----------------- GENERAL CSS ------------------*/ /*Configure the tab buttons*/ .banner{ background-image: url(<a href="https://i.pinimg.com/564x/ad/ce/f3/adcef371d608bdabd95fca1ee9a37ec4.jpg" rel="nofollow">https://i.pinimg.com/564x/ad/ce/f3/adcef371d608bdabd95fca1ee9a37ec4.jpg</a>); background-color: white; background-size: 50% 100%; background-position: center top; background-repeat: no-repeat; text-align: center; } .attributes, .attacks, .abilities, .transformations{ display: none; } .input.tabstoggle[value=attributes] ~ .attributes, .input.tabstoggle[value=abilities] ~ .abilities, .input.tabstoggle[value=attacks] ~ .attacks, .input.tabstoggle[value=transformation] ~ .transformations { display: block; } This is the results.

Action buttons require a sheet worker to make them work. You dont have code shown above for a sheet worker. Do you have one in the sheet?

Assuming you do have sheetworker code to handle the action buttons and your are working in CSE mode... You also might need to add ".charsheet" to your css classes to prevent the vtt's base css from overriding your sheet css.&nbsp; Or use a "wrapper" element on the html and include it in your css.&nbsp; The new CSE update seems to require some extra specificity on styling some elements.&nbsp;

It's a good suggestion. I always create a top level div, with a class something like "container" or "sheet", and put everything inside it - to make it easier to set high specificity CSS. It's good to know that practice is a good idea in CSE.

&lt;script type="text/worker"&gt; const buttonlist = ["attributes","attacks","abilities","transformations"]; buttonlist.forEach(button =&gt; { on(`clicked:${button}`, function() { setAttrs({ sheetTab: button }); }); }); &lt;/script&gt; Here is the sheet worker for the tabs, I forgot to post it with the code

I got it working by tweaking your HTML and CSS, like so: &lt; div &nbsp; class = "banner" &gt; &nbsp;&nbsp; &lt; br &gt;&lt; br &gt;&lt; br &gt; &nbsp;&nbsp; &lt; button &nbsp; type = "action" &nbsp; name = "act_attributes" &nbsp; &gt; Attributes &lt;/ button &gt; &nbsp;&nbsp; &lt; button &nbsp; type = "action" &nbsp; name = "act_attacks" &nbsp; &gt; Attacks &lt;/ button &gt; &nbsp;&nbsp; &lt; button &nbsp; type = "action" &nbsp; name = "act_abilities" &gt; Abilities &lt;/ button &gt; &nbsp;&nbsp; &lt; button &nbsp; type = "action" &nbsp; name = "act_transformations" &gt; Transformations &lt;/ button &gt; &lt;/ div &gt; &lt; br &gt; &lt; div &nbsp; class = "container" &gt; &nbsp;&nbsp; &lt; input &nbsp; type = 'hidden' &nbsp; class = 'tabstoggle' &nbsp; name = 'attr_sheetTab' &nbsp;&nbsp; value = 'attributes' /&gt; &nbsp;&nbsp; &lt; div &nbsp; class = "attributes" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; input &nbsp; type = "number" &nbsp; /&gt; &nbsp;&nbsp; &lt;/ div &gt; &nbsp;&nbsp; &lt; div &nbsp; class = "attacks" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; input &nbsp; type = "text" &nbsp; /&gt; &nbsp;&nbsp; &lt;/ div &gt; &nbsp;&nbsp; &lt; div &nbsp; class = "abilities" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; input &nbsp; type = "checkbox" &nbsp; /&gt; &nbsp;&nbsp; &lt;/ div &gt; &nbsp;&nbsp; &lt; div &nbsp; class = "transformations" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; input &nbsp; type = "button" &nbsp; /&gt; &nbsp;&nbsp; &lt;/ div &gt; &lt;/ div &gt; CSS: /*-----------------&nbsp;GENERAL&nbsp;CSS&nbsp;------------------*/ /*Configure&nbsp;the&nbsp;tab&nbsp;buttons*/ .banner { &nbsp;&nbsp; background-image :&nbsp; url ( <a href="https://i.pinimg.com/564x/ad/ce/f3/adcef371d608bdabd95fca1ee9a37ec4.jpg" rel="nofollow">https://i.pinimg.com/564x/ad/ce/f3/adcef371d608bdabd95fca1ee9a37ec4.jpg</a> ); &nbsp;&nbsp; background-color :&nbsp; white ; &nbsp;&nbsp; background-size :&nbsp; 50% &nbsp; 100% ; &nbsp;&nbsp; background-position :&nbsp; center &nbsp; top ; &nbsp;&nbsp; background-repeat :&nbsp; no-repeat ; &nbsp;&nbsp; text-align :&nbsp; center ; } div.attributes , div.attacks , div.abilities , div.transformations { &nbsp;&nbsp; display :&nbsp; none ; } input.tabstoggle [ value = "attributes" ]&nbsp;~&nbsp; div.attributes , input.tabstoggle [ value = "abilities" ]&nbsp;~&nbsp; div.abilities , input.tabstoggle [ value = "attacks" ]&nbsp;~&nbsp; div.attacks , input.tabstoggle [ value = "transformation" ]&nbsp;~&nbsp; div.transformations &nbsp;{ &nbsp;&nbsp; display :&nbsp; block ; } Also making sure legacy:false was set in the JSON settings.