[GUIDE] FerretBomb's Transparent Twitch Chat

I've been asked a few times how I do my on-screen transparent chatbox; there's another guide for a mIRC plugin method (where I've listed this previously), but my method just needs Chrome and one plugin, so figured a separate Guide would be handy for easy linking.

Real quick version on how I do mine:
1) Run Chrome
2) Install the Stylish plugin (Available via http://userstyles.org/)
3) Install the 'Twitch.tv Dark/Black Theme' and enable it (http://userstyles.org/styles/78830/twit ... able-theme)
4) Popout chat and put it somewhere you like, at a decent size
5) Window Capture, Inner Window, with sub-region
6) Chroma out the black. DapperKapper and MdKaP lose their hats, but chat is nicely readable

You can combine steps 2 & 3 by just installing the Better Twitch.tv plugin instead (it has a chroma-black option under the gear icon on any popped-out chat) but I hate some of the other changes BTTV does to the site (like making the Old format content tiles transparent, which screws up a lot of the custom frames which no longer blend in properly), and BTTV isn't tweakable.
Can head here and look at any of my past casts (http://www.twitch.tv/ferretbomb/videos); Isaac runs it usually sits on a black background anyway, but Neverwinter it shows up very readably over the game source layer.

I've done a few tweaks to the Stylish theme CSS (keeping the scrollbars from auto-hiding, and setting the background color to rgb(20,20,20) to get a cleaner key from it and keep DapperKapper hats/MVGame's hair) but the above still works great even without them.

---BACKDROP---

Just a note, adding a 30-50% transparency backdrop layer behind the chat capture layer with the this method will make it MUCH more readable, especially against any light backgrounds. I've made this improvement myself since the original writing of this method, and it VASTLY helps the readability while still allowing gameplay behind it to be visible.

To make my own backdrop, I just took a screenshot into my image editing program, used Magic Wand to select the area outside the chat window (the actual chat window, not the capture), inverted the selection to have ALL of the chat window selected, made a new layer, filled it with black, and saved just that one layer as a PNG. Load it up as an Image layer.

You can use the Layer Transparency option in OBS, or if you want to get fancy (I'm considering and working on this) use your image editing software to bake the proper gradient transparency directly into the PNG.
I'm considering this to add a non-transparent frame around chat to help delineate it better, as well as allowing me to add 'window chrome' to the border. Possibly add 'girders' behind the chat, while still maintaining the semi-dark backdrop as well, to add visual interest to the design. Possibly another semitransparent 'shine' layer on top, to make the chat look like it's inside a computer monitor or something.

Not necessary, but there are TONS of options for neat stuff that can be done.

Does this allow you to see the chat in games? I only have one monitor sadly and I am looking for a solution for that. I do not trust IRC enough to use that i've heard its a easy access for attackers.

Your IP is masked on Twitch's IRC. There's nothing to worry about.

No, it doesn't allow you to overlay chat on your actual game window, it's just a way to get it on the stream so people watching in fullscreen or on a VOD will be able to see to what you're responding.

And Twitch just uses a modified Java IRC client (adding sidechannel communication) anyway; if logging into Twitch chat via a standalone IRC client exposed your IP address, starting up the Twitch chat client would do so as well.

Tried the guide and couldn't get it working; it results in an all white window capture that doesn't show text (but would show my mouse cursor over it). I'm guessing it may have to do with me not knowing what you mean by "chroma out the black"... I set the window capture to color key black, which changes the window to pure black instead (but still doesn't show text).

I've installed the stylish plugin and popped out the chat to a good size, but even showing the entire window without subregion cropping the only text that will show is the "Welcome to the channel" header text.

Any tips?

Only thing I can think of is if you didn't activate the Dark Theme on the stylish plugin.
With it enabled, you should be getting light grey or white text against a black background when anyone types anything in, along with coloured names.
The chroma-key should just turn anything that colour transparent, so you can see layers behind it through it; so remove the black background, and leave the lighter text showing.

You DO need to put a layer behind it (gameplay, webcam, static image for testing) to differentiate between the dark background of the chatbox and the default black background of the OBS workspace/preview window.

I've definitely got the style installed, the background is black and the text is white. Still, using window capture to add it to the scene will only show the "Welcome to the chat room!" message and nothing else. I color keyed out the background of the chat window which does make the whole thing appear transparent save for the layer including the aforementioned welcome message.

However, capturing the window by using a sub-region on a monitor capture will display the text with no issues, so I may just use this method instead.

Perhaps this maybe be an issue with windows capture when using Windows 8? Actually, trying windows capture with anything seems to not work at all so this is probably the case. :P

Ah, can't speak about Win8. It's all shades of FUBAR, so I've avoided it like the plague (it is). I'd assume that even with it NOT chroma-keyed, anyone else typing in the chat doesn't show up on the window capture either?
On the up side, under Win8 monitor capture isn't AS terribad, so sounds like a workable workaround. :)