If you ever wanted to customize your chat appearance on your stream, you probably know that you can select from multiple themes Restream Chat offers. But there are situations when you don't like something or can't get a chat theme that would fit your needs. This is what the Custom CSS option is used for. It's available in most encoders and lets you modify individual elements of your chat to your liking.

Custom CSS in OBS

How to edit a theme

1) To start editing a theme you need to find its description in the CSS file.

CSS modifications depend on the chat skin used. By default, the CSS class for message visualization is called

.restream-embed-themes-chat-container

2) Launch your chat at https://chat.restream.io/settings/embed in a separate tab and open developer tools of your browser - Ctrl+Shift+J (Windows, Linux) or Option+⌘+J (Mac). Switch to Sources on top of the new bar - open Static folder - CSS folder- Chat-embed-themes.css file.

Restream Chat Developer Tools

3) You will see a long line of text. It describes all chat skins available in the Embed chat version. If a theme is called

Ac Odyssey Boxed

then in CSS, it will be called

.restream-embed-themes-chat-container_ac-odyssey-boxed

In this example, we will be editing this theme.

Restream Chat Skins

4) You can copy the line and run it through CSS beautifier/CSS formatted tools to simplify the finding of the required codes. In this example we'll be using the CleanCSS tool:

https://www.cleancss.com/css-beautify/

Restream Chat CSS tool

5) In the expanded code, you can find the required fields that you want to adjust such as text colour, background images, or icons.

If we want to change message text formatting, we go to message-text element description and copy it to the Custom CSS field in the browser source of your encoder:

Restream Chat CSS Message Text Description

You can remove all unnecessary fields and only leave the ones you want to change. For instance, we can switch text colour to yellow by leaving the colour value equal to FFFF00.

Restream Chat CSS Text Colour

Hint: You can use web colour pickers to simplify colour coding. Use hex value that starts with # symbol:

https://www.webfx.com/web-design/color-picker/

Colour picker

We can also change all other elements, such as font family by using

font-family: Consolas, monaco, monospace;

Restream Chat CSS Font

Hint: you can use https://www.cssfontstack.com/ to select fonts you want to use in chat.

You can edit any element of any theme this way.

Code example

And as a most popular request - here is ready-to-use code for the default chat skin to make it a white box with black text.

.restream-embed-themes-chat-container_default .message-item{background-color:rgba(255,255,255,var(--messageBackgroundOpacity,1));}

.restream-embed-themes-chat-container_default .message-text {color: #000;}

.restream-embed-themes-chat-container_default .message-sender{color: #000;}
Restream Chat Custom CSS Code

👉 Next steps

👍 Keep exploring


Would you like to learn some tricks from the community?

Join our Discord and Twitter.

Can't find the right answer?

Contact the Restream Support team via our 24/7 Live Chat.

Did this answer your question?