Work Header

WhatsApp group chat skin

Chapter Text


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.


The remaining chapters of this work cover the following:

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.