Title: CSS classes Last modified: January 19, 2023 --- # CSS classes * Resolved [arumgeorge](https://wordpress.org/support/users/arumgeorge/) * (@arumgeorge) * [3 years, 4 months ago](https://wordpress.org/support/topic/css-classes-18/) * Hey Jordy Still doing great with this, improving all the time šŸ‘šŸ¼Do you think you could add a different CSS class for the chatbot AI header (name + start message) and the AIā€™s reply area?At the moment these have to have the same styling, would be nice if they could be different.Cheers Viewing 10 replies - 1 through 10 (of 10 total) * Plugin Author [Jordy Meow](https://wordpress.org/support/users/tigroumeow/) * (@tigroumeow) * [3 years, 4 months ago](https://wordpress.org/support/topic/css-classes-18/#post-16390066) * Haha, thank you [@arumgeorge](https://wordpress.org/support/users/arumgeorge/)! šŸ™‚ * So you are talking about the AI conversation and the reply section, right? If yes, you can definitely change everything! šŸ™‚ - The User conversation uses **.mwai-ai**. - The AI conversation **.mwai-user**. - And the bottom section containing the textfield and the buttons uses **.mwai- input**. * That should work. * Thread Starter [arumgeorge](https://wordpress.org/support/users/arumgeorge/) * (@arumgeorge) * [3 years, 4 months ago](https://wordpress.org/support/topic/css-classes-18/#post-16390180) * So if you view a page with the chatbot shortcode present, you have a bar along the top with something like: AI: Hi, how can I help you? That has by default a black(ish) background and uses .mwai-aiunder that there is the text input area and a button to send.When the AI replies it adds a new section for the response and this section is styled the same as the original bar along the top with the AI name and message. This is because it also uses .mwai-ai.I have included a link to a screenshot that hopefully shows what I mean a bit clearer. šŸ˜ * ![](https://hussstle.co.uk/chatbot-styling/) * [https://hussstle.co.uk/chatbot-styling/](https://hussstle.co.uk/chatbot-styling/) * Plugin Author [Jordy Meow](https://wordpress.org/support/users/tigroumeow/) * (@tigroumeow) * [3 years, 4 months ago](https://wordpress.org/support/topic/css-classes-18/#post-16391563) * I canā€™t see your screenshot, haha, itā€™s geofenced! Canā€™t be seem from Japan. But I know what you meanā€¦ the very first reply in the conversation? If thatā€™s the case, what about this: * ```wp-block-code .mwai-conversation > div:first-child { background: purple !important; } ``` * Thread Starter [arumgeorge](https://wordpress.org/support/users/arumgeorge/) * (@arumgeorge) * [3 years, 4 months ago](https://wordpress.org/support/topic/css-classes-18/#post-16393122) * Thanks Jordy, gave that a go and no luck unfortunately. I sorted the geofencing issue, removed it for Japan. * Plugin Author [Jordy Meow](https://wordpress.org/support/users/tigroumeow/) * (@tigroumeow) * [3 years, 4 months ago](https://wordpress.org/support/topic/css-classes-18/#post-16393216) * Really? But it does; on all my tests šŸ™‚ Are you sure you added the CSS? Can I see your chatbot? Are you using the latest version of the plugin, just in case? * Thread Starter [arumgeorge](https://wordpress.org/support/users/arumgeorge/) * (@arumgeorge) * [3 years, 4 months ago](https://wordpress.org/support/topic/css-classes-18/#post-16393314) * I went back and had another go and I tweaked it to this: * .mwai-conversation .mwai-reply.mwai-ai:first-child { background: #003a6f!important;} And it works. But now I have the issue of trying to get the font color to be different, I need white for the first section but I canā€™t get it to work, trying multiple pseudo classes and in different ways but Iā€™m not getting it to work aahhhh lolYes you can see here:[https://hussstle.co.uk/job-description-writer](https://hussstle.co.uk/job-description-writer) * Plugin Author [Jordy Meow](https://wordpress.org/support/users/tigroumeow/) * (@tigroumeow) * [3 years, 4 months ago](https://wordpress.org/support/topic/css-classes-18/#post-16393326) * Mmm, maybe need to be connected? I donā€™t see it šŸ™ * Thread Starter [arumgeorge](https://wordpress.org/support/users/arumgeorge/) * (@arumgeorge) * [3 years, 4 months ago](https://wordpress.org/support/topic/css-classes-18/#post-16393329) * try again, I realised there was a user status filter which I just removed * Plugin Author [Jordy Meow](https://wordpress.org/support/users/tigroumeow/) * (@tigroumeow) * [3 years, 4 months ago](https://wordpress.org/support/topic/css-classes-18/#post-16393351) * Haha, so basicallyā€¦ I think you really went a bit too far with all those ā€œimportant!ā€, donā€™t use them, as much as little as possible, and add the CSS at the bottom of the page (yeah, you use !important because it is before, to override mine, and whatever comes after). You have an important that makes all the font dark. * If you remove your CSS completely and just use the one I shared with you before, with a ā€œcolor: whiteā€ for example in it, that will work I think. Then you can try to find a way to do it all without any important. * You can use the filter style I talk about on my website too šŸ™‚ * Thread Starter [arumgeorge](https://wordpress.org/support/users/arumgeorge/) * (@arumgeorge) * [3 years, 4 months ago](https://wordpress.org/support/topic/css-classes-18/#post-16404192) * Sorry been tied up for a few days. * haha yes you right, lots of !important been used lol to be honest I did this because I can get the custom css to have any effect without it šŸ¤·šŸ»ā€ā™‚ļø Viewing 10 replies - 1 through 10 (of 10 total) The topic ā€˜CSS classesā€™ is closed to new replies. * ![](https://ps.w.org/ai-engine/assets/icon-256x256.png?rev=3431928) * [AI Engine - The Chatbot, AI Framework & MCP for WordPress](https://wordpress.org/plugins/ai-engine/) * [Frequently Asked Questions](https://wordpress.org/plugins/ai-engine/#faq) * [Support Threads](https://wordpress.org/support/plugin/ai-engine/) * [Active Topics](https://wordpress.org/support/plugin/ai-engine/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/ai-engine/unresolved/) * [Reviews](https://wordpress.org/support/plugin/ai-engine/reviews/) * 10 replies * 2 participants * Last reply from: [arumgeorge](https://wordpress.org/support/users/arumgeorge/) * Last activity: [3 years, 4 months ago](https://wordpress.org/support/topic/css-classes-18/#post-16404192) * Status: resolved