Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

CSS/HTML Help with Button

1717786662

Edited 1717786802
Hey folks! I'm working on a basic character sheet for Hostile, a Cepheus-based RPG. I've worked out most of my issues on my own, but this one is stumping me. I have buttons for skills and weapon damage, which I've assigned a text and background color to in the CSS sheet. Background of the buttons is black and the text is a shade of green. When I preview it in the Character Sheet Editor, everything looks correct. The buttons are black with green text. But, in the actual game, the buttons are white with green text.  Here is the CSS code: button {     background-color: black;     color: #06B600; } Why would it show up normally in the preview, but not in the actual game? I did find that I had to check "Legacy Sanitization" or the green text wasn't green either. After checking it, the text color is correct in both places, but not the button background color. Any help is greatly appreciated! Edit: I should also note I've tried the background color with rgb and hex designations as well, with the same result. "black" is just my last attempt to make it work, but no dice (no pun intended).
1717789772
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
First things first; for character sheet development, do not use the previewer of the custom sheet entry. It's an old feature that has not been updated. Additionally, I would highly recommend using the sheet sandbox for development instead of the custom character sheet interface; this will allow you to write your code in an actual code editor and upload your code as needed (you can even automatically upload your code updates using the browser extension ).  Now, all that said, the problem is that R20 applies default styling to things. One of those is that they give a background with a linear-gradient in it to buttons. background is a different property from background-color. You'll need to unset the background of your buttons, and do so with enough specificity to override the R20 styling.
Ah, okay, that’s good to know. This is the first time I’ve needed to do a custom sheet, so I had no idea the preview is pants.  Thanks also for the advice on the sandbox and background vs background-color.  With those things in mind, I’ll carry on.