❤ vegetablearian.com ❤

Site skins!!!

Some of these are more user-friendly than others.

Archive of Our Own

I've started my skin again from scratch. This time I have a copy of the default style to scrutinise, though it doesn't always help me undo the really styled style changes and keep something like the base layout...

It's super modular - you can whack it all into one skin or do whatever you want. I tried to use lots of comments to help you customise it further! (Use as many as you want in your own offline versions too - AO3 strips them out when you upload.) Just make sure every skin you want to use is a parent of the skin you're using (in a chain, or all together, it's fine - I have all my subskins as parents to my colour skin, which is parent to my mobile skin!)

I made a replacement for this very cool highlight author fandoms userscript. For mine you need the fandom number which you can look up most easily in the place you'll use it: on a profile's list of fandoms they've posted in. You can have mine and all my highlighted fandoms to start you off :)

If you just plug mine in you'll get terminals for Fallout (including a yellow one for FNV), LCARS for VOY and DS9, etc.! You can add whatever you like, or simply put all your fave fandoms to read on one more-prominent style that will stand out to you when you check out an author. Or a mix :) I labelled everything so if you like to read what I like to read I've saved you some number-finding!

I get a lot of cool tips from ao3skin on tumblr, and this part is almost entirely from them. It simplifies more than it actually styles: it flattens buttons, hides hits and the clear history button. It's all labelled so you can easily use just one part.

If you get annoyed by works showing umbrella fandom tags unnecessarily, you might like my tag hiding skin. It's set up specifically to hide the "Fallout (Video Games)", "Dragon Age (Video Games)" and "Dragon Age - All Media Types" tags that make it so hard for me to see at a glance what's really a crossover (even an intra-series 'crossover'). You can use it for those, more like that, or anything.

It could be used easily for something like hiding tags you consider spoilers, like maybe death-related ones, or the flat-out 'happy ending' 'sad ending' ones.

For actually hiding works based on tags, rather than just hiding tags, you can't do better than ao3 savior.

If you're a more forgiving person than me, you could use my skin to simply hide annoying tags like "I'm bad at tagging" instead of obliterating their fics entirely with ao3 savior...

Now it's time for the real skin :) Features:

  • Pretty colours! Mostly purple, with rainbow accents. No ugly default grey shadows everywhere
  • Lots of changes to tags:
    • Colour-coded archive warnings (green for none, black for death, red for rape/underage, orange for violence, and a neutral blue for 'chose not to use')
    • Two pretty gradients for ship and character tags - and a separate line for each category. They also start new lines rather than break
    • Smaller, generally diminished freeforms, so even when they're overused they're less annoying
    • All tags separated by spaces instead of commas
  • New styling for stats: language, word count and chapters are prominent, the others are diminished
  • Fun rainbow + pink kudos listing to celebrate all the celebration :D Similarly, fun rainbow bookmark styling!
  • other stuff too probably, I am not good at documenting things but I tried really hard to comment everything there for you!

The super cool patterned background is from this site, which has a bunch more!

For mobile, you need to add another skin, which is the skin you use even on desktop.

div#chapters {
	padding: 1em;

div.favorite.module.odd {
	width: 100%;

div.latest.news.module {
	width: 100%;

In the advanced settings, under media, tick "only screen and (max-width: 42em)", and make the main skin a parent. Now, this is the skin that you use, if you need it (otherwise just use the first one). Have fun!


This is a userContent.css job, and you'll also need to block a bunch of nonsense intrusive elements. Try this list, formatted for AdBlocker Ultimate (or you could totally just smack them all in your stylesheet with a display:none... but I am too lazy sorry):

duckduckgo.com##.related-searches, .t-m
duckduckgo.com##.text_promo, .header--text_promo
duckduckgo.com##.header__clickable, .js-hl-button
duckduckgo.com###duckbar_static > li.zcm__item:last-child
duckduckgo.com###duckbar_static > li.zcm__item:nth-child(4)
duckduckgo.com###duckbar_static > li.zcm__item:nth-child(3)
duckduckgo.com##.badge-link, .badge-link--full, .js-badge-link
duckduckgo.com##.onboarding-ed__slide, .onboarding-ed__slide-1, .js-onboarding-ed-slide, .js-onboarding-ed-slide-1
duckduckgo.com##.onboarding-ed__arrow-teaser, .js-onboarding-ed-teaser
duckduckgo.com##.onboarding-ed, .js-onboarding-ed

@-moz-document domain("duckduckgo.com") {
	body, .body--home, .site-wrapper--home{
		radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%),
		radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%)!important;
		background-size: 110px 110px!important;
		background-color: #C8D3A7!important;
		background-position: 0 0, 55px 55px!important;
	.results--main, .sidebar-modules, .js-sidebar-modules {
		background: #fafffa;
	.is-vertical-tabs-exp .header-wrap {
		background-color: #D9E6A7!important;


Patterned background from this site!