WhatsApp group chat skin

Chapter Text

Introduction

This workskin is based on two prexisting skins for formatting WhatsApp conversations, with a few tweaks and additions aimed at more easily replicating the format of a group chat with minimal effort on the HTML side. The basis of this skin comes mostly from etc_e_tal’s Social Media Work Skin Template: Whatsapp (which I’m going to refer to a few times in this introduction, so I’ll call it SMWSTW). SMWSTW in turn draws from Azdaema’s WhatsApp Skin; the present skin includes a number of features present there but not in SMWSTW:

Big emoji support;
Support for unsent text in the bottom bar;
Automatic ellipsis in the group name.

The following features from SMWSTW are also included:

Display of the sender’s name above a message, with classes for a range of colours;
A scroll bar;
Miscellaneous graphical updates;
Dark mode support.

In addition, I’ve made a few of my own additions/changes:

A list of members under the group name;
Classes for quoted text, links/@-replies, and link previews;
Automatic hiding of the sender’s name if it accompanies an outgoing message;
Alterations to the date indications (“Today” etc.) to more closely resemble the appearance of WhatsApp in 2021;
Automatic inclusion of the tick marks indicating a sent message has been read by all recipients, with options to override this;
Automatic placement of tails on the first message in a sequence, without the need to mark this message out as different from the others;
General cleanup and refactoring of the CSS classes to a. reduce the length of the CSS, and b. (more importantly) organise the HTML so that it’s as logical as possible and also requires a minimum of information to be specified in the work itself.

I have retained support for the reader class from SMWSTW but won’t be discussing that here: in short, if you wrap anything in an element with class reader, it will be hidden when the skin is active, but present otherwise, which can be of use to those with accessibility needs. SMWSTW discusses some potential metatextual additions that can be used to provide support with the help of this feature. Unfortunately, like in SMWSTW I haven’t found a way of hiding message timestamps when the skin is turned off, which could be detrimental to accessibility. I have however made these into block-level elements, which should help somewhat by keeping them separate from the main message content.

The skin has been tested on a PC running Linux and an Android phone; it looks slightly more authentic on the latter (probably in part because I don’t have the right fonts installed on my PC). If you’re viewing this tutorial on mobile, though, you will have to do some horizontal scrolling in chapter 5 to view the dark mode options, although this shouldn’t interfere with reading the code and explanations.

Navigation

The remaining chapters of this work cover the following:

Chapter 2: Code – the CSS code in its entirety;
Chapter 3: Showcase (light mode) – an example displaying the various features available;
Chapter 4: Showcase (dark mode) – as chapter 3, but in dark mode;
Chapter 5: Breakdown – an explanation of how to build a group chat using this workskin;
Chapter 6: Limitations/roadmap – some notes on what I’d like to work on in future.

You will probably have to be fairly familiar with the fundamentals of HTML to follow this – in particular, it assumes a knowledge of the usual nested structure, as well as basic terminology such as “element” and “class”. I can recommend nothing more highly than W3Schools for learning more about HTML and CSS.

Chapter Text

#workskin .reader {
  display: none;
}

#workskin .whatsapp {
  width: 340px;
  float: center;
  margin: 0 auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1;
}

#workskin .whatsapp table {
  border-collapse: collapse;
  border-spacing: 0;
}

#workskin .whatsapp div,
#workskin .whatsapp span,
#workskin .whatsapp p,
#workskin .whatsapp img,
#workskin .whatsapp table,
#workskin .whatsapp tbody,
#workskin .whatsapp thead,
#workskin .whatsapp tr,
#workskin .whatsapp th,
#workskin .whatsapp td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

#workskin .whatsapp p {
  display: inline-block;
  line-height: 1.2;
}

#workskin .whatsapp p:empty {
  display: none;
}

#workskin .whatsapp p,
#workskin .whatsapp .img {
  margin: 0;
}

#workskin .whatsapp .link {
  color: #34b4eb;
  display: inline;
}

#workskin .whatsapp .topbar {
  padding: 3px;
  height: 60px;
  width: 340px;
  color: #dee5eb;
}

