Stream Overlay Customization! EASY DIY Twitch Chat Overlay Tutorial for OBS!

Table of Contents

• EZ Chat on Your Stream Overlay
• Introduction to CSS
• CSS Editing Options
• Preview CSS Changes in Real-Time
• Classes? IDs? What is this? School?
• Gimme Some Space
• Testing Customizations
• Finalizing: We all know nothing’s final

Nowadays, there are a lot of free ways to add chat to your Twitch stream overlay. One of the most popular is with Streamlabs. It still is, I think. There’s also StreamElements. But if you would like to have more control over the appearance of your chat on your stream overlay, or if you want to use something which does not require you to sign up for anything to protect your data privacy, then this video is for you. A video of this tutorial is available here:

EZ Chat on Your Stream Overlay

One such way is using jChat by giambaJ. And I quote, “It supports your BetterTTV, FrankerFaceZ and 7TV emotes…” You will see some customization options here but let’s do a quick test before we tinker with this. Put your username, click Generate, copy the URL, create a browser source in a scene in OBS, paste the URL, set the width and height, click OK, and test the chat.

Try before you buy

That’s it: ezpz like Streamlabs and StreamElements and the others. But we’re not here for that, are we? You can customize the font and its size in the options. If you want to use your own font or use another font size between the available sizes, we’ll tackle that later. Anyway, more basic stuff: test the readability of your stream overlay with a realistic scene, then apply a Stroke or Shadow from jChat if necessary. Again, generate, copy, paste, test. If it comes down to it, I recommend using the Shadow way more than the Stroke because it just doesn’t render that well.

“Animate” uh, animates the entry of the chat in the stream overlay by pushing the previous chat line up before appearing. “Fade” will remove a chat line after a set duration with a simple fade animation. “Show bots”, “Hide commands”, and “Caps” are kinda self-explanatory. Feel free to test them out.

Introduction to CSS

Now, let’s start customizing our stream overlay by using our own font and fine-tuning the font size. Once you have your preferred settings from jChat in your OBS browser source, go to its properties, scroll down and look at “Custom CSS”. If you’re not yet familiar with CSS, don’t worry. At the end of the body clause after the closing curly brace, add a line break, and type in

div#chat_container {
     font-family: "Impact";
}

Note that you have to have this font on your computer. Press OK and test the chat again. Next, if you find that the “small” font size in jChat is too small for you and the “medium” size is just a bit too big, we’ll specify our own size. We need to instruct the chat container to do this. Go to the last semi-colon, add another line break, and type font-size: 22px; (“px” for pixels) to end up with

div#chat_container {
     font-family: "Impact";
     font-size: 22px;
}

In CSS, this is called a property. The format or the syntax is always property: value. Add a semi-colon (;) at the end of each property to separate it from the next. Each time you want to test a setting out, you have to press OK and test it out in chat.

To add a border to your stream overlay, go back to your body in Custom CSS, type in border: solid 4px black;. This is actually shorthand for saying border-style: solid; border-width: 4px; border-color: black; .

/* shorthand version */
div#chat_container {
     font-family: "Impact";
     font-size: 22px;
     border: solid 4px black;
}

/* full version */
div#chat_container {
     font-family: "Impact";
     font-size: 22px;
     border-style: solid;
     border-width: 4px;
     border-color: black;
}

Save and test. You will notice that the bottom border is missing. It’s because the height was pushed by the border’s added width. To fix this, get the height of your browser source (in my case, it’s 600px), and subtract the width of your border twice. If you’re following my example, this would be 4px * 2 = 8px so 600px – 8px = 592px. We would then have to type in height: 592px;. If you would like to soften the corners into curves (let’s say, by 15px), type in border-radius: 15px .

/* the story so far... */
div#chat_container {
     font-family: "Impact";
     font-size: 22px;
     border: solid 4px black;
     height: 592px;
     border-radius: 15px;
}

Please remember to test out your stream overlay by OK-ing the browser source window and testing out at least 2 lines of chat everytime you add a property.

If you noticed, things are starting to get a little crowded and difficult to read. So, it’s time to get a text editor. You can settle for Notepad but that would be like going without sleep for 3 days then trying to take a nap standing up just to tell yourself you tried to rest. Bad joke. Lack of sleep. Sorry. One of the established ones is Notepad++ but I highly recommend Sublime Text.

CSS Editing Options

Anyway, copy all the content of your browser source Custom CSS and paste it in your text editor. Save this one as a CSS file like “baby i’d give up anything to travel inside your mind.css”. Hopefully, your text editor will help you with functional colors and autocomplete. Saving is optional but it can help immensely while you work and try different styles on your stream overlay. You’re free to format your CSS however you like as long as you follow the syntax and not miss any braces, semi-colons and avoid typos, but it is very advisable to use indentation to make your work more readable (yes, for yourself).

