Actions

Work Header

Facebook Messenger and Android SMS messages on AO3

Chapter Text

Before I get into anything else, a massive thank you to everyone who's shared their own guides to recreating social media posts and conversations on AO3. These formats are heavily based on the iOS skin by CodenameCarrot and La_Temperanza! Their guide for emojis should work with this, and it's a great place to start if you want to modify it yourself. I recommend using Liveweave if you're new to coding, it's what I used and it made it a lot easier.

This is my first time really playing around with CSS, so I would appreciate any advice on how to make the code better or add more features.

Missing features and things to fix that I couldn't figure out on my own or haven't done yet:

  • Facebook dark mode (coming soon!) Done!
  • Hiding certain lines (like names, timestamps) in group chats when work skin is disabled
  • Better flow for screen reader (some way to put hidden pauses/breaks?)
  • Replies
  • Icons/profile pictures and active icons
  • Read receipts
  • System messages (new person added, changed group name, etc.)
  • Deleted messages
  • Images, link previews, videos
  • Menu buttons (back arrow, call button, etc.)
  • More accurate line spacing
  • @ messages don't have proper highlighting
  • Easier way to edit colour schemes (ideally it would just be one paragraph of code, so you could easily swap it without having to touch the rest)

If you'd like to edit my code, you are welcome to do so with credit, no need to ask.

If you use my code in your fic, I'd also appreciate being credited.


To use either or both skins, all you need to do is create a new work skin (your profile -> Skins -> My Work Skins -> Create Work Skin) and paste in the CSS. When creating or editing your work, choose the work skin from the dropdown menu, and you're set up. They can both be used in the same work, and can even be used alongside the iOS ones, which is why I gave everything unique names ("fbheader" instead of just "header").

Whenever you want to insert a conversation into your work, paste the HTML block into the work text, and edit it with the text you want, adding more lines as needed.

See the next chapter for colour variants of both themes, including Facebook dark mode and Android light mode! :)

Facebook Messenger

A few notes for using this skin to its full potential:

  • For a single message from one person, use "fbtextsingle."
  • For the first message in a series from one person, use "fbtextfirst," followed by "fbtextmiddle" as many times as you need, and ending with "fbtextlast." This will round the corners correctly.
  • For the person sending the messages, it's "fbreply," otherwise identical.
  • Omit "fbgrouptext" if it's a conversation between two people, and for the person sending messages.
  • Use only first names in "fbgrouptext."
  • You can use either first or full names in @ messages (see preview code for how to do those). Note that the code is slightly different depending on if it's a text (incoming) or reply (outgoing).
  • Timestamps are written in the format "FEB. 26 AT 14:53" for things more than a week old, "MON. AT 09:31" for things more than a day old, or just the time otherwise. Mine is in 24hr clock but I honestly don't know if that's the default or if I had to choose that.
  • From my estimate, there's a new timestamp after a break of 15 minutes or more in conversation.
  • You can use "fbhide" in the same way as "hide" in the iOS version, to provide alternate text and formatting when readers disable the work skin. It's a little messy if you have a group chat, because I haven't figured out how to hide "fbgrouptext" yet.
  • Links show up as underlined text.
  • AO3 likes to delete "span" and "mark" tags, so make sure you save the code elsewhere if you're editing your fic a lot. That goes for all code, really, because it likes to mess up your HTML tags and add unnecessary ones.

Facebook Messenger - Light Mode Live Preview

Group Chat Name

22:46
This is a single message from the POV character.
Character B
This is a single message from someone in the group chat.
This is a
two-part message
Character C
This is a
three-part message
from someone else
Where are you @Character B?
Character B
I'm at @Character C's house

Facebook Messenger - Light Mode HTML

  
 <div class="fbmessenger">
    <p class="fbmessagebody">
        <span class="fbheader">Group Chat Name</span><br /><br />
        <span class="fbtime">22:46</span><br />
        <span class="fbreplysingle">This is a single message from the POV character.</span><br />
        <span class="fbgrouptext">Character B</span><br />
        <span class="fbtextsingle">This is a single message from someone in the group chat.</span><br />
        <span class="fbreplyfirst">This is a</span><br />
        <span class="fbreplylast">two-part message</span><br />
        <span class="fbgrouptext">Character C</span><br />
        <span class="fbtextfirst">This is a</span><br />
        <span class="fbtextmiddle">three-part message</span><br />
        <span class="fbtextlast">from someone else</span><br />
        <span class="fbreplysingle">Where are you <mark>@Character B</mark>?</span><br />
        <span class="fbgrouptext">Character B</span><br />
        <span class="fbtextsingle">I'm at <span>@Character C</span>'s house</span><br />
    </p>
</div>
  

Facebook Messenger - Light Mode CSS

  #workskin .fbmessenger {
  max-width: 300px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: table;
  margin: auto;
}

