Contents
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: https://imgur.com/a/glTtkvG
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(https://fonts.googleapis.com/css?family=Roboto:700);
- { 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; }
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; }
Source: reddit.com
Similar Guides
- Getting an Error when starting up the game.
- Dear diablo 2 community
- Dota 2 update for 9/17/20 (9/18/20 UTC)
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.