DIY TWITCH CHAT OVERLAY Tutorial for OBS! Do-It-Yourself

Create your own (very) styleable Twitch chat overlay for OBS! I know Streamlabs and StreamElements exist but you'll have TOTAL control over the appearance of your chat overlay! You'll also get to learn some CSS on the way!

Ep.2 Backgrounds and Images    • Background Images & Animation! DIY TW...  
Written article also available: https://sidestreamnetwork.net/twitch-...

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

== ⚠ ADDITIONAL NOTES ==
Some fonts have some weird spaces above and below them (aka "line spacing" or "leading"). This can be controlled with the "line-height" property with "px" values (e.g. "line-height: 20px"). This is especially true with the default jChat font "Baloo Tammudu 2". There are lots of ways to fix this problem. If this happens to you, use the same values on your line-height as your font-size then add some padding-top or padding-bottom on the selector you want to modify. Feel free to join my Discord if you want to discuss this or if you have questions!

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

== 🙏THANK YOU ==
jChat by giambaJ - https://giambaj.it/twitch/jchat
OBS - https://obsproject.com
Ying -    / ying_verse   - for her beautifully designed chat overlay
"Every Summertime" by NIKI - OMG this song...    • NIKI - Every Summertime | Marvel Stud...   (original music video    • NIKI - Every Summertime (Official Video)  )

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

== 📃SECTIONS ==
00:00 - Intro
02:09 - Fine-tuning with CSS
04:46 - Making editing easier
07:53 - Editing with real-time preview
09:19 - Customization Level 1: Styling each chat line
13:12 - Customization Level 2: Separating the user info from the message
15:00 - Customization Level 3: Container styling

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

== 📺JOIN ME ON ==
Twitch:   / honganqi  
Discord: https://sidestreamnetwork.net/discord

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

== 🙏SUPPORT ==
If you want to send some support, visit https://buymeacoffee.com/honganqi

#obs #twitch #twitchchat