i made a little github repo of CSS add-ons and userscripts i've been putting together for my AO3 setup and thought i'd share in case anyone finds something useful here
also published on AO3 — archiveofourown.org/works/80873616
All CSS add-ons can work standalone, but for the full experience i recommend using Rosé Pine AO3 skin by @blackbatcats , as most of them are based on and designed to be complementary with this gorgeous site skin
also: i have a personal fork of the Rosé Pine skin ( AO3 Rosé Pine — Closer to Home ) that restores some of the default AO3 interface aesthetics if that's your thing
✦ Hide Inactive Navigation Buttons · AO3 Skin
hides the inactive prev/next buttons when there's no page to go to. tiny thing but it cleans up the interface a lot
✦ LGBTQ+ Color-Coded Tags · AO3 Skin
colors LGBTQ+ related tags with their corresponding pride flag colors. covers up to 30 orientations, comes in light and dark versions
(based on a CSS by @blackbatcats, inspired by Highlight AO3 Tags' pride tags)
✦ Custom Fonts for Mobile · Stylus only
AO3's skin editor doesn't support '@ font-face' feature so custom fonts can't load on mobile — this fixes that using Stylus extension and a font host URL. the readme has a full guide on how to get the URL for any font you want
✦ AO3 Logo in Header · AO3 Skin
removes the "Archive of Our Own" text and keeps just the logo, recolored to match the Rosé Pine palette. works with any theme though
✦ Header Padding · Stylus only
adds breathing room to the header on desktop/wider screens. companion to the logo snippet above
✦ Platonic Ship Tags · AO3 Skin
gives platonic relationship tags (X & Y) their own color so they're visually distinct from romantic ones. pairs really well with the AO3: Reorder Ship Tags script
(all credits to @blackbatcats)
✦ Custom Fonts · AO3 Skin
the fonts section extracted from the Rosé Pine skin as its own separate skin, so you don't have to touch it every time the main skin updates + added a custom font for work pages
(all credits to @blackbatcats)
✦ EPUB Download Button · Userscript · Greasyfork
adds an EPUB download button directly on work blurbs while you're browsing so you don't have to open the full work page.
two versions:
next to the work title (V2)
bottom-left corner of the blurb (V1)
✦ Unread Messages next to Favorites · Userscript · Greasyfork
Moves the Unread Messages section next to the Favorites list on the AO3 home page
(based on Charles Rockafellor's script : AO3: put new comments' notifications into home page's favorites div)
✦ Bonus: Light/Dark Toolbar Toggle for Zen & Firefox
a toolbar button that toggles your site appearance between light and dark with one click — if your skin supports 'prefers-color-scheme' feature (aka auto light/dark mode switch) this will save you so many trips to the settings. i made it mainly for AO3 but it works on any site that supports the feature
everything is pick-and-choose, installation instructions for each method (AO3 skin, Stylus, and Greasyfork) are all in the repo
→ github.com/ravenothere/AO3-Tweaks
i wouldn't have been inspired to do any of this if it weren't for discovering @blackbatcats' AO3 skin and scripts, go throw him flowers for being the reason any of this exists
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.
take this as your sign to learn that new skill ‒ or dont, your loss
Featured in the previews:
Rosé Pine AO3 site skin — specifically my version: Rosé Pine — Closer to Home
AO3: Reading Time & Quality Score
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: Comment Formatting and Preview — Adds buttons to insert text formatting to your comment, and shows a live preview box of what the comment will look like, very helpful especially for those who aren't familiar with HTML.
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.
AO3: No Re-Kudos — automatically hides the kudos button on works where you've already left kudos.
AO3: Auto Pseud — auto-selects your pseud for comments and bookmarks on AO3, based on fandom, all you need is to assign each pseud to your desired fandom.
AO3 Tag Reorder — lets you rearrange tag order when editing a work, bookmark or collection very convenient and easy to use especially for authors and bookmarkers.
jbbartram-illu
stormborns
titsay
kianamaiart
2087
izzy806
blakekathryn
