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

Custom roll button image?

1466566139

Edited 1466567687
I'm having trouble setting the image/background of a roll button. Is there a good way to make this work, either through html or CSS? EDIT: And I want to remove the roll icon, too.
1466569613
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Not sure if it's applicable to the character sheets, but I stole some CSS formatting from one of Aaron's scripts to get background images in some API buttons generated by a script: '&lt;div style="width: 24px; height: 24px; ' +'display:inline-block; margin: 0; border:0; cursor: pointer;padding:0;background-image: url(\'<a href="https://app.roll20.net/images/statussheet.png\" rel="nofollow">https://app.roll20.net/images/statussheet.png\</a>');' +'background-repeat:no-repeat;background-position: '+((-34)*(i-9))+'px 0px;"&gt;&lt;/div&gt;' You can probably ignore the stuff about background-positioning as I was pulling out specific pieces of an image to use.
Would this div be nested inside the button itself?
1466615667
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Ah, sorry, the whole button CSS for the API button that I was generating (no idea if it's even remotely similar for character sheet buttons) would be: '&lt;a style="background-color: '+backColor+'; padding: 0;" href="[Whatever your Command is]"&gt;' +'&lt;div style="width: 24px; height: 24px; ' +'display:inline-block; margin: 0; border:0; cursor: pointer;padding:0;background-image: url(\'<a href="https://app.roll20.net/images/statussheet.png\" rel="nofollow">https://app.roll20.net/images/statussheet.png\</a>');' +'background-repeat:no-repeat;background-position: '+((-34)*(i-9))+'px 0px;"&gt;&lt;/div&gt;&lt;/a&gt;' The code that this is from has a few different versions of this and generates this as the output in chat based on a few parameters that it is passed: Each one of those statusmarkers is a clickable button.
Real simple to strip out the d20 icon from the default button. I used the following style sheet, since the d20 icon is really the letter 't' in a custom roll20 font. As for the rest, good luck. I haven't found it yet. button.sheet-nod20:before { content: "" !important; }
Very cool, thanks. I found that setting the font size to 0 also gets rid of the d20 icon, and now I know why!