For anyone still having trouble following the tutorial. He's deleting ALL the data (text) in each of the fields. Then pasting or just drag the files into the fields and the new code (text) will be imported. When all are finished hit done to save and it works. He just moves fast in the video and you cant tell he's over writing all the text so that is where some confusion occurs. Hope this helps
A little confusing for a non coder like me. had to download notepad ++ for my system but after that I managed to figure it out. thanks for this cool text box !
everything is working fine but everytime i try to type something in regular chat its just not showing on overlay only test text is working xd, any solution???
If you have Mac and you're trying to open the HTML file but can't see anything: 1. Open TextEdit Application 2. Click 'Open...' 3. Select the file (but don't hit open yet). 4. Click 'Show Options' button on the bottom panel of that pop-up. 5. Check 'Ignore rich text commands' box. Keep Plain Text Encoding to 'Automatic' 6. Hit 'Open'
Thank you! This tutorial has been amazing! Do you know where in the code I can change the color of the box surrounding the username? I would like to make it purple instead of blue. Thanks again! (Edit: I found it! It's in the JS code line 36. I changed the hex Code to the purple i wanted to use)
Hey man! Appreciate the tutorial it was very helpful! i just had one question, is there a way to make the messages disappear after a specific amount of time? Just to reduce clutter on the stream? have a good one !
Hi! Really great chat! But some viewers aren’t showing up; the problem is fixed if they change the color of their username (wtf). Can this issue be resolved without asking my viewers to do that? And thanks for the tutorial!
For those who have issues with the editor copy using control/command c then on the editor do control/command a then control/command v that way it goes correctly it worked well for me after I did that goodluck!
That's pretty fantastic! I didn't even know you could get into the nuts and bolts so much with Stream Elements! Pretty much the only thing that I was stuck on was not realized I could just say "open with notepad" and then copy and paste. Thanks for the detailed walkthrough!
Click each file with the right mouse button, select "open with" and open them with the notepad. Copy everything there, and paste them where he's pointing out. Should work.
Hey good video. I got it to work. Question, how do you change the color of the text bubble? Mine are showing an orange color. I'd rather it show blue, like the test message. Also how do you change the color of the camera icon next to the username? Hopefully I'm not asking too much lol
it was a little hard at first but i got it the files are not labeled clearly but if you follow and copy and past all the files onto notepad the copy and past after you delete old stuff from each section you should be fine just match what the scran says on each section when looking at the file
i have the issue, that when i started the chat on obs/twitch, it is not working at some point anymore... the chat is not updating anymore and stands "stands still"
This is amazing - thank you for this additional breakdown of the steps, I was super confused before but now I mostly have it figured out. One issue I'm running into tho is that when I test in the Streamelements, everything looks fine but when I actually test it with in Twitch chat, it doubles up the username and has it floating in white under the regular username in the colored area. Very odd. Any idea why this might be happening?
thx overkloc it looks good ! i am a total noob in coding alltho your video was realy help full ! the only thing i would love to add is the user profile picture next to the message but i cant seem to find out how or any info about it do you know a good source or how to add it ?
Hey brother, thanks for the asset! the chat works really well. You might want to check the file in the drive though because downloading it from your link wound up also getting 2 trojans on my system? Only stopped replacing themselves in my temp files after I deleted everything I downloaded from your drive link. Not sure if it's a false alarm from the scanning software just thinking the different file types were trojans, but might be worth double checking to make sure nothing's been messed with.
I loved it, I'm using it and highly recommend it!! I've only encountered 2 issues happening with me: 1- Messages from one of my mods are not showing up in the chat (xGrazi is the user). 2- A follower with the username 'eco_da_muda_desaplaudida' has her name repeated under the name in the chat bubble. Can you help me with this issues??!! Thank you!!
I'm having this one problem where when I send a chat in the chat box, the username above the chat gets doubled. I'm not sure if that's supposed to be some name shadow setting that I don't know about.
Fantastic set of videos for setting up! If it's not too much to ask, would it be possible to break it down further? Like EL5 levels of showing steps? Honestly don't think the audio/script needs changed, just the video would be better if more steps were shown. Example: Copy and Paste browser info into Stream Elements... You say to do that but then don't show the process, just the end result. While some peeps will understand, having those small extra steps really helps for clarity!
I appreciate the feedback! Yeah in hindsight I realize that the copy and paste is a pain point for some. I believe my second video covers it better as I noticed this was an issue but basically there is a custom widget StreamElements component you need to add to your canvas when creating an overlay on the StreamElements website and with the included files for download each of them has a different file extension denoting where the contents of that file should be copied into the tabs within the custom widget component. I think most people struggle because they try using software like Notepad to make the copy when it's better to use a code editor like Notepad++ so you can visibly see the file type you are editing and therefore know where to copy it to along with ensuring the contents are 100% accurate as regular notepad may have issues with the code content. Hope this helps! Anytime I've had comments related to this issue I've tried to answer it in UA-cam comments so hopefully people can look and see the solution
@@vincentng5473 found a fix, if you click on your right with ur mouse on the file and go to properties then click on open with and change that to notepad!
Open notepad, select file, open, change the 'text documents (*.txt)' to 'All Files' ( it's right above the open button), then go to where you have the items saved at and you should see the java and html files, click on it and it should open and show the text. @Yunatra
Hi! Thank you so much! Your tutorial has been soo helpful for a small streamer like me ^^ I have this little problem where the username display is a bit weird looking (like they're stacked slightly apart from each other) even though in the test chat in streamelements, the username is displayed just fine. Do you perhaps have any idea of why this happens? I'm streaming on youtube so I thought that I had to replace the "twitch" in the js part to "youtube" 😂 but nothing changed so I'm stuck. hopefully my wording makes sense :') If you happen to read this comment, thank youuu!
Nevermind! I found the problem! the name display was double because there was one for "username" and another for "badges"... the one for "badges" also displays the name but I guess gets hidden under the box design for "username". maybe because mine is connected to youtube, the box for "username" doesn't show, thus exposing the name in "badges" which was supposed to be hidden. (the "badges" is set to visually align "username", so the CSS's position setting is slightly higher than "username") The easiest solution that I could come up with was just to go to the CSS page, align "username 2" (the title for "badges" in CSS) to the same position as "username". The downside is that the badges would look slightly lower than the name. 😂
@@TheBearNecessiTCG somehow it worked 🤣 do other chat templates work fine on your stream? I'm not familiar with coding so I compared the codes from this template to the codes from another custom template for youtube chat. Then, whenever I find a difference, I googled the code to understand what it does and whether it's okay to edit that part or not. From there I did many trial and error until the visual seemed alright on my stream😭 this template still doesn't work quite right on my stream (the username & badges design), but since visually it's ok, I didn't do any further research to make it work perfectly.
yeah, i tried to do this and it refuses to work for me. files wont open so i can copy and paste no matter what i do. wanted something different but this aint gonna work for me
i appreciate what you are doing here and i really want to use this chat widget but not seeing what files you copy and pasted I'm still lost you should of recorded the whole process from the files its self not had it on a second monitor . i still cant follow this instruction unfortunately
There are 5 files zipped in the first link in the description of this video List of files: Clean Modern Chat.html Clean Modern Chat.css Clean Modern Chat.js Clean Modern Chat (Data).txt Clean Modern Chat (Fields).txt You should be able to see by file title and extension which goes where within Stream Elements hope this helps!
So file 5 would be the HTML, open it in a note to copy and paste it. File 4 is the CSS, File 1 is the JS, FIle 2 is the Fields and File 3 is the data. Open all of those in the note app. ALSO, go to configurations and remove whatever bots from ignored so your commands pop up in the chat box.
I don't recall adding in that feature but it is something you could try to modify. Likely just requires a css update if you're comfortable playing around with the user name and badge options for their order of appearance
@@sonicfusion2k have you guys figured it out? I only able to move the usernames on the right but i cannot figure out how to get the message box to move
Hey bro!! Great tutorial, I really appreciate the help ur giving me... I wanted to know if there's any way I could make the icons next to the name with another form like a square or something else. hope u can help me with that too
Thanks man! To be honest this widget being a quick mod of someone else's is a little hard to tweak. I tried playing around with badge customization but it was too finicky. At some point I will create a new version of this widget with more customization as I can see it's super popular
you have to open it via the editor program "open Editor - open in editor - toggle to all datas - open the javascript" it should open a text file from the script
If you want to modify how the overlay looks you can adjust the CSS and HTML to cater to any visual and structural changes you're going for but depending on you background it might be easier to code something up from scratch. Any fields that already exist in the code for StreamElements modifications aka adjusting the widget via the UI are the only options you currently see
Right click on the file then edit in notepad for the info you need to copy and paste. Really wish that was explained better. I found out through trial and error lol
I can not open the HTML file, it just opens a browser tab that does not load, anybody knows why or how to fix it? EDIT: Read the comments and downlaoded notepad++ and it works now ^^
I don't understand how people are opening things with notepad, its not an option for me. it would have really helped if you showed your other screen I think.
In the description I mention using a code editor to view the files. Since they aren't all text or word extension based files. Some editors you can use are Notepad++, Sublime, Visual Studio Code, etc.
@@carecaZ3 lots of tutorials assume a base level of knowledge... This one assumes you understand file systems and file management. The files have a certain type (html, CSS, js) the stream elements text windows have corresponding naming with the file types... Not sure what's so hard to understand about this... That and the video description along with other comments explain this... Take a closer look at those if the video isn't enough
@@OVERKLOC Stop being ignorant and have compassion for those who don't work with programming. It's not just me who is confused as to which file you copied and the information. and just look at all the comments on your video
For anyone still having trouble following the tutorial. He's deleting ALL the data (text) in each of the fields. Then pasting or just drag the files into the fields and the new code (text) will be imported. When all are finished hit done to save and it works. He just moves fast in the video and you cant tell he's over writing all the text so that is where some confusion occurs. Hope this helps
I still don't understand, I think I need a tutorial on what should I delete, copy and paste. I just don't know what to do exactly.. 😭
I can send „test message” and I see this on the obs and streamelements. But when I write something on my chat I don’t see the text. Why? 😢
A little confusing for a non coder like me. had to download notepad ++ for my system but after that I managed to figure it out. thanks for this cool text box !
a complaint i have is that the box cuts off the chatter's name when put in up to down message direction
everything is working fine but everytime i try to type something in regular chat its just not showing on overlay only test text is working xd, any solution???
bro show exactly how u do everyhthing i have no idea how you were copying and pasting things like really
"im gonna do the things you really had problem with on the side" : see copy and paste"
you open every file in note pad , copy the text and paste is in the places(they have the same name) thats it :)
Does anyone else have a problem where only the test message works, but not the actual chat?
Me too, did you solve it?
I get the test message but I'm not getting messages from chat..
If you have Mac and you're trying to open the HTML file but can't see anything:
1. Open TextEdit Application
2. Click 'Open...'
3. Select the file (but don't hit open yet).
4. Click 'Show Options' button on the bottom panel of that pop-up.
5. Check 'Ignore rich text commands' box. Keep Plain Text Encoding to 'Automatic'
6. Hit 'Open'
thank you bro
thanks bro!
My chrome wouldn't open the HTML, Thanks buddy
Thank you! This tutorial has been amazing! Do you know where in the code I can change the color of the box surrounding the username? I would like to make it purple instead of blue.
Thanks again!
(Edit: I found it! It's in the JS code line 36. I changed the hex Code to the purple i wanted to use)
it works but for TEST only!
Thanks man, you helped me a lot, liked and subscribed already!
thank you a ton for sepicting what needs and is needed to be done to have a chat overlay :)
Hey man! Appreciate the tutorial it was very helpful! i just had one question, is there a way to make the messages disappear after a specific amount of time? Just to reduce clutter on the stream? have a good one !
Would love to know if you were able to figure that out.
Hi! Really great chat! But some viewers aren’t showing up; the problem is fixed if they change the color of their username (wtf). Can this issue be resolved without asking my viewers to do that? And thanks for the tutorial!
"some of us". Come on, I suffered from the bottom of my heart to understand what on earth was going on on that vod. Thank you for this one, truly.
For those who have issues with the editor copy using control/command c then on the editor do control/command a then control/command v that way it goes correctly it worked well for me after I did that goodluck!
That's pretty fantastic! I didn't even know you could get into the nuts and bolts so much with Stream Elements! Pretty much the only thing that I was stuck on was not realized I could just say "open with notepad" and then copy and paste. Thanks for the detailed walkthrough!
Yeah, it's cool stuff! Hope this helps elevate your stream to new heights! Keep on grinding 🤙
for some reason i cant open the files with a notepad
nvm i fixed it but how do you have test messages, i cant do that on stream elements
Click each file with the right mouse button, select "open with" and open them with the notepad. Copy everything there, and paste them where he's pointing out. Should work.
For anyone still struggling, right click on the file and go to edit in notepad. That’s where you get the html code
Hey good video. I got it to work. Question, how do you change the color of the text bubble? Mine are showing an orange color. I'd rather it show blue, like the test message. Also how do you change the color of the camera icon next to the username? Hopefully I'm not asking too much lol
it was a little hard at first but i got it the files are not labeled clearly but if you follow and copy and past all the files onto notepad the copy and past after you delete old stuff from each section you should be fine just match what the scran says on each section when looking at the file
Thank u for this!
Thank you! I learn something and added new on my stream
Ty!
Thank you, this helps me a lot :3
html ????? plz tell
Thank you for this! This is what I currently use for Twitch.
Is there a UA-cam stream version of this overlay?
Glad to hear! Sadly there is no UA-cam version of this chat overlay that I'm aware of
i have the issue, that when i started the chat on obs/twitch, it is not working at some point anymore... the chat is not updating anymore and stands "stands still"
Thank You.
Happy 700 subs! :D
This is amazing - thank you for this additional breakdown of the steps, I was super confused before but now I mostly have it figured out. One issue I'm running into tho is that when I test in the Streamelements, everything looks fine but when I actually test it with in Twitch chat, it doubles up the username and has it floating in white under the regular username in the colored area. Very odd. Any idea why this might be happening?
Yes, it's a formatting thing for the badges. If you want to remove both. Add the "" to the .js file around the following set of code.
"
"
This was super useful!
thx overkloc it looks good ! i am a total noob in coding alltho your video was realy help full ! the only thing i would love to add is the user profile picture next to the message but i cant seem to find out how or any info about it do you know a good source or how to add it ?
but what files go where ?
Thank you, it works. But please make it easier to understand next time, just show everything you doing
Insane chat overlay, thanks
other chats don't show up besides my own and the test message. is there a fix for this??
Hey brother, thanks for the asset! the chat works really well. You might want to check the file in the drive though because downloading it from your link wound up also getting 2 trojans on my system? Only stopped replacing themselves in my temp files after I deleted everything I downloaded from your drive link. Not sure if it's a false alarm from the scanning software just thinking the different file types were trojans, but might be worth double checking to make sure nothing's been messed with.
Considering the link is to a zip that only contains a few text files I'm pretty sure it's a false alarm
so damn good brother! big thanks
Thank you!!
i still cant understanddddd huhu what did u copy and paste cannot figure it out
Great Video! Thanks For The Assist Video
I loved it, I'm using it and highly recommend it!! I've only encountered 2 issues happening with me: 1- Messages from one of my mods are not showing up in the chat (xGrazi is the user). 2- A follower with the username 'eco_da_muda_desaplaudida' has her name repeated under the name in the chat bubble. Can you help me with this issues??!! Thank you!!
i am having the same issue of some Messages not showing up, if you find a solution let me know!
Thank u Boss !
Is there a sideways chat version??
ty dude
I'm having this one problem where when I send a chat in the chat box, the username above the chat gets doubled. I'm not sure if that's supposed to be some name shadow setting that I don't know about.
Fantastic set of videos for setting up!
If it's not too much to ask, would it be possible to break it down further? Like EL5 levels of showing steps? Honestly don't think the audio/script needs changed, just the video would be better if more steps were shown.
Example: Copy and Paste browser info into Stream Elements... You say to do that but then don't show the process, just the end result.
While some peeps will understand, having those small extra steps really helps for clarity!
I appreciate the feedback!
Yeah in hindsight I realize that the copy and paste is a pain point for some. I believe my second video covers it better as I noticed this was an issue but basically there is a custom widget StreamElements component you need to add to your canvas when creating an overlay on the StreamElements website and with the included files for download each of them has a different file extension denoting where the contents of that file should be copied into the tabs within the custom widget component. I think most people struggle because they try using software like Notepad to make the copy when it's better to use a code editor like Notepad++ so you can visibly see the file type you are editing and therefore know where to copy it to along with ensuring the contents are 100% accurate as regular notepad may have issues with the code content. Hope this helps!
Anytime I've had comments related to this issue I've tried to answer it in UA-cam comments so hopefully people can look and see the solution
For some reasons, over the last few days user with a pseudonym that starts with letter "T" are not visible in obs...
The HTML and Javascript files aren't opening for me :(
Same, have you found any fix for it?
@@Yunatra no :c I hope he replies back with a fix
@@vincentng5473 found a fix, if you click on your right with ur mouse on the file and go to properties then click on open with and change that to notepad!
Open notepad, select file, open, change the 'text documents (*.txt)' to 'All Files' ( it's right above the open button), then go to where you have the items saved at and you should see the java and html files, click on it and it should open and show the text. @Yunatra
Hello! Thanks for the video. For some reason when i open the (Clean modern Chat.Html) to copy and past it, its empty?
Try opening it with a text or code editor. Notepad and Notepad++ work for me :)
Hi! Thank you so much! Your tutorial has been soo helpful for a small streamer like me ^^
I have this little problem where the username display is a bit weird looking (like they're stacked slightly apart from each other) even though in the test chat in streamelements, the username is displayed just fine.
Do you perhaps have any idea of why this happens? I'm streaming on youtube so I thought that I had to replace the "twitch" in the js part to "youtube" 😂 but nothing changed so I'm stuck.
hopefully my wording makes sense :')
If you happen to read this comment, thank youuu!
Nevermind! I found the problem!
the name display was double because there was one for "username" and another for "badges"...
the one for "badges" also displays the name but I guess gets hidden under the box design for "username".
maybe because mine is connected to youtube, the box for "username" doesn't show, thus exposing the name in "badges" which was supposed to be hidden. (the "badges" is set to visually align "username", so the CSS's position setting is slightly higher than "username")
The easiest solution that I could come up with was just to go to the CSS page, align "username 2" (the title for "badges" in CSS) to the same position as "username". The downside is that the badges would look slightly lower than the name. 😂
You got this working with youtube? How did you manage that? I've been trying to get this chat box to work with youtube chat but no luck
@@TheBearNecessiTCG somehow it worked 🤣
do other chat templates work fine on your stream?
I'm not familiar with coding so I compared the codes from this template to the codes from another custom template for youtube chat.
Then, whenever I find a difference, I googled the code to understand what it does and whether it's okay to edit that part or not.
From there I did many trial and error until the visual seemed alright on my stream😭
this template still doesn't work quite right on my stream (the username & badges design), but since visually it's ok, I didn't do any further research to make it work perfectly.
It's not working for me. I'm copying and pasting everything right but every time I press done, it just shows as if I didn't do anything.
was waiting for you to show which files youre copying. the Html goes nowhere
yeah, i tried to do this and it refuses to work for me. files wont open so i can copy and paste no matter what i do. wanted something different but this aint gonna work for me
the files arnt working for me 1 is a java and i cant open and the other is a oprea
gx
Somehow my font is different from the one yours is showing.... and editing is not working
:D THANKS
thanks for this but how do i get the chat to fade after 60sec?
Would love to know if you were able to figure that out.
@@tsukinoraijin haven’t used it in a bit, I believe I went to another overlay. But I was told it can be done.
@@Keepsix Thank you for replying, will continue to research and try editing the JSS to figure it out 👍.
thank you boss
Hey boss I just finished the tutorial easy and simple enough to follow thanks a lot man
I’m having the issue where the screen name and badges are cut off, did I miss something?
hey! I got everything in order execpt that the chat doesnt dissapear from my obs. the messages stay and dont go! how do I fix this ? :)
i appreciate what you are doing here and i really want to use this chat widget but not seeing what files you copy and pasted I'm still lost you should of recorded the whole process from the files its self not had it on a second monitor . i still cant follow this instruction unfortunately
There are 5 files zipped in the first link in the description of this video
List of files:
Clean Modern Chat.html
Clean Modern Chat.css
Clean Modern Chat.js
Clean Modern Chat (Data).txt
Clean Modern Chat (Fields).txt
You should be able to see by file title and extension which goes where within Stream Elements hope this helps!
So file 5 would be the HTML, open it in a note to copy and paste it. File 4 is the CSS, File 1 is the JS, FIle 2 is the Fields and File 3 is the data. Open all of those in the note app. ALSO, go to configurations and remove whatever bots from ignored so your commands pop up in the chat box.
The html file wont open, any fix for that?
You need to open the file with the note pad and you'll have the text
Awesome video and just what i was looking for! Is there anyway to have the user names on the right hand side of the box?
I don't recall adding in that feature but it is something you could try to modify. Likely just requires a css update if you're comfortable playing around with the user name and badge options for their order of appearance
@@OVERKLOC cheers I'll ask my bot Dev to take a look as I have no clue! 🤣
@@sonicfusion2k have you guys figured it out? I only able to move the usernames on the right but i cannot figure out how to get the message box to move
The .html file doesn't show the code, any help?. Good tutorial tho
(Edit) I figure it out haha thank you for the tutorial
Can you help me my html file won't open either. It is a blank screen!
@@whatsthe443 You need to open the file with the note pad and you'll have the text
is anybody having a problem where half of the usernames and badges are not showing
i tried to copy the html but it keeps opening a web browser and doesnt copy to stream elements
You need to open the file using an application that will let you view it properly. Try a text or code editor. Do not attempt via a web browser
the html file isnt working
Hey bro!! Great tutorial, I really appreciate the help ur giving me... I wanted to know if there's any way I could make the icons next to the name with another form like a square or something else. hope u can help me with that too
Thanks man! To be honest this widget being a quick mod of someone else's is a little hard to tweak. I tried playing around with badge customization but it was too finicky. At some point I will create a new version of this widget with more customization as I can see it's super popular
will this work for kick live straming?
What do you copy and paste?
I get the test message but not the actual twitch chat messages...
I have been unable to open the javascript file. not sure what the deal is there
you have to open it via the editor program "open Editor - open in editor - toggle to all datas - open the javascript" it should open a text file from the script
Does it work for UA-cam?
You create 2 username style in CSS code so when new person copy your code they will see 2 time username
hey can you help me for the Clean Modern Chat.html its a chrome HTML Document and i idk how to copy the code
My files look nothing like that not sure what I'm doing wrong here
you cant copy and paste the html, what am i missing here
Is there any way to design my own overlay but use the same code?
If you want to modify how the overlay looks you can adjust the CSS and HTML to cater to any visual and structural changes you're going for but depending on you background it might be easier to code something up from scratch. Any fields that already exist in the code for StreamElements modifications aka adjusting the widget via the UI are the only options you currently see
im lost at the first bit, where are u copying it from cz ur not showing it.
Same. I don't know what he's copying from on the HTML bit because it's a blank web browser link for me. It doesn't have anythink to copy.
theres no css file or Html
......what did we just achieve
Right click on the file then edit in notepad for the info you need to copy and paste.
Really wish that was explained better. I found out through trial and error lol
Please i beg make one for facebook stream chat with the picture or avatar of users commenting too pleasee.
what should the height and width be?
Does this chatbox show 7TV emotes??
I don't have experience with those emotes but any that work in Twitch or UA-cam chat should work with this widget
i am still having problems
I can not open the HTML file, it just opens a browser tab that does not load, anybody knows why or how to fix it?
EDIT: Read the comments and downlaoded notepad++ and it works now ^^
Try "Open with" and select some sort of text editor or code editor like Notepad ++
I don't understand how people are opening things with notepad, its not an option for me. it would have really helped if you showed your other screen I think.
In the description I mention using a code editor to view the files. Since they aren't all text or word extension based files. Some editors you can use are Notepad++, Sublime, Visual Studio Code, etc.
A tutorial when you don't show everything you are doing '-'
@@carecaZ3 lots of tutorials assume a base level of knowledge... This one assumes you understand file systems and file management. The files have a certain type (html, CSS, js) the stream elements text windows have corresponding naming with the file types... Not sure what's so hard to understand about this... That and the video description along with other comments explain this... Take a closer look at those if the video isn't enough
@@OVERKLOC Stop being ignorant and have compassion for those who don't work with programming. It's not just me who is confused as to which file you copied and the information. and just look at all the comments on your video
it doesn't work for me..
please help me
thanks for help
Thank you!
You're welcome!