jockles.com

Welcome to the megaskin, my complete socmed fic workskin of doom.

1.1 Chapter Contents

• 1.2 Setting up your work
• 1.3 Credits and sources
  • 1.3.1 Hover and Tap Translations
  • 1.3.2 iMessage
  • 1.3.3 WhatsApp
  • 1.3.4 Twitter/X
  • 1.3.5 Instagram
  • 1.3.6 Tumblr
  • 1.3.7 Email
  • 1.3.8 Discord

This workskin aims to make it as easy as possible to have multiple types of digital media stuff in one fic - different kinds of chats, different kinds of social media posts, and inline translations that work in all of them.

The whole system is designed to be modular - you can add or remove whatever sections of the skin that are relevant to you, up to and including using the whole thing in a single fic that incorporates many types of digital content from around the internet.

Each chapter explains how to use the HTML of that particular module, how to create the various kinds of posts/containers/whatever for that platform, and what each bit of the code is doing so that you can make your own edits where required. It will then be followed by a chapter that explains the CSS belonging to that module, including a link to the CSS that has everything you need to stick in your own skin.

At the very end, there is a link to the full megaskin (used by this fic) so that you can choose to just shove the whole lot in if you don't want to be picky.

About the pictures. The pictures in the examples are a mix of stock photos and photos from my own collection, which are hosted on my tumblr. All of the cat pictures are of my own cat. If a stock photo is broken, it's probably been taken down from wherever it was hosted.

Why this exists. I made this after several work skin newbies asked me how to combine multiple work skins in a complex fic with lots of different social media formats, since AO3 only lets a work use one skin at a time. I wanted something I could simply hand to them, so that it all just works: one skin that covers every format, with one tutorial to go with it.

Contents

This tutorial is split into chapters, one for each kind of social media, so you can jump straight to the one you need. Start with the Core, which also has extra bits that can be used in every chat, and info on dark mode/light mode themes for every skin element. After that, the chapters can be read in any order:

1. Getting Started, Sources and Credits (this chapter)
2. The Core, Themes, and Extras
3. The Core CSS
4. iMessage
5. iMessage CSS
6. WhatsApp
7. WhatsApp CSS
8. Twitter/X: posts, replies and quote tweets, and DMs
9. Twitter/X CSS
10. Instagram: posts and comments, and DMs
11. Instagram CSS
12. Tumblr: posts, reblogs and asks
13. Tumblr CSS
14. Email: Gmail emails and generic email windows
15. Email CSS
16. Discord
17. Discord CSS
18. The full megaskin: every module in one skin, at the very end

Getting started

1.2 Setting up your work

First you will have to create the workskin for yourself in your own workskin lists. I have a megaskin for myself that has every module, and if you pick only a few modules I'd recommend reminding yourself which ones you've added in the description.

When you create the fic itself, open the HTML editor in AO3 (the HTML tab, not Rich Text) and paste the code in. Then select the work skin under Select Work Skin on the posting form.

My advice: keep hold of your HTML in a code editor (there are plenty of free ones out there) rather than in the document you write your fic in. Code editors colour in the tags and keep everything lined up, which makes your HTML much easier to read and fix. Or, if you'd rather keep it all together, add the HTML in at the end, separately from your regular rich-text prose - blocks of HTML sitting between normal rich-text prose won't paste into the HTML editor the way you want.

Do the pasting in the HTML tab and switch to Rich Text only at your own risk: Rich Text can quietly strip or rearrange the classes the skin depends on and then it breaks and you're sad.

Whenever a snippet says to put something "inside" another part, it goes between that part's opening and closing tags. (the words inside the <xx> and </xx>) Every chapter ends with a complete finished chat you can copy and edit, so you don't have to assemble the pieces yourself, but you should know enough at the end of each section to deconstruct it if you wish without breaking anything important.

One skin for everything, or one for each fic?

Some parts of the CSS contain places to put things like profile pictures and backgrounds that are likely to be fic specific, so you can choose if you want to have one skin and lots and lots of images defined, or have a different skin for each fic.

Some quirks of the code that you'll notice

