Actions

Work Header

Social Media Work Skin Template: Whatsapp

Work Text:

Next, there's an WhatsApp chat. Sent message: What is this?

Received message: A tutorial for simulating whatsapp chats on AO3!

Like this or many other ways :D

Whatsapp chat end.

  • INDEX

1. WHAT ARE WORK SKINS?

2. SCREEN READER FRIENDLY

3. WHATSAPP

3.1. Code

3.2. Messages

3.2.1. Time stamp and read check

3.2.2. Sending images

3.2.3. Date stamp, adding or removing a contact, etc

3.2.4. Group chat

3.3. Chat with a header

3.4. Chat with a header, wallpaper and scroll

3.4.1. About the typing bar

3.5. Dark mode

4. TWITTER


1. WHAT ARE WORK SKINS?

In a very superficial manner, work skins are a tool that allows you to personalize the formatting of your story.

To create a work skin, you need to go to your dashboard, click on “skins”, then “my work skins” and “create work skin” (or edit, in case you already have one). When it’s time to post your fic, you just have to select your work skin and type your fic in the HTML text editor.

This is based on the works linked as inspiration, I just tweaked them to my taste and added some stuff. I don’t know the first thing about CSS and coding, so there’s probably a lot of stuff that could’ve been made in a simpler, more effective way… Anyway, this is good enough for my personal purposes, but I welcome suggestions!

Index


2. SCREEN READER FRIENDLY

My main worry was finding a way to make this formatting screen reader friendly. I tested it and apparently it seems to be working fine in the following ways: a) hiding the creator’s style and using a screen reader to read directly from the browser. or b) downloading the fic and reading through reading apps.

In both cases, the visual formatting is lost.

Basically, I’m working with hidden text that is only read by the screen reader. To use it, you need to copy and paste the following code on your work skin.

Please, notice that this code has nothing to do with the whatsapp one (both work separately!) so if you, for example, want only the hidden text to describe images on your fic, you can use it alone.

#workskin .reader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Later, to add the hidden text in your fic, in the HTML text editor you’ll write the following:

<span class="reader">Here goes the hidden text, only read by the screen reader</span>

It’s important to notice that the screen reader will read all the elements in the order you put them in the HTML text editor, and not how they appear visually in the fic.

Index


3. WHATSAPP

3.1. Code

Now I’ll give you the CSS code for the whatsapp skin, pointing out what each part does and where you can or have to edit. You must copy each part and paste it on the skin you’re creating.

a) PHONE

This sets the size of the screen your messages will appear.

#workskin .wpp-phone {
  max-width: 340px;
  min-width: 340px;
  float: center;
  margin: 0 auto;
  display: table;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

b) ICON

This sets the size of the profile’s icon. But the image itself you’ll link in the fic text, and not here.

#workskin .wpp-icon {
  width: 40px;
  border-radius: 50%;
  float: left;
  margin-top: -13px;
  margin-left: 10px;
  z-index: 1;
}

c) HEADER

This is where the contact (or group) name is shown. There are two parts, one is the light theme and the other is the dark theme. When writing the fic you’ll decide which use.

Light theme:

#workskin .wpp-headerlight {
  background-image: url("https://i.ibb.co/dBqCfX7/1620253773333.png");
  background-repeat: repeat-y;
  background-size: 100%;
  width: auto;
  height: 60px;
  padding-left: 15px;
  padding-bottom: 0px;
}

Dark theme:

#workskin .wpp-headerdark {
  background-image: url("https://i.ibb.co/YBXYwSh/1620254493929.png");
  background-repeat: repeat-y;
  background-size: 100%;
  width: auto;
  height: 60px;
  padding-left: 15px;
  padding-bottom: 0px;
}

Header’s text (the same in both themes):

#workskin .wpp-contact {
  color: #FFFFFF;
  font-weight: bold;
  font-size: 1.15em;
  padding-left: 10px;
  top: -33px;
  position: relative;
  text-align: left;
  text-indent: 55px;
  text-transform: capitalize;
}

d) BACKGROUND IMAGE + SCROLL

This is the wallpaper of the phone owner’s whatsapp. In this case, YOU HAVE TO PUT THE IMAGE DIRECTLY IN THE SKIN, not in the fic.

This means that if you want to show chats on different cell phones, and thus want each chat to have a different wallpaper, you have to copy and paste this part of the code more than once in your skin, changing the name and image link.

