Chapter Text

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:

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:

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:

But with style off, looks like this:

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:

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: 295px;
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:

EDIT: 8/30/17 Ashtyn asked if there's a way we could have it so that time stamps only show when the creator's style is turned on but hidden when the style is off. Honestly I don't how I didn't think of this before, but long story short, yes there is with the use of pseudoclasses. However, you're going to need to create one for every separate date and time and put it in your workskin. To clarify what I mean, if we use the example above, we need to add the following to our workskin:

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

#workskin .ts1::before {
  content: 'Yesterday';
  font-weight: bold;
}

#workskin .ts1::after {
  content: '10:15 PM';
}

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

#workskin .ts2::before {
  content: 'Today ';
  font-weight: bold;
}

#workskin .ts2::after {
  content: '9:05 AM';
}

HOWEVER, if you do this as is, it's going to create an awkward space between the contact name (Mom) and the rest of the text, so let's not only change the contact name into a pseudoclass (and hide it so it only shows up when the style is turned off by each text), but adjust our header as well. (For this, you'll have to create a separate header section for each contact, i.e. .header2, .header3, .header4, etc.)

#workskin .header2 {
  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: 1em;
  text-align: center;
  text-transform: capitalize;
  display: table;
}

#workskin .header2::before {
  content: 'Mom';
}

This has different padding aspects than the original header section, so make sure you use this one if you are using this method! Then in our work text we would put the following (notice how we don't use <br> after any of our pseudoclasses; this makes it so we don't have weird spacing when our style is turned off):

<div class="phone">

<p class="messagebody">

<span class="header2"></span>

<span class="ts1"> </span>

<span class="hide"><b>Mom: </b></span><span class="text">Can you call me as soon as you get this message?</span><br >

<span class="ts2"></span>

<span class="hide"><b>Mom: </b></span><span class="text">Hello?</span><br >

<span class="hide"><b>Mom: </b></span><span class="text">Are you going to answer me?</span><br >

</p></div>

Which gives us something that looks the same as our previous example, but now when the creator's style is turned off, the timestamps disappear:

EDIT 1/3/18 Irrealis pointed out a fantastic way to have the three dots associated with someone typing show up. First, you need to add the following to your current workskin:

#workskin .typing-indicator {
  background-color: #e6e7ed;
  width: auto;
  border-radius: 1em;
  padding: .5em 1em;
  display: table;
  margin: 0 0 .5em;
  position: relative;
  overflow: hidden;
  text-align: left;
  clear: both;
}

#workskin .typing-indicator::before,
#workskin .typing-indicator::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -2px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #e6e7ed;
}

#workskin .typing-indicator::after {
  height: 6px;
  width: 6px;
  left: -6px;
  bottom: -6px;
}

#workskin .typing-indicator span {
  height: 15px;
  width: 15px;
  float: left;
  margin: 0 1px;
  background-color: #9E9EA1;
  display: block;
  border-radius: 50%;
  opacity: 0.4;
}

#workskin .typing-indicator span {
  height: .65em;
  width: .65em;
  float: left;
  margin: .425em 0 .425em .25em;
  margin-left: 0.25em;
  background-color: #9e9ea1;
  display: inline-block;
  border-radius: 50%;
  opacity: .5;
}

#workskin .typing-indicator span:first-child {
  margin-left: 0;
}

#workskin .typing-indicator span:nth-child(1) {
  opacity: .85;
}

#workskin .typing-indicator span:nth-child(2) {
  opacity: .65;
}

Then in our work text, using the example above, we would add the following coding:

<span class="hide">Mom is typing...</span><span class="typing-indicator"><span></span><span></span><span></span></span>

(Make sure you keep all those extra span tags at the end! That's your dots! )

You can see it in use below!

Laura_Kaye then pointed out that the timestamp 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:

We can then use this code and tweak it to make read receipts. Add the following to your workskin:

#workskin .readreceipt {
  color: #7B7C80;
  font-size: .75em;
  float: right;
  position: relative;
  clear: both;
  margin: -.75em -1.25em 0.5em 0;
  padding: 0 1em 0.5em;
}

And then to your worktext, if we want something like this:

Our code will be this:

<div class="phone">
<p class="messagebody">
<span class="breply">Can you at least read this text so I know you're still alive?</span><br /><br />
<span class="readreceipt"><b>Read</b> 8:48 PM</span>
</p></div>

If you want it to be visible only when the workskin is displayed (and hidden any other time), then once we have to utilize pseudoclasses by adding the following to our workskin:

#workskin .rr1 {
  color: #7B7C80;
  font-size: .75em;
  float: right;
  position: relative;
  clear: both;
  margin: -.75em -1.25em 0.5em 0;
  padding: 0 1em 0.5em;
}

#workskin .rr1::before {
  content: 'Read ';
  font-weight: bold;
}

#workskin .rr1::after {
  content: '8:48 PM';
}

Just like we used the pseudoclasses for the timestamp, it's the same idea here for our worktext:

<div class="phone">
<p class="messagebody">
<span class="breply">Can you at least read this text so I know you're still alive?</span><br /> <br />
<span class="rr1"></span>
</p></div>

Remember, for different read receipts, you have to make a separate pseudoclass for each one, i.e. rr1, rr2, rr3, etc.

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!

- Thank you to everyone who pointed out errors or found ways to add more features to this! I appreciate everyone who comments and enjoys this! :D <3 - 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... ;)