#ao3 skin codes

[atomic-asher]

In the filter tab of AO3 -- Does anyone know the code to change the color of these white boxes?

Wizard doesn't change them and I haven't been able to find the code online.

[magicaltimelady44]

so like. if anyone else, like me, still has the occasional fanfic they follow on fanfiction.net, and hasn't been getting the update emails for the longest time and was wondering if ti meant the site is on its last legs

no

no they've done something stupid as fuck

you have to opt back in to getting the emails/notifications of new chapters every six months, because they automatically assume you don't want to know when the fics you followed for the updates have updated

[adiraofthetals]

Kitty Bell's AO3 Skin!

@ivylor You asked for my AO3 skin code! I don't really know code either but I know what's vaguely happening. So I don't know where I got the main code originally but I do know that I got the stats icon code from (here). Then I think I picked bits and pieces from other places. I would like to mention I have code in there to remove buttons. This prevents me from accidentally deleting my fics. Still working on some of those pieces. If you want to delete a fic you will have to turn off the skin. Also, Ivylor you could have commented on the post, you didn't have to msg me. I thought you were a bot tbh. For next time ig. Also meant to make this earlier sorry for making you wait!

Anyways! Photos of my AO3 skin!

Code down below! WARNING THIS CODE IS VERY LONG:

Edit: If you ever need help with the skin please contact me! I will be very happy to help!

Edit Edit: SO I made a pastebin so you all can click copy so you can paste it easier in AO3! https://pastebin.com/28Ah7QMs. Again if you have troubles with the skin please don't be afraid to contact me.

div#main.profile-show.dashboard.region ul.navigation.actions li:nth-child(5) { display: none !important; }

div#main.works-edit.region ul.navigation.actions li:nth-child(2), div#main.works-edit.region ul.navigation.actions li:nth-child(3) { display: none !important; }

div#main.works-show_multiple.dashboard.region p.submit input:nth-child(2), div#main.works-show_multiple.dashboard.region p.submit input:nth-child(3) { display: none !important; }

div#main.series-show.region ul.navigation.actions li:nth-child(2) { display: none !important; }

div#main.series-show.region ul.navigation.actions li:nth-child(4) { display: none !important; }

.works-edit .navigation.actions li a[href*="orphans"] { display: none; }

.works-edit .navigation.actions li a[href*="delete"] { display: none; }

.actions a[href*="toggle_rejected"] { display: none; }

header {

background-image: url("https://i.imgur.com/MEXgrDx.png"); background-repeat: repeat; }

header .heading {

height: 12em; }

header .logo,

header h1 sup {

display: none; }

