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. It's available in mort encoders and lets you modify individual elements of your chat to your liking.

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

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

.restream-embed-themes-chat-container

Launch 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.

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.

You can copy the line and run 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/

In expanded code, you can find required fields that you want to adjust such as text color, 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 browser source of your encoder:

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

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

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

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

font-family: Consolas, monaco, monospace;

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.


And as a most popular request - here is ready to use code for 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;}

_____________________________

Have more questions?
Click here to head to our Knowledgebase 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?