Flexible bubble chat 1.0.1

[melon they/them]

melon submitted a new resource:

Flexible bubble chat - A flexible (customizable) bubble chat

A flexible (customizable) bubble chat built off of Zaytri's base Slime Chat.

Features

• Choose between a full or compact chat display. The different displays have different customization options.
• Set the location/orientation of the chat and the animations for when a new chat message appears and disappears.
• Pick custom badges for host, moderator, VIP, founder, and artist roles.
• Timing, emote, pronoun...

Read more about this resource...

 

[ORiiPUP he/they/pup]

Hey! Can you update this widget so it'll work with the new pronouns update? I love this chat widget and use it for streams! TY ^^

 

[melon they/them]

melon updated Flexible bubble chat with a new update entry:

Updating to slime2 1.1.4

Updating to use Zaytri's slime2 1.1.4 that fixes some bugs. Check her updates for more details!
Please let me know if you run into any issues

Read the rest of this update entry...

 

[melon they/them]

Hey! Can you update this widget so it'll work with the new pronouns update? I love this chat widget and use it for streams! TY ^^

I'm so sorry about the delay! I've made the right updates (hopefully - I'll monitor this forum better in case there are problems) if you'd still like to use it.

 

[TheTaraStark She/They]

Hey there! I'm trying to make the backgrounds semi-transparent (50% opacity) while using Twitch's user chat colors, but for some reason every version of Custom CSS I've tried using in OBS keeps making things completely transparent.

This is what I tried using most recently:
.compact .message {
background-color: rgb(from (var(--compactBG) r g b / .5);
}

.full-user-color-light .user {
background-color: rgb(from (var(--userColorLight) r g b / .5);
}

.full-user-color-dark .user {
background-color: rgb(from (var(--userColorDark) r g b / .5);
}

.full-user-color-reg .user {
background-color: rgb(from (var(--userColor) r g b / .5);
}

.full-user-color-custom .user {
background-color: rgb(from (var(--fullUserBG) r g b / .5);
}

.full .content {
background-color: rgb(from (var(--fullMessageBG) r g b / .5);
}

Any idea what's going sideways, or what I could do differently?

Thanks!

 

[Zaytri she/her]

Hey there! I'm trying to make the backgrounds semi-transparent (50% opacity) while using Twitch's user chat colors, but for some reason every version of Custom CSS I've tried using in OBS keeps making things completely transparent.

This is what I tried using most recently:
.compact .message {
background-color: rgb(from (var(--compactBG) r g b / .5);
}

.full-user-color-light .user {
background-color: rgb(from (var(--userColorLight) r g b / .5);
}

.full-user-color-dark .user {
background-color: rgb(from (var(--userColorDark) r g b / .5);
}

.full-user-color-reg .user {
background-color: rgb(from (var(--userColor) r g b / .5);
}

.full-user-color-custom .user {
background-color: rgb(from (var(--fullUserBG) r g b / .5);
}

.full .content {
background-color: rgb(from (var(--fullMessageBG) r g b / .5);
}

Any idea what's going sideways, or what I could do differently?

Thanks!

firstly, woa I didn't know you could do that with CSS

secondly, I think the only bug is you have an extra parenthesis; remove the ( in between from and var

 

[TheTaraStark She/They]

Missed the extra parentheses, thanks for catching that! Tried this again (and also tried with the !important tag after the final parentheses on each element) and the alpha is still rendering all-or-nothing. I'm wondering if it's something to do with how the widget generates/parses the variables, but I haven't been able to decipher it (my coding/programming hasn't advanced much since playing with variables in MySpace at age 13 )

Here's the best resource I've found on relative color in CSS! https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors

And OBS's custom CSS is a godsend, really helpful for a few other widgets I've needed to make transparent.

 

[Zaytri she/her]

Missed the extra parentheses, thanks for catching that! Tried this again (and also tried with the !important tag after the final parentheses on each element) and the alpha is still rendering all-or-nothing. I'm wondering if it's something to do with how the widget generates/parses the variables, but I haven't been able to decipher it (my coding/programming hasn't advanced much since playing with variables in MySpace at age 13 )

Here's the best resource I've found on relative color in CSS! https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors

And OBS's custom CSS is a godsend, really helpful for a few other widgets I've needed to make transparent.

Ok yea I think I see why it's not working in OBS, OBS uses Chromium version 103 for its browser source, and relative colors requires version 119 and up https://caniuse.com/css-relative-colors

So you would need to manipulate the JavaScript itself to adjust the alpha value of the colors

 

[rivbert she/her]

I've been loving the chat! Super cute and has been working really well. I was wondering if there's a way to make so 7TV emotes appear in the chat widget? Thank you!

 

[kikibubbs Any]

Love using this chat bubble for streams but was wondering if there'll be an update in the future where deleted chat messages will also disappear on the chat overlay?

 

[Zaytri she/her]

Love using this chat bubble for streams but was wondering if there'll be an update in the future where deleted chat messages will also disappear on the chat overlay?

you can apply this fix here:

slime2 v1.1.5 - Fixes for chat messages deleted by bots

There was a bug where if a bot automatically deleted a message fast enough, it would still be displayed on the chat overlay! This has now been fixed! Slime Chat, Scrolling Chat, and Villager Chat have all been updated with this fix! https://github.com/zaytri/slime2/releases/tag/1.1.5

forums.slime2.stream

 

[Zaytri she/her]

I've been loving the chat! Super cute and has been working really well. I was wondering if there's a way to make so 7TV emotes appear in the chat widget? Thank you!

As per the slime2 Widget Submission Guidelines, 7TV support is not allowed:

Widget Submission Guidelines, Template, and Checklist

Widget Gallery Guidelines When you submit a new widget, it will be reviewed by me or a forum moderator, to check if it passes the following guidelines: No malware allowed, obviously Must comply with Twitch Terms of Service and Community Guidelines Code cannot be obfuscated or include unknown...

forums.slime2.stream

 

[phroobin he/they]

Just wondering if there's any way to force all the chat bubbles to be a specific width? I couldn't find anything, and I'd love to have it so everything is uniform and always the same width if possible!