HOW TO CODE IT

This is relatively simple to implement - at least compared to the last work skin I made - but still kinda tedious to fill out. If you like the way the example looks, you can just throw the CSS into a work skin and leave it alone, since most of what's getting edited is in the HTML. If you do want to edit the CSS, I wouldn't change much more than the colors unless you really know what you're doing. With that said, let's goooooooo~

You'll need to go to "My Work Skins," found by clicking on "Skins" on the right side of your profile/dashboard.

From there, you'll need to either click "Create Work Skin" to create a fully new skin or add the code to an existing work skin, since you cannot use more than one skin on a work.

Name your new skin whatever you'd like - just make sure it's something you'll remember! - and paste this code into the CSS box. For an existing skin, add this code to what's already there.

#workskin .container {
  max-width: 350px;
  margin: auto;
  margin-bottom: 20px;
  padding: 0;
  background: #FFFFFF;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  font-family: Futura,Helvetica,Arial,sans-serif;
  border: 1px solid #ededed;
  border-radius: 25px;
}

#workskin .header {
  max-height: 70px;
  margin-top: 0px;
  padding: 2px 5px 2px 15px;
  color: #434343;
  background: #f5f5f5;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  position: relative;
  font-family: Futura,Helvetica,Arial,sans-serif;
  border-bottom: 1px solid #ededed;
  border-radius: 25px 25px 0px 0px;
}

#workskin .headerimg {
  border-radius: 50%;
  width: 40px;
}

#workskin .chat-box {
  margin: auto;
  display: block;
  float: none;
  padding: 1em 1em 1em 1em;
  font-size: small;
  color: #000000;
  overflow: auto;
  overflow-y: scroll;
  max-height: 500px;
}

#workskin .text {
  float: left;
  color: #000000;
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0.5em 1em;
  background: #e5e5ea;
  max-width: 75%;
  clear: both;
  position: relative;
}

#workskin .text::after {
  content: "";
  position: absolute;
  left: -.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-right: 0.5em solid #e5e5ea;
  border-bottom-right-radius: 1em 0.5em;
}

#workskin .reply {
  float: right;
  color: #FFFFFF;
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0.5em 1em;
  background: #1e319a;
  max-width: 75%;
  clear: both;
  position: relative;
}

#workskin .reply::after {
  content: "";
  position: absolute;
  right: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-left: 0.5em solid #1e319a;
  border-bottom-left-radius: 1em 0.5em;
}

#workskin .hide {
  display: none;
}

#workskin .footer .footer-message {
  content: "iMessage";
  float: right;
  margin-right: 2px;
  margin-top: 2px;
  width: 250px;
  padding: 5px;
  color: #cfcfc6;
  border-radius: 20px 20px 20px 20px;
  border: 1px solid #c5c5c6;
  background: #fff;
  max-height: 20px;
  font-size: 12px;
}

#workskin .footer .footer-circle {
  content: "+";
  float: left;
  margin-left: 2px;
  padding: 5px;
  width: 20px;
  height: 20px;
  color: #7e7f85;
  background: #e8e9eb;
  border-radius: 20px 20px 20px 20px;
  border: 1px solid #e8e9eb;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
}

#workskin .footer .footer-message. {
  display: inline-block;
}

#workskin .footer .footer-circle {
  display: inline-block;
}

#workskin .footer {
  background: #fff;
  max-height: 20px;
  margin: 5px;
  color: #c5c5c6;
  overflow: hidden;
  display: block;
  float: none;
  border-radius: 0px 0px 25px 25px;
  padding: 0px 1em 1em 1em;
}

#workskin .chat-box::-webkit-scrollbar {
  width: 4px;
}

#workskin .chat-box::-webkit-scrollbar-track {
  background: #FFFFFF;
}

#workskin .chat-box::-webkit-scrollbar-thumb {
  background: #DCDCE2;
  border-radius: 4px;
}

#workskin .chat-box::-webkit-scrollbar-thumb:hover {
  background: #DCDCE2;
}

Hit "Submit" or "Update" to save it. Next up, we're gonna implement it on a work.

Go to the work you'd like to use this on - or I suppose create a new work if that's what step you're on - and scroll down until you find the "Associations" section.

The last option is "Select Work Skin" and you'll want to choose your newly created or modified skin. Otherwise, you won't be able to take advantage of any of the CSS that makes this work.

Now, let's get into actually implementing this text conversation. This all goes in your work text, wherever you'd like your characters to message each other.

<div class="container">
<div class="header">

<p><img class="headerimg" src="CONTACT IMAGE URL HERE" /><br />
Contact Name</p></div>
<div class="chat-box">

<p class="reply"><span class="hide"><strong>Sender:</strong></span> sender's message</p>

<p class="reply"><span class="hide"><strong>Sender:</strong></span> sender's message</p>

<p class="text"><span class="hide"><strong>Recipient:</strong></span> other person's reply</p>

<p class="text"><span class="hide"><strong>Recipient:</strong></span> other person's reply</p>

<p class="reply"><span class="hide"><strong>Sender:</strong></span> sender's message</p>

<p class="text"><span class="hide"><strong>Recipient:</strong></span> other person's reply</p></div>

<p class="footer"><span class="footer-circle">+</span> <span class="footer-message">   Message</span></p>
</div>

This looks like a lot of code and not a lot of text, but it's actually pretty simple. The contact image will resize + become circular, but I do recommend using a square image or the dimensions could get messed up. The conversation is composed of back and forth messages using a couple basic classes, which dictate what they look like as well as a showing the characcters' names if the reader has chosen to hide custom styles. The bottom line creates a footer that looks like a reply box; don't change it or its parts may not line up properly.

Messages that have been received (the gray text) use:

<p class="text"><span class="hide"><strong>Recipient:</strong></span> other person's reply</p>

And messages being sent (the dark blue text) use:

<p class="reply"><span class="hide"><strong>Sender:</strong></span> sender's message</p>

Just fill in the characters' names and their messages; other than that, nothing should have to be changed. Also, make sure to keep the conversation between <div class="chat-box"> and <p class="footer"> & you'll be good to go!

I realize I didn't go into all the details of the CSS, but that's mainly because all the parts you have to change are in the HTML. If you have any questions about specific parts of the CSS, though, I'd be happy to answer them! Just drop a comment with whatever question(s) you've got- or if you implemented it anywhere~