Can anyone provide a CSS code or rule that will allow me to change the font color of the timestamp that appears below each bot and user message? Details:
Thank you!
1 Like
Good News! I found a solution.
To change the font color of the message “bubble” timestamp, please use the following CSS rules:
.bcJOOG .dialog-message-content__Meta-sc-535ea8de-0 {
color: #00000095!important; // change font color of bot message timestamp
}
.hGXkMC .dialog-message-content__Meta-sc-535ea8de-0 {
color: #ffffff!important; // change font color of user message timestamp
}
Note: Above rules will continue to work as long as the above CSS selectors (i.e., classes) are not modified by Elfisght’s dev team.
Enjoy!
1 Like
Hi @AeroConsultants!
I checked the CSS code you provided and noticed that, unfortunately, it uses temporary CSS classes. Since these classes can change, you’ll need to use stable ones instead. For example:
For more information on stable vs. temporary CSS classes and how to find the right classes for your customization, please see Guide to CSS Codes for Elfsight Widgets.
That said, I’ll be glad to provide you with a CSS code from our devs to change the color of the timestamps:
time {
color: black;
}
You need to add this code to the Custom CSS section of the widget.
Hoping my answer was useful! But don’t hesitate to come back in case of any questions 
1 Like
Hi @Irene,
Thanks for clarifying that. Unfortunately, your solution partially worked.
I need two (2) separate CSS rules: One for the bot message bubble timestamp, and one for the user message bubble timestamp.
Can you help with that?
Again, thank you!
1 Like
Oh I see, I get it now – thanks for clarifying your request!
I’ll ask our wonderful devs to help with the CSS’ for these timestamps separately and get back to you as soon as I have their answer 
2 Likes
Dear @AeroConsultants,
Coming back to you with an alternative CSS code for your case:
.es-message-assistant [class*="dialog-message-content__Time-sc"] {
color: red;
}
.es-message-user [class*="dialog-message-content__Time-sc"] {
color: green;
}
The first color property in the code is for the assistance message time, and the second one – for the user’s. Specify the needed colour after the : sign using the color word or a hex code 
Let me know if the customisation is to the point this time 
3 Likes
Awesome, @Irene!
Thank you so much. Unfortunately, I cannot access our AI Chatbot widget settings panel due to Cloudflare’s current server issues. I trust your code works, so I’ll implement it as soon as our widget (backend) is up and running.
Recommendation: Prior to your next widget’s version release, would it be possible to incorporate your solution into the widget’s settings? (i.e., theme section)
Cheers! 
Update: It worked! Thank you so much.
2 Likes
Oh, sorry that the Cloudflare issue kept you back a little. But I’m glad that everything works now 
Did I get it right that you want me to add the customizations straight to your AI Chatbot’s settings? If so, it can totally be arranged – just let me know!
Apologies for any confusion. I was referring to this: (the change will benefit all widget users)
Makes sense?
1 Like
Thanks for the clarification!
Sure – we’re currently working on adding more customization options for our AI Chatbot. I’ll pass your request for my team’s consideration, and I hope that they include this element into the release 
1 Like