Rounded Box Chat

 Rounded Box Chat 2.0

✅ This widget has passed review and has been verified to follow the Widget Gallery Guidelines.

mielzy
any

Member
Developer
Artist
Streamer
mielzy submitted a new resource:

Rounded Box Chat - Chat with messages contained within a rounded box!

Rounded box chat!
Built using slime2: slime2.stream

[Useful Links]
Setup: forums.slime2.stream/resources/getting-started-with-slime2.3
Theme Page: forums.slime2.stream/resources/scrolling-chat.13
Customization: forums.slime2.stream/resources/scrolling-chat.13/field
Support: forums.slime2.stream/threads/scrolling-chat.27

[Features]

Twitch Colors
  • Name colors in chat are used as the color for the entire message
  • Dark colors are automatically lightened

Pronouns
- Shows...

Read more about this resource...
 

Zaytri
she/her

Glitch Witch
Admin
Developer
Streamer
Looks nice! I'd recommend removing the colons after the usernames, which should be in the CSS somewhere
 
OP
OP
mielzy

mielzy
any

Member
Developer
Artist
Streamer
Looks nice! I'd recommend removing the colons after the usernames, which should be in the CSS somewhere
Couldn’t quite figure it out, will look into it! Also couldn’t quite figure out how to get the animations to play nice with the new .username class I created for the tops of the boxes, will need to fiddle more to fix that functionality and implement as soon as I do
 
OP
OP
mielzy

mielzy
any

Member
Developer
Artist
Streamer
Couldn’t quite figure it out, will look into it! Also couldn’t quite figure out how to get the animations to play nice with the new .username class I created for the tops of the boxes, will need to fiddle more to fix that functionality and implement as soon as I do
Fixed the credits + removed the colon!
 

rayedemon
she/her

New member
Enjoying it so far! Main question would be how to apply a CSS changes?

I wanted to set
overflow-wrap: 200px;

I tried both
overflow: hidden & overflow: visible

I don't see overflow referenced in any of the current js files?
 

Zaytri
she/her

Glitch Witch
Admin
Developer
Streamer
Enjoying it so far! Main question would be how to apply a CSS changes?

I wanted to set
overflow-wrap: 200px;

I tried both
overflow: hidden & overflow: visible

I don't see overflow referenced in any of the current js files?
overflow-wrap doesn't have a pixel value, what exactly are you trying to achieve? also it should include a CSS file you can edit
 
OP
OP
mielzy

mielzy
any

Member
Developer
Artist
Streamer
Enjoying it so far! Main question would be how to apply a CSS changes?

I wanted to set
overflow-wrap: 200px;

I tried both
overflow: hidden & overflow: visible

I don't see overflow referenced in any of the current js files?
If you're trying to limit how wide the boxes should be, I believe you can set the width of .username and .message in the css file to 200px. However, the size of the browser source should limit how wide the messages can be already, so it may be easier to just make your OBS source 200px wide instead?
 

rayedemon
she/her

New member
If you're trying to limit how wide the boxes should be, I believe you can set the width of .username and .message in the css file to 200px. However, the size of the browser source should limit how wide the messages can be already, so it may be easier to just make your OBS source 200px wide instead?
Wasn't working earlier, OBS restart seems to have helped. Thank ya for answering!
 

Geddstation
he/him

New member
Streamer
Hey mielzy, thanks for uploading this widget, it's great. I'm trying to replicate how I had my Chat Bubbles by Zaytri setup using streamelements. I'm quite close but would love some more customisation options for the size of the boxes themselves, size of the borders etc. I know there is the css file and I have had some luck setting a custom width and height limits but it would be nice if all these options were in the standard widget settings if possible! I'm not well versed in CSS at all so it's been a bit of a minefield. Love the widget overall though, keep up the good work 😊
 
OP
OP
mielzy

mielzy
any

Member
Developer
Artist
Streamer
Hey mielzy, thanks for uploading this widget, it's great. I'm trying to replicate how I had my Chat Bubbles by Zaytri setup using streamelements. I'm quite close but would love some more customisation options for the size of the boxes themselves, size of the borders etc. I know there is the css file and I have had some luck setting a custom width and height limits but it would be nice if all these options were in the standard widget settings if possible! I'm not well versed in CSS at all so it's been a bit of a minefield. Love the widget overall though, keep up the good work 😊
Clarifying, are you trying to set all the boxes to be the same width?
 

Geddstation
he/him

New member
Streamer
Clarifying, are you trying to set all the boxes to be the same width?
Not the same width per se but a maximum width they can be so they also utilitse some height which I have available if that makes sense. Not sure if the attatched image might help at all. Thank you for replying!

(image description: two lots of on screen chat widgets both just with the word 'testing' repeated over and over. Top widget is rounded box chat by mielzy, bottom widget is chat bubbles on streamelements by Zaytri)
 

Attachments

  • Screenshot 2024-01-03 00-32-03.png
    Screenshot 2024-01-03 00-32-03.png
    167.6 KB · Views: 9
OP
OP
mielzy

mielzy
any

Member
Developer
Artist
Streamer
Not the same width per se but a maximum width they can be so they also utilitse some height which I have available if that makes sense. Not sure if the attatched image might help at all. Thank you for replying!

(image description: two lots of on screen chat widgets both just with the word 'testing' repeated over and over. Top widget is rounded box chat by mielzy, bottom widget is chat bubbles on streamelements by Zaytri)
Updated now, please redownload!
 

Geddstation
he/him

New member
Streamer
Hey mielzy, been using the chat on stream for a few streams now, really loving it. Just having some trouble getting chat to do any form of exit animation, whether vertical or horizontal it just seems to crop off the edge of the box, both when used in OBS or just when previewed on a browser. Am I doing something wrong? Thanks a bunch 😁
 

Bacarra
he/him

New member
Streamer
Hey mielzy, Just found slime2 today and loving this widget so far. Thank you!

Any chance we could get the ability to set the box colours to Twitch Light/Twitch Dark/Twitch/Custom like we can for the usernames?

I was able to change the border radius in the CSS file, but might be another good thing to have a setting for.
 
OP
OP
mielzy

mielzy
any

Member
Developer
Artist
Streamer
Hey mielzy, Just found slime2 today and loving this widget so far. Thank you!

Any chance we could get the ability to set the box colours to Twitch Light/Twitch Dark/Twitch/Custom like we can for the usernames?

I was able to change the border radius in the CSS file, but might be another good thing to have a setting for.
When you say twitch light/dark etc., do you mean coloring the boxes according to the username colors on twitch?
Also, there should be a setting for changing border radius etc now in the latest release - if you don’t see it, please redownload from my kofi! It should be under the last setting group
 
Last edited:
Back
Top