Hi! I've been looking for something like this tutorial to make a chat like the one of the girl at the end of the video. I think I've learned a lot with this tutorial. I was a little upset of just finding videos of people using stream elements and copy pasting some code they didn't even know what it was. So, thanks a lot!
If this video gets taken down because of this song... ... ... ... Anyway, I only switched to jChat since being recommended by ccvector 2 months ago or something. And then I realized how easier it is to customize than Streamlabs etc (if I recall correctly)
Great informative video. The editing and information is great for people who have literately no knowledge on this subject and want to get started. I'll be checking other videos of yours as well!
This is exactly what I needed! I don't know how to pull messages from twitch, but I know css as a web developer so this base to customize from works perfectly
Thanks! I appreciate to know that this is useful for you. I'm trying to keep the tutorials as simple as possible so they can be of use to as many people as possible. Pulling messages from Twitch through their API is a butt-ton of a tutorial to make
I'm glad this is able to help you (or maybe future tense)! Restream as in restream.io, the multistreaming thing, right? I'm really curious to learn how this can help you :)
This has been a super helpful tutorial! Thank you so much for making this! I am finding a problem of trying to connect the badges and username on the same line and centering them in the chat. The message I can center just fine, but I don't know how to do the rest. "display: block" allows the username to be repositionable using "text-align: center:, but not the badges. I have tried a few different things for the "display" code, but it is not working, sadly. Using the "float" code does not help either. What is it I am missing? Perhaps I need to learn something new? Also, for whatever reason, using ".user_info" doesn't cause anything to happen. Then again, I am doing this code inside of OBS itself. Do I need to be doing this with the source you provided?
Thank you very much for appreciating it! Doing this inside of OBS is the only way of doing this, I believe. If I am understanding you correctly, you want: Line 1: Badge + Username Line 2: Message If so, you can use CSS flexbox .user_info { display: flex; justify-content: center; align-items: center; } "display: flex" sets everything inside .user_info to flex. "justify-content: center" tells it to "just center everything horizontally". "align-items: center" vertically centers items in the flexbox. You may have to adjust the top margin, padding, or position of the badges. Feel free to join my Discord if you need or want to discuss more of this!
Best and easiest tutorial I could find, thanks! One thing I am still trying to figure out is how to make the chat font a different color than the default white?
Thanks for appreciating it! You can use the ".message" class selector to affect the text color of the chat message. You can also do this for the username if you want by using the ".nick" class selector. But for the username, you'll have to use the "!important" keyword to override the colors being set by the CSS. e.g. ".nick { color: red !important; }" Do note that exclamation point is not a typo; it is needed for the keyword to work.
Hey so I'm trying to make a chat overlay that looks similiar to the screen in Splatoon 3 where the characters of Shiver, Frye, and Big Man hype up the map rotation prior to the game. Unfortunately no matter how I code CSS with my limited knowledge, there is an issue where if the .message has more than two lines of text the placing of the .message area get's pushed off center to where I want it to be fixed and that in turn pushes the .user_info line up with it which moves it away from the allocated area specifically for usernames that I've made. I've tried position: absolute for both and that at least keeps the .user_info in place but the message line still grows in the same way, and on top of that it's clearly not the permanent solution because if another chat message is sent they now share the same space. The only solution that I can think of is having text chat come from the top left of the source and scroll down rather than it coming from the bottom left of the source and scrolling up. Is there a way to do that in CSS?
Hmm... Looks (beautifully) very specific. This will be difficult to troubleshoot (and visually understand) without screenshots. Please drop by my Discord and we can discuss this in the #tech-help channel :)
Heyo thank you so much for your video! I am VERY new to CSS (like this video was my intro) I am obviodly going to do some more resaerch to learn more about CSS and how it all works I was just wondering if the same CSS coding we are using for this chat widget would work in streamlabs chat widget? they use a similar editor I was just wondering if i should look up a video on their code source editor or if its relatively similar. Like I said I am VERY new to CSS and coding in general so please be kind lol
Hey sorry for the late reply. Your comment was flagged by UA-cam for some reason lol... I don't think the same CSS would work with the Streamlabs chat widget since they use different containers, different class names, different structure mostly. I forgot how the Streamlabs layout looks like but I tried playing with it before I started playing with jChat. Regarding being new, don't worry, we were all there one time :) Please feel free to join the Discord for some community help or something :)
Did you mean for the chat to scroll in place like in news? Like HTML marquee text? It's not exactly "simple" per se but you can check out www.w3schools.in/css3/css-marquee I tackled animation in my other tutorial here: ua-cam.com/video/cHYtKJyLms4/v-deo.html
This was a fantastic and very informative video thank you so much. I do have one question though. Is there any way to change the color of the username? I have gotten the font and size but for some reason I can't seem to change the color of the usernames in chat
The .user_info class has 2 elements inside: .nick and .colon. The .nick class has an inline style declaration which overrides any property. You'll need to specify properties this class with either of these methods (and with the "!important" modifier, see below): 1) .nick { color: red !important; } 2) .user_info span { color: red !important; } The first one specifies properties for .nick specifically. The second one specifies properties for all elements inside the .user_info class in one go: "all elements inside the .user_info class, make the text red". , the "!important" modifier just says "I don't care what style I think I told you to have, I just want this one!!!"
Sorry for the late reply. Yes, there is this problem. If you're familiar with how to set up some local hosting (Node.js, XAMPP, Docker), this can be done but it will complicate the simplicity of this tutorial. Maybe I'll do one for that soon
Thanks for the video! i would like to stream games in ultra-wide resolution and have a wide black bar at the bottom of my stream. Is there any way I can separate the chat in multiple columns to fill that bar?
This is a great question/idea but it would depend on how you want to show the messages - especially the long ones. You could restrict the widths and let the longer messages take up more vertical space. It would result to something like _ _ - _ - _ ||| _ _ Dunno if this ASCII art makes sense but it shows how "inconsistent/dynamic" it can be.
Hey Honganqi! Amazing video man, helps me alot. I have a quistion though. Is there a way to make each chat line the size of the message sent instead of a the default length?
Hey there! Yeah! You can change the Display property of the Message class (.message) into "display: table;". If your chat overlay is on the right like on this video, you will also have to add "margin-right: 0; margin-left: auto;" to it and make the same changes on the User Info class (.user_info) 😄 I know the comments section is not ideal to share code like this, so please feel free to join my Discord!
jChat has its easy-to-use option called "stroke" if you're using that from the tutorial. If not, you can use the text-stroke property but you'll have to use the "-webkit" prefix because it's only supported by WebKit browsers (which OBS also uses). Something like: .message { font-weight: bold; font-size: 24px; -webkit-text-stroke: 2px black; } Be careful though since using font that's too thin will... It's better to see for yourself. For more info, you can check out kinsta.com/blog/css-text-outline/
hello! thank you for the tutorial. there are some badges that dont show up on jchat (like the pronoun badges in ffz) and i was wondering if there was a way for me to get them to show up + customise them as well.
Thank you for using and appreciating it! Hmm... Upon checking the source code, it loads all the emotes from api.betterttv.net/3/cached/frankerfacez (along with bttv and 7tv). If you could post a screenshot of what these emotes are (probably on Discord), maybe we could try what we can or even try to ask giambaj about it :)
Hey what if I want to make the chat appear top to bottom? I've seen streams where the chat comes directly under the streamers webcam and I thought it was very nice. What CSS code would i have to input in order to do this?
You can remove the default "position: absolute" property of #chat_container by putting or adding "position: initial" in it. The normal way HTML (and all things in programming) is usually from top to bottom. jChat simulates Twitch chat by "breaking normal" and making everything start from the bottom. Hope that helps :)
I just tested it now and it does seem the "Baloo Tammudu 2" font isn't loading properly. You can just use some CSS in OBS: div#chat_container { font-family: ''; } If you were referring to the font when the actual tutorial started, it's the Baloo Tammudu 2 font. You can get it from Google Fonts. Download it into your computer and install so you can use it in CSS. If you were referring to the font I have at the beginning of this video, I forgot what I used :(
I'm literally in the finishing touches of the tutorial for this! But you can put a background-image property "background-image: url('put-your-image-url-here')" in any of the #chat_container, .chat_line, .user_info, or .message selectors - depends on your preference
@@honganqi Thank you for taking the time to reply, I am absolutely looking forward to your tutorial on this. I am actually right at the point of adding the background image, what I can't figure out is how to store the image online to then call it using the selector, everything I can find online is pointing to the image being stored locally.
Frankly, I miss being able to just save any image locally and point to it. But since browsers need to buff security, this is no longer possible due to CORS, Cross-Origin Resource Sharing, is no longer possible. jChat is hosted somewhere else, then our images locally - so no go :(
@@honganqi I ended up adding the image to a storage site and it works but now I have a new issue lol the image is static and does not scale with the size of the message 😭. The girl streamer you showed at the end of your video, I checked her stream and it scales and looks so good. I want that so bad lol help!
Hey, I'm having troubles with trying to make the users name in the .user_info section to be all one color, it doesn't change color but it changes the font size when I edit that, how can I make them all one color? Thanks.
This is a good question :) First, the .user_info class has 2 elements inside: .nick and .colon The second answer to your question is because the .nick has an inline style declaration which overrides any property. You'll need to specify properties for both these classes with either of these methods (and with the "!important" modifier, see below): 1) .nick { color: red !important; } .colon { color: red; } 2) .user_info span { color: red !important; } The first one specifies properties separately. The second one specifies both of them in one go: "all elements inside the .user_info class, make the text red". , the "!important" modifier just says "I don't care what style I think I told you to have, I just want this one!!!" Yep :)
Hi. From a reply I made a few months back: You can remove the default "position: absolute" property of #chat_container by putting or adding "position: initial" in it. The normal way HTML (and all things in programming) is usually from top to bottom. jChat simulates Twitch chat by "breaking normal" and making everything start from the bottom. Hope that helps :)
Thanks hon. It's me krunatus btw, miss your streams haha. When will u come back? I stream too now at channel KruentuX, come visit some time. Cya! @@honganqi
i was messing around with line-height and it only really works if you have display: block; on the .message selector, is there any way to make it still show besides user info? edit: i tried float but it got kinda messy, maybe my mind was in the correct place tho
Hello! Could you try "display: inline-block" on your ".message" selector instead? Then adjust your other properties as needed like border-radius, margin-left, margin-right, etc :)
I don't have a tutorial for this yet, but yes. You'll need Streamer.bot or SAMMI to make your own events for goals. www.youtube.com/@andilippi and www.youtube.com/@nuttylmao have tutorials for these although not yet sure specifically for goals. Feel free to let me know if you need anything else!
No, because it produces a URL that you can use and it will act as a local script of sorts on your computer. Whatever settings they set will be on their computer (or URL) and not affect yours.
I love you man, great video. But please spell Esports correctly. It's Esports. Not e-Sports, eSports, e-Gaming, none of that. Esports. Peace n love brotherman
Learning to assist friends wanting to get into streaming (and myself) this is a fantastic guide I can follow along!
Thank you! Hope you can also use the CSS elsewhere!
Hi! I've been looking for something like this tutorial to make a chat like the one of the girl at the end of the video. I think I've learned a lot with this tutorial. I was a little upset of just finding videos of people using stream elements and copy pasting some code they didn't even know what it was. So, thanks a lot!
Custom is king! Thanks for appreciating this!
"baby i'd give up anything to travel inside your mind" 5:20 😂. well done archie! I didn't know jChat existed before
If this video gets taken down because of this song... ... ... ...
Anyway, I only switched to jChat since being recommended by ccvector 2 months ago or something. And then I realized how easier it is to customize than Streamlabs etc (if I recall correctly)
This is such a beauitfully crafted walkthrough that answers most of the questions I had about doing this for myself! Thank you so much :)
For some reason, your comment meant a lot :) Thanks so much for saying it like this
Great informative video. The editing and information is great for people who have literately no knowledge on this subject and want to get started. I'll be checking other videos of yours as well!
Thank you very much!
this is exactly what I was looking for - thank you :)
Glad this could help! Thank you for taking the time to appreciate this
This is exactly what I needed! I don't know how to pull messages from twitch, but I know css as a web developer so this base to customize from works perfectly
Thanks! I appreciate to know that this is useful for you. I'm trying to keep the tutorials as simple as possible so they can be of use to as many people as possible. Pulling messages from Twitch through their API is a butt-ton of a tutorial to make
THANK YOU, you're really good at explaining!
Thank you for your appreciation!
Such an amazing tutorial God bless you. If you're ever in New York, ramen is on me. Thank You!
We have a New York St. if that qualifies haha! But thank you so much for your appreciation!
This is exactly what I was looking for. Thank you so much!
I'm glad it was of help to you!
This is exactly what I was looking for!!
Thank you for your appreciation!
This is such an excellent tutorial. Thank you so much!
this is awesome!!! Been trying to get away from Restream and this looks like the move. Thanks so much!
I'm glad this is able to help you (or maybe future tense)! Restream as in restream.io, the multistreaming thing, right? I'm really curious to learn how this can help you :)
thank you for such advice! really helped me out through all that garbage across the internet
Glad this video was able to help you! What advice though? xD
@@honganqi the guide itself. how to get it done
@@karma_cardinal Thanks for appreciating it! I just had to double check: I thought I was already giving advice on romance or something xD
Very nice and easy to follow. Thank you a lot!
Thanks for appreciating it like this!
This has been a super helpful tutorial! Thank you so much for making this!
I am finding a problem of trying to connect the badges and username on the same line and centering them in the chat. The message I can center just fine, but I don't know how to do the rest. "display: block" allows the username to be repositionable using "text-align: center:, but not the badges. I have tried a few different things for the "display" code, but it is not working, sadly. Using the "float" code does not help either.
What is it I am missing? Perhaps I need to learn something new? Also, for whatever reason, using ".user_info" doesn't cause anything to happen. Then again, I am doing this code inside of OBS itself. Do I need to be doing this with the source you provided?
Thank you very much for appreciating it!
Doing this inside of OBS is the only way of doing this, I believe. If I am understanding you correctly, you want:
Line 1: Badge + Username
Line 2: Message
If so, you can use CSS flexbox
.user_info { display: flex; justify-content: center; align-items: center; }
"display: flex" sets everything inside .user_info to flex. "justify-content: center" tells it to "just center everything horizontally". "align-items: center" vertically centers items in the flexbox. You may have to adjust the top margin, padding, or position of the badges.
Feel free to join my Discord if you need or want to discuss more of this!
@@honganqi Thank you so much! This sounds exactly like what I need. I will give this a shot when I get home from work. Have a lovely rest of your day!
Best and easiest tutorial I could find, thanks! One thing I am still trying to figure out is how to make the chat font a different color than the default white?
Thanks for appreciating it! You can use the ".message" class selector to affect the text color of the chat message.
You can also do this for the username if you want by using the ".nick" class selector. But for the username, you'll have to use the "!important" keyword to override the colors being set by the CSS. e.g. ".nick { color: red !important; }" Do note that exclamation point is not a typo; it is needed for the keyword to work.
Hey so I'm trying to make a chat overlay that looks similiar to the screen in Splatoon 3 where the characters of Shiver, Frye, and Big Man hype up the map rotation prior to the game.
Unfortunately no matter how I code CSS with my limited knowledge, there is an issue where if the .message has more than two lines of text the placing of the .message area get's pushed off center to where I want it to be fixed and that in turn pushes the .user_info line up with it which moves it away from the allocated area specifically for usernames that I've made.
I've tried position: absolute for both and that at least keeps the .user_info in place but the message line still grows in the same way, and on top of that it's clearly not the permanent solution because if another chat message is sent they now share the same space.
The only solution that I can think of is having text chat come from the top left of the source and scroll down rather than it coming from the bottom left of the source and scrolling up. Is there a way to do that in CSS?
Hmm... Looks (beautifully) very specific. This will be difficult to troubleshoot (and visually understand) without screenshots. Please drop by my Discord and we can discuss this in the #tech-help channel :)
Heyo thank you so much for your video! I am VERY new to CSS (like this video was my intro) I am obviodly going to do some more resaerch to learn more about CSS and how it all works I was just wondering if the same CSS coding we are using for this chat widget would work in streamlabs chat widget? they use a similar editor I was just wondering if i should look up a video on their code source editor or if its relatively similar. Like I said I am VERY new to CSS and coding in general so please be kind lol
Hey sorry for the late reply. Your comment was flagged by UA-cam for some reason lol...
I don't think the same CSS would work with the Streamlabs chat widget since they use different containers, different class names, different structure mostly. I forgot how the Streamlabs layout looks like but I tried playing with it before I started playing with jChat.
Regarding being new, don't worry, we were all there one time :) Please feel free to join the Discord for some community help or something :)
thanks for this video! trying to get away from streamelements etc. is there a simple way to get the chat to scroll horizontally?
Did you mean for the chat to scroll in place like in news? Like HTML marquee text? It's not exactly "simple" per se but you can check out www.w3schools.in/css3/css-marquee I tackled animation in my other tutorial here: ua-cam.com/video/cHYtKJyLms4/v-deo.html
This was a fantastic and very informative video thank you so much.
I do have one question though. Is there any way to change the color of the username? I have gotten the font and size but for some reason I can't seem to change the color of the usernames in chat
The .user_info class has 2 elements inside: .nick and .colon. The .nick class has an inline style declaration which overrides any property. You'll need to specify properties this class with either of these methods (and with the "!important" modifier, see below):
1) .nick { color: red !important; }
2) .user_info span { color: red !important; }
The first one specifies properties for .nick specifically. The second one specifies properties for all elements inside the .user_info class in one go: "all elements inside the .user_info class, make the text red". , the "!important" modifier just says "I don't care what style I think I told you to have, I just want this one!!!"
good video, only problem i have is try to link a local image rather thatn a web url
Sorry for the late reply. Yes, there is this problem. If you're familiar with how to set up some local hosting (Node.js, XAMPP, Docker), this can be done but it will complicate the simplicity of this tutorial. Maybe I'll do one for that soon
Thanks for the video! i would like to stream games in ultra-wide resolution and have a wide black bar at the bottom of my stream. Is there any way I can separate the chat in multiple columns to fill that bar?
This is a great question/idea but it would depend on how you want to show the messages - especially the long ones. You could restrict the widths and let the longer messages take up more vertical space. It would result to something like
_ _ - _ - _ ||| _ _
Dunno if this ASCII art makes sense but it shows how "inconsistent/dynamic" it can be.
IM SEARCH A VIDEO LIKE UR NEAR 30MIN, THX U SO MUUCH
I'm sorry that I did not actually understand what you said but I thank you for your appreciation!
Hey Honganqi! Amazing video man, helps me alot. I have a quistion though. Is there a way to make each chat line the size of the message sent instead of a the default length?
Hey there! Yeah! You can change the Display property of the Message class (.message) into "display: table;". If your chat overlay is on the right like on this video, you will also have to add "margin-right: 0; margin-left: auto;" to it and make the same changes on the User Info class (.user_info) 😄
I know the comments section is not ideal to share code like this, so please feel free to join my Discord!
Make this type of guide for streamElement bro ! ❤
I'll see what I can do! Thanks for the suggestion!
@@honganqi and if u Can dig more like adding IMG on background of each msg ? Css animation ? Really there IS no content for that on yt
how do we get text stroke? Like a outline around the chat?
jChat has its easy-to-use option called "stroke" if you're using that from the tutorial. If not, you can use the text-stroke property but you'll have to use the "-webkit" prefix because it's only supported by WebKit browsers (which OBS also uses). Something like:
.message {
font-weight: bold;
font-size: 24px;
-webkit-text-stroke: 2px black;
}
Be careful though since using font that's too thin will... It's better to see for yourself. For more info, you can check out kinsta.com/blog/css-text-outline/
hello! thank you for the tutorial. there are some badges that dont show up on jchat (like the pronoun badges in ffz) and i was wondering if there was a way for me to get them to show up + customise them as well.
Thank you for using and appreciating it!
Hmm... Upon checking the source code, it loads all the emotes from api.betterttv.net/3/cached/frankerfacez (along with bttv and 7tv). If you could post a screenshot of what these emotes are (probably on Discord), maybe we could try what we can or even try to ask giambaj about it :)
Hey what if I want to make the chat appear top to bottom? I've seen streams where the chat comes directly under the streamers webcam and I thought it was very nice. What CSS code would i have to input in order to do this?
You can remove the default "position: absolute" property of #chat_container by putting or adding "position: initial" in it.
The normal way HTML (and all things in programming) is usually from top to bottom. jChat simulates Twitch chat by "breaking normal" and making everything start from the bottom.
Hope that helps :)
when it shows baloo tammadu it shows a different font then what your is showing and i am trying to get your font
I just tested it now and it does seem the "Baloo Tammudu 2" font isn't loading properly. You can just use some CSS in OBS:
div#chat_container { font-family: ''; }
If you were referring to the font when the actual tutorial started, it's the Baloo Tammudu 2 font. You can get it from Google Fonts. Download it into your computer and install so you can use it in CSS.
If you were referring to the font I have at the beginning of this video, I forgot what I used :(
Could you please let me know how I can add background images to the chat line
I'm literally in the finishing touches of the tutorial for this! But you can put a background-image property "background-image: url('put-your-image-url-here')" in any of the #chat_container, .chat_line, .user_info, or .message selectors - depends on your preference
@@honganqi Thank you for taking the time to reply, I am absolutely looking forward to your tutorial on this. I am actually right at the point of adding the background image, what I can't figure out is how to store the image online to then call it using the selector, everything I can find online is pointing to the image being stored locally.
Frankly, I miss being able to just save any image locally and point to it. But since browsers need to buff security, this is no longer possible due to CORS, Cross-Origin Resource Sharing, is no longer possible. jChat is hosted somewhere else, then our images locally - so no go :(
@@honganqi I ended up adding the image to a storage site and it works but now I have a new issue lol the image is static and does not scale with the size of the message 😭. The girl streamer you showed at the end of your video, I checked her stream and it scales and looks so good. I want that so bad lol help!
Pls how do you make this transition 0:00
It was done using the Move Transition plugin for OBS. The first part of this video with me is a clip from a Twitch stream :)
Hey, I'm having troubles with trying to make the users name in the .user_info section to be all one color, it doesn't change color but it changes the font size when I edit that, how can I make them all one color? Thanks.
This is a good question :) First, the .user_info class has 2 elements inside: .nick and .colon The second answer to your question is because the .nick has an inline style declaration which overrides any property. You'll need to specify properties for both these classes with either of these methods (and with the "!important" modifier, see below):
1) .nick { color: red !important; } .colon { color: red; }
2) .user_info span { color: red !important; }
The first one specifies properties separately. The second one specifies both of them in one go: "all elements inside the .user_info class, make the text red". , the "!important" modifier just says "I don't care what style I think I told you to have, I just want this one!!!" Yep :)
@@honganqi Thank you very much, I got it to work 👍
@@garyswan4761 Happy to help!
How do I make the chat descending instead of ascending?
Hi. From a reply I made a few months back:
You can remove the default "position: absolute" property of #chat_container by putting or adding "position: initial" in it.
The normal way HTML (and all things in programming) is usually from top to bottom. jChat simulates Twitch chat by "breaking normal" and making everything start from the bottom.
Hope that helps :)
Thanks hon. It's me krunatus btw, miss your streams haha. When will u come back? I stream too now at channel KruentuX, come visit some time. Cya! @@honganqi
i was messing around with line-height and it only really works if you have display: block; on the .message selector, is there any way to make it still show besides user info?
edit: i tried float but it got kinda messy, maybe my mind was in the correct place tho
Hello! Could you try "display: inline-block" on your ".message" selector instead? Then adjust your other properties as needed like border-radius, margin-left, margin-right, etc :)
@@honganqi i will give that a try tomorrow when i get home, thanks
@@honganqi worked like a charm, thank you very much
@@ItsWasted_ Glad to help!
sir give me all chat code😫😫😪😪
Uh... What do you mean?
would anyone know something like this but for goals?
I don't have a tutorial for this yet, but yes. You'll need Streamer.bot or SAMMI to make your own events for goals. www.youtube.com/@andilippi and www.youtube.com/@nuttylmao have tutorials for these although not yet sure specifically for goals. Feel free to let me know if you need anything else!
cant anyone just add and edit it because u just enter ur username
No, because it produces a URL that you can use and it will act as a local script of sorts on your computer. Whatever settings they set will be on their computer (or URL) and not affect yours.
I love you man, great video. But please spell Esports correctly. It's Esports. Not e-Sports, eSports, e-Gaming, none of that. Esports.
Peace n love brotherman
Thanks for the love! I'm sorry, but where's the Esports spelling from again?
comment
🤣🤣🤣