For example, in the same skin we could have three different wallpapers, under the names “bgwuxian”, “bgwangji1” and “bgwangji2”, each one of them with a different image and used in different moments during the fic.

I’ll leave here two options with the original whatsapp wallpaper, one in the light theme and the other in the dark theme.

#workskin .wpp-bglight {
  background-image: url("https://i.ibb.co/YjT1qGH/1620176370792.jpg");
  background-repeat: repeat-y;
  background-size: 100%;
  padding: 10px;
  padding-top: 0px;
  overflow: auto;
  max-height: 530px;
  max-width: 340px;
}
#workskin .wpp-bgdark { background-image: url("https://i.ibb.co/7ksHgZs/1620176474989.jpg"); background-repeat: repeat-y; background-size: 100%; padding: 10px; padding-top: 0px; overflow: auto; height: 530px; max-width: 340px; }

This next part is about the scroll bar:

#workskin ::-webkit-scrollbar {
  width: 10px;
}

#workskin ::-webkit-scrollbar-track {
  background: none;
}

#workskin ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.5);
  border-radius: 10px;
}

#workskin ::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.7);
  border-radius: 10px;
}

e) TYPING BAR

Ok, here things get complicated haha.

Notice that you can make whatsapp chats without this part, this is purely aesthetic.

So, I couldn’t make it work any other way. To make this work, you have to:

1) Set your wallpaper picture to this size: 680 x 1180 px;

2) Cut it in two parts (upper part as 680 x 1080 px and bottom as 680 x 100 px);

3) On the bottom picture, you’ll paste this image (for light theme: https://i.ibb.co/xHYD0LM/brancc.png; for dark theme: https://i.ibb.co/NjVdPrr/1engl.png);

4) Upload these two pics (both the upper part of the wallpaper, and the bottom part with the typing bar pasted upon) and paste the links on your work skin, on the respective spaces.

Remember that this works exactly like the background image, and, since you put it in the skin, and not in the fic text, you have to copy and paste this code as many times as you need for using different pictures.

For example, if we follow the previous example, we would have this code three times in our skin, with the following names: "bottomwuxian", "bottomwangji1" e "bottomwangji2".

#workskin .wpp-bottomlight {
  background-image: url("https://i.ibb.co/pyCv9Bj/1620176397802.jpg");
  background-repeat: repeat-y;
  background-size: 100%;
  width: auto;
  height: 50px;
  padding-left: 15px;
  padding-bottom: 0px;
  border-bottom: 1px solid #ababab;
}

#workskin .wpp-bottomdark {
  background-image: url("https://i.ibb.co/6Dxsfrr/barra-escuracd.png");
  background-repeat: repeat-y;
  background-size: 100%;
  width: auto;
  height: 50px;
  padding-left: 15px;
  padding-bottom: 0px;
  border-bottom: 1px solid #ababab;
}

f) SENT AND RECEIVED MESSAGES:

Light theme:

#workskin .wpp-reply1light {
  float: right;
  color: #000000;
  margin: 0.1em 1em;
  margin-top: 0.3em;
  border-radius: 0.5em 0 0.5em 0.5em;
  padding: 0.25em 7px 0.25em .45em;
  background: #E1FFC7;
  max-width: 75%;
  clear: both;
  position: relative;
}

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

#workskin .wpp-reply2light {
  float: right;
  color: #000000;
  margin: 0.1em 1em;
  border-radius: 0.5em;
  padding: 0.25em 7px 0.25em .45em;
  background: #E1FFC7;
  max-width: 75%;
  clear: both;
  position: relative;
}

#workskin .wpp-text1light {
  float: left;
  color: #000000;
  margin: 0.1em 1em;
  margin-top: 0.3em;
  border-radius: 0 0.5em 0.5em 0.5em;
  padding: 0.15em 7px 0.15em .45em;
  background: #f6f6f6;
  max-width: 75%;
  clear: both;
  position: relative;
}

#workskin .wpp-text1light ::before {
  content: "";
  position: absolute;
  left: -0.4em;
  top: 0;
  width: 0.5em;
  height: 1em;
  border-left: 0.5em solid #f6f6f6;
  border-bottom-left-radius: 0.5em 1em;
}

#workskin .wpp-text2light  {
  float: left;
  color: #000000;
  margin: 0.1em 1em;
  border-radius: 0.5em;
  padding: 0.25em 7px 0.25em .45em;
  background: #f6f6f6;
  max-width: 75%;
  clear: both;
  position: relative;
}

