Chapter Text

how to code it?

It's actually quite simple! Since CodenameCarrot and La_Temperanze have made How to Make iOS Text Messages on AO3 and phantomdare1 has made the Android Text Messages version, I can say this one is easy to make. First, go to your dashboard and click "Skins". Choose "My Work Skin", then "Create Work Skin". But you may add this code to other skin that you have, of course!

If you make a new work skin, then write anything you want in the "Title" box, and start your "CSS" box with the base of the phone:

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

Next, you'll have to make the base of the message body:

#workskin .messagebody {
  background-image: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png");
  background-repeat: repeat-y;
  background-size: 100%;
  display: table;
}

That URL is the URL of WhatsApp's default background. Feel free to change it if you want to! Next, we're going to add contact name:

#workskin .header {
  min-width: 300px;
  background-color: #075E54;
  background-attachment: fixed;
  background-position: center;
  background-size: 100%;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 1.15em;
  padding-top: .5em;
  padding-bottom: 0.5em;
  margin-bottom: -2em;
  text-align: left;
  text-indent: 55px;
  text-transform: capitalize;
  display: table;
}

Since the font weight is bold, the contact name will automatically be bold. And, since the text transform is set to capitalize, then the contact name's first letter will be capitalized. You can erase this option if you want to.

Next, we'll add some status under the contact name. In WhatsApp, its contents are usually "online" or "typing...". The CSS code:

#workskin .status {
  min-width: 300px;
  background-color: #075E54;
  background-attachment: fixed;
  background-position: center;
  background-size: 100%;
  color: #FFFFFF;
  font-size: 0.75em;
  padding-top: 0.25em;
  padding-bottom: 0.75em;
  margin-bottom: -2em;
  text-align: left;
  text-indent: 55px;
  display: table;
}

Next, we'll add a picture for the contact. Since this is WhatsApp so profile picture is a must! The CSS code:

#workskin .avatar {
  content: "";
  width: 40px;
  height: 40px;
  margin: 0.5em;
  background-image: url("https://t3.ftcdn.net/jpg/00/64/67/80/240_F_64678017_zUpiZFjj04cnLri7oADnyMH0XBYyQghG.jpg");
  background-size: 100%;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
}

The URL is, again, the default profile picture WhatsApp's have. If you want to change it, simply change the URL in your CSS code with the image URL you want!

Next, we'll add the bubble chat! First, we'll add the bubble chat for the first person point of view:

#workskin .reply {
  float: right;
  color: #000000;
  margin: 0.4em 1em;
  border-radius: 0.5em 0 0.5em 0.5em;
  padding: 0.25em 15px 0.25em 1em;
  background: #E1FFC7;
  max-width: 75%;
  clear: both;
  position: relative;
}

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

Then, we'll add the bubble chat for the second person point of view:

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

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

You're done with the CSS! Next, go to your "Work Text" and write in the "HTML" instead of "Rich Text". For the example above, just type it like this:

<div class="phone">
<p class="messagebody">
<span class="avatar"></span>
<span class="header">Mom</span><br />
<span class="status">online</span><br />
<span class="reply">Mom</span><br />
<span class="text">Yes?</span><br />
<span class="reply">I'll be home late</span><br />
<span class="text">Oh</span><br />
<span class="reply">Don't make me dinner</span><br />
<span class="text">I already have</span><br />
<span class="reply">Give it to Hannah</span>
<span class="text">Ok</span><br />
</p></div>

And, TADA! You're finished!

So this is how you do the CSS to mimic WhatsApp Personal Chat in a simple way. Next, I'll show you how to make this kind of bubble chat:

Have fun doing the WhatsApp chat!

Chapter Text

spam messages

Since you have the basic chat code from the previous chapter, this one will be a lot easier. You just have to add this to the CSS box:

#workskin .text1 {
  float: left;
  color: #000000;
  margin: 0.4em 1em;
  border-radius: 0.5em;
  padding: 0.25em 15px 0.25em 1em;
  background: #FFFFFF;
  max-width: 75%;
  clear: both;
  position: relative;
}

#workskin .reply1 {
  float: right;
  color: #000000;
  margin: 0.4em 1em;
  border-radius: 0.5em;
  padding: 0.25em 15px 0.25em 1em;
  background: #E1FFC7;
  max-width: 75%;
  clear: both;
  position: relative;
}

