Remove roll20 css from type="roll" buttons

Hello,

I'm new to designing character sheets for the platform, so please bear with the noob question.
I've made my html, javascript and css files, but to when I try to replicate some elements on a character sheet, particularly <button type="roll" class="myClass"> format buttons, roll20 messes around with the css I've defined.

I found the way to remove the annoying dice graphic in this article: https://wiki.roll20.net/Button#Styling_Roll_Buttons , but unfortunately that's not the only thing that gets done automatically. My main issue right now is that while the button looks fine while inactive, hovering over animates the background image to rise upwards while extending the size of the button, while the style I defined in myClass:hover does not show up.

Is there a way to remove all annoying tacked on behavior wholesale? If not, what can I do to remove the animation and have the class I defined take priority?

Thanks!

Hi zoliking,
you can try adding a css reset https://wiki.roll20.net/CSS_Wizardry#Reset_Styles
I would also recommend prepending any css rules with .charsheet
ie .charsheet .myclass { ... }

Thank you, I'll try that!

No button, no formatting issues. ;-p

Can you post your button-related code?

example; that might get you going with a basic setup

.charsheet button[type=roll].myclass::before {
	content: "";
}

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

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

What I have now is:
HTML:

<input name="attr_TEST" type="text">
<button type="roll" class="test" value="[[1d20 + @{TEST}]]"></button>

CSS:
*
    {
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    }

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

.charsheet .test
    {
    width: 25px !important;
    height: 25px !important;
    color: transparent;
    background-repeat: no-repeat;
    border-style: none;
    background-color: transparent;
    background-image: url("url/someImage.png");
    }
    
.charsheet .test:hover
    {
    background-position: initial;
    background-image: url("url/someImage2.png");
    }

With this I've removed the die graphic, the animation on hover and the background displacement on hover. Turns out the background graphic did change, I just didn't see it because of the displacement. The last issue is that the button is several pixels bigger in both dimensions than the 25x25 I'm trying to set it as.

The last issue is that the button is several pixels bigger in both dimensions than the 25x25 I'm trying to set it as.

Could be a border and/or padding...  I would try adding border: none;(or whatever, if you want a border) and padding: 0;  It wouldn't hurt to increase the specificity with your button-based css rules by including button[type="roll"] ie
.charsheet button[type="roll"].test {...}

Tip: I often use the browser's inspect element to see which styles are being applied to a given element.  The Layout and Computed windows will also help you determine the hierarchy of styles being applied.  You can make changes in the editor and see those changes in real-time on your sheet. Once you find something that works, duplicate those changes in your code.

I did try border and padding they did nothing. I also checked out what's affecting the button and there's a

height: auto !important;
width: auto !important;

in there somewhere. I'm suspecting that's the culprit.

Is the "!important" coming from your css?  I doubt that would be from the vtt's base css, but I could be wrong.  Normally you should avoid using !important other than for testing (ie forcing a style for what-if/troubleshooting, etc. Rarely should be used.) because it will break the cascade and can be difficult to troubleshoot.  Always better to increase specificity if you need to override other styles.

It's in button[type=roll].ui-draggable-dragging from the roll20 charsheet.css

zoliking said:

It's in button[type=roll].ui-draggable-dragging from the roll20 charsheet.css

Hmm.  Are you seeing ".ui-draggable-dragging" being added to your sheet's buttons in the inspector?  I just did a quick peek at a sheet and it looks like "btn" and  "ui-draggable" are being added by the vtt but not .ui-draggable-dragging .  I'm guessing that .ui-draggable-dragging  only gets applied when you are dragging a button to the macro bar, so that shouldn't be an issue here.

That makes sense. No idea where the oversize comes from then... :(

Feel free to either post a snippet (html and css) of the actual code you are using or a link to all of it and I'll have a look.  You can DM me a link if you would rather not post publicly.  I'm sure GiGs, Scott, or someone else will come along and post something obvious. ;-)

The code I posted is the one I'm seeing the issue on. I haven't even tried to enter my full character sheet html and css into roll20, I'm just trying the platform. That's why everything is test this, test that. The only thing I changed is the url for the image, find any 25x25 png, fill that in and you'll be where I am.

This works for me... at least I don't see any issues (sorry, my screen-cap crop is off).
normal

hover

I added background-size: contain; just to ensure the entire image is seen within the 25x25 box.
Only code I changed.

.charsheet .test {
  width: 25px !important;
  height: 25px !important;
  color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  border-style: none;
  background-color: transparent;
  background-image: url("https://i.imgur.com/4fx6I3s.png");
}

.charsheet .test:hover {
  background-position: initial;
  background-image: url("https://i.imgur.com/2uMXxZd.png");
}

I don't get that. If the button is 25x25, the background image resolution is 25x25, then it should fill it by default, right? That's what it does if I just open the same thing offline. I think the line you added rescaled your image to a size of 30x30.

For the roll20 screenshot I bumped the contrast of the button's edge up in post by a lot so it's clearly visible. In reality it's barely noticable. But the area sensitive to the mouse matches it.

You are right, the button is increased from 25px to 29px.
Using the inspector on the button, I see there is padding being added to the button which adds to the 25px
base.css

.ui-dialog .charsheet button[type=roll],
.ui-dialog .charsheet button[type=compendium] {
    padding: 2px 3px;
    font-size: 1.3em;
    margin: 0px 3px 0px 3px;
}

the vtt is giving box-sizing: content; by default, which adds the padding to the width of the element.
Adding box-sizing: border-box; or increasing specificity and adding padding: 0;
example;

.tab-content .charsheet button[type="roll"].test {
    width: 25px !important;
    height: 25px !important;
    color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    border-style: none;
    background-color: transparent;
    background-image: url("https://i.imgur.com/4fx6I3s.png");
    box-sizing: border-box;
    padding: 0;
}

should solve your button scaling issue.

That did it!! <3 If there was an upvote or award system in place I'd be sending you one now. Thank you!!!

Truth be told, I should have considered box-sizing once you said you tried padding:0 but it didn't change anything on the button.  If you don't want to have similar issues with odd-sized elements when using precise element dimensions, you could add box-sizing: border-box as a class rule to a parent element (ie wrapper) which would cascade down to all child elements.
Anyhow.  Have fun sheet building.

I will do that, thanks for the advice!