Can you have different buttons on a Character Sheet?

Upkeeping an old sheet. I'd like to have a few different buttons to work with on the sheet. Is it possible to do this with html and CSS? The sheet is full of Dice Buttons. Standard Gray, could I call different buttons and set them to different colors in CSS?

Hi Pearson Nolls, Regular buttons can make rolls to chat; &lt;button type="roll" name="roll_something" value="[[ 1d20 ]]"&gt;Roll Me&lt;/button&gt; There are also action buttons that can be used to trigger sheetworker code to do other "stuff". &lt;button type="action" name="act_something"&gt;Push Me&lt;/button&gt; Add a class to the button and style them with css as needed. More info on the wiki; <a href="https://wiki.roll20.net/Button" rel="nofollow">https://wiki.roll20.net/Button</a> lol I see you edited/updated your OP. Are you editing an existing sheet, making your own sheet, or just want to override the styles without editing html/css?

Contributing to Saga Edition. I worked on it a bit back in '19 as well. I'm editing the html/css. All the buttons are white. I'd like to change the Use the Force button to a blue color to set it apart. Anyway to do this? Thanks for the help.

You should be able to change the color.&nbsp; How you exactly do that kind of depends on how the sheet is actually setup the html/css.&nbsp;&nbsp; I just had a quick look at the SW Saga sheet .&nbsp; It looks like it's setup to use css variables for the button styles which should make it easier to edit in one spot. I think you can simply edit the variable and it will change all the buttons that use those variables. I would start by changing the color options in the css sheet here;&nbsp; (ie --button-bg: #a7a8aa; is probably a good place to start) :root { /* Light mode colors */ --sheet-text: #000; --input-border: #222; --input-border-top: #ccc; --input-disabled-bg:#e3e3e3; --input-disabled-border:#444; --input-disabled-border-top:#999; --header-bg: #000; --header-text: #fff; --button-border: #d0d0d0; --button-bg: #a7a8aa; --button-inset: #ffffff80; --button-image: #000000; --button2-text: #333; --checkbox-accent: #606060; --persistent-checked-bg: #888; --persistent-checked-inset: #6668; --persistent-checked-textshadow: #707070c0; --button-border: #8886; --button-border-bot: #7776; --button-text-shadow: #ffffffc0; --button-bg: #f5f5f5; --button-gradient1: #fff; --button-gradient2: #e6e6e6; --button-shadow1: #ffffff33; --button-shadow2: #0000000d; } There may be other places in the css that override these.&nbsp; If so, you'll need to track them down and edit them as needed. There are some specific button styles here that may help if the editing the variables do not work; /* ******** Buttons, Checkboxes, and Radio Buttons ******** */ .charsheet button[type=roll] { padding: 5px 10px 5px !important; font-size: 20px; background-color: var(--button-bg); font-weight: bold; text-shadow: 1px 1px var(--button-border); color: var(--button-image); border-radius: 100px; border: 1px solid var(--button-border); cursor: pointer; box-shadow: 0 1px 0 var(--button-inset) inset; } .charsheet button[type=roll].blank-roll-button::before { content: "";} .charsheet button[type=roll].blank-roll-button, .charsheet button[type=roll].small-roll-button { font-size: 12px !important; line-height:5px; } .charsheet button[type=action] { /*The only button on the sheet that uses this right now is the button for taking second wind.*/ padding: 4px 6px; font-size: 13px; line-height: 18px; color: var(--button2-text); text-shadow: 0 1px 1px var(--button-text-shadow); background-color: var(--button-bg); background-image: -moz-linear-gradient(top, var(--button-gradient1), var(--button-gradient2)); background-image: -ms-linear-gradient(top, var(--button-gradient1), var(--button-gradient2)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--button-gradient1)), to(var(--button-gradient2))); background-image: -webkit-linear-gradient(top, var(--button-gradient1), var(--button-gradient2)); background-image: -o-linear-gradient(top, var(--button-gradient1), var(--button-gradient2)); background-image: linear-gradient(top, var(--button-gradient1), var(--button-gradient2)); border: 1px solid var(--button-border); border-bottom-color: var(--button-border-bot); border-radius: 4px; box-shadow: inset 0 1px 0 var(--button-shadow1), 0 1px 2px var(--button-shadow2); cursor: pointer; }

Thanks Vince, I'll dig into this. Is there anyway to have one roll button colored different from the rest?

Pearson Nolls said: Thanks Vince, I'll dig into this. Is there anyway to have one roll button colored different from the rest? Sure.&nbsp; You can give the button a unique class and style it.&nbsp; Make sure you have a higher specificity in your class selector to override anything already setup up to style that button. Adding a class is good if you decide to style other elements later. &lt;button type="roll" class="super-special-button" name="roll_something" value="[[ 1d20 ]]"&gt;Roll Me&lt;/button&gt; .tab-content .charsheet button[type="roll"].super-special-button { &nbsp;&nbsp;&nbsp; background-color: blue; &nbsp;&nbsp;&nbsp;&nbsp;color: #fff; } The better option is probably to use an id to uniquely target the button. id's only work with THAT particular element. &lt;button type="roll" id="special-button" name="roll_something" value="[[ 1d20 ]]"&gt;Roll Me&lt;/button&gt; #special-button { &nbsp;&nbsp;&nbsp; background-color: blue; &nbsp;&nbsp;&nbsp;&nbsp;color: #fff; }