Rounded Box Chat 2.0

[mielzy any]

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...

 

[slashie101 she/her]

Super pretty!

 

[Zaytri she/her]

Looks nice! I'd recommend removing the colons after the usernames, which should be in the CSS somewhere

 

[mielzy any]

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

 

[mielzy any]

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!

 

[softiedesu they/them]

Excited to try this out!

 

[rayedemon she/her]

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]

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

 

[mielzy any]

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?

 

[mielzy any]

mielzy updated Rounded Box Chat with a new update entry:

Fixed animations!

Fixed the animations, should apply to the whole message box now!

Read the rest of this update entry...

 

[rayedemon she/her]

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]

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

 

[mielzy any]

Will try to include in the next update!

 

[mielzy any]

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]

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)

 

[mielzy any]

mielzy updated Rounded Box Chat with a new update entry:

Fixed width, custom border size, custom username size!

Have now implemented options for fixed width, custom border size, custom username size! Please redownload!

Read the rest of this update entry...

 

[mielzy any]

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]

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]

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.

 

[mielzy any]

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