Actions

Work Header

How to Make iOS Text Messages on AO3

Chapter Text

dad

Dad there's a moth on the outside of the bathroom door can you get rid of it?

Pls hurry because I'm going to cry

Dad

Dad

Dad is dead. You're next. Love, Moth


HOW TO CODE IT

First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "Create Work Skin". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box we're going to start with the following:

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

This is basics of our phone "screen" so to say. Right now, there's coding that the message is put in the middle of your work, but if you don't want that, remove margin: auto; and your text messages will move to the left.

Next, if you want a header displaying the contact name (which is entirely up to you), put the following:

#workskin .header {
  min-width: 300px;
  background-color: #f6f6f6;
  border-bottom: 1px solid #b2b2b2;
  color: #000000;
  font-weight: bold;
  padding-bottom: .5em;
  padding-top: .5em;
  margin-left: -.5em;
  margin-right: -.5em;
  margin-bottom: -2em;
  text-align: center;
  text-transform: capitalize;
  display: table;
}

Notice it's min-width is the same as our phone's max-width. Make sure if you change the width of one, you change the width of the other.

Now for the actual messages themselves. First you need a separate body for those:

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

And then the actual messages themselves. There's the message that's been received (the gray ones):

#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;
}

As for sent messages, you can have the typical iMessages (the blue ones):

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

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

Or standard text messages (the green ones):

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

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

And that's your basic text message skin! (Other things you can add will be explained later on in this tutorial)

Hit "Submit" (or "Update" if adding to a previous work skin), and you've created the work skin for the iOS text messages. Now to implement it.

Go to your the work you want the text messages, and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", and how you want you want your text messages formatted will change what coding you use.

If you wanted something similar to the example we've already used, you would write the following in your Work Text:

<div class="phone">
<p class="messagebody">
<span class="header">contact</span><br><br>
<span class="breply">iOS reply</span><br><br>
<span class="text">Other person's reply</span><br><br>
<span class="greply">SMS reply</span><br><br>
</p></div>

And get something like the following:

contact

iOS reply

Other person's reply

SMS reply

Notice how we have <br><br> after every message. This isn't needed for the coding per se, but more so when the Creator's Style is turned off, your lines aren't jumbled on top of each other.

If you just want simple text messages with no header, you would first change two parts in your workskin, the .phone and the .messagebody:

/* Remove margin: auto; like we talked about earlier */
#workskin .phone {
  max-width: 300px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: table;
}

/*Add width:300px; because the text messages don't have a header to spread the screen out wide, if that makes sense. */
#workskin .messagebody {
  width: 300px;
  background-color: #FFFFFF;
  display: table;
  padding-left: .5em;
  padding-right: .5em;
}

And then in the Work Text, we put the following:

<div class="phone">
<p class="messagebody">
<span class="breply">iOS reply</span><br><br>
<span class="text">Other person's reply</span><br><br>
<span class="greply">SMS reply</span><br><br>
</p></div>

And get something like this:

iOS reply

Other person's reply

SMS reply


What do I do if the Creator's Style is hidden?

If you're not familiar with work skins, you might not know that their coding only applies to when the fic is on the AO3 site itself, and not when it's downloaded from the web onto an e-reader. Therefore, you might want a way to distinguish your text messages that will only show up when the style is unavailable.

First, add the following to you work skin:

#workskin .hide {
  display: none;
}

Then, if we use the previous example of just messages and no header, we can change the coding in our Work Text to the following:

<div class="phone"><p class="messagebody">
<span class="breply"><span class="hide"><b>Character A:</b></span>iOS reply</span><br><br>
<span class="text"><span class="hide"><b>Character B:</b></span>Other person's reply</span><br><br>
<span class="greply"><span class="hide"><b>Character A:</b></span>SMS reply</span><br><br>
</p></div>

Which looks like this with style on:

Character A: iOS reply

Character B: Other person's reply

Character A: SMS reply

But with style off, looks like this:

Character A: iOS reply

Character B: Other person's reply

Character A: SMS reply

You could even do it where the text message has narrative exposition that shows up only when the Creator's Style is hidden. For example, the text message at the very top of this tutorial looks like this with the style on:

She was terrified, and quickly sent a message to her dad.

"Dad there's a moth on the outside of the bathroom door can you get rid of it?" she typed.

A few seconds later she added, "Pls hurry because I'm going to cry"

She waited, but there was no response. "Dad" She tried again.

And again. "Dad"

Finally, her phone beeped in response. "Dad is dead. You're next. Love, Moth"

But with creator's style off, it looks like this:

She was terrified, and quickly sent a message to her dad.

"Dad there's a moth on the outside of the bathroom door can you get rid of it?" she typed.

A few seconds later she added, "Pls hurry because I'm going to cry"

She waited, but there was no response. "Dad" She tried again.

And again. "Dad"

Finally, her phone beeped in response. "Dad is dead. You're next. Love, Moth"