Dark theme:

#workskin .wpp-reply1dark  {
  float: right;
  color: #dee5eb;
  margin: 0.1em 1em;
  margin-top: 0.3em;
  border-radius: 0.5em 0 0.5em 0.5em;
  padding: 0.25em 7px 0.25em .45em;
  background: #054640;
  max-width: 75%;
  clear: both;
  position: relative;
}

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

#workskin .wpp-reply2dark  {
  float: right;
  color: #dee5eb;
  margin: 0.1em 1em;
  border-radius: 0.5em;
  padding: 0.25em 7px 0.25em .45em;
  background: #054640;
  max-width: 75%;
  clear: both;
  position: relative;
}

#workskin .wpp-text1dark {
  float: left;
  color: #dee5eb;
  margin: 0.1em 1em;
  margin-top: 0.3em;
  border-radius: 0 0.5em 0.5em 0.5em;
  padding: 0.15em 7px 0.15em .45em;
  background: #232d36;
  max-width: 75%;
  clear: both;
  position: relative;
}

#workskin .wpp-text1dark::before {
  content: "";
  position: absolute;
  left: -0.4em;
  top: 0;
  width: 0.5em;
  height: 1em;
  border-left: 0.5em solid #232d36;
  border-bottom-left-radius: 0.5em 1em;
}

#workskin .wpp-text2dark {
  float: left;
  color: #dee5eb;
  margin: 0.1em 1em;
  border-radius: 0.5em;
  padding: 0.25em 7px 0.25em .45em;
  background: #232d36;
  max-width: 75%;
  clear: both;
  position: relative;
}

g) IMAGES:

This is for sending messages with pictures. You will add the pictures directly in the fic.

#workskin .wpp-img {
  border-radius: 3px;
  width: 100%;
  display: block;
}

h) TIME STAMPS AND READ CHECK

About this part, please take some points into consideration:

1) I have chosen not to use time stamps in my work, since I couldn't find an effective way for hiding them from the screen reader. Reading the time stamp at the end of every message becomes very annoying and disturbs the reading, so I thought it was better to leave them out;

2) The read check uses this part of the code though, so even if you don't want the time stamps, you have to put it on your skin.

#workskin .wpp-time {
  font-size: 0.75em;
  color: #999;
  display: inline-block;
  float: right;
  line-height: 1.3em;
  padding-top: 0.5em;
  padding-left: 1.5em;
  margin: 0;
}

#workskin .wpp-timeimg {
  font-size: 0.75em;
  color: #ffffff;
  position: absolute;
  bottom: 9px;
  right: 13px;
}

i) DATE, ADDING OR REMOVING A CONTACT, ETC

Light theme:

#workskin .wpp-datelight {
  font-family: inherit;
  font-size: 0.75em;
  color: #999;
  text-transform: uppercase;
  max-width: 90%;
  background: #D4EAF4;
  border-radius: 5px;
  padding: 5px;
  margin: 10px auto;
  text-align: center;
  display: table;
}

Dark theme:

#workskin .wpp-datedark {
  font-family: inherit;
  font-size: 0.75em;
  color: #999;
  text-transform: uppercase;
  max-width: 90%;
  background: #232d36;
  border-radius: 5px;
  padding: 5px;
  margin: 10px auto;
  text-align: center;
  display: table;
}

j) CONTACT NAME IN GROUP CHATS

Lastly, this part is about the contact name that appears above the messages in group chats.

If you want to create different colors, you can copy one of these parts and change both the name (ex. "red1") and the color (ex. "#fe0200").

#workskin .red1 {
  font-size: 0.85em;
  font-weight: bold;
  color: #fe0200;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .red2 {
  font-size: 0.85em;
  font-weight: bold;
  color: #d9262a;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .pink {
  font-size: 0.85em;
  font-weight: bold;
  color: #ff3e73;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .blue1 {
  font-size: 0.85em;
  font-weight: bold;
  color: #0166ff;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .blue2 {
  font-size: 0.85em;
  font-weight: bold;
  color: #297dfa;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .blue3 {
  font-size: 0.85em;
  font-weight: bold;
  color: #5887cb;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .blue4 {
  font-size: 0.85em;
  font-weight: bold;
  color: #34deff;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .brown {
  font-size: 0.85em;
  font-weight: bold;
  color: #af593e;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .orange {
  font-size: 0.85em;
  font-weight: bold;
  color: #ff861e;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .yellow {
  font-size: 0.85em;
  font-weight: bold;
  color: #ffe53a;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .purple {
  font-size: 0.85em;
  font-weight: bold;
  color: #8359a3;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .green1 {
  font-size: 0.85em;
  font-weight: bold;
  color: #01a368;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .green2 {
  font-size: 0.85em;
  font-weight: bold;
  color: #c5e17a;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .green3 {
  font-size: 0.85em;
  font-weight: bold;
  color: #22af22;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .green4 {
  font-size: 0.85em;
  font-weight: bold;
  color: #096309;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