header .heading a {

padding-left: 1em; font-variant: small-caps; color: #a6894b; }

greeting .icon img {

box-shadow: none; border: 1px solid #fff; border-radius: 90%; }

greeting .dropdown .menu,

greeting .dropdown .menu a,

greeting li a {

font-variant: small-caps; color: #a6894b !important; background: #f7f2e9 !important; border: none; box-shadow: none; }

greeting .dropdown .menu a:hover,

greeting li a:hover,

a.tag:hover { background: #c8d0c1 !important; color: #fff; }

greeting .menu {

width: 12em; }

header .menu {

background: #f7f2e9; box-shadow: none; width: 20em; }

header .primary li:not(.search),

greeting li {

border: none; }

header #search {

display: none; }

header .primary {

background: #c8d0c1; box-shadow: none; border-bottom: 5px solid #d5b56e; border-top: 5px solid #d5b56e; }

header .dropdown .menu li:hover a,

header .primary li a {

font-variant: small-caps; color: #f7f2e9 !important; background: #d5b56e; border: none; box-shadow: none; }

header .dropdown:hover a,

header .primary li:not(.search) {

background: #a5b399; }

outer.wrapper {

background: #f7f2e9; }

.actions a, .action, input[type="file"], .actions input, input[type="submit"], button, .actions label,

main .actions a,

main .actions a:visited,

main .action,

main .actions input,

main input[type="submit"],

main button,

main .actions label {

background: #d5b56e; font-variant: small-caps; color: #fff; border: none; }

dashboard .actions a,

dashboard .actions a:visited {

background: #f7f2e9; border: 1px solid #d5b56e; color: #a6894b !important; font-variant: small-caps; }

.required .autocomplete, p.notice, .notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash { background: #c8d0c1; }

.current,

dashboard .current,

main .current {

background: #a5b399; color: #fff; font-variant: small-caps; border: none; }

input[type="submit"]:hover, input[type="submit"]:focus,

dashboard .actions a:hover,

dashboard .actions a:focus,

main .actions a:hover,

main input[type="submit"]:hover,

main button:hover .actions label:hover,

main .action:hover {

box-shadow: none; text-shadow: none; border: none; background: #f7f2e9; color: #a5b399; font-weight: bold; }

main a {

color: #a6894b; }

main a:visited {

color: #76826c; }

a.tag:visited { color: #a6894b !important; }

h1, h2, h3, h4, h5, h6, .heading { font-variant: small-caps; color: #d5b56e; }

.splash .module h3 { color: #a5b399; font-variant: small-caps; }

.splash .favorite li:nth-of-type(odd) a { background: none; }

fieldset { background-image: url("https://i.imgur.com/MEXgrDx.png"); background-repeat: repeat; border: 2px solid #d5b56e; box-shadow: none; }

fieldset dl, fieldset fieldset { background: #f7f2e9; color: #a6894b !important; font-variant: small-caps; border: 2px solid #d5b56e; box-shadow: none; }

input, textarea { background: #f7f2e9; border: 2px solid #d5b56e; box-shadow: none; }

span.question { background: #d5b56e; color: #fff; box-shadow: none; border: none; }

form.verbose legend, .verbose form legend { background: #f7f2e9; border: 2px solid #d5b56e; color: #a6894b; font-variant: small-caps; box-shadow: none; }

select { background: #f7f2e9; border: 1px solid #d5b56e; }

modal {

border: 5px solid #d5b56e; background: #f7f2e9; color: #76826c; }

modal .footer .action.modal-closer {

background: #d5b56e; color: #fff; border: none; box-shadow: none; }

.listbox, fieldset fieldset.listbox { background: #d5b56e; border: 2px solid #d5b56e; font-variant: small-caps; }

.listbox > .heading, .listbox > .heading a { color: #fff !important; }

.listbox > .heading a:visited { color: #76826c; }

.listbox .index { background: #f7f2e9; box-shadow: none; }

.listbox li.blurb { border: none; }

li.blurb { border: 2px solid #d5b56e; }

li.relationships a, .work .relationship a.tag { background: none; }

ol.index.group { background: #f7f2e9; }

div.comment, li.comment { border: 2px solid #d5b56e; }

.comment div.icon { border: none; }

.comment h4.byline, .comment h4.byline a { background: #d5b56e; color: #fff !important; }

.unread, .thread .even, .statistics .index li:nth-of-type(2n) { background: #c8d0c1; }

span.unread { background: #f7f2e9; color: #a6894b; border: 2px solid #d5b56e; }

.comment .icon .anonymous, .comment .icon .visitor, .index .skins .icon, .skins .primary .icon, .index .mystery .icon, .index .tag .icon, .index .tagset .icon, .abbreviated .icon .anonymous, .abbreviated .icon .visitor { background: url("https://i.imgur.com/rdqdtqz.png"); background-repeat: no-repeat; background-size: contain; border: 1px solid #d5b56e; }

a img { border-radius: 95%; border: 2px solid #fff; }

p.kudos { background: url("https://i.imgur.com/7wX03zP.png") no-repeat; }

p.kudos { color: #a6894b !important; }

dashboard.own {

background-image: url("https://i.imgur.com/MEXgrDx.png"); border: 2px solid #d5b56e; }

dashboard ul {

border: none; }

main.errors,

main.error-502,

main.error-503-maintenance {

background: url("https://i.imgur.com/FxUVd04.png") center right no-repeat; }

footer {

border-top: 5px solid #d5b56e; }

footer.region {

background: #c8d0c1; }

footer h4.heading {

color: #fff; font-variant: small-caps; font-size: 120%; }

footer,

footer a {

color: #fff; }

footer a:hover {

color: #fff; background: #d5b56e; }

dl.stats dt { display: none; }

.skins .header dl.stats dt { display: inline-block; }

dl.stats dd:nth-of-type(1)::before { background: url(https://64.media.tumblr.com/db492b00dffe5c3059151bf531bac9ea/270ee5afe68cadd6-46/s500x750/a6bc3e5d57023d005da4a1f3d11c383db8dd7df6.png); }

dl.stats dd:nth-of-type(2)::before { background: url(https://64.media.tumblr.com/f835b437a474b4b672a8d4ebe61402b8/8979adde76f2ff05-fb/s100x200/8f86556b6896e96427f5a4a54f0de7be38ddba75.png); }

dl.stats dd.language::before { display: none !important; }

dl.stats dd.kudos::before { background: url(https://64.media.tumblr.com/23a3c6f134a96386f50fb8982a353590/8b704f26c7323545-01/s100x200/31e25f0be03646918168c4d49bd2ee9733b2cd59.png); }

dl.stats dd.words::before { background: url(https://64.media.tumblr.com/fff96d500a04ddf12517a48d83b228d2/b2e751421a20aa0c-a7/s100x200/c848a67de8f463ccdafa5b60948c61a172d5fe24.png); }

dl.stats dd.chapters::before { background: url(https://64.media.tumblr.com/a8ca48310f24581ae539336583690b26/b2e751421a20aa0c-5c/s100x200/a51b914598b64c3ddf6f705b278f11a68301d443.png); }

dl.stats dd.comments::before { background: url(https://64.media.tumblr.com/7172c0bbe03a0eef7b236014dc78c905/8b704f26c7323545-78/s250x400/f37ba1ff69b5ef2ad7e5fe66b61fd748badc00d1.png); }

dl.stats dd.bookmarks::before, dl.stats dd a[href$=bookmarks]::before { background: url(https://64.media.tumblr.com/9b95d189a57699762d2262536e922ece/b2e751421a20aa0c-2a/s100x200/1aabb2ad7b90746f0469aefaa39af5b83728f8b9.png); }

dl.stats dd.hits::before { background: url(https://64.media.tumblr.com/b2b8862a356132ac1aa41e9e9f0ddd1d/b2e751421a20aa0c-9e/s100x200/dcd2bcb1adbbb8f9e1844b61aee3dd3a653531e3.png); }

dl.stats dd.collections::before { background: url(https://64.media.tumblr.com/ae825c2ad8071426c298c5b52970e294/b2e751421a20aa0c-18/s100x200/d1eb5dd259e2db588cda2100057c2c8fd9efaaf0.png); }

dl.work dl.stats dd.published::before { background: url(https://64.media.tumblr.com/7e13419071a7eeb35f48a76c7aa0ba36/b2e751421a20aa0c-5d/s250x400/7f351f60793ad683e4a9dc4de55e4ee4d625f9d2.png); }

dl.work dl.stats dd.status::before { background: url(https://64.media.tumblr.com/0ef9349a36cf808783e9488a97b64678/b2e751421a20aa0c-10/s250x400/8df1d3da298f875381822968f8e71ed4d7bcae31.png); }

ul.statistics dl.stats dd.subscriptions::before { background: url(https://64.media.tumblr.com/64db76a65209eff79515dfc23842eb54/fd0b10e0262ddb71-14/s250x400/921de73c3d5bb819f4e3c58c7c45bd4c6edfe55f.png); }

dl.stats dd.published::before, dl.stats dd.status::before { width: 0px; margin-right: 0px; }

li.collection dl.stats dd a[href$=collections]::before { background: url(https://64.media.tumblr.com/ae825c2ad8071426c298c5b52970e294/b2e751421a20aa0c-18/s100x200/d1eb5dd259e2db588cda2100057c2c8fd9efaaf0.png); }

li.collection dl.stats dd a[href$=works]::before { background: url(https://64.media.tumblr.com/f835b437a474b4b672a8d4ebe61402b8/8979adde76f2ff05-fb/s100x200/8f86556b6896e96427f5a4a54f0de7be38ddba75.png); }

li.collection dl.stats dd a[href$=bookmarks]::before { background: url(https://64.media.tumblr.com/9b95d189a57699762d2262536e922ece/b2e751421a20aa0c-2a/s100x200/1aabb2ad7b90746f0469aefaa39af5b83728f8b9.png); }

li.collection dl.stats dd a[href$=fandoms]::before { background: url(https://64.media.tumblr.com/0a2f3d28fb850907a859726916e04e6f/8979adde76f2ff05-48/s250x400/926b1499363f66438d02fdc8bbea5ce610a75395.png); }

ul.statistics dl.stats dd::before, li.work dl.stats dd::before, li.bookmark dl.stats dd::before, dl.work dl.stats dd::before, .collection dl.stats dd a[href$=collections]::before, li.collection dl.stats dd a[href$=works]::before, li.collection dl.stats dd a[href$=bookmarks]::before, li.collection dl.stats dd a[href$=fandoms]::before, li.series dl.stats dd:not(.language):not(.words):not(.chapters):not(.collections):not(.comments):not(.kudos):not(.bookmarks):not(.hits):not(.published):not(.subscriptions):nth-of-type(1)::before, li:not(.collection) dl.stats dd:not(.language):not(.words):not(.chapters):not(.collections):not(.comments):not(.kudos):not(.bookmarks):not(.hits):not(.published):not(.subscriptions):nth-of-type(2)::before, dl.stats dd:not(.bookmarks) a[href$=bookmarks]::before { display: inline-block; width: 14px; height: 14px; content: " "; background-size: 14px 14px !important; margin-right: 5px; }

[magicbeings]

How I added "instant translation" to the non-english text on my fic: a very easy 3 step guide

Hello!

I recently posted a Wolfstar fanfic called Instance of Happenstance and received a lot of compliments on a small piece of code I used. Both @marigold-hills and @leavesthatarebrown suggested I share how I did it, so here I am, finally explaining it in a Tumblr post!

Before diving into the details, I want to clarify that I didn't write this code myself.

Initially, I tried following this tutorial, but I stumbled upon a better solution in the comments of that post. The code on the tutorial itself does work, but a) it's harder to use and b) it doesn't work as well if you're planing to have multiple paragraphs that you need to show the translation on the same fic.

The solution someone presented on the comments, however, is very simple and easy to use for as many paragraphs as you need, but the explanation there wasn’t too clear, so I decided to expand on it to make it easier for others to implement.

All credit to Ao3 users La_Temperaza (who wrote the orginal post) and Nikkie2571 (who posted this code on the comments).

What Does This Code Do?

This code adds an interactive feature to your fanfic, allowing readers to hover over a specific paragraph (or tap on it if they’re on mobile) to instantly change the text to something else — also set by you.

While this can be used for various purposes, I think it's particularly useful to display instant translations of non-English dialogue/text directly in the story. The code offers a much smoother alternative to the clunky “see end notes for translation” thing—which, let's be honest, can be a pain for readers, especially in long chapters.

For example, in instance of happenstance, Sirius discovers an old journal written entirely in French. I wanted to maintain the sense of mystery and intrigue that would be lost if I simply said the journal was in French, but wrote the text in English.

This solution let me keep the best of both worlds—retaining the authenticity and the immersion of the French, while still making the story easy to follow for the readers.

Now, I know this sounds complicated, but I assure you, it's not!

Down bellow is a quick, 3 steps tutorial on how to do it. I hope this is helpful! (:

(I'm doing this on the computer, if you're doing it on mobile, the layout of the website might be different from my printscreens)

Step 1 - Create The Work Skin

I'm gonna go right to the point here, but if you want to know about Work Skins in detail, I suggest this Ao3 Article.

On your Ao3 Dashboard, click on the fourth link on the sidebar, which is "Skins".

Then, on the page that opens up, click on "My Work Skins"

Then, on the top of the page, select "Create Work Skin"

Now, you'll see the form to create your skin, which looks like this:

Leave the "Type" as "Work Skin". On the Title, you can give any name you want to your skin, but I suggest you choose the same title as your fic or something like "instant translation", so you'll know what it's about later.

You don't have to worry about any of the other fields, except for the CSS one, where you should copy and paste exactly what I'll put bellow:

#workskin .change_on_hover:not(:hover) .on, #workskin .change_on_hover:hover .off { display: none; }

So, now, you'll have something like this...

... and you just have to click "save" on the bottom of the page, and this step is done.

Step 2 - Apply the Skin you created to your fic

For a new work, click on "New Work" as usual. If it's a fic you're already posting, you can add this as well, just click the "Edit" button.

Now, on the form of your fic, on the "Associations" tab, right under the menu where you select the language of your fic, you'll see a "select a work skin" option.

On this field, you should select the workskin you just created on the previous step, searching by the name you gave it on the "Title" field.

Step 3 - Insert the text

The code we're gonna use is this one:

<p class="change_on_hover"> <span class="off"> paragraph in foreing language </span> <span class="on"> paragraph in english </span> </p>

If you have no idea what this means, hold my hand, we're gonna get through it together!

First, copy your fic’s text into the AO3 text box as you normally would. Then, switch the text box to HTML mode so you can see the underlying code.

Now, scroll down until you find the paragraph you want to translate. After pasting, it will likely look something like this:

Note how each paragraph in HTML starts with <p> and ends with </p>. These tags indicate where a paragraph begins and ends.

Our goal is to modify that first <p> tag so it tells the browser, “Hey, this paragraph is different from those other ones. It should change when hovered over or clicked.”

To do this, we’ll change <p> to <p class="change_on_hover">. This marks the paragraph as special—one that should switch text when interacted with.

Now note how instead of having a single paragraph, we need two versions of the text:

In blue, the original (non-English) text, which will be shown by default.

In red, the translated (English) text, which will appear when the reader hovers over or clicks on it.

For the original text, wrap it inside a <span class="off"> tag, ending with </span> like this:

<span class="off"> insert here the whole text of the paragraph in the foreign language </span>

For the translated text, wrap it inside a <span class="on"> tag, also ending with </span>. This will replace the original text when hovered over or clicked:

<span class="off"> insert here the whole text of the paragraph in english </span>

And don't forget to end the whole thing again with </p>

Again, here's how it looks on my fic:

With the paragraphs that come before and after the translated text, just leave them as they are. They should still start with <p> and end with </p>. No changes needed!

You can use this method for as many paragraphs as you want, whether in the same chapter or across different chapters. As long as the Work Skin is active, the effect will work seamlessly throughout your fic.

[writtenbylex]

I thought I’d share my Ao3 skin for y’all 🥰

And ikik I only removed my name in one photo… I was zooted 😆

[luvwich]

ao3 text threads, 2025

i made an extended version of my cyberpunk text threads tool with themes that emulate different messaging interfaces, and the ability to customize the colors, fonts etc. i've seen at least one person on ao3 who was using the "minimal" interface for non-cyberpunk fics, so i thought i'd generalize it a bit more!

you can also now add centered, freeform timestamps (ie "Yesterday" and "Today" in the image above), hide the per-message timestamps, and/or use a 12hr format instead of the 24h-with-seconds format

on neocities ->

i'm working on adding an avatars feature too :3 (edit: avatars have been added)

and here's a live preview of how these display on ao3!

[mint-hiddenite]

I Made An AO3 Skin!

To make it easier to copy, here's a doc for the code

Feel free to use and modify it however you like!

Special thanks to @ao3commentoftheday for inspiring this skin. Follow them for more awesome AO3 skins!

[deathsong234]

Adding unnecessary coding to AO3 to make it pretty because I can

I can and will elaborate (no one can stop me)

To do this, all you have to do is make your own site skin on ao3 and use custom css. Here's the code that I personally use, but you can just replace the tags with whatever you want. Just go to the link of the tag you want and it's the text between https://archiveofourown.org/tags/ and /works:

/* makes these tags orange */

.tags a[href*="Hurt" i],

.tags a[href*="Angst" i] {

background-color: #fff1dd;

}

/* makes tags containing this character's name green */

.tags a[href*="Bruce%20Wayne" i],

.tags a[href*="Castiel" i],

.tags a[href*="Hannibal%20Lecter" i],

.tags a[href*="Leonora%20Lesso" i],

.tags a[href*="Melinda%20May" i],

.tags a[href*="Sarah%20Alder" i],

.tags a[href*="Javert" i],

.tags a[href*="Ambrosius%20Goldenloin" i] {

background-color: #dbfff0;

}

/* makes the character tag blue */

.tags a[href*="/Bruce%20Wayne/works" i],

.tags a[href*="/Castiel%20(Supernatural)/works" i],

.tags a[href*="/Castiel/works" i],

.tags a[href*="/Hannibal%20Lecter/works" i],

.tags a[href*="/Leonora%20Lesso/works" i],

.tags a[href*="/Melinda%20May/works" i],

.tags a[href*="/Sarah%20Alder%20(Motherland:%20Fort%20Salem)/works" i],

.tags a[href*="/Javert%20(L" i],

.tags a[href*="/Ambrosius%20Goldenloin/works" i] {

background-color: #dbf7ff;

}

/* makes romantic relationship tag pink */

.tags a[href*="*s*Bruce%20Wayne/works" i],

.tags a[href*="*s*Castiel/works" i],

.tags a[href*="*s*Hannibal%20Lecter/works" i],

.tags a[href*="*s*Leonora%20Lesso/works" i],

.tags a[href*="*s*Melinda%20May/works" i],

.tags a[href*="*s*Sarah%20Alder/works" i],

.tags a[href*="*s*Ambrosius%20Goldenloin/works" i],

.tags a[href*="*s*Javert/works" i]

.tags a[href*="/tags/Bruce%20Wayne*s*" i],

.tags a[href*="/tags/Castiel*s*" i],

.tags a[href*="/tags/Hannibal%20Lecter*s*" i],

.tags a[href*="/tags/Leonora%20Lesso*s*" i],

.tags a[href*="/tags/Melinda%20May*s*" i],

.tags a[href*="/tags/Sarah%20Alder*s*" i],

.tags a[href*="/tags/Javert*s*" i],

.tags a[href*="/tags/Ambrosius%20Goldenloin*s*" i] {

background-color: #ffdbe9;

}

/* makes relationship tag purple */

.tags a[href*="%20*a*%20Bruce%20Wayne/works" i],

.tags a[href*="%20*a*%20Castiel/works" i],

.tags a[href*="%20*a*%20Hannibal%20Lecter/works" i],

.tags a[href*="%20*a*%20Leonora%20Lesso/works" i],

.tags a[href*="%20*a*%20Melinda%20May/works" i],

.tags a[href*="%20*a*%20Sarah%20Alder/works" i],

.tags a[href*="%20*a*%20Javert/works" i],

.tags a[href*="%20*a*%20Ambrosius%20Goldenloin/works" i],

.tags a[href*="/tags/Bruce%20Wayne%20*a*%20" i],

.tags a[href*="/tags/Castiel%20*a*%20" i],

.tags a[href*="/tags/Hannibal%20Lecter%20*a*%20" i],

.tags a[href*="/tags/Leonora%20Lesso%20*a*%20" i],

.tags a[href*="/tags/Melinda%20May%20*a*%20" i],

.tags a[href*="/tags/Sarah%20Alder%20*a*%20" i],

.tags a[href*="/tags/Javert%20*a*%20" i],

.tags a[href*="/tags/Ambrosius%20Goldenloin%20*a*%20" i] {

background-color: #dbdbff;

}

[mothpawbs]

hey hey! do you want a nice, dark, autumn-themed skin for your ao3 browsing?

check out my warm autumn skin here!

base code for this skin is by ElectricAlice!

[lesbian-infidelity]

do you guys wanna see what i did all day today instead of studying for my exams

[sak-supernatural]

Gave my ao3 a new look! Fucked around with bits and pieces from other skins to get it right. And I've got to say I'm impressed 😌

[adiraofthetals]

@bardicevista You asked what the code was for the circle profile picture on ao3! I don't really know code I just pick up bits and pieces from other skins but I tested it and it worked for me!

Just copy and paste it into your site skin or make a new one!

#greeting .icon img {

box-shadow: none; border: 1px solid #fff; border-radius: 90%; }

a img { border-radius: 95%; border: 2px solid #fff; }

I hope this works for you and enjoy! It should look like this:

[zerafinacss]

Preview of a site skin I'm currently working on.

It's actually supposed to be very colorful, but I made it black and white out of curiosity and actually like it almost better that way!? Oh well, I was planning on making a few different color versions anyway.

[aropride]

the awesome thing about being triggered by one of the most common kinks like literally ever is that scrolling thru ao3 is a bit like russian roulette. the second, worse version of this is when one of ur biggest triggers becomes the Big Funny Joke on tumblr dot com and nobody tags it for some reason so you get to see posts about it every single day for years. kills everyone with my rocket launcher

[e-rated-beardo]

You know when you want chat bubbles in your fic on AO3. And you know that probably thousands of other fics already have them. So instead of reinventing the wheel and coding them up yourself, even if you technically know how to, you ask someone if you could have a copy of their workskin, or you find one of the probably hundreds of guides to that exact thing that are right there on AO3, or you copy some code off, like, Anywhere On The Internet that has something that looks like what you want or—

No, I didn't do that. I got into a CSS hyperfocus and spent hours writing them from scratch, of course I did, wouldn't be me otherwise.

(Minor spoiler warning for Scorn and the Saint-Maker [link to AO3], but then again, there's not really anything here you wouldn't expect from me OR THEM, we just haven't got to that part of the story yet)

(I'm happy with them though, I think they're very pretty, and above all the markup they demand is (1) as simple as I could make it, (2) logical enough that I could also quickly hack up a script that'll convert a reasonably-formatted bit of text from Google Docs into it; and (3) makes it so that things are readable and understandable as a chat conversation without creator styles on.)

[shinshoyu]

i just spent 30 minutes editing an ao3 skin only for it to not save bc i was doing it in the ao3 editor and i fucked up and out two hashtags for a singular hex code