A collection of CSS add-ons and userscripts to customize your AO3 experience.
All CSS add-ons can work standalone, but for the full experience i recommend using Rosé Pine AO3 skin by @Wolfbatcat , as most of them are based on and designed to be complementary with this gorgeous site skin
this is mostly self indulgent but i thought i might share in case anyone would find anything here helpful
Note: My personal edits to Rosé Pine skin ( AO3 Rosé Pine — Closer to Home ) lives in a separate Fork, it restores some of the default AO3 interface aesthetics to the theme
You can paste them directly into an AO3 site skin:
- Log into AO3 and go to Dashboard → Skins → My Site Skins → Create Site Skin
- Give it a name, then paste the CSS into the CSS field
- Click Create and then Use to activate it
- To stack multiple snippets, either combine them into one skin or use AO3's parent skin feature to layer skins on top of each other
Some snippets on this list are marked (Stylus only) — AO3's skin editor restricts certain CSS features like
@font-face, so those need to be applied through Stylus instead.
Stylus is a browser extension that lets you inject CSS into any website, bypassing AO3's skin restrictions.
- Install Stylus for Firefox or Chrome
- Click the Stylus icon in your browser toolbar (or extensions menu)
- Navigate to the gear icon
⚙️Options/Settings→ Look for a plus icon➕Write new style - Paste the CSS and click Save
On mobile, Stylus is available through Firefox for Android. Other mobile browsers may not support extensions.
Userscripts require a script manager extension to run.
- Install Tampermonkey (or any script manager) for your browser
- Go to the script's Greasyfork page (linked in the relevant section below) and click Install
- Confirm the installation prompt
On mobile Firefox, Tampermonkey is available as an add-on and works the same way.
add-ons/CSS/hide-useless-nav-buttons.css · AO3 Skin
Hides the unclickable previous/next pagination buttons that appear when there's no page to navigate to.
A small quality-of-life tweak that keeps the interface looking clean.
add-ons/CSS/only-logo-in-header-Colored.css · AO3 Skin
Removes the " Archive of Our Own" text and keeps the AO3 logo to the header and recolors it to match the Rosé Pine skin palette.
Works as a standalone snippet if you're using a different theme but still want the logo back.
add-ons/CSS/header-padding(stylus).css · Stylus only
Complementary to AO3 Logo in Header
Adds a little breathing room to the header bar so it sits more comfortably on desktop and wider screens.
Applied via Stylus because it pairs with layout-level adjustments that work better outside AO3's skin system.
add-ons/CSS/lgbt-tags/ · AO3 Skin
Assigns colors inspired by pride flags to their corresponding tags, making them visually distinct at a glance while browsing.
any related tag will be color coded with it's corresponding flag colors, the CSS is very detailed and hopefully covers any LGBTQ+ related tag as it includes up to 30 Orientations, the showcased example in the preview below doesn't cover all of them
Comes in two versions:
lgbt-tags-light.css— for light themeslgbt-tags-dark.css— for dark themes
Credits:
based on a CSS by @Wolfbatcat
inspired by Highlight AO3 Tags's pride tags by mistbornhero on Tumblr
add-ons/CSS/custom-fonts(stylus).css · Stylus only
mobile devices are very limited regarding font options, that's why your custom font doesnt apply on your mobile, because AO3's skin editor doesn't support @font-face, which is needed to load custom fonts.
This snippet lets you load any font using its host URL (from Google Fonts, GitHub, etc.) through Stylus instead.
the CSS includes all Fonts recommended by @Wolfbatcat in the Rosé Pine Site Skin instructions.
— Works on desktop too if you don't have the font installed
the easiest method is through GitHub,
simply search up the font name and see if the font designer is hosting it on github (which is most likely), otherwise you can host the font yourself if you want.
-
navigate to the font file on the GitHub repo and copy its link ..
this should be the URL structure:
https://github.com/[user]/[repo]/blob/[branch]/[path]note: preferably choose the font file that ends with
.woff2as this is the web font format and its most effecient for websites -
next you must convert the URL into a JSDelivr CDN link for it to work
- you can simply paste the file URL you copied to this tool where it will convert it into a JSDelivr URL
or if you wanna do the hardwork yourself, you can manually do it as well.
only do these three changes to the URL :
- Replace
github.comwithcdn.jsdelivr.net/gh - Replace
/blob/[branch]/with@[branch]/ - Keep everything after that the same
Either way the output should look like this:
FROM:
https://github.com/[user]/[repo]/blob/[branch]/[path]TO:
https://cdn.jsdelivr.net/gh/[user]/[repo]@[branch]/[path]
Alternatively, Fontonic add-on can change fonts without Stylus, but its font selection is quite limited and it loads noticeably slower.
The Stylus method is recommended — all you need is the font's CSS URL from your font host, and trust me it's worth the effort.
Platonic Ship Tags - By @Wolfbatcat
add-ons/CSS/Platonic-tags/ · AO3 Skin
Included in the Rosé Pine Site Skin instructions,
defferentiates platonic relationship tags (X&Y) with their own custom color, and it's a must-have in my opinion, especially along with AO3: Reorder Ship Tags script
Platonic-tags-light.css— for light themesPlatonic-tags-dark.css— for dark themes
ALL CREDITS TO @Wolfbatcat
Custom Fonts - By @Wolfbatcat
add-ons/CSS/custom-fonts.css · AO3 Skin
Extracted from the Rosé Pine Site Skin CSS,
sets custom site, headings, code, and work fonts. (i wanted to have it as a separate skin just because i am lazy and don't want to modify my custom fonts on every update of the skin)
- download the font
- right-click the file (TTF or OTF)
- select Install or Install for all users.
if you are on mobile you have to apply Custom Fonts for Mobile CSS for your fonts to show up there
ALL CREDITS TO @Wolfbatcat
add-ons/JavaScript/EPUB-Download-Buttons/ · Greasyfork
Adds a convenient EPUB download button directly on blurbs so you don't have to go through the full work page then the download menu. it's simply there while you are browsing.
Two versions available:
-
V2 - Next to Work Titles — recommended
Button appears next to work titles (after author names)
- Works beautifully with AO3: Chapter Shortcuts
- Button positions itself after any existing buttons
-
V1 - Bottom-Left Corner — kept for anyone who prefers this style (looks better on desktop)
Button appears at bottom-left of work blurbs
A toolbar button i made for my Zen Browser that toggles website dark/light appearance with a single click using the built-in color-scheme preference in the browser settings.
If your skin has the prefers-color-scheme feature that auto switches the site appearance either light or dark mode according to your OS preference, you're in the right place.
you can find all the instructions and everything about how to set it up, here
works on any website that supports this feature but honestly i made it mainly for the sole purpose of enhancing my AO3 experience even more,
i am a light-mode girl but i love the skin's dark mode alot too and i wanted to enjoy it as much, and was lowkey bugged by having to go through the settings and navigate to the option to toggle the site appearance everytime,
and i thought 'cant i just turn all that into a button that is one click away and easier to access?!' that is when i set my mind into it.
note: if THE GIF preview above makes it look slower or shows latency in loading the skin colors, i assure you it's not, this is just GIF being GIF, it's a very fast and light button, enjoy.
All snippets here are my own additions or modifications unless otherwise noted.
i wouldn't have been inspired to do any of this if it weren't for discovering @Wolfbatcat's AO3 skin and scripts, go throw him flowers for all the amazing work he did
i genuinely had to start teaching myself how to edit and use CSS and JavaScript just for the sake of this newly discovered AO3 wellbeing,.. a couple weeks ago i had near zero knowledge on how to navigate any code in general, but once i realized i CAN actually customize my OWN desired experience nothing could stop me anymore.
Featured in the previews:
Other Scripts i'm also using (100%recommend):
- AO3: Advanced Blocker — VERY VERY customizable blocker for literally anything on the website, heals my OCD brain to the core, very beautiful and clean UI, basically a gem.
- AO3: Reorder Ship Tags — reorders ship tags so all platonic ships are placed at the end of the relationship tag order, for more organized and neat look.
- AO3: Quick Hide — very convenient script that lets you hide-or more like collapse- works or comments, you can control the visibility of the collapsed item which is so satisfying for some reason, i use it to hide fics that i've already read or downloaded.
- AO3: Skin Switcher — tho i no longer switch my skins much anymore but its a very helpful shortcut that saves you the bother of navigating to your skins page, either to edit or set different skins.
- AO3: Site Wizard — so basically that is all in one skin editor at your hands, you can customize the site's fonts, colors, work formatting, very straightforward and easier UI for simple skin customizations.
