Rounded Box Chat 2.0

[mielzy]

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]

Super pretty!

 

[Zaytri]

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

 

[mielzy]

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]

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]

Excited to try this out!

 

[rayedemon]

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]

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]

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]

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]

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]

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]

Will try to include in the next update!

 

[mielzy]

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]

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]

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]

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]

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]

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]

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