#workskin .green5 {
  font-size: 0.85em;
  font-weight: bold;
  color: #054105;
  display: inline-block;
  float: bottom;
  line-height: .5em;
  margin: 0;
}

Index


3.2. Messages

This first example is the text messages only, without header or wallpaper.

First you'll always write the code that sets the screen size:

<div class="wpp-phone">

And then the text bubbles.

This is the first sent message, pointing to the right:

<p><span class="wpp-reply1light">[FIRST SENT TEXT HERE]</span></p>

And the following sent messages:

<p><span class="wpp-reply2light">[SECOND SENT TEXT HERE]</span></p>

Now the first received text, pointing to the left:

<p><span class="wpp-text1light">[FIRST RECEIVED TEXT HERE]</span></p>

The other received texts:

<p><span class="wpp-text2light">[SECOND RECEIVED TEXT HERE]</span></p>

And when you finish the chat, you type:

</div>

So, with the screen reader accessibility in mind, I would put a hidden text before the first sent and received text, telling who is sending the message.

So the code would look like this:

<div class="wpp-phone">

<p><span class="wpp-reply1light"><span class="reader">Next, there's an WhatsApp chat. Sent message: </span>Gege</span></p>

<p><span class="wpp-text1light"><span class="reader">Received message: </span>San Lang!</span></p>

<p><span class="wpp-text2light">Everything alright? 😊</span></p>

<p><span class="wpp-reply1light"><span class="reader">Sent message: </span>Yes...</span></p>

<p><span class="wpp-reply2light">I miss you, gege 🥺</span></p>

</div><span class="reader"> Whatsapp chat end. </span>

And it would look like this:

Next, there's an WhatsApp chat. Sent message: Gege

Received message: San Lang!

Everything alright? 😊

Sent message: Yes...

I miss you, gege 🥺

Whatsapp chat end.

Index


3.2.1. Time stamp and read check

As I said before, I don't think the time stamps at the end of each message are very screen reader friendly, but I'll show you how it works.

And regarding the read check, I only put a description when it's relevant to the story. For example, if the read checks are being used only for the aesthetic, I won't put a hidden text describing them, because it breaks the pace of the reading.

However, if they're important for the story, I put the description.

The time stamp and read check code is:

<span class="wpp-time"> [TIME] <img src="[IMAGE LINK]" alt=" " width="15" height="10" /></span>

If you don't want the time stamp, just leave the space in blank.

Example with time stamps:

<div class="wpp-phone">

<p><span class="wpp-reply1light"><span class="reader">Next, there's an WhatsApp chat. Sent message: </span>lan zhan is it true that you like mianmian?<span class="wpp-time"> 12:30 <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

<p><span class="wpp-reply2light">is it? <span class="wpp-time"> 12:31 <img src="https://i.ibb.co/6F74Wr1/gray1.png" alt=" " width="15" height="10" /></span></span></p>

<p><span class="wpp-reply2light">... lan zhan?<span class="wpp-time"> 12:31<img src="https://i.ibb.co/6F74Wr1/gray1.png" alt=" " width="15" height="10" /></span> </span></p> <span class="reader">The first sent message was read, but the following ones were only delivered.</span>

</div><span class="reader">WhatsApp chat end. </span>

Next, there's an WhatsApp chat. Sent message: lan zhan is it true that you like mianmian? 12:30

is it? 12:31

... lan zhan? 12:31

The first sent message was read, but the following ones were only delivered.

WhatsApp chat end.

Example without time stamps:

<div class="wpp-phone">

<p><span class="wpp-reply1light"><span class="reader">Next, there's an WhatsApp chat. Sent message: </span>lan zhan is it true that you like mianmian?<span class="wpp-time"> <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

<p><span class="wpp-reply2light">is it? <span class="wpp-time"> <img src="https://i.ibb.co/6F74Wr1/gray1.png" alt=" " width="15" height="10" /></span></span></p>

