Gaming News

Chat overlay CSS formatting

Hey there! Having some trouble getting chat overlay just right in OBS Studio. I'm using the chat widget from streamlabs and using custom HTML/CSS. How would I go about addressing these?

I am unable to set the font to 11px.

Can't get the colon (:) showing after a name.

I got a line break in after the name, but the message is showing off to the right on the next line as if indented.

The overflow on names is too short.

For reference images, I have a link here:

HTML: <!– item will be appened to this layout –> <div id="log" class="sl__chat__layout"> </div>

<!– chat item –> <script type="text/template" id="chatlist_item"> <div data-from="{from}" data-id="{messageId}"> <span class="meta" style="color: {color}"> <span class="badges"> </span> <span class="name">{from}</span> </span>

<span class="message"> <br>{message} </span> 

</div> </script>

CSS: @import url(;

  • { box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

body { text-shadow: 0 0 1px #000, 0 0 2px #000; background: {background_color}; font-family: 'Tahoma'; font-weight: 400; font-size: {font_size}; line-height: 1.0em; color: {text_color}; }

log>div {

//animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards; //-webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards; 


.colon { display: none; }

Read more:  Warhammer 40,000: Mechanicus is a Gift from the Omnissiah

log {

display: table; position: absolute; bottom: 0; left: 0; padding: 0 5px 5px; width: 100%; table-layout: fixed; 


log>div {

display: table-row; 


log>div.deleted {

visibility: hidden; 


log .emote {

background-repeat: no-repeat; background-position: center; background-size: contain; padding: 0.4em 0.2em; position: relative; 


log .emote img {

display: inline-block; height: 1em; opacity: 0; 


log .message,#log .meta {

text-align: left; vertical-align: top; display: table-cell; padding-bottom: 0.1em; 


log .meta {

width: 35%; text-align: left; padding-right: 0.5em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 


log .message {

word-wrap: break-word; width: 65%; 


.badge { display: inline-block; margin-right: 0.2em; position: relative; height: 1em; vertical-align: middle; top: -0.1em; }

.name { margin-left: 0.2em; }


Similar Guides

More about Gaming News

Post: "Chat overlay CSS formatting" specifically for the game Gaming News. Other useful information about this game:

Top 7 NEW Games of February 2021

Looking for something new to play on PC, PS5, PS4, Xbox, or Nintendo Switch in February 2021? Here are the notable video game releases.

Top 20 NEW Open World Games of 2021

2021 will bring us tons of open world games for PC, PS5, Xbox Series X, PS4, Switch, and beyond. Here's what we're looking forward to.

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *