DIY TWITCH CHAT OVERLAY Tutorial for OBS! Do-It-Yourself #obs #twitch #twitchchat

Channel:
Philippines honganqi
Subscribers:
967
Published on ● Video Link: https://www.youtube.com/watch?v=K3Fix4MhA0U


Category:
Tutorial
Duration: 17:39
3,783 views
122

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 https://youtu.be/cHYtKJyLms4

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

== ⚠ 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 - https://youtube.com/Ying_verse - for her beautifully designed chat overlay
"Every Summertime" by NIKI - OMG this song... https://youtu.be/sFIbcgHrGSg (original music video https://youtu.be/a0OHkWX7B-E)

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

== 📃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: https://twitch.tv/honganqi
Discord: https://discord.gg/G5rEU7bK5j

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

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

#obs #twitch #twitchchat



Other Videos By honganqi


2022-11-01Probably my luckiest artifact roll ever
2022-10-29Spider-Man in the FGC - forgot his whole costume
2022-10-24What IS a mod? 🤔
2022-10-22Have you tried giving yourself armor yet? 🤣🤣🤣
2022-10-19Create your own Twitch chat overlay - and learn CSS along the way!
2022-10-13How NOT to Repair Your Laptop's GPU Fan PART 2 - a repair vlog #vlog
2022-10-01How NOT to Repair Your Laptop's GPU Fan - a repair vlog #vlog
2022-09-22short vlog REV Major 2022! #vlog #fgc
2022-09-16An Update
2022-09-13SOR4 Swapper MOVE INPUT Tutorial #sor4 #sor4swapper
2022-09-02DIY TWITCH CHAT OVERLAY Tutorial for OBS! Do-It-Yourself #obs #twitch #twitchchat
2022-08-05Mod SOR4 Armor! Swapper v4.2.5 RELEASED! SOR4 DLC v7
2022-07-15TMNT Shredder's Revenge Mod Tool! TMNT TELLO tutorial!
2022-07-11Access the Training Stage in TMNT Shredder's Revenge!
2022-07-07Mod TMNT Shredder's Revenge Graphics with Kuriimu2 but FASTER and EASIER!
2022-06-26Mod TMNT Shredder's Revenge Graphics! TUTORIAL
2022-06-19TMNT Shredder's Revenge - Day 1 Bugs! INSTANT POWER LEVELS!
2022-06-13SOR4 Mod Run: TURBO STREETS by Bragdras - SOR4 Swapper mods
2022-06-11SOR4 Mod Run: FACTIONS 2 by VGamer78 - SOR4 Swapper mods
2022-06-04SOR4 Swapper 4.2.5 - What if we were able to remove this?
2022-05-27SOR4 Blender question! What do you think about this new feature?


Tags:
twitch
twitch chat
obs
stream overlay
chat overlay obs
do it yourself
diy
css
tutorial
content creation
content creation ideas