How to change color of chat window buttons.

Solved. see last post for solution. A player has requested I change my sheet to use chat window buttons like the pathfinder sheet has.  I looked at the sheet for the first time, and I see that it's chat window buttons are black. I don't know how to make buttons that are not red, and would like to have different buttons or groups of buttons have different colors.  I see in a thread from a year ago where everybody agreed it was impossible to have buttons that were not red.  I tried to inspect the elements of the pathfinder sheet, but was unable to figure it out. Can somebody explain to me how the pathfinder sheet gets non-red buttons?

From the Pathfinder Neceros CSS file: .sheet-rolltemplate-pf_generic a[href^="~"], .sheet-rolltemplate-pf_generic .sheet-roll-cell a[href^="~"], .sheet-rolltemplate-pf_generic label span [href^="~"], .sheet-rolltemplate-pf_ability a[href^="~"], .sheet-rolltemplate-pf_ability .sheet-roll-cell a[href^="~"], .sheet-rolltemplate-pf_ability label span [href^="~"], .sheet-rolltemplate-pf_defense a[href^="~"], .sheet-rolltemplate-pf_defense .sheet-roll-cell a[href^="~"], .sheet-rolltemplate-pf_defense label span [href^="~"], .sheet-rolltemplate-pf_attack a[href^="~"], .sheet-rolltemplate-pf_attack .sheet-roll-cell a[href^="~"], .sheet-rolltemplate-pf_attack label span [href^="~"], .sheet-rolltemplate-pf_spell a[href^="~"], .sheet-rolltemplate-pf_spell .sheet-roll-cell a[href^="~"], .sheet-rolltemplate-pf_spell label span [href^="~"], .sheet-rolltemplate-pf_block a[href^="~"], .sheet-rolltemplate-pf_block .sheet-roll-cell a[href^="~"], .sheet-rolltemplate-pf_block label span [href^="~"] { background-color: var(--sheet-pf-bg); color: var(--sheet-pf-text); padding: 2px 4px 1px 4px; margin: 2px -1px 1px 0px; font-weight: normal; display: inline-block; border: 1px solid #789; border-radius: 2px; font-size: .75rem; } .sheet-rolltemplate-pf_generic a[href^="~"]:hover, .sheet-rolltemplate-pf_generic .sheet-roll-cell a[href^="~"]:hover, .sheet-rolltemplate-pf_generic label span [href^="~"]:hover, .sheet-rolltemplate-pf_ability a[href^="~"]:hover, .sheet-rolltemplate-pf_ability .sheet-roll-cell a[href^="~"]:hover, .sheet-rolltemplate-pf_ability label span [href^="~"]:hover, .sheet-rolltemplate-pf_defense a[href^="~"]:hover, .sheet-rolltemplate-pf_defense .sheet-roll-cell a[href^="~"]:hover, .sheet-rolltemplate-pf_defense label span [href^="~"]:hover, .sheet-rolltemplate-pf_attack a[href^="~"]:hover, .sheet-rolltemplate-pf_attack .sheet-roll-cell a[href^="~"]:hover, .sheet-rolltemplate-pf_attack label span [href^="~"]:hover, .sheet-rolltemplate-pf_spell a[href^="~"]:hover, .sheet-rolltemplate-pf_spell .sheet-roll-cell a[href^="~"]:hover, .sheet-rolltemplate-pf_spell label span [href^="~"]:hover, .sheet-rolltemplate-pf_block a[href^="~"]:hover, .sheet-rolltemplate-pf_block .sheet-roll-cell a[href^="~"]:hover, .sheet-rolltemplate-pf_block label span [href^="~"]:hover { text-decoration: none; cursor: pointer; color: #f00; box-shadow: 1px 1px 2px #333; } Command buttons are just links, in the end (beginning with ! for API command buttons, or beginning with ~ for ability command buttons), and you have full style control over the output of roll templates. Note the [href^="~"]  syntax used here, which matches an element with a "href" attribute that starts with ~.

Thanks,  So looking at the css, I think I have figured out what that whole background-color: var(--sheet-pf-bg); is and how it works. which is one of the two things that was confusing me. But what I don't understand at all, is how to specify the class to use in the html Stripped down, my code is sending html to the chat window, something like this. <div ><span >[item](!edParse~ test)</span></div> It works in that I get a redish button.  I have added the following to my css. .sheet-cdd a[href^="~"], .sheet-cdd .sheet-roll-cell a[href^="~"], .sheet-cdd label span [href^="~"] { background-color: green; color: blue; } However adding class="cdd" to either the div tag nor the span tag seems to do anything. And inspecting the element, the cdd class does not seem to be anywhere. It seems to be being stripped out for some reason.  Looking at the pathfinder sheet, it seems to be doing some incredibly complex things with rolltemplates. I am not sure why, but I assume because that allows them to get class tags into it. However the pathfinder sheet does a whole lot of stuff that I am uninterested in duplicating if I can avoid it (such as allowing the user to change the color of the buttons). I am hoping I can get a minimalist html/css combo that will just let me say "give me 5 green buttons and 2 red buttons". Unfortunately, like I said, the pathfinder sheet is doing so much stuff I can't figure out what it is doing and why.  Anybody know the minimalist code needed to get a green button?

a[href^="~"] will look for an anchor tag (<a>) with a href attribute that begins with "~". [item](!edParse~ test) will create an anchor that looks like <a href="!edParse~ test">item</a> . I'm not sure why sheet-cdd would be stripped from your HTML, but that CSS won't work with that button regardless. ~_^

Same thing happens without the tilde.  manually expanding it to put the a href= in myself does not result in a button or a link. 

Can you post a minimal set of HTML+CSS that demonstrates the issue?

Kind of. I have the followng CSS, .sheet-cdd a[href^="~"], .sheet-cdd .sheet-roll-cell a[href^="~"], .sheet-cdd label span [href^="~"] { background-color: green; color: blue; } These three markdown snippits, when pasted into the chat window   <div ><span >[item](!edParse test)</span></div> <div class="cdd"><span >[item](!edParse test)</span></div> <div ><span class="cdd">[item](!edParse test)</span></div> all produce the normal red chat window buttons I have always seen.  I was hoping that the css would cause the button to be blue and green. The above code is cut down from the thousands of lines of code in the pathfinder sheet. When I inspect the element in chrome there is no evidence that any sort of class or css has been applied to it.  I am hoping that somebody can show me the minimal html / css combo that will result in my being able to make chat buttons different colors.  Thanks.

Ah, if you're pasting the div/span into the chat window, that would explain why they're being stripped from the output. Normal chat messages don't get to contain HTML. Despite the fact that plain HTML is valid in a Markdown document, the Roll20 chat only supports a subset of Markdown. If you want control over the output, you'll need to create a roll template in your sheet. Also, again, you're still using [href^="~"] but trying to create an API command button. The CSS does not match. You need to use [href^="!"] instead.

OK, I have ascended to new and interesting levels of frustration and bafflement. As I stated yesterday, when I just paste html code to the chat window, or when I have my program send html code to the chat window, some pre-processor along the way somewhere strips out all class and style references. Fine, I can live with that. But I do know that the pathfinder sheet authors managed to change the color of chat window buttons by using roll templates.  So I added roll templates, and I now have class tags when I inspect the red buttons in my chat window, but for some unknown reason my css has no effect, even though as far as I can tell it should be functionally equivalent. So here is what I have. html. I am using SendChat() to send this to the chat window "&{template:cdd} {{button1=[Dex](!edParse test)}} {{button2=[Str](!edParse test)}}" template: I have the following roll template included in the character sheet. <rolltemplate class="sheet-rolltemplate-cdd"> {{#button1}} <span class="sheet-chat-button">{{button1}} </span> {{/button1}} {{#button2}} <span>{{button2}} </span> {{/button2}} </rolltemplate> css:     I have the following css loaded with the character sheet.  span.sheet-chat-button a, .sheet-chat-button a, span.sheet-chat-button a[href^="!edParse"], .sheet-chat-button a[href^="!edParse"], .sheet-cdd a[href^="!edParse"], .sheet-cdd .sheet-roll-cell a[href^="!edParse"], .sheet-cdd span.sheet-chat-button a[href^="!edParse"], .sheet-cdd .sheet-chat-button a[href^="!edParse"], .sheet-cdd a[href^="!edParse"], .sheet-cdd span [href^="!edParse"] { display: inline-block; background-color: green; color: blue; } Note: the above is supposed to be overkill. I would expect almost all of them to match. None appears to.  results: I get red buttons, not green. When I inspect the button using the chrome debugger tools, it shows that the class tag is there. you can see sheet-rolltemplate-cdd and span class sheet-chat-button.  It seems to me I should be able to select on these.  But the Css used seems to be the default for chat window buttons. Contrast that when I do the same thing on the pathfinder character sheet. You can't actually see the pf-generic in this screen shot, but it is up there somewhere. And when we look at what css the pathfinder sheet actually uses for the button - we see this. the .sheet-rolltemplate-pf_generic .sheet-roll-cell a[href*="~"] is bold, seeming to indicate that it picked that one.  So my question is, what am I doing wrong. Why is it ignoring my css, while finding the pathfinder css? Thanks for any help.

You need to match .sheet-rolltemplate-cdd, not .sheet-cdd.

OK, I have it working. For anybody who cares, following is about the minimal html / css to color your chat window buttons whatever color you want them. I want to thank everybody who posted suggestions and corrections. I am using SendChat() to send this to the chat window "&{template:cdd} {{button1=[Dex](!edParse test)}} {{button2=[Str](!edParse test)}}" template: I have the following roll template included in the character sheet. <rolltemplate class="sheet-rolltemplate-cdd"> {{#button1}} <span class="sheet-chat-button-blue">{{button1}}</span> {{/button1}} {{#button2}} <span class="sheet-chat-button-green">{{button2}}</span> {{/button2}} </rolltemplate> Note that you need to have one button defined for each button you want sent in the same message.  Note that if you assign a class to a button, you can specify the button on the template level.  Here is some css that will give you one blue button and one green button .sheet-rolltemplate-cdd .sheet-chat-button-blue a[href^="!edParse"] { background-color: blue; } .sheet-rolltemplate-cdd .sheet-chat-button-green a[href^="!edParse"] { background-color: green; } The result is one blue and one green button.  So just to sum up, you make a rolltemplate where you specify what color you want each button, you define css for each button. you send a chat message that calls the rolltemplate. One thing that stumped me for a while is that the some css tags that I expected to work did not. I don't know why, but none of the following worked. .sheet-chat-button, .sheet-chat-button a, span.sheet-chat-button a, span.sheet-chat-button a[href^="!edParse"], .sheet-rolltemplate-cdd a, .sheet-rolltemplate-cdd span a, .sheet-rolltemplate-cdd span a[href^="!edParse"], Each of the following DID work .sheet-rolltemplate-cdd .sheet-chat-button a[href^="!edParse"], .sheet-rolltemplate-cdd span.sheet-chat-button a, .sheet-rolltemplate-cdd span.sheet-chat-button a[href^="!edParse"], .sheet-rolltemplate-cdd a[href^="!edParse"], I have no idea why some of the things on the 2nd list did work while some of the things on the first list did not. But here are some tips. Nothing worked that did not start at the .sheet-rolltemplate level. You simply can't start at the button level. But I have no idea why the last 3 on the first list did not work, while the ones on the 2nd list did.  Once again, thanks to eveybody for helping me with this, I hope this explaination will be useful to others.

I came up with a more flexible way to do it. The problem with the solution in the previous post is that each template has to be made for a specific set of colors on the buttons. IE: a template that can do up to 20 buttons, but the first 5 must be green, the next 2 must be yellow, and all the rest must be blue. If you want a different color combination, then you need to setup a new template. Assuming the API script you are calling with your buttons can be persuaded to ignore it's last parameter, you can include the color you want inside the link.  So in this version the sendChat() message will be  "&{template:cdd} {{button1=[Dex](!edParse test green)}} {{button2=[Str](!edParse test blue)}}" The rolltemplate does not need any button to have a class (but you may optionally have one if desired)  For that matter the span's are optional as well.  <rolltemplate class="sheet-rolltemplate-cdd"> {{#button1}} <span>{{button1}}</span> {{/button1}} {{#button2}} <span>{{button2}}</span> {{/button2}} </rolltemplate> And the css, instead of looking at the beginning of the link to see if it is worth styling, looks at the end of the link for a color. .sheet-rolltemplate-cdd a[href$="blue"] { background-color: blue; } .sheet-rolltemplate-cdd a[href$="green"] { background-color: green; } You still have to define every possible button color in your css, but that is not a problem, and like I said, your api script has to not mind getting a color after all the prompts it was expecting. 

glad you figured it out.  Vince did the css for those buttons. yeah it is annoying to do them for each color and for every template. We do use css variables to set the colors, so instead we just have one set of css per rolltemplate. but that doesn't help if you want more than one color in the same roll.

Chris D. said: Assuming the API script you are calling with your buttons can be persuaded to ignore it's last parameter, you can include the color you want inside the link. You should be able to send a separate color parameter to the rolltemplate, if that's what you want. Something along the lines of: <rolltemplate class="sheet-rolltemplate-cdd"> {{#button}} <span class="sheet-chat-button-{{button color}}">{{button}}</span> {{/button}} </rolltemplate>