In this article, we will present the main CSS classes, how to change the style, and some examples of customization of Live Chat.
Summary:
To change the chat style via CSS you can add the <style> tag next to the embed code in your post or you can insert the classes inside the <head> and <style> tag of your website's source code.
Inserting the <style> tag next to the publication
For this example, we added the <style> tag (1) within the same page where we publish the embed code of the chat (2).
Inserting the classes next to the source code of the site
Header Color
div.chat-room--chat--header{
background-color: #BDBDBD !important;
}
Next to the header, we have a container border that inherits the main color settings, to change it just include the class:
div.arena-chat-widget--container{
border-top: 1px solid #BDBDBD !important;
}
Main Live Chat background-color
This class changes the background color of the main chat structure and most of the tabs.
Class:
div.live-chat-room{
background:#fcfcfc;
}
Input messages field background
Class:
div.live-chat-room-input--input--wrapper{
background: #607D8B;
}
Tabs:
Main tab settings:
div.chat-room--tabs--tabs{
background: #263238;
border-color: #fcfcfc;
color: #fcfcfc;
}
if there are direct and channels, the style of the main tab must also be configured:
div.chat-room--tabs--tab{
background: #263238;
border-color: #fcfcfc;
color: #fcfcfc;
}
Click here to access the full list of Live Chat CSS classes.
If there is any doubt is to contact our support by chat.
Arena Team