kendo-chat change some messages color

[Siyavash]

Hi,

I want to use kendo-chat to show conversations between two people, but I want to highlight or change some message's colour and not all of them.

a simple example is like I have some initial messages that system is going to send and then two people are going to talk, so I want to change the color of the system messages to something else compare to the user's conversations

Is there any way I can do it?

[Alexander]

Hi Siyavash,

Thank you for the provided information.

You can achieve the desired result by changing the appearance of the messages via CSS by accessing them through the classes that are generated for them by Kendo. You can find other common classes that are used in the themes here:

https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#common-css-classes

With that said, I have a Telerik REPL example for you to review which applies the following CSS rules applied:

.k-message.k-first > div,  //changes the appearance of the initial messages of the chat bot
    .k-message.k-middle > div,
    .k-message.k-last > div {
        background-color: green;
        color: white;
}
.k-message.k-only > div { //changes the appearence of the subsequently sent messages of the chat bot
        background-color: green;
        color: white;
}
 .k-chat .k-quick-reply{  //changes the appearance of the quick replies
      border-color:green;
      color:green;
}
.k-chat .k-quick-reply:hover{ //changes the hover of the appearence of the quick replies
        background-color:green;
        border-color:green;
}

I hope this helps. If not, would it be possible for you to provide a code snippet showing the Chat configuration you have? This will give me a better understanding of the case and it will allow me to provide you with a solution to achieve the desired result.

Regards,
Alexander
Progress Telerik