Help to personalize roll button

Hello,

I have a problem to personalize roll buttons in my code.

I have create a CSS class, same as the exemple on the wiki to use a D6 picto, but does not function. I tried to use the picto on a span and it works. I don't understand where the problem.

My code :

HTML

<button type="roll" class="d6-button" style="left: 0px; top: 0px; width: 25px; height: 25px;" title="Test" name="test" value="/roll 2d6kh1"></button>

CSS

/* Dice button appearance */
button[type=roll].d6-button::before{
    font-family: "dicefontd6";
    content: "f";
}

Thanks for your help

This is a specificity issue where roll20's styling has a higher specificity and so takes precedence. I highly recommend prepending all sheet css with .ui-dialog .tab-content .charsheet. this will ensure that your css overrides the roll20 styling. So your code would look like:

/* Dice button appearance */
.ui-dialog .tab-content .charsheet button[type=roll].d6-button::before{
    font-family: "dicefontd6";
    content: "f";
}

It works, thanks for the tips. It would be a good idea to add this on the wiki, no ?

Overriding roll20's base CSS by pre-pending sheet CSS rules with  '.ui-dialog .tab-content .charsheet' is "probably" mentioned somewhere... but most code examples do not include it.  Many examples are older (pre-CSE updates) and/or may not require it. YMMV
FYI, most of the wiki is editable by Roll20 account holders so you are encouraged to add/edit as needed. ;-)