Sandbox and Live Don't Look the Same (Is this Dark Mode or Mobile Related?)

Hi, can anyone help me figure this out? I am updating a character sheet that was written by another user-- the sheet was for the pre-release version of the game, and I'm updating it now that the game is out. The changes I have made are: Update some of the labels Add translation strings to everything translateable (previously the text was not in translation strings) The original sheet was created 2 years ago, before Dark Mode was available on the VTT. When I edit it in the Character Sheet Sandbox, it looks fine-- looks just like it does in the VTT, but with the proper labels: When I copy the HTML, CSS, and translation.json files into the campaign's settings, it looks terrible. The background color doesn't load, and things aren't lining up correctly anywhere-- almost like the box model was just thrown away: Does anyone have advice on why this would be happening? Am I missing something obvious? Do I need to have some kind of dark mode/mobile support that I don't know about? (It's been about 2+ years since I wrote a character sheet, sooo....)

Following up: OK, I figured out to check the Legacy sanitization checkbox! The sheet lays out correctly now! BUT: This sheet has a toggle to display the character or crew sheet (like Blades in the Dark and other sheets). The toggle is not working. Here's the code: HTML <input type="hidden" class="sheet-block-switch" name="attr_type_switch" value="1"> <div class="alignRight"> <label style="color: white;"><span data-i18n="crew-sheet">Crew Sheet</span>: <input type="checkbox" class="sheet-block-switch" name="attr_type_switch" value="1"><span></span></label> </div> CSS *--------- Sheet Toggle -----------*/ .sheet-character, .sheet-block-switch:checked ~ .sheet-crew { display: grid; } .sheet-crew, .sheet-block-switch:checked ~ .sheet-character { display: none; } /*----------------------------------*/ Again, this works perfectly in the Custom Sheet Sandbox.

Hmm, it shouldn't work in the sandbox either. Hidden inputs don't have a "checked" state. You either need to switch it to type="checkbox"  with the hidden property: <input type="checkbox" name="attr_type_switch" hidden value="1"> Or do your css based on the value of the hidden input.

Hi, Scott! Thanks for the reply! As it turns out, when I reverted *whatever the heck* I had done, it worked fine. Here's the code, if anyone comes by looking: <div class="main"> <div class="header flex-center section"> <div class="alignLeft"> <h1 style="color: white;">Wildsea RPG</h1> </div> <div class="alignRight"> <label style="color: white;">Crew Sheet: <input type="checkbox" class="sheet-block-switch" name="attr_type_switch" value="1"><span></span></label> </div> </div> <input type="checkbox" class="sheet-block-switch" name="attr_type_switch" value="1" hidden>

Sciott suggested above to use the value of the input, rather than it's checked status. To to that you need to edit the CSS. Change these lines: *--------- Sheet Toggle -----------*/ .sheet-character, .sheet-block-switch:checked ~ .sheet-crew { display: grid; } .sheet-crew, .sheet-block-switch:checked ~ .sheet-character { display: none; } /*----------------------------------*/ to something more like this: *--------- Sheet Toggle -----------*/ .sheet-character, .sheet-block-switch[value="1"] ~ .sheet-crew { display: grid; } .sheet-crew, .sheet-block-switch[value="1"] ~ .sheet-character { display: none; } /*----------------------------------*/ This should work with this hidden input: <input type="hidden" class="sheet-block-switch" name="attr_type_switch" value="1">