✅ 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