Probably one of the most common things do when they start fiddling with CSS is try to figure out how to remove the dice from roll buttons in Roll20.
Let’s say you want to change something like 
to 
. Notice how the dice icons have been removed. With a lot of buttons, this looks a lot neater.
For a long time, the example in the Roll20 wiki was:
button::before {
content: "" !important;
}Code language: CSS (css)This works but it uses the !important, which you should try to avoid using because of the way it overrides everything.
Recently some enterprising soul (me) updated the wiki to use this code instead:
.ui-dialog .charsheet button[type=roll]:before {
content: "";
}Code language: CSS (css)This uses an understanding of specificity and analysing the Roll20 sheet construction using Inspect Element in the browser. Including those specific elements in the tag declaration allows you to avoid using !important.
In this case, it’s not really important, because you always want this code to override all other code. If using this code, you never want the dice icon to show up. Still, it’s nice to use more correct code, even if it doesn’t make a difference.
You can learn more about this kind of thing in the post about Specificity.
Transparent Buttons
There are a lot of other ways you might want to change the appearance of buttons, or indeed any other page element. One common desire is to change skill or attack names to just look like the text around them. You can do this by simply removing the button border and making the background transparent. These are easier changes than removing the dice icon:
.button {
background: transparent;
border: 0;
}Code language: CSS (css)This will affect every button. If you want to apply the changes to some buttons and not others, give the button a class so you can target it like this:
.button.my-transparent-button {
background: transparent;
}Code language: CSS (css)And if you want to target roll buttons but not action buttons, you can specify that:
.button[type=roll] {
background: transparent;
}Code language: CSS (css)You can mix and match these rules, as covered in early articles. Go ahead and experiment (but remember to use American spellings – color not colour). You can undo any changes you make just by removing the text you added. Have fun.