<p><span class="wpp-reply2light">... lan zhan?<span class="wpp-time"> <img src="https://i.ibb.co/6F74Wr1/gray1.png" alt=" " width="15" height="10" /></span> </span></p> <span class="reader">The first sent message was read, but the following ones were only delivered.</span>

</div><span class="reader">WhatsApp chat end. </span>

Next, there's an WhatsApp chat. Sent message: lan zhan is it true that you like mianmian?

is it?

... lan zhan?

The first sent message was read, but the following ones were only delivered.

WhatsApp chat end.

Image links:

1 - Read: https://i.ibb.co/SRHp95x/bluecheck.png

2 - Sent - gray: https://i.ibb.co/6F74Wr1/gray1.png

3 - Delivered - gray: https://i.ibb.co/q7thTHp/gray2.png

4 - Sent - white (for pictures): https://i.ibb.co/vqr7T8X/white1.png

5 - Delivered - white (for pictures): https://i.ibb.co/mXFwkhD/white2.png

Index


3.2.2. Sending images

When putting images in the story, I write the description in hidden text right before the picture.

To send a picture in a message you need to write the following code:

<span class="wpp-img"> <img src="[IMAGE LINK]" /> </span>

Exemplo:

<div class="wpp-phone">

<p><span class="wpp-reply1light"><span class="reader">Next there's an WhatsApp chat. Sent message: A drawing of pusheen cat, smiling and with a pink heart above its head. </Span><span class="wpp-img"> <img src="https://i.ibb.co/D4CrRfh/287906745008211.webp" /> </span><span class="wpp-timeimg"> <img src="https://i.ibb.co/mXFwkhD/white2.png" alt=" " width="15" height="10" /></span></span></p>

</div><span class="reader">WhatsApp chat end. </span>

Next there's an WhatsApp chat. Sent message: A drawing of pusheen cat, smiling and with a pink heart above its head.

WhatsApp chat end.

Index


3.2.3. Date stamp, adding or removing a contact, etc

For date stamps you’ll use the following code:

<span class="wpp-datelight">[Texto]</span>

Here’s an example of this code being used in two different ways i the same chat:

<div class="wpp-phone">

<span class="reader">Next there's an WhatsApp chat. </span>

<p><span class="wpp-datelight">Today</span></p>

<p><span class="wpp-reply1light"><span class="reader">Sent message: </span>guys, lan zhan is ignoring me <span class="wpp-time"> <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

<p>&nbsp;</p>

<p><span class="wpp-datelight">Jiang Cheng removed you.</span></p>

</div><span class="reader">WhatsApp chat end. </span>


Next there's an WhatsApp chat.

Today

Sent message: guys, lan zhan is ignoring me

 

Jiang Cheng removed you.

WhatsApp chat end.

Index


3.2.4. Group chat

It’s basically the same thing as sending messages between two people, the only difference is that above the first received message is the contact name. Here’s the code:

<span class="[NAME OF THE COLOR AS YOU PUT IN YOUR SKIN]">[CONTACT NAME]</span> </br>

For example:

<div class="wpp-phone">

<p><span class="wpp-text1light"><span class="reader">Next, there's an WhatsAppgroup chat. Received message from:</span> <span class="orange"> BFF 💕🦊</span> </br>Girl, I’m so sorry, but we found out Adrien already likes someone… Nino told me he is suuuuuper in love with Ladybug 😔😔😔</span></p>

<p><span class="wpp-reply1light"><span class="reader">Sent message: </span>aajaAKSJ9WJSHDJSJDJKXXBHD<span class="wpp-time"> <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

<p><span class="wpp-text1light"><span class="reader">Received message from:</span> <span class="pink"> Rose 🌸</span></br>mari are u ok???</span></p>

<p><span class="wpp-reply1light"><span class="reader">Sent message: </span>Ops, I let my phone fall hahahksdjk<span class="wpp-time"> <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

</div><span class="reader">WhatsApp chat end. </span>

Next, there's an WhatsAppgroup chat. Received message from: BFF 💕🦊
Girl, I’m so sorry, but we found out Adrien already likes someone… Nino told me he is suuuuuper in love with Ladybug 😔😔😔

Sent message: aajaAKSJ9WJSHDJSJDJKXXBHD

Received message from: Rose 🌸
mari are u ok???

Sent message: Ops, I let my phone fall hahahksdjk

