Archive of Our Own

Direct message

Group chat

Instructions

In your AO3 profile, go to 'Skins', then 'My Work Skins'. Create a new work skin if you aren't already using one for your work. In the CSS box, copy and paste the following:

      
#workskin .chatbox {
  width: 600px;
  font-family: "Bahnschrift", sans-serif;
  font-weight: bold;
  margin: auto;
  background-color: #D4D4D6;
  border-radius: 0px 20px 0px 0px;
  display: table;
}

#workskin .header {
  width: 600px;
  border-bottom: 2px solid #B8B8B8;
  text-align: left;
  border-radius: 0px 20px 0px 0px;
  color: #000000;
  padding-bottom: 5px;
  padding-left: 20px;
  padding-right: 0.5em;
  font-size: 18px;
  display: table;
}

#workskin .messagebody {
  display: table;
  padding-bottom: 1em;
}

#workskin .status {
  color: #707070;
  font-size: 14px;
}

#workskin .textname {
  color: #6B6B6B;
  float: left;
}

#workskin .textbox {
  float: left;
  margin: 0 0 0.5em;
  position: relative;
  max-width: 75%;
  padding: 0.5em;
}

#workskin .text {
  float: left;
  color: #000000;
  padding: 0.65em;
  border-radius: 0 1em 1em 1em;
  background: #EBEBEB;
}

#workskin .icon {
  max-width: 50px;
  float: left;
  border-radius: 50px;
  position: relative;
  margin-left: 20px;
  margin-right: 5px;
  margin-top: 15px;
  clear: both;
}

#workskin .replybox {
  float: right;
  margin: 0 0 0.5em;
  position: relative;
  max-width: 75%;
  padding: 0.5em;
}

#workskin .reply {
  color: #000000;
  margin: 0 0 0 0;
  float: right;
  border-radius: 1em 0 1em 1em;
  padding: 0.65em;
  background: #D4BA8B;
}

#workskin .replyname {
  color: #6B6B6B;
  float: right;
}

#workskin .replyicon {
  max-width: 50px;
  float: right;
  clear: both;
  border-radius: 50%;
  position: relative;
  margin-left: 5px;
  margin-right: 20px;
  margin-top: 15px;
}

#workskin .textimg {
  width: 30%;
}

#workskin .replyimg {
  width: 30%;
  float: right;
}
      
    

The code for the direct message looks like this:

<div class="chatbox">

<p class="messagebody">
<span class="header">Dan Heng<br />
<span class="status">For anything related to the data bank, come find me.</span></span>

<img class="icon" src="https://i.ibb.co/d5tXBhK/floydeel.jpg" />
<span class="textbox">
<span class="textname">Dan Heng</span><br />
<span class="text">Found an old Express communication log in the data bank, and one of the categories is Dad Jokes.</span></span>

<img class="replyicon" src="https://i.ibb.co/YTM1VZJ/Mostro-Lounge-icon.png" />
<span class="replybox">
<span class="replyname">Stelle</span><br />
<span class="reply">But why</span></span><br />
</p></div>

And the code for the group chat looks like this:

<div class="chatbox">

<p class="messagebody">
<span class="header">The Astral Express Family</span>

<img class="replyicon" src="https://i.ibb.co/YTM1VZJ/Mostro-Lounge-icon.png" />
<span class="replybox">
<span class="replyname">Stelle</span><br />
<span class="reply">Found a strange item...</span></span>

<img class="icon" src="https://i.ibb.co/d5tXBhK/floydeel.jpg" />
<span class="textbox">


<span class="textname">Dan Heng</span><br />
<span class="text">Relic.</span></span><br />

<img class="icon" src="https://i.ibb.co/fQ4sGb7/jadeshroom.png" />
<span class="textbox">
<span class="textname">March 7th</span><br />
<span class="text">Relic</span></span><br />

<img class="icon" src="https://i.ibb.co/fQ4sGb7/jadeshroom.png" />
<span class="textbox">
<span class="textname">March 7th</span><br />
<img class="textimg" src="https://play-lh.googleusercontent.com/1XS6XlOPJm2mXgbIA-hwnxU2opJF2ZAub8ALAVIudWipx85fS7_KcOT6nFcBHILLQho" /></span><br />

<img class="icon" src="https://i.ibb.co/M1xFWTq/octahat.png" />
<span class="textbox">
<span class="textname">Himeko</span><br />
<span class="text">Relics</span></span><br />

<img class="icon" src="hhttps://i.ibb.co/kmtG44w/starrogue.png" />
<span class="textbox">
<span class="textname">Welt</span><br />
<span class="text">It's a Relic.</span></span><br />
</p></div>

<imgclass="replyicon" src="https://i.ibb.co/YTM1VZJ/Mostro-Lounge-icon.png" />
<span class="replybox">
<span class="replyname">Stelle</span><br />
<img class="replyimg" src="https://upload-os-bbs.hoyolab.com/upload/2023/05/07/19225684/5d0d52f4a0ee30f65bc8eb66af85944f_436016556669249473.png" /></span><br />

Essentially, every chat box will be in a ''chatbox'' div, which controls the font and makes it centralised.

Right at the top of the ''messagebody'' element is the ''header'' element, which contains the name of the chat and optionally, the ''status''/bio of the person.

After that, every message is wrapped in a ''textbox'' (other people) or ''replybox'' (you). This might not be the most efficient method, but I was unable to come up with another way that would allow each person's icon to be aligned with the name and text.

The ''textimg'' image class should work for images sent by 'you' as well.

I am using images that I've already cropped for my fics here; You'll have to upload and link your own. Do note that the template will become strange if the images are not a square.

This format doesn't account for people using screen readers or turning off the creator's style, but you could probably use something similar to the reader and hide classes here.

It may not display that well on mobile.