Actions

Work Header

iMessage Skin

Chapter Text

Here's what this skin can do:

Numerius Negidius

Today, 11:45 AM

Aulus
Look what they're selling at the forum
Do you want me to get you one??
Numerius
YES
💖
youre the best

Today, 3:21 PM

Numerius
okay listen but what if we MADE OUR OWN
Aulus
I mean I already bought them
so

Read 3:25

Numerius
nvm then

The github page for it is here. The CodePen page is here.

These are the core principles I held to when designing this.

  1. When someone presses "Hide Creator's Style," it doesn't have to be pretty, but it should at least be coherent.
    1. You can tell which person wrote which messages.
    2. The different aspects—the texts, the character's names, the timestamps, etc—are distinct from each other.
  2. The HTML side of it should be as simple as possible.

When someone presses "Hide Creator's Style" on AO3, the skin is turned off, and the page falls back on AO3's default properties for the HTML tags. For this reason, I based it around a <dl> list. The basic setup is that <dt> is used for the characters' names, and <dd> is used for the texts themselves.

here's a <dt>
here's a <dd>
and another <dd>
and another <dt>
see?

Each section of a <dt> and it's following <dd> is wrapped in a <div> which either one of these two classes:

  • "out" (outcoming, sent from the POV phone)
  • "in" (incoming, sent from another phone)

For contact headers and time headers, I like to use the header tags so they look distinct in "Hide Creator's Style." Here's what the various headers look like:

header1

header2

header3

header4

header5
header6

I like <h1> or <h2> for contact headers, and <h4> and <h5> for time headers. If you want to use <h3> or <h6>, you need to add a line border: none; to the skin.