How to create alternating chat message colors in Streamlabs OBS using CSS

Other Questions Twitch
1

Hey everyone! I’m trying to style my Twitch chat overlay in Streamlabs OBS and I’m having trouble getting alternating colors to work properly.

I want each chat message to alternate between two different colors. In regular web development I would use something like this:

.chat-user {
  margin-right: 0.3em;
  color: #4a90e2;
}
.chat-user:nth-child(odd) {
  color: #e74c3c;
}

But this approach doesn’t seem to work with Streamlabs chat styling. I’ve tried several variations like targeting the username element directly and using different selectors, but I can’t get the nth-child selector to apply correctly.

Has anyone successfully implemented alternating message colors in their Streamlabs chat overlay? What’s the correct way to target chat elements for this kind of styling? Any help would be appreciated!

2

streamlabs chat CSS is a pain because of all their wrapper divs. use .chat-line instead - that’s what fixed it for me when nth-child wouldn’t work. you might need to get more specific like .sl-chat-container .chat-line:nth-child(2n+1) to beat their default styles. don’t forget to clear your browser cache after making changes since streamlabs caches everything.

3

This issue arises from how Streamlabs organizes the chat DOM, as the chat messages aren’t necessarily direct siblings, impacting the effectiveness of nth-child. I’ve faced this challenge too. Instead of styling just the username, try targeting the message containers themselves with the following CSS:

.sl-chat-message:nth-child(odd) .chat-author {
  color: #e74c3c;
}
.sl-chat-message:nth-child(even) .chat-author {
  color: #4a90e2;
}

This method is more dependable for achieving the color alternation. If it still fails, make sure to inspect the HTML structure with your browser’s dev tools while the overlay is active, as Streamlabs may change class names or structures for different chat widgets.

4

The alternating colors break because Streamlabs injects extra elements between messages, messing up the count. I had luck using CSS variables with a different approach - target the timestamp or badge elements instead. Try .chat-message[data-from]:nth-of-type(2n) { color: #e74c3c; } and .chat-message[data-from]:nth-of-type(2n+1) { color: #4a90e2; }. The data-from attribute stays consistent across different chat widgets. Also double-check you’re editing CSS in the right widget source - chat box widget vs activity feed widget use completely different selectors.

5

Had the same problem with my chat overlay. Streamlabs wraps messages in extra containers that mess up nth-child selectors. I switched to .sl-chat-message:nth-of-type(odd) instead of nth-child - works way better with mixed elements. You’ll probably need !important to override their default CSS since it’s got high specificity. Also check if you’re using the legacy chat widget or the newer activity feed - they’ve got different HTML structures so you need different selectors. The legacy one’s easier to customize.