#workskin .whatsapp .topbar td {
  vertical-align: middle;
  overflow: hidden;
}

#workskin .whatsapp.light .topbar {
  background-color: #075e55;
}

#workskin .whatsapp.dark .topbar {
  background-color: #232d36;
}

#workskin .whatsapp .icons {
  width: 0;
}

#workskin .whatsapp .icons::after {
  background-image: url("https://i.ibb.co/FmXV1d2/icons.png");
  background-size: 30px 15px;
  display: inline-block;
  max-width: 30px;
  width: 30px;
  height: 15px;
  margin-right: 15px;
  content: "";
}

#workskin .whatsapp .members,
#workskin .whatsapp .groupname {
  margin-right: auto;
  min-width: 180px;
  white-space: nowrap;
  max-width: 180px;
  display: flex;
}

#workskin .whatsapp .members {
  font-size: 0.75rem;
}

#workskin .whatsapp .groupname {
  font-weight: bold;
  font-size: 1.5rem;
  padding-top: 10px;
}

#workskin .whatsapp .topbar p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

#workskin .whatsapp .pp img {
  min-width: 50px;
  width: 50px;
  border-radius: 50%;
  height: 50px;
  overflow: hidden;
  margin: 5px 0;
}

#workskin .whatsapp .backarrow::after {
  content: "←";
  font-weight: bold;
  font-size: 1.5rem;
  position: relative;
}

#workskin .whatsapp .messages {
  background-repeat: repeat-y;
  background-size: 100%;
  padding: 10px;
  padding-top: 0px;
  overflow: auto;
  max-height: 530px;
  max-width: 340px;
  text-align: center;
}

#workskin .whatsapp.light .messages {
  background-image: url("https://i.ibb.co/YjT1qGH/1620176370792.jpg");
}

#workskin .whatsapp.dark .messages {
  background-image: url("https://i.ibb.co/7ksHgZs/1620176474989.jpg");
}

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

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

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

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

#workskin .whatsapp .bottombar {
  background-repeat: repeat-y;
  background-size: 100%;
  width: auto;
  height: 50px;
  padding-left: 15px;
  padding-bottom: 0px;
}

#workskin .whatsapp .typearea {
  position: relative;
  display: inline-block;
  padding: 2px 2px 2px 0;
  border-right: 2px solid #007aff;
  overflow: hidden;
  max-width: 170px;
  white-space: nowrap;
  margin-left: 2em;
  margin-top: 1em;
}

#workskin .whatsapp.dark .typearea {
  color: #dee5eb;
}

#workskin .whatsapp .typearea .from {
  display: none;
}

#workskin .whatsapp.light .bottombar {
  background-image: url("https://i.ibb.co/pyCv9Bj/1620176397802.jpg");
}

#workskin .whatsapp.dark .bottombar {
  background-image: url("https://i.ibb.co/6Dxsfrr/barra-escuracd.png");
}

#workskin .whatsapp .in,
#workskin .whatsapp .out {
  text-align: left;
}

#workskin .whatsapp .text {
  margin: 0.1em 1em;
  max-width: 75%;
  clear: both;
  position: relative;
  border-radius: 0.5em;
}

#workskin .whatsapp.light .text {
  color: #000000;
}

#workskin .whatsapp.dark .text {
  color: #dee5eb;
}

#workskin .whatsapp.light .out .text {
  float: right;
  background: #E1FFC7;
}

#workskin .whatsapp.dark .out .text {
  float: right;
  background: #054640;
}

#workskin .whatsapp.light .in .text {
  float: left;
  background: #f6f6f6;
}

#workskin .whatsapp.dark .in .text {
  float: left;
  background: #232d36;
}

#workskin .whatsapp .out > div:first-of-type {
  margin-top: 0.3em;
  border-radius: 0.5em 0 0.5em 0.5em;
}

#workskin .whatsapp .in > div:first-of-type {
  margin-top: 0.3em;
  border-radius: 0 0.5em 0.5em 0.5em;
}

#workskin .whatsapp.light .out > div:first-of-type::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 .whatsapp.light .in > div:first-of-type::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 .whatsapp .text p {
  margin: 0.25em 7px 0.25em .45em;
}

