Change to roll button?

Hey people, I've seen a couple of threads who had the change of the roll button appearance as a topic, but nothing I read there seems to be still working. (Or I made some terrible mistakes!) What I want to achive is the roll button to show only a D6 in a certain color instead of the default D20, no border, no background, just a clickable D6 symbol I think I can change colors (sometimes it works, sometimes not) but how to change the symbol is beyond me. An helpers?.

Which roll button are you talking about? The one on the tabletop toolbar? On a character sheet? In a roll template of a particular character sheet? How are you changing the color?

Oh, sorry, in another thread I was talking about my char sheet so I forgot to mention it here. Yes, I want to redesign the roll button on a char sheet. I removed background and borderwith CSS, set it to bold and also changed color. Only thing that doesn't work is changing the symbol. Also, I just realized, although this is supposed to be a font, I can't change font-size either.

Ah, I can't help you there. I've never made a sheet.

To bad, but thanks for trying!

Can you post the button code, and the CSS you are using for it?

This is the HTML part: <button class="button-roll" type="roll" name="k-roll" value="[[@{k-pool}d6]]" /> And this is the CSS: .sheet-button-roll { color: #500000; background: none; border: none; font-weight: bolder; }

What you need to add .sheet-button-roll {     background-image: none; font-family: dicefontd6; content: "l";     color: #500000; } I'm not 100% sure if background-image line is needed, but the other two are. You can experiment to see if border or font-weight are needed. The names of the fonts and their characters are here:  CSS Wizardry: Dice Fonts Content is the replacement letter - f is good for dark backgrounds, l  is better for light backgrounds.

Unfortunately, the symbol does not change. The dicefont-thing was, what I found in older threads, too. I can remove the background, I can change color, I can use bolder fonts. But for my life, I can't get rid of that damn D20 symbol or the size of it! This is as far as I get:

You need to change the :before or :after (can't remember which, inspect a button to find out which one) pseudoelement to change the displayed icon, I typically just wipe the default styling Frome the pseudoelement and then just style the button itself, putting the text I want inside the button.

Can you give me an example on how to do that? I actually didn't understand a word...

That'll teach me to try to do CSS from memory. Scott means to do this button[type=roll].sheet-button-roll::before {     background-image: none; font-family: dicefontd6; content: "l";     color: #500000; }

And again, you work miracles and show my lack of CSS understanding. Thank you. Now even font-size works! But I had to have two CSS blocks, one for the symbol, one for general button appearance. .sheet-button-roll { color: #500000; background: none; border: none; font-weight: bolder; } button[type=roll].sheet-button-roll::before { font-family: dicefontd6; content: "F"; font-size: 2em; color: #500000; }

You're welcome Werner. Scott C. said: You need to change the :before or :after (can't remember which, inspect a button to find out which one) pseudoelement to change the displayed icon, I typically just wipe the default styling Frome the pseudoelement and then just style the button itself, putting the text I want inside the button. Scott, can you give an example of how you do this. CSS (and especially dealing with roll20's default styles) is still pretty arcane to me.

Sure. So in the Starfinder sheet, I do this styling for my buttons: button[type=roll], button[type=action], button[type=compendium], button[type=cancel], button[type=submit], button[type=finish], button[type=back], label{     background-color: transparent;     border: none;     line-height: 12px;     background-image: none;     box-shadow: none;     padding: 0px;     margin: 0px;     font-weight: bold;     text-align:left;     position:relative; } button[type=roll]::before{     content: "" !important; } This sets my buttons to what I want as the default styling. Then in the html I can do something like: <button class='pictos' type='action' name='act_compendium' title="View the feat's compendium page">i</button> Where the pictos class is a class that gets the pictos font from a css declaration. I'm using an action button here, but the method works the same regardless of button type.

What type of buttons would the "+Add", "Modify" and "Done" from the fieldset be?

Werner said: What type of buttons would the "+Add", "Modify" and "Done" from the fieldset be? They use the "repcontrol_..." class. ie&nbsp;&nbsp; repcontrol_edit,&nbsp;repcontrol_add,&nbsp;repcontrol_del,&nbsp;repcontrol_move. <a href="https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections</a>

Thanks a bunch!

Thanks, Scott. :)