Which is done by having the following coding in our work text:
<div class="phone">
<p class="messagebody">
<span class="header"><span class="hide">She was terrified, and quickly sent a message to her</span> dad</span><span class="hide">.</span><br>
<br>
<span class="greply"><span class="hide">"</span>Dad there's a moth on the outside of the bathroom door can you get rid of it?</span><span class="hide">" she typed.</span><br>
<br>
<span class="greply"><span class="hide">A few seconds later she added, "</span>Pls hurry because I'm going to cry</span><span class="hide">"</span><br>
<br>
<span class="greply"><span class="hide">She waited, but there was no response. "</span>Dad</span><span class="hide">" She tried again.</span><br>
<br>
<span class="greply"><span class="hide">And again. "</span>Dad</span><span class="hide">"</span><br>
<br>
<span class="text"><span class="hide">Finally, her phone beeped in response. "</span>Dad is dead. You're next. Love, Moth</span><span class="hide">"</span><br>
<br>
</p></div>

If you notice, the word "dad" is capitalized when the style is on, but isn't when it's off. That's because in our work skin, under .header, we have text-transform: capitalize; which will automatically capitalize whatever you put as a contact name. If you don't want this feature, simply remove it from the workskin.

Can the characters text images?

Yep! First, you need to add the following coding to your workskin:

#workskin .image {
  float: right;
  margin: 0 0 0.5em;
  border-radius: 1em;
  width: 50%;
  min-height: 75%;
  clear: both;
  position: relative;
  background-image: url("YOUR IMAGE URL HERE");
  background-repeat: no-repeat;
  background-size: 100%;
  display: inline-block;
  padding-top: 50%;
}

What this will do is have the curved thumbnail look that images sent in text messages have without you actually having to curve the images corners yourself. This is created by having the image be the background of the span element. We can also have the span element linked so that readers can click the picture to see a bigger version of it. This is possible by placing the following text in our Work Text:

<div class="phone">
<p class="messagebody">
<a href="YOUR IMAGE URL HERE"><span class="image" title="Image Description: put a description of your image here"></span></a><br>
<br>
<span class="text">...You spend way too much time on the internet.</span><br>
<br>
</p></div>

And then we get the following:

Character A has sent an image!

Character B:...You spend way too much time on the internet.

Two things left to mention about this:
1) If you want the image to be on the received side instead of the sent, go into you work skin, and under .image, change it from float: right to float: left.

2) When Creator's Style is turned off, there will be no sign of the image at all. And sadly, we can't hide it with our usual method, because img src doesn't want to stay in the span element when we're implementing the display: none feature. All I've been able to come up with is using the hidden narrative exposition as demonstrated before, with something along the lines of "Character A has sent an image!"

EDIT: 1/22/17 If for some reason your image is longer than it is wider, you might have to add padding-bottom: 25%; to the image section to make sure the entire length of the picture shows.

EDIT: 5/11/17 Thanks to Leslie_Knope for figuring out how to do a time stamp! If we add the following to our skin:

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

Then in your work text you can have something like this:

<div class="phone"><p class="messagebody">
<span class="header">Mom</span><br /><br />
<span class="time"><b>Yesterday</b> 10:15 PM</span><br />
<span class="text">Can you call me as soon as you get this message?</span><br />
<span class="time"><b>Today</b> 9:05 AM</span><br />
<span class="text">Hello?</span><br />
<span class="text">Are you going to answer me?</span><br />
</p></div>

Which gives us the following:

Mom

Yesterday 10:15 PM
Can you call me as soon as you get this message?
Today 9:05 AM
Hello?
Are you going to answer me?

Laura_Kaye then pointed out that this can also be used for names in group messaging as well with a few tweaks. So if we add the following to our work skin:
#workskin .grouptext {
  color: #7B7C80;
  font-size: .75em;
  padding-bottom: .5em;
  padding-top: 0;
  margin-left: .5em;
  margin-bottom: -2.5em;
  text-align: left;
  display: table;
  clear: both;
}

Then in your work text you can have something like this:

<div class="phone">
<p class="messagebody">
<span class="header">4 People</span><br />
<br />
<span class="grouptext">Sarah</span><br />
<span class="text">So what's the plan for this weekend you guys?</span><br />
<span class="greply">I've got work</span><br />
<span class="grouptext">Tim</span><br />
<span class="text">Same here. And I think Ben does too.</span><br />
<span class="grouptext">Sarah</span><br />
<span class="text">Ugh, really?</span><br />
</p></div>

Which gives us the following:

4 People

Sarah
So what's the plan for this weekend you guys?
I've got work
Tim
Same here. And I think Ben does too.
Sarah
Ugh, really?

NOTES

- First off, I want to say a huge thanks to CodenameCarrot, who first created a work skin for text messages that was the basis for this one. (You can find a live example of it at the bottom of the page here and the coding for its work skin here) CodenameCarrot is also responsible for the beginning of the next chapter on emojis.

- This is modeled after iOS messages, but I do have plans on eventually modifying it to mimic Android, Skype, etc. Or if you can't wait for that, feel free to play around with it yourself! I'd love to see what you come up with. EDIT: Here's an awesome tutorial on how to do Android messaging!

- As always, if you have any questions or concerns, feel free to leave a comment here or send me an ask at to-skin-a-fic.tumblr.com

- If you're wondering about emojis, well, they get their own separate chapter... ;)