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/

____________________

To begin, go to https://restream.io/chat and click "Launch Chat App." With the chat open, click "Settings" at the bottom left. 

You'll be brought to the embed URL section of the settings. From here you can adjust the animations, alignment, size, and some visual elements. To take customization to the next level, click the "Launch" button. 

From the newly opened window, press F12 on your keyboard to open the Google Chrome Developer Tools. You'll see what might look like some daunting code jargon, but what we use is actually fairly simple.

As you hover your mouse over certain lines of text, you'll see the corresponding area on the screen highlight itself. 

If you want to be more specific on what you're editing, click the gray arrows so that they are point down. This will show more information that you can edit.
As you can see, a lot of the sections have labels or "classes" that correspond to what they actually do; message-text  is the text of the chat message. 

If you click on one of the lines, like class="message-text"  you'll see some options on the right side. Where it says .message-text click the white square next to color:. This will open a color picker that allows you pick what color you want that element to be. 

Once you've found your color, just click off the color picker and it will close. You'll see that the "HEX Code" has changed from #FFF  (white) to the color you chose. 

To get this into your browser source, simply copy what's there and add !important  before the semi-colon so that your changes take priority.  

.message-text {
    color: #FFF000 !important;
}


After you save the changes, you should have your custom chat all setup!  

Here are some examples:

Background Color: 

body {
    background-color: #FFF !important;
}

Message Background Color:

.message-item {
    background-color: #FFF !important;
}

Username Color:

.message-sender {
    color: #FFF !important;
}

Time Color:

.message-time {
    color: #FFF !important;
}

Message Text Color:

.message-text {
    color: #FFF !important;
}


Restream Light:

body {
    background-color: #F3F3F3 !important;
}

.message-item {
    background-color: #FFF !important;
}

.message-sender {
    color: #000 !important;
}

.message-text {
    color: #000 !important;
}

.message-time {
    color: #000 !important;
}
Did this answer your question?