How to Use Social Stream Ninja Chat CSS in OBS

Social Stream Ninja lets you bring chat from platforms like YouTube, Twitch, and TikTok into a single browser source. If you download a Social Stream CSS file from Doodlekuma, use it with the Social Stream dock/output page, not the native YouTube popout chat.

Official starting point: socialstream.ninja/landing

Know which CSS version you need

Most Doodlekuma themes provide two CSS versions:

• Social Stream: for Social Stream Ninja dock/output DOM. It targets classes like .highlight-chat, .hl-name, and .hl-message.
• YouTube: for the native YouTube popout chat. It targets elements like yt-live-chat-text-message-renderer.

The two versions are not interchangeable because the DOM structures are different.

What you need

1. OBS Studio or Streamlabs OBS.
2. Social Stream Ninja opened or installed according to its official instructions.
3. A chat platform connected to Social Stream, such as YouTube Live.
4. A Social Stream CSS file downloaded from the Doodlekuma live chat gallery.

Step 1: Open Social Stream Ninja

Go to Social Stream Ninja and follow the setup path that fits your stream.

Once it is running, find the dock/output URL intended for OBS. That URL is what you will use in your OBS Browser Source.

Step 2: Connect your chat source

Add your platform, such as YouTube, inside Social Stream.

Before adding any CSS, make sure real chat messages appear in the Social Stream page. This confirms the message source works.

Step 3: Add an OBS Browser Source

In OBS:

1. Click + in Sources.
2. Choose Browser.
3. Paste the Social Stream dock/output URL.
4. Set a size such as 500 x 700, or match your stream layout.
5. Keep the background transparent if your OBS setup offers that option.

Step 4: Paste the CSS

On Doodlekuma, choose the Social Stream download option for your theme.

Open the downloaded .css file, copy all of it, and paste it into the Custom CSS field of your OBS Browser Source.

Troubleshooting

The style does not apply

Check that you downloaded the Social Stream version and that your OBS URL points to Social Stream, not a YouTube live_chat URL.

The YouTube icon is missing

Newer themes use inline SVG for the YouTube icon where possible. If you are using an older CSS file, download the theme again.

The DOM looks different from YouTube chat

That is expected. Social Stream and native YouTube chat use different DOM structures, so their CSS files must stay separate.

Recommended workflow

1. Connect chat in Social Stream first.
2. Confirm default messages appear in OBS.
3. Download the Social Stream CSS from Doodlekuma.
4. Customize the theme and download again when needed.

This keeps setup debugging pleasantly boring: source first, styling second.