WhatsApp chat end.

Index


3.3. Chat with a header

To add a header with the contact name and picture, you’ll add the following code right after <div class="wpp-phone">.

<p><span class="reader"> [I WOULD WRITE THE IMAGE DESCRIPTION HERE] </span></p>

<div class="wpp-headerlight">

<p><br /><img class="wpp-icon" src="[ICON PICTURE LINK]" alt=" " width="250" height="247" /><br />
<span class="wpp-contact"><span class="reader"> [A DESCRIPTION LIKE "THE CONTACT NAME IS:"] </span>[CONTACT/GROUP NAME]</span><br /></p></div>

To add a header to the previous text, we’d have the following code:

<div class="wpp-phone">

<p><span class="reader"> Next, there's an WhatsAppgroup chat. The group icon is a selfie taken by Alya, in Marinette’s room. Juleka and Rose are sitting on the floor, hugging each other, while Marinette and Mylene are seated on the couch. They are all smiling. </span></p>

<div class="wpp-headerlight">

<p><br /><img class="wpp-icon" src="https://i.pinimg.com/originals/88/8f/0d/888f0db9dddca301e7c7c836135436cf.jpg" alt=" " width="250" height="247" /><br />
<span class="wpp-contact"><span class="reader"> The group is named as: </span>Friends ❤️</span><br /></p></div>

<p><span class="wpp-text1light"><span class="reader">Next, there's an WhatsAppgroup chat. Received message from:</span> <span class="orange"> BFF 💕🦊</span> </br>Girl, I’m so sorry, but we found out Adrien already likes someone… Nino told me he is suuuuuper in love with Ladybug 😔😔😔</span></p>

<p><span class="wpp-reply1light"><span class="reader">Sent message: </span>aajaAKSJ9WJSHDJSJDJKXXBHD<span class="wpp-time"> <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

<p><span class="wpp-text1light"><span class="reader">Received message from:</span> <span class="pink"> Rose 🌸</span></br>mari are u ok???</span></p>

<p><span class="wpp-reply1light"><span class="reader">Sent message: </span>Ops, I let my phone fall hahahksdjk<span class="wpp-time"> <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

</div><span class="reader">WhatsApp chat end. </span>

Next, there's an WhatsAppgroup chat. The group icon is a selfie taken by Alya, in Marinette’s room. Juleka and Rose are sitting on the floor, hugging each other, while Marinette and Mylene are seated on the couch. They are all smiling.



The group is named as: Friends ❤️

Next, there's an WhatsAppgroup chat. Received message from: BFF 💕🦊
Girl, I’m so sorry, but we found out Adrien already likes someone… Nino told me he is suuuuuper in love with Ladybug 😔😔😔

Sent message: aajaAKSJ9WJSHDJSJDJKXXBHD

Received message from: Rose 🌸
mari are u ok???

Sent message: Ops, I let my phone fall hahahksdjk

WhatsApp chat end.

Index


3.4. Chat with a header, wallpaper and scroll

Add <div class="wpp-bglight"> right after the </div> that closes the header (remember that “wpp-bglight” is how you named this part in your skin, with the wallpaper picture. So you must change it accordingly). At the of the messages, you must add another </div>.

Example:

<div class="wpp-phone">

<p><span class="reader"> Next, there's an WhatsApp chat. The contact icon is an image of Xie Lian, smiling with his eyes closed. </span></p>

<div class="wpp-headerlight">

<p><br /><img class="wpp-icon" src="https://pbs.twimg.com/media/EgJeL_RVoAAQQES.jpg" alt=" " width="250" height="247" /><br />
<span class="wpp-contact"><span class="reader">The contact name is: </span>❤️ Gege ❤️</span><br /></p></div><span class="reader"> The wallpaper picture is the default one for whatsapp’s light theme. </span><div class="wpp-bglight">

<p><span class="wpp-datelight">Today</span></p>

<p><span class="wpp-reply1light"><span class="reader">Next, there's an WhatsApp chat. Sent message: </span>Gege</span></p>

<p><span class="wpp-text1light"><span class="reader">Received message: </span>San Lang!</span></p>

<p><span class="wpp-text2light">Everything alright? 😊</span></p>

<p><span class="wpp-reply1light"><span class="reader">Sent message: </span>Yes...</span></p>

<p><span class="wpp-reply2light">I miss you, gege 🥺</span></p>

