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:  My 2020 in review: potato-proof!

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 20 NEW Medieval Games of 2021

Swords, dragons, knights, castles - if you love any of this stuff, you might like these games throughout 2021.

10 NEW Shooter Games of 2021 With Over The Top Action

We've been keeping our eye on these crazy action oriented first and third person shooter games releasing this year. What's on your personal list? Let us know!

Top 10 NEW Survival Games of 2021

Survival video games are still going strong in 2021. Here's everything to look forward to on PC, PS5, Xbox Series X, Nintendo Switch, and beyond.

You Might Also Like

Leave a Reply

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