Chat Styles

How to Use

What is Chat Styles

Chat Styles is a tool for generating CSS to change the appearance of YouTube Live chat. You can customize the chat display on your stream screen by applying custom styles in OBS Studio's browser source.

Basic Usage

1. Customize Styles

You can customize the appearance of your chat using the form on the left. You can adjust the following items:

Avatar
Set the visibility and size of user avatars.

Font
Select the font to be used throughout the chat. You can choose from fonts installed on your system.

Name
Configure name display settings for owners, moderators, members, and regular users. You can individually set visibility, size, color, and outline.

Message
Set the text size, color, and outline for chat messages.

Sticker
Set the size of stickers included in Super Chats and the visibility of text.

Other
Configure display settings for engagement messages, Super Chat backgrounds, and new member announcement backgrounds.

2. Copy CSS

The generated CSS is displayed in the "Custom CSS" section at the bottom right. Click the "Copy" button to copy the CSS to your clipboard.

3. Use in OBS Studio

Use the copied CSS in OBS Studio:

Add Browser Source

  1. Click the "+" button in "Sources" in OBS Studio
  2. Select "Browser"
  3. Enter any name and click "OK"

Set URL

In the "URL" field, enter the pop-out URL of your YouTube Live chat page. The URL format is:

https://www.youtube.com/live_chat?v=VIDEO_ID&is_popout=1

Apply Custom CSS

Paste the CSS you copied earlier into the "Custom CSS" field.

Other Settings

  • Adjust "Width" and "Height" to match your stream screen
  • Check "Refresh browser when scene becomes active"
  • Click "OK" to save settings

Tips for Better Results

  • Fonts must be installed on the PC used for streaming.
  • Adjusting outline thickness can improve text visibility.
  • Pay attention to the contrast between background and text colors to ensure readability.
  • Settings are automatically saved in your browser, so you can use the same settings on your next visit.
  • You can preview the actual appearance while adjusting.

Frequently Asked Questions

Q: Where are the settings saved?
A: Settings are saved in your browser's local storage. They are not sent to any server.

Q: Can I use the same settings on different devices?
A: Since settings are saved in local storage, they are not synced between devices. If you want to transfer settings, we recommend copying and saving the generated CSS.

Q: The preview may look different from the actual YouTube Live chat.
A: The preview is for reference only. When YouTube's chat UI is updated, the actual display may change. We recommend testing in your actual streaming environment.

Contact

If you have questions or feedback, please create an issue on GitHub repository.