#workskin .whatsapp.dark .out > div:first-of-type::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 .whatsapp.dark .in > div:first-of-type::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 .whatsapp .img {
  border-radius: 3px;
  width: 100%;
  display: block;
}

#workskin .whatsapp .img img {
  width: 100%;
}

#workskin .whatsapp .time {
  font-size: 0.75rem;
  color: #999;
  display: inline-block;
  margin: 0;
  float: right;
  background-color: transparent;
  line-height: 1.7em;
}

#workskin .whatsapp .img .time {
  color: #ffffff;
  position: absolute;
  bottom: 5px;
  right: 6px;
}

#workskin .whatsapp .out .time::after {
  background-size: 15px 10px;
  display: inline-block;
  width: 15px;
  height: 10px;
  content: "";
  margin: 0 0 0 2px;
}

#workskin .whatsapp .out .time::after {
  background-image: url(https://i.ibb.co/SRHp95x/bluecheck.png);
}

#workskin .whatsapp .out .unread::after {
  background-image: url(https://i.ibb.co/q7thTHp/gray2.png);
}

#workskin .whatsapp .out .img .unread::after {
  background-image: url(https://i.ibb.co/mXFwkhD/white2.png);
}

#workskin .whatsapp .out .unsent::after {
  background-image: url(https://i.ibb.co/6F74Wr1/gray1.png);
}

#workskin .whatsapp .out .img .unsent::after {
  background-image: url(https://i.ibb.co/vqr7T8X/white1.png);
}

#workskin .whatsapp .info {
  font-size: 0.75rem;
  width: 100%;
  margin: 10px auto;
  text-align: center;
  display: inline-block;
  line-height: 1.3;
}

#workskin .whatsapp .info p {
  max-width: 75%;
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
}

#workskin .whatsapp.light .info p {
  background: #e3e3e3;
}

#workskin .whatsapp.dark .info p {
  background: #232d36;
  color: #999;
}

#workskin .whatsapp .from {
  font-weight: bold;
  line-height: .5em;
  display: block;
  padding-top: 8px;
}

#workskin .whatsapp .text > .from {
  font-size: 0.85rem;
  padding-bottom: 4px;
}

#workskin .whatsapp .out .text > .from {
  display: none;
}

#workskin .whatsapp .quote,
#workskin .whatsapp .preview {
  font-size: 0.75rem;
  border-radius: 0.5em;
  margin: 4px;
}

#workskin .whatsapp .preview {
  overflow: hidden;
  max-height: 5em;
}

#workskin .whatsapp.light .in .quote,
#workskin .whatsapp.light .in .preview {
  background-color: #ececec;
  color: #757575;
}

#workskin .whatsapp.light .out .quote,
#workskin .whatsapp.light .out .preview {
  background-color: #daf7c1;
  color: #757575;
}

#workskin .whatsapp.dark .in .quote,
#workskin .whatsapp.dark .in .preview {
  background-color: #171e24;
  color: #c9c9c9;
}

#workskin .whatsapp.dark .out .quote,
#workskin .whatsapp.dark .out .preview {
  background-color: #0e4037;
  color: #c9c9c9;
}

#workskin .whatsapp.light .preview-title {
  font-weight: bold;
  color: black;
}

#workskin .whatsapp.dark .preview-title {
  font-weight: bold;
  color: #dee5eb;
}

#workskin .whatsapp .preview p {
  float: left;
  height: 100%;
  : 100%
  padding: 0;
  margin: 0;
  line-height: 1.5;
}

#workskin .whatsapp .preview img {
  margin-right: 4px;
  float: left;
  height: 100%;
  width: 60px;
  max-width: 30%;
}

#workskin .whatsapp .onemoji p,
#workskin .whatsapp .twomoji p,
#workskin .whatsapp .threemoji p {
  display: block;
}

#workskin .whatsapp .onemoji p:first-of-type {
  font-size: 2.5rem;
}

#workskin .whatsapp .twomoji p:first-of-type {
  font-size: 2rem;
}

#workskin .whatsapp .threemoji p:first-of-type {
  font-size: 1.5rem;
}

