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

Links instead of roll buttons

I see on some sheets you just click the name of the thing you want to roll instead of there being a separate roll button. How do I do this in the html?
1599232712
Andreas J.
Forum Champion
Sheet Author
Translator
It must always be a button, but you can change the buttons appearance to be only text. You can take a look at my Stargate sheet for a fairly simple example of how it can be done. <a href="https://wiki.roll20.net/CSS_Wizardry#Styling_Roll_Buttons" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Styling_Roll_Buttons</a> has an example on how to remove the default dice icon from the roll button.
1599232805
GiGs
Pro
Sheet Author
API Scripter
This is done with CSS. It';s still a button, but CSS has been used to change its appearance. This tells you how to remove the dice icon: <a href="https://wiki.roll20.net/CSS_Wizardry#Styling_Roll_Buttons" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Styling_Roll_Buttons</a>
Thanks, but still unclear. I might need this really spelled out for me! I assume this is meant for CSS rather than html? button[type = roll].sheet - blank - roll - button::before { content: '' ; } I put it in the CSS and changed the font-family as instructed, but the button is still there.
1599236411
Andreas J.
Forum Champion
Sheet Author
Translator
I updated that section, as well as the Button page a bit. Rich K. said: Thanks, but still unclear. I might need this really spelled out for me! I assume this is meant for CSS rather than html? button[type = roll].sheet - blank - roll - button::before { content: '' ; } I put it in the CSS and changed the font-family as instructed, but the button is still there. Yes that is CSS, and it sets so that any button with the class blank-roll-button so that the default d20 is removed from the button. You also need in the html setthe button to have that class: &lt; button type = "roll" value = "/roll 1d20 + @{Bluff}" name = "roll_BluffCheck" class=" blank-roll-button" &gt; &lt; /button &gt;
1599236417
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Essentially, you need to overwrite all the css styling that makes the button look like a button with your own styling. Inspect a button in your browser's dev console to see what styles it currently has and you can even play around with modifying them to see what changes you want to make.
1599236773
Andreas J.
Forum Champion
Sheet Author
Translator
Thanks, but still unclear. I might need this really spelled out for me! I assume this is meant for CSS rather than html? I suggest you get some more familiarity with the basics of HTML and CSS, to be able to better understand whats going on. If you had trouble with reading the code of that half-done, but simple example, you will have trouble learning from more complicated examples or by looking at existing sheet code. Anyway, I updated the section to make it more clear for the future.
Many thanks Andreas, yes that's much clearer. You're not wrong that I'm lacking in familiarity, but I've found I learn best via reverse-engineering. In this case all I was missing was the need for a class specification, and now I know for next time. Much appreciated!