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

Roll Button CSS not overriding the background.

July 17 (2 years ago)

Edited July 17 (2 years ago)

I'm using the custom character sheet sandbox. 


It applies everything but the background color; weirdly, when I hover, the background color changes to the correct color but only halfway.


What I'm wanting is for it to look like white text that when hovering turns red. The text color change works but for some reason, the color of the button background isn't changing properly.


.charsheet button[type=roll].sheet-skillbtn::before {content: ""; }
.charsheet button[type=roll].sheet-skillbtn {
height: 20px;
border: none;
background-color: #1f1f1f;
padding: none;
font-weight: bold;
color: white;
}
.charsheet button[type=roll].sheet-skillbtn:hover {
color: red;
}
<fieldset class="repeating_sheet-ranking">    
<button type="roll" class="sheet-skillbtn" value='&{template:default} {{name=Engineering}} {{Result=[[@{char_engineering}]]}}' name'roll_engineering'>Engineering</button>
<select name="attr_char_engineering">
    <option value="2d12kl1">Rank 0</option>
    <option value="1d12">Rank 1</option>
            <option value="1d12+1d2">Rank 2</option>
    <option value="1d12+1d4">Rank 3</option>
    <option value="1d12+1d6">Rank 4</option>
    <option value="1d12+1d8">Rank 5</option>
    <option value="1d12+1d10">Rank 6</option>
    <option value="1d12+1d12">Rank 7</option>
</select>
July 17 (2 years ago)

Edited July 17 (2 years ago)
vÍnce
Pro
Sheet Author

What color do you want the background to be when you hover over the button?
You should be able to just add a background color like so;

.charsheet button[type=roll].sheet-skillbtn::before {
content: "";
}

.charsheet button[type=roll].sheet-skillbtn {
height: 20px;
border: none;
background-color: #1f1f1f;
padding: 2px;
font-weight: bold;
background-image: none;
color: white;
}

.charsheet button[type=roll].sheet-skillbtn:hover {
color: red;
background-color: #1f1f1f;
}

Also, roll20 applies some default formatting to buttons. I added background-image: none; and a little padding which might help as well. Maybe you're handling that in some other css. not sure.

July 17 (2 years ago)

Edited July 17 (2 years ago)
That worked! I didn't realize it was an image. I thought it was just white color and was attempting to change that. Thank you so much! I wasn't trying to change the background color on hover, I just noted that it was only changing on hover.