jockles.com

All the Fannish things I do.

Megaskin by Jockles

← Previous Chapter · Chapter Index · Next Chapter →

Chapter 11: Instagram CSS

Thanks to gadaursan and shysonata, whose Repository: Work Skins and Work Skin - Instagram Image Post this module is built on. Copied and adapted from them: the post layout, hidden-text emojis, the Follow link, verified tick, stories ring, button counts, “liked by” faces, and clickable like and save buttons.

11.1 Chapter Contents

This chapter goes through the CSS for the Instagram posts and DMs in the last chapter. Posts (ig) are the interesting part, with the clickable like and save buttons and the icons drawn in CSS. DMs (igdm) are built like iMessage, so they're quick. At the end there's a section on switching parts of every post off for your whole fic, without editing each one.

11.2 Getting the CSS

The Instagram CSS is here: jockles.com/fic/megaskin/css/instagram.css. It needs the core CSS too (jockles.com/fic/megaskin/css/core.css), so paste the core into your work skin first and this underneath it.

11.3 How the Module is Laid Out

The usual order - the main rules, Links, Dark theme and Auto theme - with a Scrolling section before the themes, like Twitter/X. A post has no mob-body, so the core's scrolling doesn't reach it, and it gets its own.

11.4 The Post

#workskin .ig {
  background: #ffffff;
  color: #262626;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
}

#workskin .ig .ig-top {
  display: block;
  overflow: hidden;
  padding: 0.7em 0.9em;
  font-weight: bold;
  border-bottom: 1px solid #efefef;
}

#workskin .ig .ig-top span {
  display: block;
  font-weight: normal;
  font-size: 0.8em;
  color: #737373;
}

A post is a white card with nearly square corners, and every line in it is a block with the same 0.9em of padding on each side, so they all line up down the left. The last span in the account line drops onto its own line in small grey, for the song or the place. The other lines - ig-likes, ig-caption, ig-comment, ig-viewall and ig-time - are just the same thing with different sizes and greys. ig-time has text-transform: uppercase, which is what puts it in capitals for you.

11.5 The Photo

#workskin .ig .ig-photo {
  display: block;
  background: #efefef;
  color: #737373;
  font-style: italic;
  text-align: center;
  padding: 3em 1.5em;
  border-bottom: 1px solid #efefef;
}

#workskin .ig .ig-photo.real { padding: 0; }

#workskin .ig .ig-photo img { display: block; width: 100%; height: auto; }

Without real, it's a grey box with lots of padding, for a description. real takes the padding away so the picture goes right to the edges, at its own shape.

11.6 The Account Line Extras

#workskin .ig .ig-top .ig-menu {
  display: block;
  float: right;
  margin: 0 0 0 0.6em;
  color: inherit;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1;
}

#workskin .ig .ig-top .ig-pfp {
  float: left;
  width: 32px;
  height: 32px;
  margin: 0 0.6em 0 0;
  border-radius: 50%;
  overflow: hidden;
}

The three dots float right and the picture floats left. A floating thing only moves things that come after it in the code, which is why the menu has to go first in the line: if it came after the name, the name would already be in place and the dots would drop below it.

#workskin .ig .ig-top .ig-tick {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-left: 0.3em;
  border-radius: 50%;
  background: #0095f6;
  color: #ffffff;
  font-size: 0.7em;
  font-weight: bold;
  line-height: 1.25em;
  text-align: center;
  vertical-align: middle;
}

#workskin .ig .ig-top .ig-follow::before {
  content: "\2022\00a0";
  color: #8e8e8e;
  font-weight: normal;
}

The verified tick is a ✓ in a small blue circle. The "Follow" link gets its dot added in front with ::before: \2022 is the bullet •, and \00a0 is a space that can't be squashed, so the dot never ends up on a different line from the word.

#workskin .ig .ig-top .ig-pfp.story {
  box-sizing: content-box;
  padding: 2px;
  background-color: #d62976;
  background-image: linear-gradient(45deg, #fcaf45 0%, #fd1d1d 45%, #c13584 70%, #833ab4 100%);
}

#workskin .ig .ig-top .ig-pfp.story .pfp {
  box-sizing: border-box;
  border: 2px solid #ffffff;
}

The stories ring is three layers. The circle gets 2px of padding with Instagram's rainbow gradient behind it, so the gradient shows as a ring around the edge. Then the picture inside gets a 2px white border, which makes the gap between the ring and the photo. 45deg sets the direction of the gradient, corner to corner, and the percentages say where each colour sits. In the dark theme, the white gap turns black.

11.7 The Buttons

#workskin .ig .ig-actions {
  display: block;
  overflow: hidden;
  padding: 0.6em 0.9em 0.1em 0.9em;
  font-size: 1.1em;
  letter-spacing: 0.4em;
}

#workskin .ig .ig-actions br { display: none; }

#workskin .ig .ig-actions p:not(.ig-btn) {
  display: inline;
  margin: 0;
  padding: 0;
}

#workskin .ig .ig-btn,
#workskin .ig .ig-tog {
  display: inline-block;
  margin: 0 0.9em 0 0;
  letter-spacing: 0;
  vertical-align: middle;
}

Each button is a small block sitting in a row, with a gap to its right. AO3 likes to add line breaks and stray paragraphs between them, so the middle two rules flatten those, the same way the WhatsApp message bar does.

11.8 Clickable Buttons

This is the part that's inspired by shysonata's Instagram skin (see the credits). There's no way to run a script on AO3, so nothing can react to a click - except the <details> tag. A details tag is a box that opens and closes when you click its <summary>, and when it's open, the browser gives it an open attribute. CSS can see that, so it can show one thing when it's closed and another when it's open:

#workskin .ig .ig-tog summary {
  display: inline-block;
  list-style: none;
}

