Chat Variation about streamer.bot-actions

[BlackyWhoElse]

The differenve between normal users, subs, mods and broadcasters are stored inside the {{classes}} variable.

You can find more class types here:

streamer.bot-actions/widget/chat/js/script.js

Lines 105 to 135 in 69a3355

	case "chatmessage":
	// Adding default classes
	message.classes = ["msg"];
	if (!message.color) {
	message.color = settings.Twitch.defaultChatColor;
	}
	if (message.isHighlighted) {
	message.classes.push("highlight");
	}
	if (message.isReply) {
	message.classes.push("reply");
	}
	if (message.isCustomReward) {
	message.classes.push("reward");
	}
	if (message.isMe) {
	message.classes.push("me");
	}
	if (message.subscriber) {
	message.classes.push("subscriber");
	}
	if (message.role === 4) {
	message.classes.push("broadcaster");
	}
	if (message.role === 3) {
	message.classes.push("moderator");
	}
	break;

Default Theme template

<template id="message_twitch">
  <li id="{{msgId}}" class="{{classes}}" style="--userColor:{{color}}">
    <div class="avatar">
      <img src="{{avatar}}" />
    </div>
    <div class="message">
      <span class="badges">{{badges}}</span>
      <span class="name">{{displayName}}</span>
      <div class="content">{{message}}</div>
      <div class="time">{{time}}</div>
    </div>
  </li>
</template>

Example Message

<li id="32d8db00-bef1-44cf-b66f-fa651c5d237c" class="msg subscriber broadcaster animate__animated animate__bounceInRight" style="--userColor:#FF0000">
    <div class="avatar">
      <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/a88dd690-f653-435e-ae3f-cd312ee5b736-profile_image-300x300.png">
    </div>
    <div class="message">
      <span class="badges">
         <img class="broadcaster" title="broadcaster" src="https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/3"><img class="subscriber" title="subscriber" src="https://static-cdn.jtvnw.net/badges/v1/31966bdb-b183-47a9-a691-7d50b276fc3a/3">  
      </span>    
      <span class="name">Blackywersonst</span>  
      <div class="content">Hello Wolrd</div>  
      <div class="time">9:15</div>  
    </div>
  </li>

These can then be targeted by css.

.broadcaster {}

.subcriber {}

.reply {}

.highlight {}

.me {}

[pGommes]

Sorry for my stupidity, but what would I have to do to make it work to create another template id="message_twitch">?</template another index.hml another themplate.hml

---

[BlackyWhoElse]

Mh not sure what exactly you want to do. But if you want to have a custom template for mods or subs, that's not possible right now. The only changes you can make are through a css class.

The different templates you see there are just there to support different types of messages, like a youtube message and channel rewards.

They are the "structure" of each message.
You could do something like:

.subscriber {
    color: #fff;
    background color: green;
}

.moderator {
    color: #18181b;
    background-color: red;
}

.reply {
    color: #18181b;
    background-color: aqua;
}

.highlight {
    color: #fff;
    background-color: purple;
}

It all depends on your HTML and CSS skills.
I will sometimes help if the theme you want is easy to create.

So if you have an image that can better describe your theme, I might be willing to create it for you.

[pGommes]

From what I understand, the subscriber variables, for example, if called correctly, can pull different css configurations, that's what I'm trying to execute but without knowing where to go, unfortunately I'm a layman on the subject. I took some screenshots that better exemplify what I'm trying to do.

My chat

broadcaster and moderator

Thank you for your patience and attention.

This is the example that already comes in the buble_ticker theme, I just don't know how to pull this information into the HTML so that when a subscriber types in the chat, he uses this css variation or moderation or the possible variants.

[BlackyWhoElse]

Ohhhh I remember Edu I have this bubble theme for him.

So you are using the bubble theme and you want to change the background of the moderator and moderator is that correct?

Just add the #chat li selector to your example

#chat li.broadcaster {
    background-color: #ff000073;
    border: 1px solid var(--message-background-color);
}

#chat li.moderator{
    background-color: #6dff0073;
    border: 1px solid var(--message-background-color);

}

[pGommes]

Thank you, you can change other attributes, for example the name.

[BlackyWhoElse]

.name {
    color: var(--userColor);
    font-weight: bold; 
}

[pGommes]

But would this change for everyone and not just the correct moderator or channel owner?

[BlackyWhoElse]

Yes this would be for everyone.
This would be for a moderator

#chat li.moderator .name{

}

[pGommes]

I did this test but I didn't put the space between the class. F

[pGommes]

I want to thank you immensely for your patience and attention. Does the project have a Patreon?
You can close the topic from here I can run my tests.

[BlackyWhoElse]

Your wellcome. No everything is open source from me.
I stream from time to time.
Just come by and say hey and let me know your channel so I can stop by :)