Chapter Text

how to code it?

Hello! Recently I've made How to Make WhatsApp Chat on AO3 on this account as well, so I can say that this one has no significant difference with it. The only differences are:

1. No timestamp.
2. It has a solid background with sky blue color (not a picture).
3. It has white bubble for first person, and green bubble for second person.
4. No display picture.
5. No status.

Those differences actually make this skin a lot simpler than the WhatsApp skin.

Actually, this skin is also different from the original LINE Chat. The differences are:

1. No display picture at all.
2. No "read" receipt.
3. No timestamp.

I intentionally make this skin a lot simpler than the original one.

Okay! Moving on to the skin code! 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: Roboto;
  display: table;
  margin: auto;
}

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

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

Next, we're going to add contact name:

#workskin .header {
  min-width: 300px;
  background-color: #464E66;
  border-bottom: 1px solid #464E66;
  color: #FFFFFF;
  font-size: 1.1em;
  padding-bottom: .5em;
  padding-top: .5em;
  margin-left: -.4em;
  margin-right: -.4em;
  margin-bottom: -2em;
  text-align: center;
  text-transform: capitalize;
  display: table;
}

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 the bubble chat! First, we'll add the bubble chat for the first person point of view:

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

#workskin .breply::after {
  content: "";
  position: absolute;
  right: -0.25em;
  top: -0.75em;
  width: 1em;
  height: 1em;
  border-bottom: 0.5em solid #B2ED8B;
  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 0 0.5em;
  border-radius: 1.5em;
  padding: 0.5em 1em;
  background: #FFFFFF;
  max-width: 75%;
  clear: both;
  position: relative;
}

#workskin .text::after {
  content: "";
  position: absolute;
  left: -.25em;
  top: -.75em;
  width: 1em;
  height: 1em;
  border-bottom: 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="header">This is header</span><br /><br />
<span class="breply">This is first person's text.</span><br />
<span class="text">This is second person's text.</span>
</p>
</div>

Aaand ... it's done!