#workskin .ig .ig-tog summary::-webkit-details-marker { display: none; }

#workskin .ig .ig-tog summary::marker { content: ""; }

#workskin .ig .ig-tog .on { display: none; }

#workskin .ig .ig-tog[open] .on { display: inline; }

#workskin .ig .ig-tog[open] .bm.on { display: inline-block; }

#workskin .ig .ig-tog[open] .off { display: none; }
  • The first three rules hide the little triangle that every details tag has, in every browser - Chrome and Safari call it one thing, Firefox another, so it takes three goes.
  • Then: on parts are hidden. [open] means "when it's been clicked open", so once it's clicked, the on parts show and the off parts hide. Click again, the box closes, and it swaps back.
  • Everything lives inside the summary, which is the part that's always visible, so nothing ever actually opens - it just swaps.
#workskin .ig .ig-tog.save {
  float: right;
  margin-right: 0;
}

#workskin .ig .ig-tog.like .on.ig-icon { color: #ed4956; }

The save button floats to the far right, and a liked heart is Instagram's red.

11.9 Icons Drawn With CSS

There's no good comment bubble or bookmark among the emoji and symbols, so these two are drawn from boxes:

#workskin .ig .cm {
  display: inline-block;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-bottom-left-radius: 0;
  vertical-align: middle;
}

The comment bubble is a circle outline with one corner left square, which makes the little tail. currentColor means "the same colour as the text", so it's dark in light mode and light in dark mode without needing a rule for each.

#workskin .ig .bm {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: 14px;
  height: 18px;
  border: 2px solid currentColor;
  border-bottom: 0;
  vertical-align: middle;
}

#workskin .ig .bm::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  margin: 0 0 -3px -3px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#workskin .ig .bm.on { background: currentColor; }

#workskin .ig .bm.on::after {
  border: 0;
  background: #ffffff;
}

The bookmark is a tall box with no bottom edge. The notch at the bottom is a small square with only two edges, turned 45 degrees so they make a V, and pinned in the middle of the open bottom. Saved, the box is filled in, and the notch becomes a solid square the colour of the post, turned on its point, which cuts the V out of the fill.

11.10 Liked By, With Faces

#workskin .ig .ig-like-pfp {
  display: inline-block;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  margin-left: -8px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
}

#workskin .ig .ig-like-pfp:first-child { margin-left: 0; }

Each face is a tiny circle with a white edge, and the negative left margin pulls each one 8px back over the one before, so they overlap. The first one doesn't need pulling back. This is why the faces have to be on one line of code with no gaps: a space between two inline things takes up room, and would push them apart again.

11.11 DMs

#workskin .igdm .out {
  margin-left: auto;
  background-color: #7b3ff2;
  background-image: linear-gradient(#8a3ffc, #5b4df5);
  color: #ffffff;
}

#workskin .igdm .in { margin-right: auto; background: #efefef; color: #262626; }

DM bubbles work like iMessage's, with rounder corners and no point. Your own messages are Instagram's purple, fading slightly from top to bottom, with a plain purple underneath in case the gradient doesn't show. igdm-status is the same as iMessage's status line, and igdm-shared is a bubble with an outline instead of a fill.

11.12 Links, Scrolling and Themes

#workskin .ig .fake-link, #workskin .ig a:not(.tl) { color: #00376b; }

#workskin .ig {
  max-height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
}

Links and hashtags in posts are Instagram's dark blue. A post scrolls as a whole once it's taller than 700px, which is why the example post with a real photo has no-scroll.

The dark theme is black, with #f5f5f5 text and #a8a8a8 grey. It also turns the white edges black - the gap in the story ring, the edges of the liked-by faces and the notch in a saved bookmark - because a white edge on a black post would show. The auto theme is the same rules again inside @media (prefers-color-scheme: dark).

11.13 Switching Parts Off for the Whole Fic

You can leave anything out of a single post's HTML. But if you never want something on any post, it's quicker to switch it off once in the CSS. Paste any of these at the very bottom of your work skin - below everything else, so they win:

/* no numbers beside the buttons */
#workskin .ig .ig-actions .ig-count.ig-count.ig-count { display: none; }

/* no Follow links */
#workskin .ig .ig-top .ig-follow { display: none; }

/* no three dots menu */
#workskin .ig .ig-top .ig-menu { display: none; }

/* no verified ticks */
#workskin .ig .ig-top .ig-tick { display: none; }

/* no stories rings */
#workskin .ig .ig-top .ig-pfp.story { padding: 0; background: none; }
#workskin .ig .ig-top .ig-pfp.story .pfp { border: 0; }

/* no "View all comments" lines */
#workskin .ig .ig-viewall { display: none; }

/* the time in normal letters instead of capitals */
#workskin .ig .ig-time { text-transform: none; }
Why the counts line has the class three times

The clickable heart has its own rule that shows its on count once it's clicked, and that rule is quite specific. Repeating the class makes this rule more specific still, so the count stays hidden after a click too - the same trick as hide in the core.

Readers with the workskin switched off will still see anything you've switched off this way, because it's still in your HTML. That's usually what you want - a "Follow" or a count doesn't hurt anyone - but if it isn't, leave it out of the HTML instead.

11.14 Taking Parts Out

To make your skin shorter, search for the class names and delete every rule with them in, including in the dark and auto blocks:

  • DMs: everything starting .igdm.
  • Clickable buttons: ig-tog, bm, and the .on and .off rules. Keep ig-btn for plain buttons.
  • Liked-by faces: liked-by, ig-like-pfps and ig-like-pfp.
  • Stories ring: the two .story rules.
  • Account line extras: ig-menu, ig-tick and ig-follow each come out on their own.

← Previous Chapter · Chapter Index · Next Chapter →