Make chat look like Diablo 2 chat

[XpurplenerpleX]

Working on a CSS project for my soon to be revived stream! Gonna need a little help and direction! There was a project that took place here several years ago, I will link the thread!

Make chat look like Diablo 2 chat

Hi. I need help editing the CSS to look like the old Diablo 2 battlenet lobby chat. [image] What I cant figure out is how to disable/hide all emote’s. Add “</>” in front and after username ( Message) And also is there a way to enable/disable “smooth fonts” or whatever it is called? //Best Regards. Crimson

I am trying to bring back that chat look! The Classic Diablo II LOD battlenet chat! i have found the font and was tinkering with CSS configurations, but couldnt seem to get it lined up and working anything near as clean as Crimson was able to achieve with help! anything is appreciated!

Thanks,
XpurplenerpleX
Fellow streamer and Long time Diablo II LOD Fan

[xgerhard]

Hiya! I think it would help if you could post your current CSS code. And ask more specific questions, like the other topic. Then it will be easier for someone to help you out.

[XpurplenerpleX]

Okay so its a little complicated to explain, and it way easier to show and explain as there are moving parts, but basically… I will provide a screenshot and we can use elements from that for reference.

I want chat to start where I typed the number 1 and as new messages are generated I want them to go underneath the previous message so at all times the bottom most message is the most recent. This is a problem due to something i am calling “off screen margin” if the messages start at the top and go down from there, the off screen margin is below leading to any message after " f" will be generated in the “off screen margin” in the HTML and CSS ther isnt a section to make changes to this unseen margin and the margin seems to extend something like 34 lines of text before the messages start to move upwards again.
I know this is a lot of disorganized information, but its the best way to explain whats happening. I have been able to change the direction the chat flows and where it starts, but what i havent been able to figure out is how to define the “borders” or “off screen margins” to be roughly 800 x 600 pixels

Here is my 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 class="messagediv" data-from="{from}" data-id="{messageId}">
    <span class="meta" style="color: rgb(203, 187, 162);">
      <span class="username">{from}</span>
    </span>

    <span class="message">
      {message}
    </span>
  </div>
</script>

And here is my CSS

* {
    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: 'Formal436 BT';
    font-weight: 700;
    font-size: {font_size};
    line-height: 1.5em;
    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: column-reverse
;
bottom: 0;
left: 0;
padding: 0 10px 10px;
width: 100%;
table-layout: fixed;
}
 
#log { 
/*position:absolute;*/
display:flex;
flex-direction:column;
}

#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 {
    vertical-align: top;
    /* display: table-cell; */ 
    padding-bottom: 0.1em;
}

#log .meta {
    width: 35%;
    text-align: right;
    padding-right: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#log .message {
    word-wrap: break-word;
    width: 65%;
}



.username {
    margin-left: 0.2em;
}
.username:before {
    content: '<'
}

.username:after {
    content: '>'
}

.emoticon {
    display: none;
}

.messagediv {
  
}

im sorry if i published this in an obscure and incoherent manner, i just have hit the wall on this one so hard, and google sources tend to lead me in circles, so i really need an HTML and CSS guru to show me the way. i have tinkered for hours on end leading me in circles of no progression LOL any help is appreciated guys!

XpurplenerpleX