Many streamers who use our Restream Chat already have a general look and feel for their stream, and want the Restream Chat to match that look. Currently, the best way to do that is via .CSS, which many users may find difficult.

In this Article, we will show the basics of using .CSS to customize the chat as well as show off some community submitted .CSS for you to use and alter for your own streams. Have some awesome .CSS you'd like to show here? Contact us via the Live Chat and let us know!

In order to follow along with this article, you'll need some experience working with Chrome Developer Tools, such as inspect element, as well as some basic .CSS knowledge. Here is a great article to help anyone understand Inspect Element https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

____________________

Before we begin, these are the settings we have set currently within our Restream Chat, you don't need to mimic these, but just understand our settings and how the will affect the final design.

You'll also need a Chrome window open with the embed in chat link and with Inspect Element active so we can start understanding the classes we need to edit. 

Let's look at changing the background colour of each message that appears in our chat.

Right Click the background of the Text Block you wish to inspect and choose "Inspect"

Now you'll need to move your cursor up the line until the entire object you want to change is highlighted, like this;

As you can see from the picture above, the class of the items we wish to edit is located within "Message-Item" which means, if we wanted to make the background color of our messages green, we would need to form our .CSS like this:

.message-item { 
   background-color: rgb(73, 130, 73) !important;
}

Although not recommended, we need to use !important here to override some JavaScript built into the chat program. 

As you can see from the image above, by pasting in this code we have changed the background colour of our messages from a dark gray to a vibrant green!

=====================

Community Submitted Codes!

____________________

New Conglomerate Submitted by Papabrose

The Look:

The Code:

.message-sender{
color: rgba(229, 228, 32, 1);
}

.message-time{
color: rgba(229, 228, 32, 1);
}

.message-text{
background-color: rgba(10, 33, 99, .9);
color: rgba(229, 228, 32, 1);
font-family: "smooth circulars";
padding-left: 0.4em;
}

.message-item{
background-color:rgba(21,27,38.041)
}

The Creator:

____________________

Dark Code Side Panel with animated header submitted by SneakyJoe.RU

The Look:

The Code:

.message-info{
padding-right: 0.4em;
padding-left: 0.2em;
padding-right: 0.2em;
padding-top: 0.2em;
padding-bottom: 0.3em;
font-family:"arial",heletica,sans-serif;

background: #003300  url('https://orig00.deviantart.net/227c/f/2018/024/5/9/triangular_background__green__by_joe_4_kerr-dc110h5.jpg') repeat 0 0; opacity: .65;
-webkit-animation: 15s linear 0s normal none infinite animate;
}

@-webkit-keyframes animate {
from {background-position:0 200px;}
to {background-position: 0 0;}
}

.message-sender{
color: rgba(255, 255, 255, 1);
}

.message-time{
color: rgba(255, 255, 255, 1);
}


.message-text{
background-color: rgba(0, 0, 0, .5);
color: rgba(255, 255, 255, 1);
font-family: "Lucida Console", Monaco, monospace;
padding-left: 0.2em;
padding-right: 0.2em;
padding-bottom: 0.2em;
}

.message-item{
background-color:rgba(0,0,0,1);
padding-left: 0.2em;
padding-right: 0.2em;
padding-top: 0.2em;
padding-bottom: 0.2em;
}

The Filter:

OBS Stream Effects by Xaymar

The Creator:

{ 
    background: linear-gradient(rgba(0, 84, 232,0.0), rgba(1, 52, 143, 0.3), rgba(0, 84, 232,0.5));
}

.chat-messages_theme_default .message-text{
      font-size: 1.5em;
font-family: "bebas neue";
}

.chat-messages_theme_default .message-sender{
    font-size: 1.3em;
font-family: "bebas neue";
}
.icon-platform {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 1.5em;
    height: 1.5em;
    vertical-align: text-top;
}
.message-item {
    position: relative;
    padding: .6em;
    transition: all .3s;
    margin-bottom: .5em;
    letter-spacing: .05em;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

    padding-bottom: 10px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;

}
.chat-messages_align_bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 .0em .0em .0em;
    width: 100%;
    box-sizing: border-box;
}

.message-item {
    position: relative;
    padding: 1em;
    transition: all 1.3s;
    margin-bottom: .0em;
    letter-spacing: .05em;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

The Creator:

____________________

Platform Animated Icon Replacement by DarkXoa:

The Look:

The Code:

#jsDemoMessage {
visibility:hidden; Display:none;
}

.icon-platform {
display: none !important;
}

.message-info{
padding-right: 0.4em;
padding-left: 0.2em;
padding-right: 0.2em;
padding-top: 0.2em;
padding-bottom: 0.3em;
font-family:"arial",heletica,sans-serif;

background: #143D2A url('https://i.imgur.com/wqeZAcG.gif');
opacity: .65;
background-repeat: no-repeat;
background-size: 22px 22px;
}

.message-sender{
color: rgba(255, 255, 255, 1);
text-indent: 1.3em;
}

.message-time{
color: rgba(255, 255, 255, 1);
}


.message-text{
background-color: rgba(20, 61, 42, 0.74);
color: rgba(255, 255, 255, 1);
font-family: "Lucida Console", Monaco, monospace;
padding-left: 0.2em;
padding-right: 0.2em;
padding-bottom: 0.2em;
}

.message-item{
background-color: rgba(20, 61, 42, 0.74);
padding-left: 0.2em;
padding-right: 0.2em;
padding-top: 0.2em;
padding-bottom: 0.2em;
}

The Creator:

_____________________________

Have your own CSS Code you'd like to share? Contact us via the Live Chat and we'll add your code to this article!

_____________________________

Have more questions?
Click here to head to our Knowledge base search engine.  

Would like to learn some tricks from the community?
Please join our Discord.

Can't find the right answer?
Contact the Restream Support team via our Live Chat.

Did this answer your question?