I’m really digging OBS Chat and have been having success using it with the new XSplit Beta that allows embedding of html pages, much like the CLR Browser plugin for OBS. Embedding the normal Twitch Chat doesn’t work (something to do with the flash socket system it uses) but OBS Chat works great.
The CSS for OBS Chat is pretty straight forward and I have been able to mostly customize it to my liking, but it would be nice to be able to do zebra striping to separate the messages. I got it partially working with chat_line:nth-child(even) to select every other line, but I am running into a problem. As new chat messages are added and old ones are removed, the “stripes” stay in the same place because the actual number of div elements stays the same. This makes it so a particular message will alternate between light and dark as it moves up the screen. Ideally, I would like each message’s background colour to be fixed so that the stripes move up the screen with the text. Does that makes sense?
I have messed around with CSS selectors but I don’t think there is any way to do this with CSS only. I guess this is a feature request, because the only way I can think of to do it is for an extra class to be added to every other chat_line div (or odd and even classes added to every chat_line) when the html is being generated on the server so that the css has something to hook in to. The nice thing is that this wouldn’t affect anyone who wasn’t using it, but the hooks would be there if needed.
Thanks for making an awesome product (I use BetterTTV and TwitchDown as well).
It won’t work properly when you hit the max number of elements: 100
There’s nothing we can really change to fix this for you, as it’s just how CSS works. It’s the same problem in BetterTTV, but you probably just haven’t noticed. Go to a large channel and watch the background of chat.
Yes, unfortunately this does seem to be a limitation of CSS. As I mentioned above, I was thinking that it could be accomplished if alternating odd and even classes were added to the chat_line divs on the server side. That way, even when new messages are added and old ones removed from the page, a particular message would keep its odd or even designation regardless of its actual place in the message list.
It seems a little silly, but I was just thinking that if each message had a unique id that incremented by one each time, you could write a CSS rule using attribute selectors to target only the odd ids.
I don’t know if this would be easier or harder to implement on the server than the even/odd classes, but it was just a thought for an alternative strategy.