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

Clicking on text on sheet as a roll button, like in the 5e charSheet

1586477146

Edited 1586477858
Daniel S.
Pro
Sheet Author
Hi. I'm trying to make it so players can click on the text in a table (for example somewhere where it has the 'Strength' attribute, in order to roll strength + dice, etc.) as the button, instead of a separate button. This would save a lot on screen real estate, and I know the 5e character sheet does this because you can click right on the saving throw text to roll that saving throw. Same with the skills. This would be invaluable at making an accessible character sheet. I can't seem to find out how, other than using checkboxes. An 'invisible' button that doesn't cover up text would be one possible solution. Haven't been able to solve it yet. Thanks! Edit: I figured out how to make the button have 0 opacity, and I know there's some way to layer things on a z axis with CSS but haven't figured out how to cram that into a roll20 table.
1586480315

Edited 1586481379
admiralnlson
Sheet Author
The recommendation I've read not long ago on these forums is to use a button anyway and style it to make it look like regular text with CSS. You might want to check out&nbsp; <a href="https://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link" rel="nofollow">https://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link</a> As well as&nbsp; <a href="https://wiki.roll20.net/Image_use_in_character_sheets#Roll_Button" rel="nofollow">https://wiki.roll20.net/Image_use_in_character_sheets#Roll_Button</a> &nbsp;which shows how to get rid of the d20 image added by default on roll buttons.
1586483559
Daniel S.
Pro
Sheet Author
That sounds like what I'm looking for. I'll check out those link!
1586497029

Edited 1586497084
Daniel S.
Pro
Sheet Author
I followed the link and messed around a little bit. I came up with this: <a href="https://www.dropbox.com/s/eiq8nzzf506ajmt/Screenshot%202020-04-10%2000.36.38.png?dl=0" rel="nofollow">https://www.dropbox.com/s/eiq8nzzf506ajmt/Screenshot%202020-04-10%2000.36.38.png?dl=0</a> It works and could work for now, but that d20 button is still there. I also found this tidbit in the roll20 guides. But don't understand how to implement it.&nbsp; "Want a roll button that doesn't have a d20 image in it? Simple! button[type = roll].sheet - blank - roll - button::before { content: '' ; } The d20 is a single character with the&nbsp; dicefontd20 &nbsp;font-family in the button's&nbsp; ::before &nbsp;pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well." Does this go inside the normal &lt;button... in the html with the closing tag? Is this just added over in the CSS? If so is it right after the .sheet-attributerollbutton { etc... For reference, here is my html: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;td class="ATRcolumnTotal"&gt; &lt;button class="attributerollbutton" type="roll" value="/roll 2d6 + @{knockout}" name="roll_knockouttest"&gt;KO&lt;/button&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!--KO--&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; And the CSS: .sheet-attributerollbutton { &nbsp; background: none; &nbsp; outline-color: transparent; &nbsp; border: none; &nbsp; padding: 0!important; &nbsp; font-family: 'Girassol', cursive; &nbsp; color: white; &nbsp; cursor: pointer; &nbsp; font-weight: lighter; } Gonna mess with this a little more then call it a night.
1586501160
GiGs
Pro
Sheet Author
API Scripter
That section from the wiki is telling you add to your CSS a copy of the button reference, but add ::before after it. like so button[type=roll].sheet-attributerollbutton { background: none; outline-color: transparent; border: none; padding: 0!important; font-family: 'Girassol', cursive; color: white; cursor: pointer; font-weight: lighter; } button[type=roll].sheet-attributerollbutton::before { content: ''; }
1586538717
Daniel S.
Pro
Sheet Author
Thanks! That did the trick for the most part. I was really close. I did try putting it after, but what I was missing was adding the button[type=roll] before the .sheet- etc. It's still bigger and bolder for some reason, but hopefully I can solve that one or I might come back again. Trying to get it to look like the rest of the text. <a href="https://www.dropbox.com/s/dafqbfxjwavxlpi/Screenshot%202020-04-10%2012.09.59.png?dl=0" rel="nofollow">https://www.dropbox.com/s/dafqbfxjwavxlpi/Screenshot%202020-04-10%2012.09.59.png?dl=0</a>
1586539960
Andreas J.
Forum Champion
Sheet Author
Translator
My Stargate RPG is an example of a sheet where the dice and borders are removed from the buttons to have the text blend in better with the sheet. This is the section on the .css file
1586540040
GiGs
Pro
Sheet Author
API Scripter
the button is bigger and bolder, or the text within it? Either can be corrected in the css.
1586547757
Daniel S.
Pro
Sheet Author
Thanks for the help again. The 'font-weight' property wasn't working, but if I used 'font-size: 100%;', that got rid of the bold and extra sizing. There's still a little border thing on top despite setting border, background, etc. to none. It doesn't look awful and maybe I'll just keep it. But it'd be nice to turn it off. Maybe I can figure it out. This is what I have: button[type="roll"].sheet-attributerollbutton{ &nbsp; background: none; &nbsp; outline-color: transparent; &nbsp; border-style: none; &nbsp; background-color: transparent; &nbsp; font-family: 'Girassol', cursive; &nbsp; color: white; &nbsp; font-size: 100%; &nbsp; font-weight: lighter; } button[type=roll].sheet-attributerollbutton::before { &nbsp; content: ''; }
1586548445