#workskin .fbheader {
  min-width: 300px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E7E7E7;
  color: #000000;
  font-weight: bold;
  padding-left: 1em;
  padding-bottom: 1em;
  padding-top: 1em;
  margin-left: -.5em;
  margin-right: -.5em;
  margin-bottom: -2em;
  text-align: left;
  display: table;
}

#workskin .fbmessagebody {
  background-color: #FFFFFF;
  display: table;
  padding-left: .5em;
  padding-right: .5em;
}

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

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

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

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

#workskin .fbtextsingle span {
  color: #5540FF;
}

#workskin .fbtextfirst span {
  color: #5540FF;
}

#workskin .fbtextmiddle span {
  color: #5540FF;
}

#workskin .fbtextlast span {
  color: #5540FF;
}

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

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

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

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

#workskin .fbreplysingle mark {
  background-color: #776FE9;
  color: #FFFFFF;
}

#workskin .fbreplyfirst mark {
  background-color: #776FE9;
  color: #FFFFFF;
}

#workskin .fbreplymiddle mark {
  background-color: #776FE9;
  color: #FFFFFF;
}

#workskin .fbreplylast mark {
  background-color: #776FE9;
  color: #FFFFFF;
}

#workskin .fbhide {
  display: none;
}

#workskin .fbtime {
  min-width: 295px;
  color: #7B7C80;
  font-size: .75em;
  padding-bottom: .5em;
  padding-top: .5em;
  margin-left: -.5em;
  margin-right: -.5em;
  margin-bottom: -.5em;
  text-align: center;
  text-transform: uppercase;
  display: table;
}

#workskin .fbgrouptext {
  color: #AEAEAE;
  font-size: .75em;
  padding-bottom: 0.5em;
  padding-top: 0;
  margin-left: 1em;
  margin-bottom: -2.5em;
  text-align: left;
  display: table;
  clear: both;
}

Android SMS

This one is a little more lightweight than the Facebook one. I don't actually use SMS much at all, so I don't know what all the features look like! This is based off OxygenOS 9.0.6 in dark theme which is what my phone uses.

A few notes for using this skin to its full potential:

  • Unlike Messenger, which has three message shapes, this one only has two, called "smstextfirst" (with rounded corners) and "smstextlast" (with one square corner).
  • For a single message from one person, use "smstextlast."
  • For the person sending the messages, it's "smsreply," otherwise identical.
  • For a string of messages, use "smstextfirst" for every message except the most recent one, which uses "smstextlast."
  • Timestamps are written in the format "Feb. 26, 14:53" for things more than a week old, "Fri. 09:31" for things more than a day old, or just the time otherwise. I assume it displays in 12hr clock if that's what your phone is set to.
  • Similarly to Facebook, it seems to put a new timestamp after 15-20 minute gaps in a conversation.
  • You can use "smshide" in the same way as "hide" in the iOS version, to provide alternate text and formatting when readers disable the work skin. This one should work fine, since it's a two-way conversation. Try it out by disabling the work skin at the top of the page!

Android SMS - Dark Mode Live Preview

Contact

2:12
Character A: This is a single message from the POV character.
Character B: This is a single message from the contact.
Character A: This is a
Character A: two-part message
Character B: This is a
Character B: three-part
Character B: message

Android SMS - Dark Mode HTML

  <div class="sms">
    <p class="smsmessagebody">
        <span class="smsheader">Contact</span><br /><br />
        <span class="smstime">2:12</span><br />
        <span class="smsreplylast"><span class="smshide">Character A: </span>This is a single message from the POV character.</span><br />
        <span class="smstextlast"><span class="smshide">Character B: </span>This is a single message from the contact.</span><br />
        <span class="smsreplyfirst"><span class="smshide">Character A: </span>This is a</span><br />
        <span class="smsreplylast"><span class="smshide">Character A: </span>two-part message</span><br />
        <span class="smstextfirst"><span class="smshide">Character B: </span>This is a</span><br />
        <span class="smstextfirst"><span class="smshide">Character B: </span>three-part</span><br />
        <span class="smstextlast"><span class="smshide">Character B: </span>message</span><br />
    </p>
</div>

Android SMS - Dark Mode CSS

  #workskin .sms {
  max-width: 300px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: table;
  margin: auto;
}

#workskin .smsheader {
  min-width: 300px;
  background-color: #000000;
  border-bottom: 1px solid #212121;
  color: #FFFFFF;
  font-weight: bold;
  padding-left: 1em;
  padding-bottom: 1em;
  padding-top: 1em;
  margin-left: -.5em;
  margin-right: -.5em;
  margin-bottom: -2em;
  text-align: left;
  display: table;
}

#workskin .smsmessagebody {
  background-color: #000000;
  display: table;
  padding-left: .5em;
  padding-right: .5em;
}

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

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

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

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

#workskin .smshide {
  display: none;
}

#workskin .smstime {
  min-width: 295px;
  color: #7B7C80;
  font-size: .75em;
  padding-top: .5em;
  margin-left: -.5em;
  margin-right: -.5em;
  margin-bottom: -.5em;
  text-align: center;
  text-transform: capitalize;
  display: table;
}