#workskin .whatsapp .quote.red1 {
  border-left: 3px solid #fe0200;
}

#workskin .whatsapp .quote.red2 {
  border-left: 3px solid #d9262a;
}

#workskin .whatsapp .quote.pink {
  border-left: 3px solid #ff3e73;
}

#workskin .whatsapp .quote.blue1 {
  border-left: 3px solid #0166ff;
}

#workskin .whatsapp .quote.blue2 {
  border-left: 3px solid #297dfa;
}

#workskin .whatsapp .quote.blue3 {
  border-left: 3px solid #5887cb;
}

#workskin .whatsapp .quote.blue4 {
  border-left: 3px solid #34deff;
}

#workskin .whatsapp .quote.brown {
  border-left: 3px solid #af593e;
}

#workskin .whatsapp .quote.orange {
  border-left: 3px solid #ff861e;
}

#workskin .whatsapp .quote.yellow {
  border-left: 3px solid #ffe53a;
}

#workskin .whatsapp .quote.purple {
  border-left: 3px solid #8359ae;
}

#workskin .whatsapp .quote.green1 {
  border-left: 3px solid #01a368;
}

#workskin .whatsapp .quote.green2 {
  border-left: 3px solid #c5e17a;
}

#workskin .whatsapp .quote.green3 {
  border-left: 3px solid #22af22;
}

#workskin .whatsapp .quote.green4 {
  border-left: 3px solid #096309;
}

#workskin .whatsapp .quote.green5 {
  border-left: 3px solid #054105;
}

#workskin .whatsapp .quote.red1 .from,
#workskin .whatsapp .from.red1 {
  color: #fe0200;
}

#workskin .whatsapp .quote.red2 .from,
#workskin .whatsapp .from.red2 {
  color: #d9262a;
}

#workskin .whatsapp .quote.pink .from,
#workskin .whatsapp .from.pink {
  color: #ff3e73;
}

#workskin .whatsapp .quote.blue1 .from,
#workskin .whatsapp .from.blue1 {
  color: #0166ff;
}

#workskin .whatsapp .quote.blue2 .from,
#workskin .whatsapp .from.blue2 {
  color: #297dfa;
}

#workskin .whatsapp .quote.blue3 .from,
#workskin .whatsapp .from.blue3 {
  color: #5887cb;
}

#workskin .whatsapp .quote.blue4 .from,
#workskin .whatsapp .from.blue4 {
  color: #34deff;
}

#workskin .whatsapp .quote.brown .from,
#workskin .whatsapp .from.brown {
  color: #af593e;
}

#workskin .whatsapp .quote.orange .from,
#workskin .whatsapp .from.orange {
  color: #ff861e;
}

#workskin .whatsapp .quote.yellow .from,
#workskin .whatsapp .from.yellow {
  color: #ffe53a;
}

#workskin .whatsapp .quote.purple .from,
#workskin .whatsapp .from.purple {
  color: #8359a3;
}

#workskin .whatsapp .quote.green1 .from,
#workskin .whatsapp .from.green1 {
  color: #01a368;
}

#workskin .whatsapp .quote.green2 .from,
#workskin .whatsapp .from.green2 {
  color: #c5e17a;
}

#workskin .whatsapp .quote.green3 .from,
#workskin .whatsapp .from.green3 {
  color: #22af22;
}

#workskin .whatsapp .quote.green4 .from,
#workskin .whatsapp .from.green4 {
  color: #096309;
}

#workskin .whatsapp .quote.green5 .from,
#workskin .whatsapp .from.green5 {
  color: #054105;
}

Chapter Text

Here’s a demonstration of the features of this skin in light mode. The raw HTML code is underneath; AO3 tends to add a few sets of <p></p> here and there once this actually gets pasted into the editor, but the CSS ensures that these have no effect. Chapter 5 gives a breakdown of the various elements showcased here.

Today

St Braska 🙏

Took Yuna to the zoo today 😊

17:26

Jecht

Yevon glyph Spira Wildlife Park
Witness the glory of Yevon’s creation!

this one? https://spira-wp.sp