#ao3 css

Card Layout

Closer to Home Layout - see instructions

Alternative Tag Styles

UPDATED: 6/17/26

When updating, be sure update all of the skins.

They're finally here! After much ✨ pain and suffering ✨, Rosé Pine skins have finally arrived. Credits to the lovely @zerafinacss for the original neos skin, which forms the bulk of the codebase.

If you notice any issues, feel free to drop a comment on AO3 or shoot me a direct message here.

Also, be sure to check out my userscripts which pair nicely with these skins or the AO3 Essentials script set.

AO3: Skin Switcher - Change skins from anywhere on the site without losing your original place.

AO3: Site Wizard - Change fonts and font sizes from anywhere on the site; automatically fix spacing issues.

AO3: Custom Favorites - Replace AO3's "Find your favorites" with custom shortcuts to any page (including filtered searches!).

AO3: Advanced Blocker - Filter works by tags, authors, titles, word counts, language, completion status, update frequency, primary pairings / characters, and much more.

AO3: Quick Hide - Quickly hide works, bookmarks, and comments while browsing. Hide things you've read or aren't interested in.

AO3: Reading Time & Quality Score - Adds customizable reading time and engagement score bars to every work. See how long a chapter will take and hide work metrics.

AO3: Script Sync - Sync any AO3 userscript's data and settings across multiple devices. Useful for all the scripts above!

AO3: Chapter Shortcuts - Adds a shortcut button to jump straight to the most recent chapter of any work.

AO3: Reorder Ship Tags: Reorders relationship tags on blurbs so platonic ships (&) appear after romantic ships (/).

Pictured: My userscripts + FicTracker (BBC's Version)

✿✿ AO3 INSTRUCTIONS ✿✿

-> Get the neos skin here

LGBTQ+ color coded tags — part of my AO3 Tweaks collection

an Add-on that color-codes LGBTQ+ tags on AO3 using their corresponding pride flag colors — so you can see at a glance what identities are in a fic while you're browsing✨

covers up to 30 orientations and the code is really detailed so hopefully any related tag variation will get picked up!

How to install?

Log into AO3 and go to Dashboard → Skins → My Site Skins → Create Site Skin (or click on the link it will take you straight to it)

Give it a name, then paste the code into the CSS field

Click Submit and then Use to activate it!

Code found here : lgbt-tags-light.css — for light themes lgbt-tags-dark.css — for dark themes

A day in Autumn (Update 06/15)

Hello again you people!

There we go with another ao3 japenese skin aesthetic stylish (?) I don't how to call it, It's just felt fitting you know?

Anyway, here are some screenshots and the link to access, feel free to comment and reach out if there is any issues!

I want to thank and credit the amazing @blackbatcats for the skin template, check them out!

Go to mine skin page and press 'use' in the bottom (I'd recommend this one since It updates automatically every time I make some changes I overlook)

'A Day in Autumn' Drive folder should the first link failed. UPDATE! I'm getting messages about errors in both methods, so I came up with a third method and put the code into a normal ao3 work, so you can access there and copy the code. Hope that helps!

Now tagging all the sweeties as promised <3

@gojoslefttoenail101 , @asetcm , @gale6281 , @hunxnuh , @burntwls , @hami-gua , @dianxia-rose

But here we go, light blue floral theme attempt #1

Edited: here is the link for the skin CSS code: https://archiveofourown.org/works/84432511

I made an MLQC text message workskin for AO3! It's inspired by the text messages in the game and it looks like this:

As you can see, you can scroll through the text messages. I posted a tutorial on AO3 about how to code it for your own text fic. Feel free to check it out if you're interested! ❤️

first find an ao3 skin css. this is the code you will input into ao3.

then go into your ao3 and tap "my dashboard" (you will have to have an account to do any of this)

okay censoring my url is pointless bc i have my tumblr in my ao3 bio but whatever

now go to skins

next tap create site skin

so it's gonna look like this

make sure it says site skin in the first one.

put a unique title like poopydoopy33 or something.

put a super cool description like "the skin with the stars" or "i have now swallowed every platypus on the face of this earth"

i highly recommend not trying to give it an icon it's just ragebait

apply to make public was disabled on ao3 so don't check that box

and then paste in the css you have into the css box.

now scroll down and tap submit at the bottom

ok so on the new page you just scroll to the very bottom and tap use or preview!