Edited 1586548518
GiGs
Pro
Sheet Author
API Scripter
The border is probably being inherited from some other element, or may be being applied to the buttons container. If you right click on an item and select Inspect Element (the exact text varies in browser), it'll open a sidebar at the side or bottom, which lets you see the CSS applied to each element. You might be able to figure out where rogue CSS is coming from, but it can take a while of exploring different elements and figuring out how the interface works. I'd change border-style: none; to&nbsp; border:0;
1586549152

Edited 1586549219
Daniel S.
Pro
Sheet Author
Huh. That's a neat trick. I changed that and it's still there. This is what it says: (maybe the draggable button has something to do with it?) &lt;button class="sheet-derivedattributerollbutton btn ui-draggable" type="roll" value="/roll 2d6 + @{reflex}" name="roll_reflexbutton" data-characterid="-LvXTEZwHpU67mRVfGD3"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; RF&lt;/button&gt; Now that it's working I have a new problem of it not centering the text for some reason. Even with... button[type="roll"].sheet-derivedattributerollbutton{ &nbsp; background: none; &nbsp; outline-color: transparent; &nbsp; border: 0; &nbsp; background-color: transparent; &nbsp; font-size: 100%; &nbsp; padding: 0; &nbsp; font-family: 'Girassol', cursive; &nbsp; color: white; &nbsp; text-align: center; &nbsp; font-weight: lighter; } button[type=roll].sheet-derivedattributerollbutton::before { &nbsp; content: ''; } <a href="https://www.dropbox.com/s/8ewwezlfbrbgiia/Screenshot%202020-04-10%2015.04.32.png?dl=0" rel="nofollow">https://www.dropbox.com/s/8ewwezlfbrbgiia/Screenshot%202020-04-10%2015.04.32.png?dl=0</a> Edit: This is the parent element, if I'm using that term right. .sheet-ATRcolumnTotal { &nbsp; &nbsp; font-size: 110%; &nbsp; &nbsp; padding: .3em; &nbsp; &nbsp; background-color: #352719; &nbsp; &nbsp; color: #ffffff; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; font-family: 'Girassol', cursive; }
1586550387
GiGs
Pro
Sheet Author
API Scripter
CSS is additive - every element of the same type, or every element before it in the hierarchy can influence it. The CSS applied to other buttons, or to the buttons container, and their containers, and so on can affect this. The text in your button might be influenced by table or td formatting too. The way you normally override existing CSS is by making your CSS more specific. &nbsp;This means adding extra descriptors to the style. You can safely add .charsheet to the start of any element, then add extra elements if needed. Your button is included in a table cell, so you could do this .charsheet table tr td button[type="roll"].sheet-derivedattributerollbutton{ this means any button with the&nbsp;derivedattributerollbutton style that is inside a td inside a tr inside a table, on the charsheet. That's very specific! If you are still failing to override the style, it most likely means the style isnt on the button at all - but on something else (like some part of the table). One thing I notice, is that you have bare text inside the button. If you want to apply formatting to that text, its better to put it in a span or div, something like &lt;button class="attributerollbutton" type="roll" value="/roll 2d6 + @{knockout}" name="roll_knockouttest"&gt;&lt;span&gt;KO&lt;/span&gt;&lt;/button&gt; then you can apply style directly to the text, like .charsheet button[type="roll"].sheet-derivedattributerollbutton span { &nbsp;&nbsp;&nbsp;&nbsp; display:inline-block; &nbsp;&nbsp;&nbsp;&nbsp; text-align:center; } Then move the text formatting from your button to the span. That said, It's best if you can figure out where the rogue formatting is coming from, and write CSS to directly affect that.
1586550562

Edited 1586550591
Daniel S.
Pro
Sheet Author
Found a temporary fix by doing:&nbsp; &nbsp; padding: 0px 5px 0px 0px; But it looks like the text is still bold and has some soft edges on the text. It's just formatted different than the rest of the table. Feel's like I tried every CSS styling option. Maybe something is overriding somewhere, but even !important doesn't work. <a href="https://www.dropbox.com/s/crimg3eiotcj3ly/Screenshot%202020-04-10%2015.29.19.png?dl=0" rel="nofollow">https://www.dropbox.com/s/crimg3eiotcj3ly/Screenshot%202020-04-10%2015.29.19.png?dl=0</a>
1586550729
Daniel S.
Pro
Sheet Author
Just saw your reply, I'll try those out. Thank you!
1586553930

Edited 1586554453
Daniel S.
Pro
Sheet Author
I went ahead and switched to the &lt;span&gt; method. It didn't immediately solve it, but I did finally realize the solution after noticing an added white line here: Apparantly the default template for buttons in roll20 adds text-shadow, so I just changed that to&nbsp; text-shadow: none; In the &lt;span&gt; and now it looks like the rest! Of course it was a simple solution after all. Still got the rounded box outlines, but can work with that for now. Probably another roll20 button default that's hidden somewhere? Edit : it looks like using &lt;span&gt; introduced space between the cells. Going back to not using span made the table compact again. Not sure why. But it seems workable for now. Maybe some day I'll figure out where that border is coming from.