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

Anyone have ideas for how to chromakey roll20 chat?

1641949092
Like the title says, I'm currently working on a twitch stream overlay that will have a cool little section for the chat box. My desire is to be able to chromakey the background of the chat box out.  2 problems with this 1) Obviously I can't chromakey out "white" becuase it'll remove all of it 2) I'm colorblind so I can't really differentiate between some of the colors in the color wheel when selecting my filters. Does anyone have any suggestions or has anyone else done this that can point me in the right direction for what to do setup wise to chroma out the background? Thanks in advance!
1641951951
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
You could use Stylus to intercept and change the CSS for that area. This is Chromakey Green in the chat input area: #textchat-input textarea.ui-autocomplete-input  { background-color:#00b140 !important; } The top post in this thread will tell you more about Stylus, including how to install the extension and use a style: Show Off Your Style 2: The Stylening!
1642005306
keithcurtis said: You could use Stylus to intercept and change the CSS for that area. This is Chromakey Green in the chat input area: #textchat-input textarea.ui-autocomplete-input&nbsp; { background-color:#00b140 !important; } The top post in this thread will tell you more about Stylus, including how to install the extension and use a style: Show Off Your Style 2: The Stylening! Thanks for the reply! That sounds like what I'm looking for. But when I tried to create that style, I got this error: 1 error prohibited this style from being saved There were problems with the following fields: Style code has an error - parse error on value "$" ($end) on line 3 around "portant; }". If you need help, post a new discussion at <a href="https://forum.userstyles.org/post/discussion/5" rel="nofollow">https://forum.userstyles.org/post/discussion/5</a> Any thoughts?&nbsp;
1642006287
ok I think I got it working. But the wrong area is chroma key. I was looking to make the actual chat log the chroma. Like the chat history. So I could chroma out the background and only see the text and dice rolls, etc.
1642008838
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
A screen shot pointing to areas that need to be chroma might be helpful. The background of the chat log changes according to the type of message: system (gray), self (blue), whisper (yellow), public, emote, and so on. Did you want all of those colors to be green?
1642012600
All of that background stuff. I don't necessarily need the whisper (yellow) stuff to be chroma'd. Basically all background that isn't the dice roll/damage box, names, and spell cards.
1642012612
1642013340
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
You are circling the areas that contain the browser scroll bars, so far as I can tell. If you are using a program such as OBS to produce your stream, you can simply crop those away. You can also pop out the chat panel by double-clicking the header icon if that's any easier to manage. If I'm still not understanding the issue, let me know. I'm still willing to help.
1642033425
The blue coloration, and grey coloration included in that circle? That's what I want to chroma out. the parts that I circled were to avoid circling the text etc cuz obviously I want to see that.&nbsp;
1642120919
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
This should catch most stuff. You may find exceptions: #textchat-input textarea.ui-autocomplete-input&nbsp; { background-color:#00b140 !important; } .textchatcontainer .message&nbsp; { background-color:#00b140 !important; } .textchatcontainer .message .spacer { background-color:#00b140 !important; } I kept the styles broken out, it case you want to retain the space line between posts, for instance.
1642126987
I will give this a try as soon as I get to my desk. Thank you!!
1642128851
It looks fantastic. Thanks so much!