Before you ask, “Hey, how do I add a background color to the entire stream overlay using CSS?” If you put a radius to your borders, it will come out like the one on this image and unfortunately, it’s not possible to fix this yet as far as I know since jChat doesn’t have any container to singularly hold all the content inside the body container. So, feel free to use a PNG image for this. But if you’re using solid corners without any curves, then add something like background-color: black;

What if we wanted to add some transparency and/or use some obscure color? Hold on to your hats (if you have any), we’re going to learn about one of the ways to implement colors in CSS: the RGBA color function which means Red, Green, Blue, and Alpha. If we wanted to have a pure red color, we use rgba(255, 0, 0, 1) which means “We want full red, none of green and blue, full opacity“.

0 is the lowest number and 255 is the highest for the colors. 0 is the lowest and 1 is the highest for opacity. (0, 0, 0, 1) would be black and (255, 255, 255, 1) would be white. (0, 0, 0, 0.5) would be black with 50% opacity and (255, 255, 255, 0.7) would be white with 70% opacity. If you want to just pick a color and get a code, rgbacolorpicker.com has an awesome tool which does the job perfectly.

Preview CSS Changes in Real-Time

By now, I bet trying out styles and testing is getting a bit annoying using this method, isn’t it? If you want to be able to preview these in real-time, let’s do this in our browser instead. Launch Google Chrome, Mozilla Firefox, or whatever browser has a Developer tools function. Copy the exact same URL from jChat and paste it here. Test out some chat lines. Right-click anywhere and select “Inspect”.

Don’t worry about doing things here because this is very temporary. In fact, be careful about refreshing your browser since any change you make isn’t saved. Copy the CSS properties inside the curly braces from either OBS or your CSS file if you went that route. Please take care to copy only the properties and not the whole thing to avoid any errors.

Go back to your browser, click on this plus (+) sign, type in “body”, and paste here. Now, we can change the colors even more easily with the built-in color picker! Then, in the Styles panel, make sure that you’re modifying stuff in the inspector-stylesheet source and not some other source so you can easily copy these over to OBS later.

Keep reading if you want to know how to customize your chat even more AND learn some more CSS. Yes, you’ve been unwillingly enrolled in a free class on CSS since about 10 minutes into this article. Speaking of classes, we are now going to give each chat line its own separated look.

Classes? IDs? What is this? School?

In your CSS, add .chat_line. Yes, there’s a dot before the words. If you’re using the browser developer tools, click on the plus (+) sign and type the same thing, .chat_line. This is called a selector; a class selector to be more specific.

Do you remember that #chat_container a while ago? The one with the hashtag? That’s also a selector, but a selector of an ID instead of a class. A hashtag refers to an ID and a dot refers to a class. They’re both selectors but the difference is that IDs should be unique while classes can exist more than once. There are a lot of applications for both of these if we’re making normal web stuff but since this is jChat, all we need to understand is the structure of a jChat widget.

The body refers to the entire browser source. Inside the body is #chat_container and this refers to an expandable container that houses all the chat lines. It’s a bit complicated if you’re new to CSS so we’ll just go back to this if we need to. Inside #chat_container are the multiple instances of .chat_line. Each .chat_line contains a .user_info and a .message. For simplicity’s sake, we’ll leave it at that.

Let’s separate each chat line and make it more readable. In the .chat_line selector, type in background-color: rgba(0, 0, 0, 0.6); or whatever color you prefer.

body {
     background-color: rgba(123, 28, 251, 0.32);
     margin: 0px auto;
     overflow: hidden;
     border: solid 4px black;
     height: 592px;
}

.chat_line {
     background-color: rgba(0, 0, 0, 0.6);
}

Gimme Some Space

Next, let’s give our chat lines some vertical space away from each other. Type in margin-top: 10px; or whatever value you’d like.

body {
     background-color: rgba(123, 28, 251, 0.32);
     margin: 0px auto;
     overflow: hidden;
     border: solid 4px black;
     height: 592px;
}

.chat_line {
     background-color: rgba(0, 0, 0, 0.6);
     margin-top: 10px;
}

If you would like to remove the background color of your entire chat panel, go to your body selector by right-clicking on a blank area at the top, “Inspect”, go to the “inspector-stylesheet” source, and set the background-color property to rgba(0,0,0,0) to have it become fully transparent exactly like the default settings of an OBS browser source.

body {
     background-color: rgba(0, 0, 0, 0);
     margin: 0px auto;
     overflow: hidden;
     border: solid 4px black;
     height: 592px;
}

.chat_line {
     background-color: rgba(0, 0, 0, 0.6);
     margin-top: 10px;
}

If you’d like a quick refresher on colors, please go back to this portion of the video.

Next, we add padding to give the text some breathing space. Padding is kinda like a cushion distance from our wall, the border. We need to do this on our .chat_line class. So, let’s go back to it by right-clicking on a chat line, “Inspect”, then, whatever you end up selecting, click on any element which has class="chat_line". Click somewhere around the last property, and type in padding: 8px;. Feel free to change this into whatever fits your stream overlay. If you want to give EACH chat line a border radius (rounded corners), then put here: border-radius: 15px;

