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

Did this answer your question?