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

Make text act as buttons custom character sheet

August 18 (4 years ago)

this has probably been asked before but how do you make text work as buttons to do rolls in a custom character sheet. I am trying to limit space used and the button graphic is not needed for my sheet. Sorry if dumb question but need help and can not find it anywhere.

August 18 (4 years ago)

Edited August 18 (4 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

you just have to style the button to remove the default dice icon, and to make the borders and background transparent, and then just have some text in the button.

Take a look at my Stargate sheet for an example:


<button name="roll_str" type="roll" value="/r 1d20+@{str_mod}" class="txt-btn large">STR</button>
button[type="roll"].sheet-txt-btn:before{
content: ' ';
}

button[type="roll"].sheet-txt-btn{
height: 22px;
border-style: none;
background-color: transparent;
margin-left: 5px;
font-weight: bold;
padding: 2px 5px 4px 5px;
}

button[type="roll"].sheet-txt-btn:hover{
background-color: #d9d9d9;
border-radius: 10px;
}


Then you just need to reduce the margin, padding and font-size of the button to make it small enough for your taste.


The wiki has an section that shows how to change the default dice by overriding it.

August 18 (4 years ago)

Thank you. I am learning css as I go. I have done most from watching videos and searching forums. I am glad there are people like you to help out when new coders get stuck.

August 18 (4 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

You should read the roll20 documentation, and general html/css documentation.

The CSS Wizardry shows a number of tricks to make a few things in Roll20 that isn't completely standard html/css(as some things need to be done withing the restrictions we have with how the sheet works).

September 12 (4 years ago)

Edited September 12 (4 years ago)

I'm having some trouble with this - everything seems fine in the Preview window but when I go to play this happens: 


<div class="divTableCell"><button name="roll_trust" type="roll" value="[[(@{Trust}+?{Bonus Dice|0})d6>4]]" class="txt-btn large">TRUST</button></div>
button[type="roll"].sheet-txt-btn:before{
  content: ' ';
}

button[type="roll"].sheet-txt-btn{
  height: 20px;
  border-style: none;
  background-color: transparent;
  margin-left: 5px;
  font-family: "Rubik", Arial;
  font-style: italic;
  font-size: .8em;
  font-weight: bold;
  color: #ffffff;
  padding: 5px 0px 0px 0px;
}

button[type="roll"].sheet-txt-btn:hover{
    border-style: none;
    background-color: transparent;
}