Testing Customizations

Let’s test out our customizations. We made changes to 2 so far: the body and .chat_line selectors. Go to your body selector by right-clicking on a blank space, “Inspect”, and make sure that the element is selected. Right-click on the inspector-stylesheet properties in the Styles panel and select “Copy rule”. Paste this in your OBS browser source or your CSS file. Do the same for your .chat_line selector. If you use a CSS file, remember to copy them into your OBS browser source since that’s the whole point.

Test your setup. Now, let’s remove the border and the extra spacing here. If you still have the #chat_container or div#chat_container selectors here, add width: 100% and padding: 0 to counter these. You can just add these back like this if you removed them a while ago.

/* if you still have #chat_container */
#chat_container {
     width: 100%;
     padding: 0;
}

Ok! This is neat so far. But what if we want to have something even more customized like separating the user from the message? Let’s do just that! We’re going to remove all the selectors for now, again, to keep things simple. You can keep the font size property in the body if you need to. Add a .message selector and put a display: block; property. Now, what this does is it makes the message take a whole line which thus separates it from the user info.

.message {
     display: block;
}

Let’s add background color, border radius, and padding.

background-color: rgba(150, 150, 150, 0.6);
border-radius: 15px;
padding: 8px;

Next, let’s add a .user_info selector and copy all the properties of the .message selector. Let’s give the user info a tabbed look by removing the display: block; property. So far, our code looks like this:

.message {
     display: block;
     background-color: rgba(150, 150, 150, 0.6);
     border-radius: 15px;
     padding: 8px;
}
.user_info{
     background-color: rgba(150, 150, 150, 0.6);
     border-radius: 15px;
     padding: 8px;
}

Let’s make it a bit brighter by increasing all the red, green, and blue values by changing rgba(150, 150, 150, 0.6) to rgba(180, 180, 180, 0.6). Or maybe even give our “tabs” some shade of color!

To complete the tabbed look, let’s remove the border radius for the bottom part of the user info by countering it with

border-bottom-left-radius: 0;border-bottom-right-radius: 0;

then remove the top-left border radius of the message with

border-top-left-radius: 0;

.message {
     display: block;
     background-color: rgba(150, 150, 150, 0.6);
     border-radius: 15px;
     padding: 8px;
     border-top-left-radius: 0;
}
.user_info{
     background-color: rgba(180, 180, 180, 0.6);
     border-radius: 15px;
     padding: 8px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
}

Let’s bring back the vertical space between each chat line by adding .chat_line and margin-top: 10px;

.chat_line {
     margin-top: 10px;
}

By the way, why top and not bottom? Because each chat line appears from the bottom and we want to push objects up, not down. Also, before we forget, let’s remove this colon by adding a .colon selector and a display: none; property.

.colon {
     display: none;
}

Finalizing: We all know nothing’s final

Yay! Let’s start finalizing our stream overlay! Remove the bottom padding and add a border for both the user info and the message.

padding-bottom: 0;
border: solid 4px rgba(80, 80, 80, 0.6);

Notice what looks like a double border between the user info and the message? Let’s remove the bottom border of the user info by putting border-bottom: 0 on .user_info.

Let’s add shadow for some icing. But the shadow of the user info will spill on to the message. Let’s fix this by adding a position: relative; property to both of them. I’ll explain this in another video which discusses CSS in depth.

Let’s bring everything back to our CSS file and then to OBS. If you’ve been following the tutorial so far, you’ll have 4 selectors to copy: .colon, .chat_line, .user_info and .message. Right-click on a chat line, Inspect, click on the element with class="colon", go to the Styles panel, right-click on this area, select “Copy rule”. Again, make sure that you’re copying from the inspector stylesheet here. Paste this in either your CSS file or your OBS browser source. Let’s select the .chat_line class, copy, and paste.

Do this again for the .user_info and .message classes. Now, let’s copy all our CSS from the CSS file to our OBS browser source. The final version for this tutorial looks like this.

.message {
     display: block;
     background-color: rgba(150, 150, 150, 0.6);
     border-radius: 15px;
     padding: 8px;
     border-top-left-radius: 0;
     padding-bottom: 0;
     border: solid 4px rgba(80, 80, 80, 0.6);
     position: relative;
}
.user_info{
     background-color: rgba(180, 180, 180, 0.6);
     border-radius: 15px;
     padding: 8px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     padding-bottom: 0;
     border: solid 4px rgba(80, 80, 80, 0.6);
     position: relative;
}
.chat_line {
     margin-top: 10px;
}
.colon {
     display: none;
}

I hope you learned something from this article! The possibilities are endless like adding background images and other stuff to make your viewers feel special! If I missed something, or if you have questions or suggestions, please let me know in my Discord or the comments section of my YouTube video. I know there are better or easier ways to do this but I tried to limit the number of tools and steps to keep it simple. Thank you very much!