If anyone's message box is clipping on the right side and cutting off the emotes etc, change the padding-left under css --> .message_row to "padding-left: 15px;" without the quotes. This will shift the box to the left more and stop it from chopping off at the end.
I found a solution! in CSS at this part: //////////////////////////////////// .main-container{ display:{{alignMessages}}; height:98%; flex-direction: column; justify-content: flex-end; text-align: left; word-wrap: break-word;
i know this video is quite old now but im wondering if you could help me? i have everything set up as it should be, the width and height are the same in obs and settings for the box, but no matter what i do, the first chat doesn't show, until ive messaged a few times as if it starts lower than the box is set. example: hi *nothing* hi *nothing* hi *nothing* hi (half of the message is cut off at the bottom) hi (first showing, cut off message, is now full and readable but THIS message is still under, needing another message to push it up where it can be seen) im sorry if this was hard to read, im just confused as to why this might be happening :(
Go to the Setting ->Open Editor ->CSS. Scroll down and go to the .user-message line. Delete this line below: box-shadow: 0 0 0 1px #ffffff. If you only want to change the border color or thickness, then 1px mean the thickness, and # value is the color (HEXA).
If you're playing with the width settings and the bubbles are getting cut off or not stretching to fit, save your changes, back out of the editor and then open the overlay again. I believe this is a StreamElements issue where it doesn't refresh after you've made those width/height changes.
If you are logged in to the StreamElements discord you should be able to use this link to bring up this specific overlay: strms.net/boxed_chat_by_cocahh
This particular overlay only aligns to the top or bottom. You should find the "align Messages" setting under Settings > Typography. However, you can set the width in the overlay and then position how you like in OBS so there is no empty space.
Do chat bubbles appear in the StreamElements designer? If you chat in your Twitch chat they should also appear there. If not your StreamElements may not be connected to Twitch correctly. Here is a help article: support.streamelements.com/en/articles/146-creating-your-streamelements-account-and-initial-setup If they do double check your adding the entire URL to obs, the source in obs is visible and it’s at the top of your source list. Hopefully one of these helps fix the issue.
As far as I know, StreamElements doesn't support chat for UA-cam yet (because of the way UA-cam APIs work) but here is a decent tutorial on how you can get chat on screen just using OBS - ua-cam.com/video/1Whr6EP5FTI/v-deo.html
Are you in creasing the resolution in the StreamElements builder to make it larger? If you are only making bigger in OBS it may cause it to be pixelated. Otherwise I’m not sure why this happening unfortunately.
Sorry it didn't work for you! Here's a couple of things you can try: - Make sure you have saved the overlay in stream elements, if you've been working on it, it might not be saved yet - Double check your width and height settings match in OBS - In properties for the source you've added to OBS click "refresh cache" and try again - Make sure StreamElements is connected to your chat by testing a chat command - Finally depending on when you tested it sometimes StreamElements goes down, I know they were down last night at the very end of my stream, so that also may have affected it
@@Silvereon apologies, the discord is not my own but StreamElements and the link to share keeps expiring. I've updated again with hopefully a more permanent link :)
If anyone's message box is clipping on the right side and cutting off the emotes etc, change the padding-left under css --> .message_row to "padding-left: 15px;" without the quotes. This will shift the box to the left more and stop it from chopping off at the end.
bro, u are the real KING. Love from France
voce é perfeito
they changed there discord around....i dont see it anywhere
in Google Type : Boxed chat by Cocahh
it should be the 1st link
I noticed this too. Hope they can get a work around though
Been looking how to do this everywhere... Thank you!!!
This is super cool and so easy to follow! Great video!
Thank you!
Thank you! Commenting to help your algorithm!
I would love this but there's no longer access to it...sad :c
that's so cool thanks for sharing
I am having the issue where longer chats get cut off, and I can't seem to make the text begin a second line. Does someone know how to remedy this?
same issue with me
I found a solution!
in CSS at this part:
////////////////////////////////////
.main-container{
display:{{alignMessages}};
height:98%;
flex-direction: column;
justify-content: flex-end;
text-align: left;
word-wrap: break-word;
How do i change color for peoples names? Including my own... Or does it do it automatically?
i know this video is quite old now but im wondering if you could help me? i have everything set up as it should be, the width and height are the same in obs and settings for the box, but no matter what i do, the first chat doesn't show, until ive messaged a few times as if it starts lower than the box is set.
example:
hi *nothing*
hi *nothing*
hi *nothing*
hi (half of the message is cut off at the bottom)
hi (first showing, cut off message, is now full and readable but THIS message is still under, needing another message to push it up where it can be seen)
im sorry if this was hard to read, im just confused as to why this might be happening :(
It's the positioning of where your box is in the editor. Move that around, test type
Thank you! This was very helpful
Does this not work for streamlabs?
I cant get it to work...sadge
Hi, I have bubbles and thumbs up appearing in my OBS streams, any hint/help on where that coming from and how to stop. thanks in advance
Thank you so much! I love it!
Glad I can help!
that catagory in discord no longer excists
Hey! Does anyone know how to remove the white border from the chatbox?
Did you ever figure out how to do this?
@@ColdnessAwaits Unfortunately no, I ended up using the "Yet another Chat Widget by AaroniusH" widget instead.
I need to know too, lol
Go to the Setting ->Open Editor ->CSS. Scroll down and go to the .user-message line. Delete this line below: box-shadow: 0 0 0 1px #ffffff. If you only want to change the border color or thickness, then 1px mean the thickness, and # value is the color (HEXA).
So helpful, thanks!
theres no link in discription as you say lol
The widget is part of stream elements, which the only shareable link I could find was in their discord. It's the second line of the description
very useful thanks
is there a way to wrap the text so it doesn't go off the screen?
If you're playing with the width settings and the bubbles are getting cut off or not stretching to fit, save your changes, back out of the editor and then open the overlay again. I believe this is a StreamElements issue where it doesn't refresh after you've made those width/height changes.
How do you change the font type? there is no drop down or options for me to select what font - only the default Montserrat
Ah, I'm stupid. The font has to be installed in your computer, not just downloaded. Never mind!
hi i cant find the link anywhere!
If you are logged in to the StreamElements discord you should be able to use this link to bring up this specific overlay: strms.net/boxed_chat_by_cocahh
@@Aleaty Thank you!!!!
I dont know why but its not showing up on my stream? i did everything how I like it n such but when I test it on streamlabs it doesnt show up :(
if you set the browser source/chat box to your screen size on streamlabs it should show up when testing. You can change the size of it by holding alt
How do you make the bubbles align right? A lot of empty space.
This particular overlay only aligns to the top or bottom. You should find the "align Messages" setting under Settings > Typography.
However, you can set the width in the overlay and then position how you like in OBS so there is no empty space.
@@Aleaty I just ended up putting the chatbox on the left of the screen, but thank you anyways!
TYSM!!! now I don't have the generic goofy Twitch Chat
So to add it to obs I did as said, and i'm chatting to see if it works but nothing pops up?
Do chat bubbles appear in the StreamElements designer? If you chat in your Twitch chat they should also appear there. If not your StreamElements may not be connected to Twitch correctly. Here is a help article: support.streamelements.com/en/articles/146-creating-your-streamelements-account-and-initial-setup
If they do double check your adding the entire URL to obs, the source in obs is visible and it’s at the top of your source list. Hopefully one of these helps fix the issue.
Can I make something like this for UA-cam? :D
As far as I know, StreamElements doesn't support chat for UA-cam yet (because of the way UA-cam APIs work) but here is a decent tutorial on how you can get chat on screen just using OBS - ua-cam.com/video/1Whr6EP5FTI/v-deo.html
Does it have 7tv emotes support?
One year😭So sorry mate
For some reason the emotes look pixelated.. I've seen streamers using this chat box while having bigger emotes with good quality ;;
Are you in creasing the resolution in the StreamElements builder to make it larger? If you are only making bigger in OBS it may cause it to be pixelated. Otherwise I’m not sure why this happening unfortunately.
thank you for this
Glad it helped 🥰
chat bubble no longer works
it dont work:(
Sorry it didn't work for you!
Here's a couple of things you can try:
- Make sure you have saved the overlay in stream elements, if you've been working on it, it might not be saved yet
- Double check your width and height settings match in OBS
- In properties for the source you've added to OBS click "refresh cache" and try again
- Make sure StreamElements is connected to your chat by testing a chat command
- Finally depending on when you tested it sometimes StreamElements goes down, I know they were down last night at the very end of my stream, so that also may have affected it
@@Aleaty o okay i tried everything but it still wont show up on obs:[
@@mrmonkeyalt9114 Its just a Copy paste thing. You have to write in the Chat and Connect your Streamelements to your Twitch Account
This information and tutorial are outdated - the file no longer works
This discord link is broke
Thanks for letting me know! I've updated the link 😊
@@Aleaty Still broken :(
@@Silvereon apologies, the discord is not my own but StreamElements and the link to share keeps expiring. I've updated again with hopefully a more permanent link :)