<p><span class="wpp-text1light"><span class="reader">Received message: </span>Haha</span></p>

<p><span class="wpp-text2light">San Lang is needy today </span></p>

<p><span class="wpp-text2light">Do you want to come over? 😊</span></p>

<p><span class="wpp-reply1light"><span class="reader">Sent message: </span>Will gege cook for me?<span class="wpp-time"> <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

<p><span class="wpp-text1light"><span class="reader">Received message: </span>If you want me to… </span></p>

<p><span class="wpp-text2light"><span class="reader"></span>I will try a new recipe!</span></p>

<p><span class="wpp-reply1light">I’ll arrive in 15 min<span class="wpp-time"> <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

<p><span class="wpp-text1light"><span class="reader">Received message: </span>I will be waiting!</span></p>

<p><span class="wpp-text2light"><span class="reader">Received message: A drawing of pusheen cat, smiling and with a pink heart above its head. </Span><span class="wpp-img"> <img src="https://i.ibb.co/D4CrRfh/287906745008211.webp" /> </span><span class="wpp-timeimg"> <img src="https://i.ibb.co/mXFwkhD/white2.png" alt=" " width="15" height="10" /></span></span></p>

</div></div><span class="reader">WhatsApp chat end. </span>

Next, there's an WhatsApp chat. The contact icon is an image of Xie Lian, smiling with his eyes closed.



The contact name is: ❤️ Gege ❤️

The wallpaper picture is the default one for whatsapp’s light theme.

Today

Next, there's an WhatsApp chat. Sent message: Gege

Received message: San Lang!

Everything alright? 😊

Sent message: Yes...

I miss you, gege 🥺

Received message: Haha

San Lang is needy today

Do you want to come over? 😊

Sent message: Will gege cook for me?

Received message: If you want me to…

I will try a new recipe!

I’ll arrive in 15 min

Received message: I will be waiting!

Received message: A drawing of pusheen cat, smiling and with a pink heart above its head.

WhatsApp chat end.

Index


3.4.1. About the typing bar

If you followed the steps to add a typing bar to your skin, to use it you have to write <div class="wpp-bottomlight"></div> between the last two </div>.

<div class="wpp-phone">

<p><span class="reader"> Next, there's an WhatsApp chat. The contact icon is an image of Xie Lian, smiling with his eyes closed. </span></p>

<div class="wpp-headerlight">

<p><br /><img class="wpp-icon" src="https://pbs.twimg.com/media/EgJeL_RVoAAQQES.jpg" alt=" " width="250" height="247" /><br />
<span class="wpp-contact"><span class="reader">The contact name is: </span>❤️ Gege ❤️</span><br /></p></div><span class="reader"> The wallpaper picture is the default one for whatsapp’s dark theme. </span><div class="wpp-bglight">

<p><span class="wpp-datelight">Today</span></p>

<p><span class="wpp-reply1light"><span class="reader">Next, there's an WhatsApp chat. Sent message: </span>Gege</span></p>

<p><span class="wpp-text1light"><span class="reader">Received message: </span>San Lang!</span></p>

<p><span class="wpp-text2light">Everything alright? 😊</span></p>

<p><span class="wpp-reply1light"><span class="reader">Sent message: </span>Yes...</span></p>

<p><span class="wpp-reply2light">I miss you, gege 🥺</span></p>

<p><span class="wpp-text1light"><span class="reader">Received message: </span>Haha</span></p>

<p><span class="wpp-text2light">San Lang is needy today </span></p>

<p><span class="wpp-text2light">Do you want to come over? 😊</span></p>

<p><span class="wpp-reply1light"><span class="reader">Sent message: </span>Will gege cook for me?<span class="wpp-time"> <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

<p><span class="wpp-text1light"><span class="reader">Received message: </span>If you want me to… </span></p>

<p><span class="wpp-text2light"><span class="reader"></span>I will try a new recipe!</span></p>

<p><span class="wpp-reply1light">I’ll arrive in 15 min<span class="wpp-time"> <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

<p><span class="wpp-text1light"><span class="reader">Received message: </span>I will be waiting!</span></p>

<p><span class="wpp-text2light"><span class="reader">Received message: A drawing of pusheen cat, smiling and with a pink heart above its head. </Span><span class="wpp-img"> <img src="https://i.ibb.co/D4CrRfh/287906745008211.webp" /> </span><span class="wpp-timeimg"> <img src="https://i.ibb.co/mXFwkhD/white2.png" alt=" " width="15" height="10" /></span></span></p>

