Fabled

contents

Chatlog Chaos?

See a live preview of this and tinker with it on your own via Codepen.

Back in the Before Times, posting occasional chatlogs (usually from AOL Instant Messenger) was a fixture of many blogs and teen websites. Nowadays, typically when people post chatlogs, it’s for vitriolic reasons - to dig up their ex’s tumultuous past, for example, or prove just who it was who stole the last Chipotle burrito from the office fridge. I know; I have seen the chaos this can cause!

Back then, though, chatlogs could serve all kinds of awesome purposes, some of them quite wholesome, actually. We’d share our favorite conversations that were meaningful to us, most frequently with both people consenting. Or, we’d share logs from fandom roleplay sessions involving our favorite characters, just in case our friends wanted to read about the time (our version of) Scully was forced to choose between saving Mulder and stopping the apocalypse.

This has not been a thing, really, on the newer sites. In some ways, this might be a good thing given the culture that has developed around screenshots of chatlogs. I, however, am here providing a (mediocre) snippet for displaying chatlogs on your site in HTML format, with CSS styling. This, of course, requires you to copy and paste the logs from whatever chat interface you’re using (or type them up if the conversation happened IRL).

CSS

body {
        font-family: monospace;
        background-color: #f8a4a1;
    }
    
    /* below styles the entire container of the chatlog */
    .chatter {
        width: 50%;
        margin: 2em auto; /* please change width of this div as you fancy, as well as top-bottom margin, but if you leave the left-right margins set to auto, it will remain centered wherever you place it, of course */
        padding: 1em;
        background-color: #ffdcdc;
        border-radius: 5px;
    }
    
    /* this class of subheading styles the title of the whole chatlog at the beginning of it */
    
    .log h2 {
        margin: 0 0 0.5em 0;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.3em;
        vertical-align: middle;
        color: #fff8f8;
        text-align: center;
        background-color: #ae5653;
        border-radius: 5px;
    }
    
    /* some formatting to provide a cute gap between each message - edit the size of it as you wish */
    .log {
        display: flex;
        flex-direction: column;
        gap: 0.4em;
    }
    
    /* this class styles an individual message, including the username */
    .them,
    .you {
        padding: 0.5em;
        vertical-align: middle;
        background-color: #fff8f8;
        border-radius: 5px;
    }
    /* the below class styles things said by other people */
    
    .them span {
        font-weight: bold;
        text-transform: uppercase;
        margin-right: 0.2em;
        color: #da7777;
    }
    
    /* the below class styles things said by you */
    .you span {
        font-weight: bold;
        text-transform: uppercase;
        color: #ae5653;
        margin-right: 0.2em;
    }
    
    /* this portion simply adds a colon after each username */
    .them span::after,
    .you span::after {
        content: ":";
        font-family: courier new;
    }
    
    /* notice that this does not compensate for links, because i am operating under the assumption that your chatlogs won't likely contain them. make sure the link color you're already using doesn't conflict with the background (etc) of the chatlog container */

HTML

<!-- these two divs are for formatting purposes -->
<div class="chatter">
    <div class="log">
    
    <h2>
    <!-- your title clearly goes in this section -->Fancy some tea...?
    </h2>
    
    <div class="them">
    <span>
    <!-- the username of the person you are talking to goes after the span tag -->Bengals1985
    </span>
    
    <!-- whatever your conversation partner says follows -->I can't believe jerry did <em>that</em>...
    </div>
    
    <div class="you">
    <span>
    <!-- your username goes here, following the span tag -->Lost D3mon
    </span>
    <!-- following this, write what you yourself said, haha -->She still hasn't told him she's pregnant yet, either!
    </div>
    
    <!-- this ends the example of two lines of chat, between two people. everything after this is just further examples of the same code with different content -->
    <div class="them">
    <span>Bengals1985</span>
    And he has no idea what she's planning next with Ryan...
    </div>
    
    <div class="you">
    <span>Lost D3mon</span>
    Do you think she knows about jerry and jenny?
    </div>
    
    <div class="them">
    <span>Bengals1985</span>
    I heard from that girl who runs the site with the purple gifs that she'll find out <strong>really</strong> soon though...
    </div>
    
    <div class="you">
    <span>Lost D3mon</span>
    I wonder how she'll react when she finds out the truth. Ryan totally played them all...
    </div>
    
    <div class="them">
    <span>Bengals1985</span>
    She's going to be heartbroken, no doubt about it. I hate spoilers.........
    </div>
    
    <div class="you">
    <span>Lost D3mon</span>
    lol this next episode better not mess up jerry's characterization even more.i wish the tv show was more like the book!
    </div>
    
    </div>
    </div>

I think this is a nice way to do things. It preserves the charm of sharing chatlogs, without the sheer drama of screenshots, because really, one could type anything here, and we all know that! It’s quite just for fun, and we’d know not to take it too seriously at that point. I also think it might be interesting to use it to transcribe conversations between characters, and actually have plans to do so myself in the future, since they won’t be quiet.

top