One thing AO3 does when you paste HTML: if it finds words, spans or pictures sitting loose inside a <div>, it wraps them in a paragraph and turns the line breaks between them into <br /> tags, which can knock a chat out of shape. All of the code in the html examples is written so that never happens - anything that holds text or pictures directly is a <p> - so what you see when you inspect an example on the page should be exactly the code shown under it. If you write your own pieces, do the same. (AO3 also adds rel="nofollow" to every link, which is normal and doesn't change anything.)

The class names all follow the same pattern too, so once you've learnt one app the rest feel familiar. Anything that only belongs to one app starts with that app's class - tw-name for a Twitter/X name, tb-header for the top of a Tumblr post, dc-time for a Discord timestamp - and the pieces every app shares have the same name everywhere: msg, in, out, who, pfp, hide, me, colour1 to colour10, the theme classes, wide and no-scroll.

1.3 Credits and sources

The megaskin stands on the shoulders of the work skins and tutorials below, which I used as references and adapted in many places. Please visit them, leave kudos and thank their creators - I truly couldn't have done it without their guidance and much greater css fuckery skills than mine. Under each one, Added by me is the part I built myself.

Added by me, across every app: character profiles and the ten shared colours, light, dark and auto themes, and phone or full width.

1.3.1 Hover and Tap Translations

Based on: How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile) by La_Temperanza - the hover and tap swap, the brackets when Creator's Style is off, and the link trick that makes tapping work on phones.

Added by me: every translation is written in the HTML, so there's no new CSS for each one, plus hidden easter eggs.

1.3.2 iMessage

Based on: How to Make iOS Text Messages on AO3 by CodenameCarrot and La_Temperanza - picture messages, typing dots, and hidden text for readers with the style off.

Added by me: tapback reactions, delivered and read, date and time lines, group chats, green text messages and the message bar.

1.3.3 WhatsApp

Based on:

• WhatsApp group chat skin by orphan_account - the group header layout, the member list and sender names.
• Whatsapp Work Skin Template /Revamped by worlds_end_valentine - group chats, reactions, the header and per-chat backgrounds.
• Both of those are inspired by Social Media Work Skin Template: Whatsapp by worlds_end_valentine (etc_e_tal) and WhatsApp Skin by Azdaema Codes (Azdaema), which are worth a look too.

Added by me: read ticks, replies and quotes, large emoji, shared links, photo galleries, phone numbers and nicknames, and system notices.

1.3.4 Twitter/X

Based on: Twitter Work Skin Template by worlds_end_valentine - the timestamp line, liked and reposted counts, labels, the sensitive content warning, polls, pictures and videos, scrollable threads, and DM reactions, group DMs, voice messages and the DM window.

Added by me: quote tweets and Community Notes.

1.3.5 Instagram

Based on:

• Repository: Work Skins by gadaursan - the post layout and hidden text for emojis.
• Work Skin - Instagram Image Post by shysonata - the Follow link, verified tick, stories ring, button counts, “liked by” faces, and clickable like and save buttons (shysonata credits the clickable-button idea to mystyrust's fic chat, is this real?).

Added by me: Instagram DMs, with shared posts and reels, seen status and group DMs.

1.3.6 Tumblr

Based on:

• How to Make Tumblr posts on AO3 by phyripo (orphan_account) - reblog chains, asks, quote posts and chat posts.
• Tumblr-style CSS Tweaks by Aposiopesis - better reblogs and photosets.

Added by me: the green reblog badge, verified ticks and the Follow button, the notes and buttons along the bottom, and the feed background.

1.3.7 Email

Based on:

• How to insert Gmail emails in your fic by DemigodOfAgni - the Gmail layout, headers and Reply buttons.
• How to Mimic Email Windows by La_Temperanza - the generic email window: title bar, header lines, scrolling body, attachments and button bar.

Added by me: the email signature.

1.3.8 Discord

Based on:

• Discord Work Skin & Tutorial by BookKeep - most of the Discord module. BookKeep's one-class-per-character user system also inspired the character profiles, so a special thank you to them.
• 2023 Discord Theme Workskin by TrojanTeapot - consulted alongside BookKeep's (itself inspired by Discord (Dark Theme) Work Skin Guide/Preview by Heterochromia_Mars).

Added by me: spoiler images, and the Discord DM window.