</div><div class="wpp-bottomlight"></div></div><span class="reader"> Whatsapp chat end. </span>

Next, there's an WhatsApp chat. The contact icon is an image of Xie Lian, smiling with his eyes closed.



The contact name is: ❤️ Gege ❤️

The wallpaper picture is the default one for whatsapp’s dark theme.

Today

Next, there's an WhatsApp chat. Sent message: Gege

Received message: San Lang!

Everything alright? 😊

Sent message: Yes...

I miss you, gege 🥺

Received message: Haha

San Lang is needy today

Do you want to come over? 😊

Sent message: Will gege cook for me?

Received message: If you want me to…

I will try a new recipe!

I’ll arrive in 15 min

Received message: I will be waiting!

Received message: A drawing of pusheen cat, smiling and with a pink heart above its head.

Whatsapp chat end.

Index


3.5. Dark theme

To change it to the dark theme, you need to change all the parts of the code that have the word “light” to “dark”. Here’s the previous example, now with the dark theme:

<div class="wpp-phone">

<p><span class="reader"> Next, there’san WhatsApp chat. The contact icon is an image of Xie Lian, smiling with his eyes closed. </span></p>

<div class="wpp-headerdark">

<p><br /><img class="wpp-icon" src="https://pbs.twimg.com/media/EgJeL_RVoAAQQES.jpg" alt=" " width="250" height="247" /><br />
<span class="wpp-contact"><span class="reader">The contact name is: </span>❤️ Gege ❤️</span><br /></p></div><span class="reader"> The wallpaper picture is the default one for whatsapp’s light theme. </span><div class="wpp-bgdark">

<p><span class="wpp-datedark">Today</span></p>

<p><span class="wpp-reply1dark"><span class="reader">Next, there's an WhatsApp chat. Sent message: </span>Gege</span></p>

<p><span class="wpp-text1dark"><span class="reader">Received message: </span>San Lang!</span></p>

<p><span class="wpp-text2dark">Everything alright? 😊</span></p>

<p><span class="wpp-reply1dark"><span class="reader">Sent message: </span>Yes...</span></p>

<p><span class="wpp-reply2dark">I miss you, gege 🥺</span></p>

<p><span class="wpp-text1dark"><span class="reader">Received message: </span>Haha</span></p>

<p><span class="wpp-text2dark">San Lang is needy today </span></p>

<p><span class="wpp-text2dark">Do you want to come over? 😊</span></p>

<p><span class="wpp-reply1dark"><span class="reader">Sent message: </span>Will gege cook for me?<span class="wpp-time"> <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

<p><span class="wpp-text1dark"><span class="reader">Received message: </span>If you want me to… </span></p>

<p><span class="wpp-text2dark"><span class="reader"></span>I will try a new recipe!</span></p>

<p><span class="wpp-reply1dark">I’ll arrive in 15 min<span class="wpp-time"> <img src="https://i.ibb.co/SRHp95x/bluecheck.png" alt=" " width="15" height="10" /></span></span></p>

<p><span class="wpp-text1dark"><span class="reader">Received message: </span>I will be waiting!</span></p>

<p><span class="wpp-text2dark"><span class="reader">Received message: A drawing of pusheen cat, smiling and with a pink heart above its head. </Span><span class="wpp-img"> <img src="https://i.ibb.co/D4CrRfh/287906745008211.webp" /> </span><span class="wpp-timeimg"> <img src="https://i.ibb.co/mXFwkhD/white2.png" alt=" " width="15" height="10" /></span></span></p>

</div><div class="wpp-bottomdark"></div></div><span class="reader"> Whatsapp chat end. </span>

Next, there's an WhatsApp chat. The contact icon is an image of Xie Lian, smiling with his eyes closed.



The contact name is: ❤️ Gege ❤️

The wallpaper picture is the default one for whatsapp’s light theme.

Today

Next, there's an WhatsApp chat. Sent message: Gege

Received message: San Lang!

Everything alright? 😊

Sent message: Yes...

I miss you, gege 🥺

Received message: Haha

San Lang is needy today

Do you want to come over? 😊

Sent message: Will gege cook for me?

Received message: If you want me to…

I will try a new recipe!

I’ll arrive in 15 min

Received message: I will be waiting!

Received message: A drawing of pusheen cat, smiling and with a pink heart above its head.

Whatsapp chat end.

Index