Player-customisable button colour

I want to provide players the option to change the colour of the buttons on the character sheet. I've got it set up within a faux-settings section, but I'm not sure how to continue. Normally, I'd put in the CSS: .charsheet button[value=0].sheet-blank-button:active {background: #00ff00;} .charsheet button[value=1].sheet-blank-button:active {background: #00ff00;} .charsheet button[value=2].sheet-blank-button:active {background: #00ff00;} ... But because these buttons are used to roll things in the chat, their value is not going to be compatible wit ha simple sheetworker that changes the value. Is it as simple as nesting the <button>...</button> sections in another set of divs and setting the value there, or is there something else I can target in the CSS? I'm aware that you can apply a style within the HTML section, i.e: style="background:#00b300;" Is the simplest way to get past this just using a basic sheetworker to change the style tag in the HTML, essentially supplementing the CSS?

Hi HotPocky, You can style the buttons like any other element on the sheet.  Are you wanting to change the normal/default button color or just the :active (clicking-on the button) state?  Are you using any other css to style your buttons? My suggestion is to use a selector for color choices.  Than use hidden checkboxes, each use the same name as the selector but have a value that matches each option from the selector.  Then you use css to key off of those hidden checkboxes to style your buttons. example (not tested); HTML <!-- place inputs at the top of your sheet. preferably outside your wrapper element --> <input type="checkbox" name="attr_button_color" value="0" class="sheet-blank-button-color hidden" checked /> <input type="checkbox" name="attr_button_color" value="1" class="sheet-blank-button-color hidden" /> <input type="checkbox" name="attr_button_color" value="2" class="sheet-blank-button-color hidden" /> <!-- button color options --> <select name="attr_button_color">     <option value="0" selected>Red</option>     <option value="1">White</option>     <option value="2">Blue</option> </select> <button type="roll" name="roll_some_button" class="sheet-blank-button" value="1d20=[[ 1d20 ]]"></button> CSS .charsheet input.sheet-blank-button-color[value="0"]:checked ~ button.sheet-blank-button {     background-image: none;     background-color: red; } .charsheet input.sheet-blank-button-color[value="1"]:checked ~ button.sheet-blank-button {     background-image: none;     background-color: white; } .charsheet input.sheet-blank-button-color[value="2"]:checked ~ button.sheet-blank-button {     background-image: none;     background-color: blue; } The css path and button style may need to be adjusted to match the particular sheet layout and styles. Hope this helps. Cheers

Hello again Vince! I was in a rush to write up the message before, and missed out a few details i didn't think were important to mention. I've got seperate text for category names, like "Abilities" and "Skills", and these will be used as banners, having their own background colour that stretches across the sheet. So I'll have Button, Hover, Text, Background (for the sheet), and All. The way I've been organising the colour schemes so far is based around the genre of the campaign, e.g: sci-fi, post-apocalypse, medival fantasy, etc. and you can click whichever of these you want to use, or simply click the All button for that theme. I'll eventually be adding a box which a player can enter a hex code ( or enter a web address in the case of the sheet background). Fwiw I am aware that the text, banner, and background colours need fixing, and hover colours could do with a little more variety (I am also open to suggestions in that department). I'm not entirely certain what you suggestion would look like in regards to this. In hindsight, I should have given a picture to begin with. What I want to do sounds simple enough: Click the button, and the thing does the thing. If I understand you correctly, what you're suggesting is hiding the actual thing that has the style applied to it, and then it gets referenced later in the sheet? I've seen similar thigns done with relocating buttons and text boxes that can be used to add a custom name to a button.

This looks like it might be a job for css custom properties (aka variable). A screenshot is good, but the actual code is always needed. what are properties set in those colours and what are the values. For instance, what does "Button" apply to, and waht cSS color is that grren?

Are each of those colors hard-coded to the theme or are you wanting to allow the end-user to select from a pre-defined list?  Trying to picture how that could be made possible... Sheetworkers can only modify attributes, not html elements or css properties.  $20 (roll20 jquery) can adjust the css class assignments of html elements. I believe $20 is not persistent after sheet closing, so the theme choice would need to be saved to an attribute and read whenever the sheet was opened to apply the desired theme via css class assignments.