Community Forums: Custom Character Sheet -- Broken HTML/JAVA/CSS somehow?? Player-custom styling

1713618121

Edited 1713618641

Pro

So my sheet design is almost done, there's just one nit-pick that's bothering me very much. At this point it's not even about fixing the sheet. I have my default style picked out, but code that works for other elements isn't working for changing the sheet style. How is it that this works: <html lang="en"> <div> <div class="sheet-body"> <div class="grid-container"> <div class="1"> <button class="sheet-blank-button" type="action" name="act_charbio"> <h4>Char Bio</h4> </button> </div> </div> </div> </div> <div> <input type="hidden" name="attr_charbio" class="sheet-toggle-show" value="0" /> <div class="sheet-body"> <div class="sheet-3colrow"> <h2>Character Bio</h2> </div> <div class="grid-3"> <div class="1"> <span> <h4>Strengths</h4> </span> <textarea type="textarea" name="attr_biostr" class="inputarea"></textarea> </div> </div> </div> </div> </div> <script type="text/worker"> on("clicked:charbio",function() { getAttrs(["charbio"], function(values) { let charbio = +values.charbio || 0; let result = 0; if (charbio == 0) {result = 1;} else {result = 0;} setAttrs({ charbio: result}); }); }); </script> .sheet-toggle-show[value="1"] ~ div.sheet-body { display: none; background-color: none; background-image: none; } But this doesnt: <input type="number" class="sheet-colourall" name="attr_colourall" value="1"/> <div class="grid-container"> <div class="1"> <button class="sheet-blank-button" type="action" name="act_colour1"> <h4>    Default     </h4> </button> </div> </div> <script type="text/worker"> on("clicked:colour1", function() { getattrs(["colourall"], function(values) { let colourall = +values.colourall || 0; let result = 0; if (colourall == 0) {result = 0;} else {result = 1;} setAttrs({ colourall: result}); }); }); </script> .sheet-colourall[value="1"] ~ div.sheet-blank-button { background: #00b300; color: #FFFFFF; } I've fully given up on all attempts at keeping the project subtle. Click here to see the whole thing (It's on one text file for your convenience).

1713625830

Edited 1713625892

GiGs

Pro

Sheet Author

API Scripter

Permalink Quote

It looks like you are using two diffetrent  approaches to CSS. In the old days (using legacy code), it was necessary to append sheet- to CSS style names. In modern CSE code is not necessary. You have some styles that arre written in a Legacy format and some that aren't. Is it the legacy code that isn't working? If so, remove sheet- from the class names in your CSS file, where sheet- is not also in the HTML..

1713626204

GiGs

Pro

Sheet Author

API Scripter

Permalink Quote

Aha, I see the issue with that second bit of code. You have this: <input type="number" class="sheet-colourall" name="attr_colourall" value="1"/> <div class="grid-container"> <div class="1"> <button class="sheet-blank-button" type="action" name="act_colour1"> <h4>    Default     </h4> </button> </div> </div> with this CSS .sheet-colourall[value="1"] ~ div.sheet-blank-button { background: #00b300; color: #FFFFFF; } But they do not match. You need to change that last CSS part to .sheet-colourall[value="1"] ~ div div button.sheet-blank-button { background: #00b300; color: #FFFFFF; } This is one way, there are others - but the main porblem is your CSS is not targetting the right element. The thing with .sheet-blank-button is not a div, it's a button. It's also below .sheet-colourall in the page hierarchy.

1713646048

Edited 1713647989

HotPocky

Pro

Permalink Quote

is your name gigs because you're a gigaton of help? i had a feeling that there was something wrong with the divs in the CSS, otherwise why would some code need it as a proviso, but not other code. i'll give it a try, thank you. also regarding "sheet-", i didn't understand the whole "this can have it, and this doesn't need it" part when starting out, so i decided to have it in both just in case. i forgot to mention the exact issue i'm having, and it's two-fold: the buttons don't change the attribute, and changing the attribute doesn't change the style.

1713662675

Edited 1713992284

GiGs

Pro

Sheet Author

API Scripter

Permalink Quote

HotPocky said: is your name gigs because you're a gigaton of help? I'll say yes to that - it might not have been the original meaning, but I'll take it :) Can you be specific about the problems you are having now? Which buttons dont change which attribute? Changing which attribute doesnt change which style (this points to a CSS problem - did you make the CSS change I suggested?) also regarding "sheet-", i didn't understand the whole "this can have it, and this doesn't need it" part when starting out, so i decided to have it in both just in case. That's a good approach. It guarantees the code works in both Legacy and CSE, if the code is addressing what you want it to. Regarding your sheet worker, I'd change this: let result = 0; if (colourall == 0) {result = 0;} else {result = 1;} to let result = colourall ? 1 : 0 ; This uses a ternary operator , which is a handy way of assigning values basued on if statements with only 2 values. Here, it checks if colourall exists at all (is not 0), and you've already made sure that colourall is a number, getting values of 0 on errors.

1713695166

Edited 1713695431

HotPocky

Pro

Permalink Quote

if you load up the code in a game and click the "Settings" button at the top, you'd see a set of 6 buttons appear at the bottom (i've been meaning to move them to the top, but haven't because the buttons are in the order of the sections. i might change it to a single "Style" or "Theme" button at the top so that on button can cycle through the 6 options). when clicked, these buttons should change the colour scheme of the sheet from Default to themes reminiscent of Ancient, Medieval, Modern, Sci-fi, or Apocalypse. i have temporarily enabled the player to see the number for testing purposes, but no matter what i've tried, even deleting the code, replacing it with code that works, and editing it to fit the purpose, nothing so far has worked. all the other buttons work exactly as intended, but i can't even use the code to restore the section title bars, the banners, to the brown-sand colour they're supposed to be in the default. therefore two issues; those buttons don't change the colourall value, and the colourall value doesn't change the style. i'm a hair's breadth from deleting the CSS code block for the colour and forcing each and every single element to have the exact same ' style = "" ' alternates, which will increase the code size six-fold. also i tried adding the divs in CSS exactly as you put them, as well as no divs, and all three code blocks changed nothing on the sheet. and the ternary operator had no effect. while we're on the topic of the banners, what do i add to the CSS to fit in enough space for a button? i've got this: .sheet-3colrow { display: flex; gap:10px; text-align:center; justify-self: center; border-top-style: solid; border-top-width: 5px; border-top-color: white; background-image: none; } and i want to fit a 90px initiative button (with 2px padding on either side) next to it.

Cookie Preferences

Custom Character Sheet -- Broken HTML/JAVA/CSS somehow?? Player-custom styling