Customize color of user's messages

Hi @Max
does this work now for @Giorgio_Fiorini since the last update?

https://community.elfsight.com/t/ai-chatbot-enjoy-enhanced-customization-with-static-classes/107871?u=sina

[class*="dialog-message__Background-sc"] {
    background-color: red;
}
[class*="dialog-message__Background-sc"] svg {
    fill: red !important;
}
2 Likes

That’s great Max!
How can I change the user’s color now?
Thank you again!

2 Likes

Hi there, @Sina, @Giorgio_Fiorini :wave:

Unfortunately, this update doesn’t change the customization workflow in this case. These elements already had a static class dialog-message__Background-sc, but we’ve introduced our new, native class es-message-background. You can use both variants, but es-message-background is more stable.

However, the thing is that the user and bot message sections have the same static class es-message-background. This is why, you still should use dynamic classed to change the user message background independently of the bot message background:

Please let me know if this clarifies things or if you have any questions left :slightly_smiling_face:

Yeah, I checked the code and pictured that.
Oh well, thanks anyway Max :slight_smile:

2 Likes

I’m coming with the great news - devs have just added separate static classes for the user and bot message (.es-message-user and .es-message-assistant). It means that now you don’t need to use the dynamic classes for changing the message background color.

Here is the code for your use case:

/*Change color of the bot message background */

.es-message-assistant .es-message-background {
  background-color: violet;
}

/*Change color of the tail in the bot message */
.es-message-assistant .es-message-tail {
  fill: violet;
}

/*Change color of the user message background */
.es-message-user .es-message-background {
  background-color: tomato;
}

/*Change color of the tail in the user message */
.es-message-user .es-message-tail {
  fill: tomato;
}

Try it out and let me know if it worked for you :wink:

2 Likes

That’s lovely Max!
I can say it works like a charm: .

es-message-assistant p {
  color: #7c9084;
}

for who is in need to change the font color :slight_smile:

2 Likes