Hi @Max
does this work now for @Giorgio_Fiorini since the last update?
[class*="dialog-message__Background-sc"] {
background-color: red;
}
[class*="dialog-message__Background-sc"] svg {
fill: red !important;
}
Hi @Max
does this work now for @Giorgio_Fiorini since the last update?
[class*="dialog-message__Background-sc"] {
background-color: red;
}
[class*="dialog-message__Background-sc"] svg {
fill: red !important;
}
That’s great Max!
How can I change the user’s color now?
Thank you again!
Hi there, @Sina, @Giorgio_Fiorini
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
Yeah, I checked the code and pictured that.
Oh well, thanks anyway Max
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
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