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

Need Help with Button Styling

April 13 (3 years ago)

Edited April 13 (3 years ago)

I'm stuck on a little problem with styling buttons. Below is an image of what I have managed to code and I was able to take out the d20 icon. However, I want to take away the box around 'Strength' and make it just a text button. Like how the D&D 5e sheet has it. I also want to take away the boxes around the numbers.


I would appreciate any help. Thank you.


UPDATE: I have figured out how to remove the boxes around the numbers! (You have no idea how excited I got over something so small lol) The only thing left is making the word Strength a text button. I tried doing what I did with the numbers to remove the box but nothing changed.

April 13 (3 years ago)

Edited April 13 (3 years ago)
vÍnce
Pro
Sheet Author

Hi Sirius,

love those little victories. ;-)
Is this for a custom sheet?  Might I suggest posting a snippet of your css that removes the button styling to help other's that travel this same road?

There are some examples on the wiki for dealing with chat buttons. https://wiki.roll20.net/Chat_Menus#Other
Ziechael also has a real cool trick of just using a backtick inside the macro command that forces text-only buttons. here

April 13 (3 years ago)

Basically, I added background: none; and border: none; to both of my number value boxes. 

.str-value{
font-size: 35px;
font-weight: bold;
text-align: center;
width: 50px;
height: 35px;
background: none;
border: none;
}

.str-mod-value{
font-size: 20px;
font-weight: bold;
text-align: center;
width: 30px;
height: 15px;
background: none;
border: none;
}

Now, I'm really just trying to remove the button around Strength. I looked at what you shared, however, I'm relatively new to coding and just got confused as to how those codes were implemented.

This is my html with the button:

<div class="str-container">
<button class="sheet-blank-roll-button" type="roll" name="attr_str-check" value="&{template:default}{{name=Strength Check}}
{{Roll=[[d20 + @{str-mod}]]}}">Strength</button>
</div>


This is my css with the button:

button[type=roll].sheet-blank-roll-button::before{
display: none;
}

The display: none; removed the d20 icon that is there by default.

April 13 (3 years ago)

Edited April 13 (3 years ago)
GiGs
Pro
Sheet Author
API Scripter

When something isnt worjking, that should work, you often need to to improve specificity - that means add extra classes and html elements that match. In roll20, everything is inside .charsheet so you can add that to the start of all CSS elements, in the hope it changes things.

To fully get rid if the button, you need to clear the border, background, and box-shadow element. This should work for a button:

.charsheet button[type=roll].sheet-blank-roll-button {
    border:0;
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.charsheet button[type=roll].sheet-blank-roll-button::before {
    content: "";
}

Bear in mind, you usually need some indicator that there is a button there, so players know they can click it.


PS: thanks for that link, Vince. I didnt know about the backtick method of hiding API buttons.

April 13 (3 years ago)

Thank you so much GiGs. I completely forgot about everything being wrapped in .charsheet and as soon as I added that, it worked. I appreciate you helping me with this!

GiGs said:

When something isnt worjking, that should work, you often need to to improve specificity - that means add extra classes and html elements that match. In roll20, everything is inside .charsheet so you can add that to the start of all CSS elements, in the hope it changes things.

To fully get rid if the button, you need to clear the border, background, and box-shadow element. This should work for a button:

.charsheet button[type=roll].sheet-blank-roll-button {
    border:0;
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.charsheet button[type=roll].sheet-blank-roll-button::before {
    content: "";
}