jockles.com

All the Fannish things I do.

Megaskin by Jockles

← Previous Chapter · Chapter Index · Next Chapter →

Chapter 6: WhatsApp

Thanks to orphan_account and worlds_end_valentine, whose WhatsApp group chat skin and Whatsapp Work Skin Template /Revamped this module is built on. Copied and adapted from them: the group header and member list, sender names, reactions, and per-chat backgrounds.

6.1 Chapter Contents

Before we begin, here's the two kinds of chat you can build: a chat between two people, or a group chat. The full HTML is underneath each, which you can copy and modify yourself. The rest of the chapter takes the HTML apart so that you can modify all the individual parts to say exactly what you want.

6.2 A One-to-One Chat

The full HTML for this chat 
<div class="mob wa theme-auto">
  <p class="mob-head">Lily<span class="hide"> - </span><span>online</span></p>
  <div class="mob-body">
    <p class="mob-sys">YESTERDAY</p>
    <div class="msg in tail">
      <p><span class="hide"><em>Lily:</em> </span>are you still up?</p>
      <p class="wa-time">23:41</p>
    </div>
    <div class="msg out tail">
      <p><span class="hide"><em>Shane:</em> </span>unfortunately</p>
      <p class="wa-time">23:42 <span class="wa-read">✓✓</span></p>
    </div>
    <div class="msg out">
      <p><span class="hide"><em>Shane:</em> </span>can't stop thinking about tomorrow</p>
      <p class="wa-time">23:42 <span class="wa-read">✓✓</span></p>
    </div>
    <div class="msg in tail">
      <p><span class="hide"><em>Lily:</em> </span>you'll be great. you always are</p>
      <p class="wa-time">23:43</p>
    </div>
    <p class="wa-reacts"><span class="hide">[Reactions: </span>❤️<span class="hide">]</span></p>
    <p class="mob-sys">TODAY</p>
    <div class="msg out tail">
      <p><span class="hide"><em>Shane:</em> </span>it's done. I'm alive</p>
      <p class="wa-time">14:05 <span class="wa-read">✓✓</span></p>
    </div>
    <div class="msg in tail">
      <p><span class="hide"><em>Lily:</em> </span>TELL ME EVERYTHING</p>
      <p class="wa-time">14:05</p>
    </div>
    <div class="msg out tail">
      <p class="wa-quote"><span class="hide">[Replying to </span><b>Lily</b><span class="hide">:</span><br>TELL ME EVERYTHING<span class="hide">]</span></p>
      <p><span class="hide"><em>Shane:</em> </span>after snacks. I'm starving</p>
      <p class="wa-time">14:06 <span class="wa-read">✓✓</span></p>
    </div>
    <div class="msg in tail">
      <p class="wa-quote colour8"><span class="hide">[Replying to </span><b>You</b><span class="hide">:</span><br>it's done. I'm alive<span class="hide">]</span></p>
      <p><span class="hide"><em>Lily:</em> </span>so proud of you</p>
      <p class="wa-time">14:07</p>
    </div>
    <div class="msg in share"><p class="hide"><em>Lily:</em></p>
      <div class="wa-link">
        <p class="wa-link-img"><img src="https://64.media.tumblr.com/c3c4ecb5bfed8fa9f0590c54206ddb30/cff2318529321620-44/s1280x1920/42befcc40a517e1f202dda40783be2ffb95c1d92.pnj" alt="Macklin Celebrini at the IHF Worlds, dressed in his red jersey and black helmet. He's surrounded by sparkles, a red vignette, and hearts containing the Canadian flag"></p>
        <p class="wa-link-title">Captain Mack</p>
        <p class="wa-link-desc">All the reasons Mack deserves the C</p>
        <p class="wa-link-url">fakehockeynews.com</p>
      </div>
      <p class="wa-time">14:12</p>
    </div>
    <div class="msg in share"><p class="hide"><em>Lily:</em></p>
      <div class="wa-link">
        <div class="wa-link-img video"><iframe src="https://player.vimeo.com/video/1169167060?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" title="Ilya Rozanov | Come Home"></iframe><p class="vid-desc">[Video: a tribute edit of Ilya Rozanov, made from Heated Rivalry footage and set to "Would You Come Home" by Tyler Blackburn]</p></div>
        <p class="wa-link-title">Ilya Rozanov | Come Home</p>
        <p class="wa-link-url">vimeo.com</p>
      </div>
      <p class="wa-caption">also someone made me a fan video. I am very handsome in it</p>
      <p class="wa-time">14:13</p>
    </div>
    <div class="msg out tail">
      <p class="wa-big"><span class="hide"><em>Shane:</em> </span>🙄</p>
      <p class="wa-time">14:15 <span class="wa-read">✓✓</span></p>
    </div>
    <div class="msg out share"><p class="hide"><em>Shane:</em></p>
      <p><span class="wa-ln">https://recipes.example.com/pierogi</span></p>
      <div class="wa-link">
        <p class="wa-link-img text">[The page's picture: a plate of golden fried pierogi with sour cream]</p>
        <p class="wa-link-title">Pierogi from Scratch</p>
        <p class="wa-link-desc">Easier than you think</p>
        <p class="wa-link-url">recipes.example.com</p>
      </div>
      <p class="wa-time">14:20 <span class="wa-read">✓✓</span></p>
    </div>
    <div class="msg out">
      <p><span class="hide"><em>Shane:</em> </span>making these tonight if you're coming over</p>
      <p class="wa-time">14:20 <span class="wa-read">✓✓</span></p>
    </div>
    <div class="msg out gallery"><p class="hide"><em>Shane:</em></p>
      <p class="wa-photos two">
        <span class="wa-photo"><img class="land" src="https://64.media.tumblr.com/a99a60f0293cf7df3604b4a6dd4705f6/ba033a52c8982cb0-cc/s1280x1920/cb4c277845d0c3ef666d16b86b75509266b795b3.jpg" alt="Black and white cat holding out a paw daintily, on a beige and green cat tree. The cat looks to be stepping into the frame from the left"></span>
        <span class="wa-photo"><img src="https://64.media.tumblr.com/45b3b47d7c42b593f6242a40153a629c/ba033a52c8982cb0-d7/s2048x3072/4e71b117e87747d78dd3d95595cecc77eec48d38.jpg" alt="Black and white cat sitting in an opened red suitcase, carry on size, on the floor behind a white door, and on a red patterned rug"></span>
      </p>
      <p class="wa-time">14:22 <span class="wa-read">✓✓</span></p>
    </div>
    <p class="wa-reacts out"><span class="hide">[Reactions: </span>😍<span class="hide">]</span></p>
    <div class="msg in tail gallery"><p class="hide"><em>Lily:</em></p>
      <p class="wa-photos one"><span class="wa-photo"><img src="https://64.media.tumblr.com/6898dc3a42cc6c7ab9729360b71366e4/ba033a52c8982cb0-bf/s2048x3072/b548d2fe61b02e530c0edd2ee6a6bd56ab73ad2c.jpg" alt="Black and white cat screaming at the camera, on a red patterned rug"></span></p>
      <p class="wa-caption">she says she wants pierogi too</p>
      <p class="wa-time">14:24</p>
    </div>
    <p class="typing">Lily is typing...</p>
  </div>
  <p class="wa-input">
    <span class="wa-field">
      <span>&#9786;</span>
      <span class="wa-ph">Message</span>
      <span class="wa-ic">&#128206;</span>
      <span class="wa-ic">&#128247;</span>
    </span>
    <span class="wa-mic">&#127908;</span>
  </p>
</div>

6.3 A Group Chat

The full HTML for this chat 
<div class="mob wa theme-auto">
  <table class="wa-bar">
    <tbody>
      <tr>
        <td rowspan="2" class="wa-back">&#8592;</td>
        <td rowspan="2" class="wa-pfp-cell"><p class="wa-pfp colour5">D</p></td>
        <td class="wa-title">dinner</td>
        <td rowspan="2" class="wa-actions">&#127909; &#8942;</td>
      </tr>
      <tr>
        <td class="wa-sub">Rose, Jane, Hayden, You</td>
      </tr>
    </tbody>
  </table>
  <div class="mob-body">
    <p class="mob-sys">TODAY</p>
    <p class="mob-sys">Rose changed this group's icon</p>
    <div class="wa-row">
      <p class="wa-pfp colour1"><span class="pfp"><img src="https://media.istockphoto.com/id/1298570775/photo/rose.jpg?s=1024x1024&w=is&k=20&c=UFPisYCT3g2Vm04F2E5zrhtUWqDtLRLDXZisKb6Xf5s=" alt="Profile picture of Rose, a close-up photo of a rose"></span></p>
      <div class="msg in tail">
        <p class="who colour1">~ Rose<span class="hide"> </span><span class="wa-num">+353 85 123 4567</span><span class="hide">:</span></p>
        <p>DINNER PARTY. my place, saturday at 7 🥂</p>
        <p class="wa-time">09:12</p>
      </div>
    </div>
    <div class="wa-row cont">
      <div class="msg in">
        <p><span class="hide"><em>~ Rose:</em> </span>I'm doing the lamb!!! everyone has to come</p>
        <p class="wa-time">09:12</p>
      </div>
    </div>
    <p class="wa-reacts pad"><span class="hide">[Reactions: </span>🎉 <span class="wa-count">2</span><span class="hide">]</span></p>
    <div class="wa-row">
      <p class="wa-pfp colour4">HP</p>
      <div class="msg in tail">
        <p class="who colour4">Hayden<span class="hide">:</span></p>
        <p>should I bring the kids?</p>
        <p class="wa-time">09:13</p>
      </div>
    </div>
    <div class="msg out tail">
      <p class="wa-quote colour4"><span class="hide">[Replying to </span><b>Hayden</b><span class="hide">:</span><br>should I bring the kids?<span class="hide">]</span></p>
      <p><span class="hide"><em>Ilya:</em> </span>yes. they are better company than you</p>
      <p class="wa-time">09:14 <span class="wa-read">✓✓</span></p>
    </div>
    <p class="wa-reacts out"><span class="hide">[Reactions: </span>❤️ 😂 <span class="wa-count">3</span><span class="hide">]</span></p>
    <div class="wa-row">
      <p class="wa-pfp colour3"><span class="pfp"><img class="land" src="https://www.shutterstock.com/shutterstock/photos/1100283806/display_1500/stock-photo-beautiful-lavender-flower-in-the-dalat-flower-park-selective-focus-1100283806.jpg" alt="Profile picture of Jane, a lavender flower"></span></p>
      <div class="msg in tail">
        <p class="who colour3">Jane<span class="hide">:</span></p>
        <p class="wa-quote colour8"><span class="hide">[Replying to </span><b>You</b><span class="hide">:</span><br>yes. they are better company than you<span class="hide">]</span></p>
        <p>be nice</p>
        <p class="wa-time">09:15</p>
      </div>
    </div>
    <div class="msg out tail">
      <p class="wa-quote colour1"><span class="hide">[Replying to </span><b>~ Rose<span class="hide"> </span><span class="wa-num">+353 85 123 4567</span></b><span class="hide">:</span><br>DINNER PARTY. my place, saturday at 7 🥂<span class="hide">]</span></p>
      <p><span class="hide"><em>Ilya:</em> </span>what do we bring?</p>
      <p class="wa-time">09:16 <span class="wa-read">✓✓</span></p>
    </div>
    <div class="wa-row">
      <p class="wa-pfp colour1"><span class="pfp"><img src="https://media.istockphoto.com/id/1298570775/photo/rose.jpg?s=1024x1024&w=is&k=20&c=UFPisYCT3g2Vm04F2E5zrhtUWqDtLRLDXZisKb6Xf5s=" alt="Profile picture of Rose, a close-up photo of a rose"></span></p>
      <div class="msg in tail gallery">
        <p class="who colour1">~ Rose<span class="hide"> </span><span class="wa-num">+353 85 123 4567</span><span class="hide">:</span></p>
        <p class="wa-photos two"><span class="wa-photo"><span class="wa-desc">[Photo of a bottle of red wine with a gold label and a very long French name]</span></span><span class="wa-photo"><span class="wa-desc">[Photo of the same bottle, held up next to Rose's very pleased face]</span></span></p>
        <p class="wa-time">09:18</p>
      </div>
    </div>
    <div class="wa-row cont">
      <div class="msg in gallery"><p class="hide"><em>~ Rose:</em></p>
        <p class="wa-photos four">
          <span class="wa-photo"><img class="land" src="https://64.media.tumblr.com/694221426fb8229480fb3fb87b528ca7/ba033a52c8982cb0-01/s1280x1920/636653581e07a970475075f480c1717b23a72c0a.jpg" alt="Black and white cat staring through a gap between a screen and a desk, with blurred cables hanging down around and blue sky behind"></span>
          <span class="wa-photo"><img src="https://64.media.tumblr.com/6898dc3a42cc6c7ab9729360b71366e4/ba033a52c8982cb0-bf/s2048x3072/b548d2fe61b02e530c0edd2ee6a6bd56ab73ad2c.jpg" alt="Black and white cat screaming at the camera, on a red patterned rug"></span>
          <span class="wa-photo"><img class="land" src="https://64.media.tumblr.com/a99a60f0293cf7df3604b4a6dd4705f6/ba033a52c8982cb0-cc/s1280x1920/cb4c277845d0c3ef666d16b86b75509266b795b3.jpg" alt="Black and white cat holding out a paw daintily, on a beige and green cat tree. The cat looks to be stepping into the frame from the left"></span>
          <span class="wa-photo"><img src="https://64.media.tumblr.com/45b3b47d7c42b593f6242a40153a629c/ba033a52c8982cb0-d7/s2048x3072/4e71b117e87747d78dd3d95595cecc77eec48d38.jpg" alt="Black and white cat sitting in an opened red suitcase, carry on size, on the floor behind a white door, and on a red patterned rug"></span>
        </p>
        <p class="wa-time">09:19</p>
      </div>
    </div>
    <div class="wa-row cont">
      <div class="msg in">
        <p><span class="hide"><em>~ Rose:</em> </span>the girls are devastated they're not invited 😿</p>
        <p class="wa-time">09:19</p>
      </div>
    </div>
    <div class="msg out tail">
      <p><span class="hide"><em>Ilya:</em> </span>Shane will not drink this. more for me</p>
      <p class="wa-time">09:20 <span class="wa-read">✓✓</span></p>
    </div>
  </div>
  <p class="wa-input">
    <span class="wa-field">
      <span>&#9786;</span>
      <span class="wa-ph">Message</span>
      <span class="wa-ic">&#128206;</span>
      <span class="wa-ic">&#128247;</span>
    </span>
    <span class="wa-mic">&#127908;</span>
  </p>
</div>

6.4 WhatsApp Window

A WhatsApp chat has the same three parts as iMessage - a container, a header and a body. The only difference is the module class, wa, so the container is <div class="mob wa theme-auto"> and everything else goes inside it. First comes the header, with the contact's name:

<p class="mob-head">Lily<span class="hide"> - </span><span>online</span></p>

The header is the green bar. The span underneath is the status line, like "online", "last seen today at 9:41" or "typing...", or the list of people in a group. After the header comes <div class="mob-body">, which holds all of the messages. There's a fancier header with a picture and icons too, which is in the group chat - see Group Header with Picture and Icons, further down.

6.5 Simple Messages

WhatsApp bubbles hold more than one line of text - each one can have a time, ticks and a quoted reply in it. So instead of a single <p>, each message is a <div> with paragraphs inside:

<div class="msg in tail">
  <p><span class="hide"><em>Lily:</em> </span>are you still up?</p>
  <p class="wa-time">23:41</p>
</div>

Same as iMessage, msg in is a white bubble on the left and msg out is a green bubble on the right. The first paragraph is the message itself, and wa-time is the little grey time in the bottom right of the bubble. tail is optional - it adds the little pointy corner to the bubble, and it's meant for the first bubble in a run from one person.

Each part of a message, piece by piece
  • <div class="msg in tail"> - the bubble, with everything inside it.
  • <span class="hide"><em>Lily:</em> </span> - only for readers with the workskin off. It goes at the start of the first paragraph, straight before the message. With the workskin on, the colour and side of the bubble show who's talking. With it off, they don't - and in a one-to-one chat there's no name shown anywhere else - so this label is how those readers know who sent it.
  • are you still up? - the message itself.
  • <p class="wa-time">23:41</p> - the time, which shows either way.

With the workskin off, this reads:

Lily: are you still up?

23:41

Swap the name for whoever is talking. There's more on this in Accessibility, in the Core, Themes, and Extras chapter.

6.6 Date Pills

The little grey pill with the date on it uses the same mob-sys line as iMessage - in WhatsApp, the workskin turns it into a pill for you:

<p class="mob-sys">YESTERDAY</p>

6.7 Read Ticks

To show that a message has been read, add a double tick after the time and wrap it in wa-read:

<div class="msg out tail">
  <p><span class="hide"><em>Shane:</em> </span>unfortunately</p>
  <p class="wa-time">23:42 <span class="wa-read">✓✓</span></p>
</div>

The ticks turn blue. For a message that hasn't been read yet, leave off the wa-read span and type the ticks as plain text, and they stay grey. One tick means the message was sent but hasn't reached the other person's phone, two grey ticks mean it got there but hasn't been read, and two blue ticks mean it's been read. Here are all three side by side:

The HTML for the three versions:

<div class="mob wa theme-auto">
  <p class="mob-head">Mom<span class="hide"> - </span><span>last seen today at 10:01</span></p>
  <div class="mob-body">
    <div class="msg out">
      <p><span class="hide"><em>Shane:</em> </span>Sent, but not delivered yet</p>
      <p class="wa-time">10:03 ✓</p>
    </div>
    <div class="msg out">
      <p><span class="hide"><em>Shane:</em> </span>Delivered, but unread</p>
      <p class="wa-time">10:03 ✓✓</p>
    </div>
    <div class="msg out">
      <p><span class="hide"><em>Shane:</em> </span>Read</p>
      <p class="wa-time">10:03 <span class="wa-read">✓✓</span></p>
    </div>
  </div>
</div>

6.8 Edited Messages

To show that a message was edited, type Edited before the time, inside the wa-time line:

<div class="msg out tail">
  <p><span class="hide"><em>Shane:</em> </span>see you at 8</p>
  <p class="wa-time">Edited 23:44 <span class="wa-read">✓✓</span></p>
</div>

It picks up the same small grey text as the time, so there's no extra class to remember.

6.9 Replying to a Message

To quote the message someone is replying to, add a paragraph with wa-quote at the top of the bubble, before the reply:

<div class="msg out tail">
  <p class="wa-quote"><span class="hide">[Replying to </span><b>Lily</b><span class="hide">:</span><br>TELL ME EVERYTHING<span class="hide">]</span></p>
  <p><span class="hide"><em>Shane:</em> </span>after snacks. I'm starving</p>
  <p class="wa-time">14:06 <span class="wa-read">✓✓</span></p>
</div>

Put the name of the person being quoted in <b>, then a line break, then the words of the original message. The three hide spans are for readers with the workskin off: [Replying to before the name, a colon after it, and ] at the end, so the quote reads "[Replying to Lily: TELL ME EVERYTHING]" and nobody thinks Lily has just sent it again.

When someone replies to a message you sent, their bubble quotes your message, and WhatsApp labels it "You" in green. So the bubble is a received one (in), the name in the quote is You, and it takes the green colour class, colour8:

<div class="msg in tail">
  <p class="wa-quote colour8"><span class="hide">[Replying to </span><b>You</b><span class="hide">:</span><br>it's done. I'm alive<span class="hide">]</span></p>
  <p><span class="hide"><em>Lily:</em> </span>so proud of you</p>
  <p class="wa-time">14:07</p>
</div>

6.10 Emoji Reactions

When someone reacts to a message, WhatsApp shows a little pill sitting on the bottom edge of the bubble. Add a wa-reacts paragraph straight after the bubble, with the emoji inside:

<div class="msg in tail">
  <p><span class="hide"><em>Lily:</em> </span>you'll be great. you always are</p>
  <p class="wa-time">23:43</p>
</div>
<p class="wa-reacts"><span class="hide">[Reactions: </span>❤️<span class="hide">]</span></p>

The two hide spans - [Reactions: before the emoji and ] after it - are only for readers with the workskin off. Without them, those readers would get a stray emoji under the message. With them, it reads "[Reactions: ❤️]".

When more than one person has reacted, put all of their emojis in, then the number of people in a wa-count span. For a reaction under one of your own messages, add out so it sits on the right:

<div class="msg out tail">
  <p class="wa-quote colour4"><span class="hide">[Replying to </span><b>Hayden</b><span class="hide">:</span><br>should I bring the kids?<span class="hide">]</span></p>
  <p><span class="hide"><em>Ilya:</em> </span>yes. they are better company than you</p>
  <p class="wa-time">09:14 <span class="wa-read">✓✓</span></p>
</div>
<p class="wa-reacts out"><span class="hide">[Reactions: </span>❤️ 😂 <span class="wa-count">3</span><span class="hide">]</span></p>

That one reads "[Reactions: ❤️ 😂 3]" with the workskin off. Under a group message with a profile picture next to it, add pad so the pill lines up with the bubble:

<div class="wa-row cont">
  <div class="msg in">
    <p><span class="hide"><em>~ Rose:</em> </span>I'm doing the lamb!!! everyone has to come</p>
    <p class="wa-time">09:12</p>
  </div>
</div>
<p class="wa-reacts pad"><span class="hide">[Reactions: </span>🎉 <span class="wa-count">2</span><span class="hide">]</span></p>

6.11 Large Emoji

A message that's only an emoji can have the emoji on a line of its own. Put it in its own paragraph above the time, and make it big with the wa-big class:

<div class="msg out tail">
  <p class="wa-big"><span class="hide"><em>Shane:</em> </span>🙄</p>
  <p class="wa-time">14:15 <span class="wa-read">✓✓</span></p>
</div>

6.12 Shared Links

To show a link the way WhatsApp previews it, add share to the message and put a wa-link card inside it, above the time. The card holds a picture (wa-link-img), the title (wa-link-title), an optional short description (wa-link-desc) and the web address (wa-link-url), which gets a little link symbol in front of it automatically. The hide paragraph at the start holds the hidden label, as there's no message text to put it in. Don't forget the alt text on the picture:

<div class="msg in share"><p class="hide"><em>Lily:</em></p>
  <div class="wa-link">
    <p class="wa-link-img"><img src="https://64.media.tumblr.com/c3c4ecb5bfed8fa9f0590c54206ddb30/cff2318529321620-44/s1280x1920/42befcc40a517e1f202dda40783be2ffb95c1d92.pnj" alt="Macklin Celebrini at the IHF Worlds, dressed in his red jersey and black helmet. He's surrounded by sparkles, a red vignette, and hearts containing the Canadian flag"></p>
    <p class="wa-link-title">Captain Mack</p>
    <p class="wa-link-desc">All the reasons Mack deserves the C</p>
    <p class="wa-link-url">fakehockeynews.com</p>
  </div>
  <p class="wa-time">14:12</p>
</div>

To share a video link with the video actually playing in the card, put the embed code from the video site in the picture box, and add video to it. Keep the whole src link, including everything after the ?:

<div class="msg in share"><p class="hide"><em>Lily:</em></p>
  <div class="wa-link">
    <div class="wa-link-img video"><iframe src="https://player.vimeo.com/video/1169167060?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" title="Ilya Rozanov | Come Home"></iframe><p class="vid-desc">[Video: a tribute edit of Ilya Rozanov, made from Heated Rivalry footage and set to "Would You Come Home" by Tyler Blackburn]</p></div>
    <p class="wa-link-title">Ilya Rozanov | Come Home</p>
    <p class="wa-link-url">vimeo.com</p>
  </div>
  <p class="wa-caption">also someone made me a fan video. I am very handsome in it</p>
  <p class="wa-time">14:13</p>
</div>

The vid-desc paragraph after the video is its description, for screen readers and for anyone reading with the workskin off - see Video Descriptions, under Accessibility, in the Core, Themes, and Extras chapter.

To write a message under the card in the same bubble, like Lily's here, add a wa-caption paragraph after the card, before the time. It works under any link card, with or without a video.

The description is optional, so leave out the wa-link-desc line if you only want a title and an address. If you don't want a picture at all, add text to the picture box and write a description in square brackets. In this one, Shane has also pasted the link into his message, so WhatsApp shows the address in blue above the card. Put that in a span with wa-ln (or fake-link, which looks the same), above the card. The address in the card is just text, so you can make up any address you like there too:

<div class="msg out share"><p class="hide"><em>Shane:</em></p>
  <p><span class="wa-ln">https://recipes.example.com/pierogi</span></p>
  <div class="wa-link">
    <p class="wa-link-img text">[The page's picture: a plate of golden fried pierogi with sour cream]</p>
    <p class="wa-link-title">Pierogi from Scratch</p>
    <p class="wa-link-desc">Easier than you think</p>
    <p class="wa-link-url">recipes.example.com</p>
  </div>
  <p class="wa-time">14:20 <span class="wa-read">✓✓</span></p>
</div>

6.13 Photos and Captions

For one photo on its own, add gallery to the message and use a wa-photos one box with a single wa-photo inside, with the picture tag in it. A single photo isn't cropped into a square, so it keeps its own shape, whether it's tall or wide - a really tall one gets trimmed at the bottom, so it doesn't take over the chat. Don't forget the alt text.

To write a message under the photo, the way WhatsApp shows a caption, add a wa-caption paragraph after the photo box, before the time:

<div class="msg in tail gallery"><p class="hide"><em>Lily:</em></p>
  <p class="wa-photos one"><span class="wa-photo"><img src="https://64.media.tumblr.com/6898dc3a42cc6c7ab9729360b71366e4/ba033a52c8982cb0-bf/s2048x3072/b548d2fe61b02e530c0edd2ee6a6bd56ab73ad2c.jpg" alt="Black and white cat screaming at the camera, on a red patterned rug"></span></p>
  <p class="wa-caption">she says she wants pierogi too</p>
  <p class="wa-time">14:24</p>
</div>

The hide paragraph at the start holds the hidden label, the same as for a link card. A caption works the same way under a gallery of two, three or four photos, and wa-desc works in a single photo too, if you'd rather describe it than show it.

6.14 Photo Galleries

When several photos are sent together, WhatsApp shows them in one bubble as a grid. Add gallery to the message, put a wa-photos box inside it, and add a wa-photo span for each picture, with the picture tag inside. The box takes two, three or four to match the number of pictures, and every picture needs its alt text:

Two photos sit side by side, both tall:

<div class="msg out gallery"><p class="hide"><em>Shane:</em></p>
  <p class="wa-photos two">
    <span class="wa-photo"><img class="land" src="https://64.media.tumblr.com/a99a60f0293cf7df3604b4a6dd4705f6/ba033a52c8982cb0-cc/s1280x1920/cb4c277845d0c3ef666d16b86b75509266b795b3.jpg" alt="Black and white cat holding out a paw daintily, on a beige and green cat tree. The cat looks to be stepping into the frame from the left"></span>
    <span class="wa-photo"><img src="https://64.media.tumblr.com/45b3b47d7c42b593f6242a40153a629c/ba033a52c8982cb0-d7/s2048x3072/4e71b117e87747d78dd3d95595cecc77eec48d38.jpg" alt="Black and white cat sitting in an opened red suitcase, carry on size, on the floor behind a white door, and on a red patterned rug"></span>
  </p>
  <p class="wa-time">14:22 <span class="wa-read">✓✓</span></p>
</div>

Three photos have one tall photo on the left, with the other two stacked on the right:

<div class="msg out gallery"><p class="hide"><em>Ilya:</em></p>
  <p class="wa-photos three">
    <span class="wa-photo"><img src="https://64.media.tumblr.com/694221426fb8229480fb3fb87b528ca7/ba033a52c8982cb0-01/s1280x1920/636653581e07a970475075f480c1717b23a72c0a.jpg" alt="Black and white cat staring through a gap between a screen and a desk, with blurred cables hanging down around and blue sky behind"></span>
    <span class="wa-photo"><img src="https://64.media.tumblr.com/6898dc3a42cc6c7ab9729360b71366e4/ba033a52c8982cb0-bf/s2048x3072/b548d2fe61b02e530c0edd2ee6a6bd56ab73ad2c.jpg" alt="Black and white cat screaming at the camera, on a red patterned rug"></span>
    <span class="wa-photo"><img class="land" src="https://64.media.tumblr.com/a99a60f0293cf7df3604b4a6dd4705f6/ba033a52c8982cb0-cc/s1280x1920/cb4c277845d0c3ef666d16b86b75509266b795b3.jpg" alt="Black and white cat holding out a paw daintily, on a beige and green cat tree. The cat looks to be stepping into the frame from the left"></span>
  </p>
  <p class="wa-time">12:26 <span class="wa-read">✓✓</span></p>
</div>

Four photos make a square grid of two rows:

<div class="wa-row cont">
  <div class="msg in gallery"><p class="hide"><em>~ Rose:</em></p>
    <p class="wa-photos four">
      <span class="wa-photo"><img class="land" src="https://64.media.tumblr.com/694221426fb8229480fb3fb87b528ca7/ba033a52c8982cb0-01/s1280x1920/636653581e07a970475075f480c1717b23a72c0a.jpg" alt="Black and white cat staring through a gap between a screen and a desk, with blurred cables hanging down around and blue sky behind"></span>
      <span class="wa-photo"><img src="https://64.media.tumblr.com/6898dc3a42cc6c7ab9729360b71366e4/ba033a52c8982cb0-bf/s2048x3072/b548d2fe61b02e530c0edd2ee6a6bd56ab73ad2c.jpg" alt="Black and white cat screaming at the camera, on a red patterned rug"></span>
      <span class="wa-photo"><img class="land" src="https://64.media.tumblr.com/a99a60f0293cf7df3604b4a6dd4705f6/ba033a52c8982cb0-cc/s1280x1920/cb4c277845d0c3ef666d16b86b75509266b795b3.jpg" alt="Black and white cat holding out a paw daintily, on a beige and green cat tree. The cat looks to be stepping into the frame from the left"></span>
      <span class="wa-photo"><img src="https://64.media.tumblr.com/45b3b47d7c42b593f6242a40153a629c/ba033a52c8982cb0-d7/s2048x3072/4e71b117e87747d78dd3d95595cecc77eec48d38.jpg" alt="Black and white cat sitting in an opened red suitcase, carry on size, on the floor behind a white door, and on a red patterned rug"></span>
    </p>
    <p class="wa-time">09:19</p>
  </div>
</div>

Each photo is cropped to fit its space without getting squashed. In the four-photo layout, and for the two small photos in the three-photo layout, add class="land" to the picture tag of any photo that's wider than it is tall (see Pictures in Boxes and Circles, in the Core, Themes, and Extras chapter). WhatsApp only has these layouts, so if you want more than four photos, send a second gallery.

To describe a picture instead of showing it, put a span with wa-desc inside the wa-photo, with the description in square brackets. Galleries work in group messages too, with the who line at the top:

<div class="msg in tail gallery">
  <p class="who colour1">~ Rose<span class="hide"> </span><span class="wa-num">+353 85 123 4567</span><span class="hide">:</span></p>
  <p class="wa-photos two"><span class="wa-photo"><span class="wa-desc">[Photo of a bottle of red wine with a gold label and a very long French name]</span></span><span class="wa-photo"><span class="wa-desc">[Photo of the same bottle, held up next to Rose's very pleased face]</span></span></p>
  <p class="wa-time">09:18</p>
</div>

6.15 Typing Line

To show the other person is typing, add a typing line at the end of the messages (see Typing Line, in the Core, Themes, and Extras chapter):

<p class="typing">Lily is typing...</p>

6.16 The Message Bar

To finish off a screenshot-style chat, add the message bar at the bottom of the container, after the mob-body. It has the emoji button, the "Message" placeholder, the paperclip and camera, and the round green microphone:

<p class="wa-input">
  <span class="wa-field">
    <span>&#9786;</span>
    <span class="wa-ph">Message</span>
    <span class="wa-ic">&#128206;</span>
    <span class="wa-ic">&#128247;</span>
  </span>
  <span class="wa-mic">&#127908;</span>
</p>

For a message someone is halfway through writing, add typed to wa-ph so the words go dark and wrap onto more lines, and swap "Message" for what they're typing. WhatsApp hides the camera while you type and turns the microphone into a send arrow, so take out the camera and put &#10148; in the green circle instead:

<p class="wa-input">
  <span class="wa-field">
    <span>&#9786;</span>
    <span class="wa-ph typed">ok so about last night, I think we need to talk about what happened before your mum</span>
    <span class="wa-ic">&#128206;</span>
  </span>
  <span class="wa-mic">&#10148;</span>
</p>

6.17 Group Chats

In a group, add a who paragraph as the first line of a bubble to show who sent it. WhatsApp gives everyone their own name colour, so add one of colour1 to colour10 as well. Use the same number as the person's picture circle, so their name and picture match:

<div class="msg in tail">
  <p class="who colour4">Hayden<span class="hide">:</span></p>
  <p>should I bring the kids?</p>
  <p class="wa-time">09:13</p>
</div>

Give each person the same colour class every time, so their name stays the same colour all the way through the chat.

Or add the person's profile name to the who line instead of a colour class, like <p class="who pfp-shane">, and their name colour comes from their profile, the same in every chat (see Character Profiles, in the Core, Themes, and Extras chapter).

The who name shows at the top of the bubble whether the workskin is on or off, so it doesn't need a hidden label - just the hidden colon after it (<span class="hide">:</span>), so it reads "Hayden:" followed by the message. Your own messages have no who line, so they keep the full hidden label.

6.18 Phone Numbers and Nicknames

In a group, anyone who isn't saved in your contacts shows up as a phone number, or as the nickname they've given themselves, which starts with a ~. WhatsApp puts the number at the right-hand end of the name line. To do that, put a wa-num span inside the who paragraph:

<div class="msg in tail">
  <p class="who colour1">~ Rose<span class="hide"> </span><span class="wa-num">+353 85 123 4567</span><span class="hide">:</span></p>
  <p>DINNER PARTY. my place, saturday at 7 🥂</p>
  <p class="wa-time">09:12</p>
</div>

For someone who is saved in your contacts, just write their name and leave the number out. If you want a name in the normal text colour (for yourself, for example), leave the colour class off.

6.19 Profile Pictures in Groups

In a group, the first message in a run from one person has their round profile picture next to it. To add one, wrap the message in a wa-row and put a wa-pfp before the bubble. With no picture, wa-pfp shows the person's initials on a grey circle. To give the circle a colour, add one of colour1 to colour10, like wa-pfp colour4:

<div class="wa-row">
  <p class="wa-pfp colour4">HP</p>
  <div class="msg in tail">
    <p class="who colour4">Hayden<span class="hide">:</span></p>
    <p>should I bring the kids?</p>
    <p class="wa-time">09:13</p>
  </div>
</div>

For the next messages from the same person, WhatsApp doesn't repeat the picture, but they stay lined up with the first one. Use wa-row cont and leave the wa-pfp out. There's no who line on these, so they need the hidden label:

<div class="wa-row cont">
  <div class="msg in">
    <p><span class="hide"><em>~ Rose:</em> </span>I'm doing the lamb!!! everyone has to come</p>
    <p class="wa-time">09:12</p>
  </div>
</div>

To use a real picture instead of initials, put the picture tag inside a pfp span, inside the wa-pfp paragraph. The picture is hosted somewhere else, and its alt text describes it. The same thing works for the picture in the header:

<div class="wa-row">
  <p class="wa-pfp colour1"><span class="pfp"><img src="https://media.istockphoto.com/id/1298570775/photo/rose.jpg?s=1024x1024&w=is&k=20&c=UFPisYCT3g2Vm04F2E5zrhtUWqDtLRLDXZisKb6Xf5s=" alt="Profile picture of Rose, a close-up photo of a rose"></span></p>
  <div class="msg in tail">
    <p class="who colour1">~ Rose<span class="hide"> </span><span class="wa-num">+353 85 123 4567</span><span class="hide">:</span></p>
    <p>DINNER PARTY. my place, saturday at 7 🥂</p>
    <p class="wa-time">09:12</p>
  </div>
</div>

If the same person turns up again and again, or in other apps too, a profile saves you adding the picture every time: <p class="wa-pfp"><span class="pfp pfp-shane"></span></p> (see Profile Pictures, in the Core, Themes, and Extras chapter). The colours for colour1 to colour10 are set in the WhatsApp CSS, so you can change them there.

6.20 Quoting a Message in a Group

Quotes in a group work the same as in a one-to-one chat, except the coloured bar on the left takes the colour of the person being quoted. Add the same colour class to the wa-quote:

<div class="msg out tail">
  <p class="wa-quote colour4"><span class="hide">[Replying to </span><b>Hayden</b><span class="hide">:</span><br>should I bring the kids?<span class="hide">]</span></p>
  <p><span class="hide"><em>Ilya:</em> </span>yes. they are better company than you</p>
  <p class="wa-time">09:14 <span class="wa-read">✓✓</span></p>
</div>

Replying to a message you sent works the same as in a one-to-one chat, with You in the quote and colour8:

<div class="msg in tail">
  <p class="who colour3">Jane<span class="hide">:</span></p>
  <p class="wa-quote colour8"><span class="hide">[Replying to </span><b>You</b><span class="hide">:</span><br>yes. they are better company than you<span class="hide">]</span></p>
  <p>be nice</p>
  <p class="wa-time">09:15</p>
</div>

WhatsApp can also show the phone number of someone who isn't in your contacts at the right of their name in a quote. Put it in a span with wa-num, inside the <b>:

<div class="msg out tail">
  <p class="wa-quote colour1"><span class="hide">[Replying to </span><b>~ Rose<span class="hide"> </span><span class="wa-num">+353 85 123 4567</span></b><span class="hide">:</span><br>DINNER PARTY. my place, saturday at 7 🥂<span class="hide">]</span></p>
  <p><span class="hide"><em>Ilya:</em> </span>what do we bring?</p>
  <p class="wa-time">09:16 <span class="wa-read">✓✓</span></p>
</div>

6.21 System Notices

Notices like "Rose changed this group's icon" or "You were added" use the same mob-sys line as the date pill:

<p class="mob-sys">Rose changed this group's icon</p>

6.22 Group Header with Picture and Icons

For the full group header - back arrow, picture, group name, list of members, and the call and menu icons - use a <table> with the class wa-bar instead of the usual header paragraph. A table is the most reliable way to keep all of that in one neat row on AO3:

<table class="wa-bar">
  <tbody>
    <tr>
      <td rowspan="2" class="wa-back">&#8592;</td>
      <td rowspan="2" class="wa-pfp-cell"><p class="wa-pfp colour5">D</p></td>
      <td class="wa-title">dinner</td>
      <td rowspan="2" class="wa-actions">&#127909; &#8942;</td>
    </tr>
    <tr>
      <td class="wa-sub">Rose, Jane, Hayden, You</td>
    </tr>
  </tbody>
</table>

The table has two rows. The first row has the back arrow (wa-back), the picture (wa-pfp-cell), the group name (wa-title) and the icons (wa-actions). The back arrow, picture and icons have rowspan="2", which stretches them down across both rows. The second row only has the member list (wa-sub), which sits under the name. If the name or the member list is too long, the workskin cuts it short with "..." for you.

The picture is the same wa-pfp circle as in the group messages, so colour1 to colour10 work here too. You can use this header for a one-to-one chat as well - put "online" or "last seen..." where the member list goes, or "typing..." to show the other person is typing.

6.23 Choosing a Background

Every WhatsApp chat can have its own background, picked with a class on the container next to the theme class. Here's the same chat on four different backgrounds. The first one has no background class, so it has the normal background:

The HTML for the second one - only the last class changes:

<div class="mob wa theme-auto bg-sage">
  <p class="mob-head">Mom<span class="hide"> - </span><span>online</span></p>
  <div class="mob-body">
    <div class="msg in"><p><span class="hide"><em>Mom:</em> </span>Are you coming Sunday?</p><p class="wa-time">10:02</p></div>
    <div class="msg out"><p><span class="hide"><em>Shane:</em> </span>Yes!</p><p class="wa-time">10:03 <span class="wa-read">✓✓</span></p></div>
  </div>
</div>

The backgrounds that come with the workskin are:

  • Plain colours: bg-beige, bg-white, bg-sage, bg-sky, bg-blush, bg-lilac, bg-slate, bg-navy, bg-forest, bg-plum, bg-black
  • Gradients: bg-sunset, bg-ocean, bg-night, bg-dusk
  • Your own picture: bg-image1. A picture has to be linked from the web, so it's set up in the CSS, and the WhatsApp CSS chapter explains how. Once it's set up, you use it like any of the others: <div class="mob wa theme-auto bg-image1">

Note: a background class overrides the light and dark theme background, so pick a light or dark one to suit the theme you're using. The bubbles, ticks and text keep their theme colours on top of it.

If a chat is on one particular character's phone, you can use their profile instead: add pov- and their name to the container, like pov-shane, and the chat gets the wallpaper set in their profile, so all of their chats look the same (see Their Phone, in the Core, Themes, and Extras chapter).

A profile wallpaper can be a picture, too. Here's the same chat from Yuna's side, on her phone, with her own photo as the background:

<div class="mob wa theme-auto pov-yuna">
  <p class="mob-head">Shane<span class="hide"> - </span><span>online</span></p>
  <div class="mob-body">
    <div class="msg out"><p><span class="hide"><em>Yuna:</em> </span>Are you coming Sunday?</p><p class="wa-time">10:02 <span class="wa-read">✓✓</span></p></div>
    <div class="msg in"><p><span class="hide"><em>Shane:</em> </span>Yes!</p><p class="wa-time">10:03</p></div>
  </div>
</div>

And the line in Yuna's profile that sets it. The colour shows if the picture doesn't load, background-size: cover fills the whole chat without stretching the picture, and background-position: center keeps the middle of it in view:

#workskin .mob.wa.pov-yuna { background-color: #e8e8e8; background-image: url(https://64.media.tumblr.com/a1c0162c5542c5890e5fd9c13341513e/3b53694384f48caf-98/s1280x1920/8b2fcaaf7deb2b05c418f46c62ee729acb8ff8e4.jpg); background-size: cover; background-position: center; }

← Previous Chapter · Chapter Index · Next Chapter →