Game:

Counter-Strike: Source (2004)

Duration: 0:00

11 views

1

At one point, I got to thinking to myself: "should I explain how I do what I do?" While not exactly common knowledge, CSS is a useful tool available to anyone that can be used in browser sources for OBS. Knowing the language is the part that escapes most people. And that's unfortunate, and there's a lot of simple tricks anyone can learn to make your layout improved, or at least more personalized.

OBS Studio
https://obsproject.com/welcome

Streamkit
https://streamkit.discord.com/overlay/

CSS Crash Course and Example Documents:
https://drive.google.com/file/d/1ITQAzN1mSyHbxxSHZTSHXpkGT8KfsgLM/view?usp=sharing
https://drive.google.com/file/d/1cpiMygYM4F9X0ilCZMPvrMOUg4XyBk2j/view?usp=sharing

I'm giving a shoutout to RKzero10, as I once caught a highlight vid of theirs from a friend of mine, and could only notice the basic Streamkit layout. A shame, because I genuinely think they're a talented graphic designer otherwise. They'd greatly improve with a little of this info.

@RKzero10

And the video Source of theirs that I used in this video:
   • Glizzy Throat Goat | RK VTuber Reacts  

I'm also giving a shoutout to Mangs as his call layout used in the Mangs Dungeon video inspired me to make my own layout, and eventually this video.

Mangs: @Mangs1337
PH: @PH_777
Firelance: https://www.twitch.tv/firelance00

And the video Sources of his that I used in this video:

   • I Trapped My Friends In a Fire Emblem Dungeon  

0:00 Intro
1:13 what you'll need

1:34 Streamkit start-up
1:56 Finding Developer Mode

3:48 Crash Course on .CSS
4:37 why I don't use the site settings

5:59 Setting .CSS rules
6:48 My custom .CSS properties for my PFPs

9.58 A separate browser for name-tags
10:22 My custom .CSS properties for my name-tags

12:55 closing out. Later!