Basically, this is the same with the text and reply code, but without the before part.

In "Work Text", you'll write these:

<div class="phone">
<p class="messagebody">
<span class="avatar"></span>
<span class="header">Mom</span><br />
<span class="status">online</span><br />
<span class="reply">Mom</span><br />
<span class="reply1">Where are you?</span><br />
<span class="reply1">I'm home</span><br />
<span class="reply1">But the door's locked?</span><br />
<span class="text">Sorry</span><br />
<span class="text1">Forgot to tell you that I'm going to the supermarket</span><br />
<span class="text1">The key's in the masterbox</span><br />
<span class="reply">Ok</span><br />
</p>
</div>

Aaand, you'll get exactly like this:

bubble chat + time +check mark

You must recognize that WhatsApp has date written on top of the chat, time on the right side of every bubble chat, and check mark on every bubble chat that we sent, right? Like this:

This is the most challenging coding I've ever made! But simply you just need to add this into your CSS box:

#workskin .time {
  max-width: 100px;
  background: #D4EAF4;
  background-size: 100px;
  color: #8B9295;
  font-size: .6em;
  font-weight: bold;
  padding: .5em .5em;
  margin-top: .5em;
  margin-bottom: .5em;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.5em;
  text-align: center;
  text-transform: uppercase;
  display: table;
}

#workskin .textclock {
  font-size: 0.75em;
  color: #B7B7B7;
  margin-left: 1em;
  text-align: right;
}

#workskin .read {
  font-size: 0.75em;
  color: #B7B7B7;
  margin-left: 1em;
  text-align: right;
  background-image: url("https://s19.postimg.cc/ynt9jgn43/whatsapp_read_check_mark.png");
  background-repeat: no-repeat;
  background-size: 1.5em;
  background-position: right top;
}

#workskin .delivered {
  font-size: 0.75em;
  color: #B7B7B7;
  margin-left: 1em;
  text-align: right;
  background-image: url("https://s19.postimg.cc/f5ym3ixw3/whatsapp_delivered_message_check_mark.png");
  background-repeat: no-repeat;
  background-size: 1.5em;
  background-position: right top;
}

#workskin .pending {
  font-size: 0.75em;
  color: #B7B7B7;
  margin-left: 1em;
  text-align: right;
  background-image: url("https://s19.postimg.cc/5y6dmpo83/pending_whatsapp_check_mark.png");
  background-repeat: no-repeat;
  background-size: 1.3em;
  background-position: right top;
}

The check mark is an image, so I add the URL by myself. If you have another way to make a check mark, please let me know!

I still put the check mark as the background image of the time, so after writing the time, you have to add seven spaces ( ) in order to get the proportional position of the check mark. But again, if you have another solution, please let me know!

So, after adding those code into your CSS box, write in your "Work Skin" like this:

<div class="phone">
<p class="messagebody"><span class="avatar"></span><span class="header">Claire</span><br />
<span class="status"> </span><br />
<span class="time">August 27, 2018</span><br />
<span class="reply">Are you still mad at me?<span class="read">19:34       </span></span><br />
<span class="reply1">Claire?<span class="read">20:03       </span></span><br />
<br /><br />
<span class="time">Yesterday</span><br />
<span class="text">Yes<span class="textclock">22:57</span></span><br />
<br /><br />
<span class="time">Today</span> <span class="reply">Damn<span class="delivered">08:11       </span></span><br />
<span class="reply1">Claire<span class="delivered">08:11       </span></span><br />
<span class="reply1">It's been two days<span class="pending">08:12       </span></span><br />
<span class="reply1">YOU'RE OFF NOW?!<span class="pending">08:12       </span></span></p></div>

And you'll get this!

Unfortunately, I can't get this check mark good when you type two or more lines. If you write only one line, it'll do ok, but if you write more than one, it'll become like this:

... while we know WhatsApp's not like that.

If you have any solution, please let me know! I'll be so glad if I can fix this thing!

That's all I can give to you! Thank you so much for reading my tutorial! Please give comments and suggestion so this skin can get better! XD

Happy writing!