Ao3 Skins

Skins for ArchiveOfOurOwn.org and Squidgeworld.org. Some mine, some found, some reblogged. this is NOT an official OTW or AO3 account, this is just the work of a design nerd. the Skin Collection on Ao3 (feel free to add yours!)

[ao3skin]

Pinned post

Info page here

Ao3 Skin Collection here (feel free to add your skin!)

My skins:

I usually publish my skins on Ao3 where you can find updated instructions for everything. Every time some of you asks me a question I ask myself ‘is this something that other people will find useful so it’s good to add to the base skin? Is this something that is not clear in the initial instructions?’ So they are ALWAYS a work in progress I keep rewriting to make as clear as possible and as useful as possible and I keep removing bugs that people find. Which is something you can’t do with Tumblr posts that have been reblogged thousands of times 😭

SITE SKINS:

Tide: A Flat and Clean Skin (Ao3 | Tumblr post)

Minimal Skin (this is an old one and quite buggy. If you are looking for a clean minimal skin go check out Tide!) (Ao3 | Tumblr post)

Dyslexia Skin (Ao3 | Tumblr post)

Do you love the color of the sky? (Ao3 | Tumblr post)

Flat buttons (Ao3 | Tumblr post)

Multicolored text skin (sort of Beeline) (Ao3 | Tumblr post)

Pride Flags (Ao3 | Tumblr post)

Vaporwave (Ao3 | Tumblr post)

Tags with a border and different background colors (Ao3 | Tumblr)

How to hide tags (Tumblr post)

WORKSKINS:

hide/show spoilers in your work (Ao3 | Tumblr post)

Fake Fanfic Header inside your fic (Ao3 | Tumblr post)

website article (Ao3)

Switch names in a fic according to localization (Ao3 | Tumblr Post)

BOOKMARKLETS:

Y/N Replacer (Ao3 | Tumblr post)

Temporary Change Skin (Ao3 | Tumblr post)

Asks FAQs

I’m SLOOOOOOOOW at responding! But I try to respond nonetheless!

if you have questions about a specific skin of mine it’s more useful (for everyone) to leave a comment in the ao3 work where I published it! Those comments sections have become quite a useful resource for problems/personalizations and there’s a chance that your question has already been resolved there (and also a chance that if it’s not already there once you’ve asked someone else will have the same problem and will find your question helpful!)

if you have questions about skins or css in general or any technical aspect about ao3 feel free to drop an ask! I’ll try to help at the best of my abilities

if you have questions about javascript or scripts feel free to ask but be aware I’m kind of terrible at it so I might not be able to help!

You can absolutely send me links to skins you've done for me to reblog! Also i have submissions open.

Again: I’m SLOW. Be patient. 😭

I REALLY cannot emphasize enough how slow I am

[ao3commentoftheday]

Get his ass 🗡🗡 - an Ides AO3 skin

Get the code (and instructions for how to use it) on github

(note: when scrolling, works written by other people will have the same cream background as the site, but works written by you will have a yellow background)

[clockwayswrites]

So I thought this was commonly known internet navigation (but apparently it might just be those of us who have been using the internet since the 90’s who still know it). Or so it seems based on… a grumpy comment I got.

When you see an arrow like this:

It means you click it to expand out a hidden section.

It’s an accordion section/menu! It’s useful in web design to hide information that may be overwhelming under specific headers so people can only see what they need.

Here I’m using it for people who need the content warnings to be able to check, but for those who don’t need them and don’t want to be spoiled to just move right past without accidentally reading anything.

It’s still the user’s responsibility to click the arrow and read things as they need! But it is all warned. (And, yes, the all encompassing issues are already a tag on the fic, I’m just providing additonal warnings per chapter.)

[clockwayswrites]

Ah, sorry yes! For those who want the html, it’s the details and summary tags!

<details>: The Details disclosure element - HTML: HyperText Markup Language | MDN

The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.

[tsukithewolf]

Holy shit?? I didn’t know AO3 could do this. This is so useful!

[jammerific]

Support for <details> was added about a year ago, and more people should definitely know about it!

[solosvejs]

Introducing: LCAoRs!

Or... "What if they had Ao3 on the Enterprise-D?"

GitHub repository | Instructions

Because I'm a giant nerd with too many hobbies, I made an Ao3 site skin based off of the computer interface in Star Trek TNG! This was my first attempt at an entire skin, so I hope people like it :)

[sunfoxfic]

I made an AO3 work skin! This is a modified version of a skin by @electricalice / @ao3skin, which can be found here. The example I created for the skin can be found here. I don't care if you credit me but it would be very nice if you could credit ElectricAlice!

[ao3skin]

i keep trying to find a way to do this but i am very new to any sort of css-ing to know wtf is going on. so, do you know how to make the textbox black on other themes just like how it is in reversi? sorry if this has been answered before i tried poking around your blog but nothing related came up :(

this should change the vast majority of it:

textarea, input, textarea:focus, input:focus, select, select:focus {    background: #1f1f1f;    color: #ebebeb; }

I haven’t betatested it for all cases tho...

[ao3skin]

hi! your tide skin is amazing!!! i was wondering if there was any CSS coding that could be done to make the text of all fics left aligned as justified text is hard for me to process

thank you!!!

yes! add this:

#chapters .userstuff p[align="justify"] {   text-align: left; }

[ao3skin]

hi there! is there a way to remove the "add to collection" button in your bookmarks? i want my dasboard to be as minimalistic as possible and i just don't use collections at all :c thank u in advance!!

yes!

#bookmark-form fieldset dt:nth-of-type(3) {    border-bottom: none; } #bookmark-form fieldset dt label[for="bookmark_collection_names_autocomplete"], input[id="bookmark_collection_names_autocomplete"] {    display: none; }

[ao3skin]

hey! is there a way to make the bookmarker's tags bold?

yesss!

.bookmark li .meta.tags {    font-weight: bold; }

[bug-swarm]

Permanently Block tags on AO3 - Site Skin

Tutorial on how to do it: https://archiveofourown.org/works/41214669

[ao3skin]

ok so, this is INCREDIBLY COOL and could save a lot of lives.

Ti note: :has() is a new css feature (and weirdly enough, as new as it is, Ao3 allows it in skins!!) and it’s still being implemented across browsers. it works on my safari iphone, I didn’t manage to make it work on chrome (but from what I’m reading it’s available in the beta branch), and I haven’t tried it in other browsers.

but it’s definitely worth a check if it works on your device!

Also everything is very well explained in the tutorial above.

[ao3skin]

update on how it works on various browsers as of august 2022:

Desktop browsers:

it works fine on safari both on mac and on iphone

on chrome it works in the beta pre-release version. They are going to be shipping it in the next version (105, which should go out at the end of the month.) but you can also enable it by going here: chrome://flags/#enable-experimental-web-platform-features and select ‘enabled’ to the Experimental Web Platform features

on edge and opera it is scheduled in the pre-release version. still in development. it will come eventually.

on Firefox you’ll need to go in the advanced config and enable the flag

layout.css.has-selector.enabled

Mobile Browsers:

according to canIuse only safari on iphone has it fully functioning.

And Chrome for Android has it in the pre-release version which should be out soon.

I can’t find infos on firefox for android (but that one allows extensions, so you can use userscripts to hide tags)

Additional stuff to remember

the class selector a[href*=“whatever”] looks at the url of the link. so if you have two words you’ll need to add %20 where the space should be and *s* where the / should be (for ships). so like: a[href*=“Colin%20Bridgerton*s*Penelope%20Featherington”] (the simplest way is to go to the page of the tag you want to block and copy the text)

a “i” at the end will make it non case-sensitive (which helps btw) a[href*=“whatever” i]

tumblr always changes “” in the curly ones. but you’ll need to use the straight ones in css if you want them to work properly

it will search even part of the word. so “tick” will catch “ticket” “ticking” “tickling” “ticks” 

this won’t catch all the syns of the tags unfortunately. if you want a clean exlusion of a particular tag you still should use the filters

[sunfoxfic]

Okay, question: Should I replace letters with accents with something else? I want to filter out "Alya Césaire Bashing," but putting in "/tags/Alya%20Césaire%20Bashing/works" doesn't seem to work. Similarly, the | symbol doesn't seem to be behaving normally when I tried something with it.

(Also, theoretically it should work on Firefox Mobile but when I tried to access the about:config page on Firefox it didn't give me anything. I googled it and it should give me something, and it was very late at night when I tried it so I might have been doing something wrong.)

[electricalice]

yeah, I can confirm that both the | and the accented letters fuck with the css. so this thing won’t work with those kind of tags.

maybe you can do it with the partial “saire%20Bashing” it should take those tags.

[bug-swarm]

It absolutely works with accented characters and pipes. This is why the tutorial said to copy the link and use it, not type it yourself. Accented characters and pipes and other special characters have special encoding for urls. The link for the Alya Césaire Bashing tag is https://archiveofourown.org/tags/Alya%20C%C3%A9saire%20Bashing/works, so that accented e is encoded as %C3%A9. For pipes, it's something like %7C. Seriously, copy the link, don't try to guess how urls encode weird characters. It'll save your a headache

[olderthannetfic]

possibly adding "always exclude this warning tag" on ao3 wouldn't be as time-intensive as the blocking features? Since it'd reuse whatever code they've got for the "Show me adult content without checking" preference and just apply up to five filter tags. If they wanted to make it more complex than just the archive warnings it'd get heavy pretty fast though, and I don't know enough about the search function to know how many other things it'd affect bc touching code on big projects is always hell

--

Would that actually be the same code?

But yes, perma-exclude would be nice.

[cr3v]

User Muting will probably be coming sometime in the near future, going by this AO3 volunteer's tweets (EchoEkhi on twitter). No plans for tag blocking according to them.

Till then, I think the skins solution and ao3 savior could work? Link: How to: Block fanfics/tags/users & Hide too-long tag fields by vanetta

[ao3skin]

for the last few months I’ve used this bookmarklet here by reisling: https://archiveofourown.org/works/33825019

it allows me to save all the filters I want and then apply them with a click to any tag page I’m onto. And it works on mobile. Really really recommended.

[ao3skin]

hi!! i'm trying to do two things with site skins, and i was wondering if you could help with that? c:

is it possible to (and if so, how to)

1. force left alignment Only If the text is justified? i'd like to keep center aligned scene dividers if i can

2. switch certain words to other ones in fics? hopefully while taking capitals and accents into consideration

thank you!

oh, I was about to say 1 is not doable but you can definitely do it:

#chapters .userstuff p[align="justify"] {    text-align: left; }

(I’ll probably update the dyslexia skin with this when I have the time)

2 is not really doable on someone else’s fics, but you can do it on your own with a workskin...? https://archiveofourown.org/works/39385251 

[daydreamorama]

Not a site skin, but I use a greasemonkey script to replace all instances of a word with another.

var chapter = document.getElementById('chapters'); chapter.innerHTML = chapter.innerHTML.replaceAll('Xié', 'Xie');

I just change the last line for whatever I want it to find, with what i want to replace. For this example I remove the accent mark from Xie.

[ao3skin]

Hi! Good day. Sorry for intruding! I'm not good with CSS but I just want to know if it's possible to be able to use a bootstrap panel or bootstrap collapse on ao3 work skin?

a collapse is doable, some genius managed to use javascript from ao3 itself for personal skins: https://ao3skin.tumblr.com/post/679704460883329024/hi-kind-css-skin-creator-i-have-a-question-and-a

you need the bootstrap panel you can probably go ahead and take the code from bootstrap itself (it’s free...)

this should be it:

.panel {    margin-bottom: 20px;    background-color: #fff;    border: 1px solid transparent;    border-radius: 4px;    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);    box-shadow: 0 1px 1px rgb(0 0 0 / 5%); }

and then they add a border color:

.panel-default {    border-color: #ddd; }

the heading is done like this:

.panel-default>.panel-heading {    color: #333;    background-color: #f5f5f5;    border-color: #ddd; } .panel-heading {    padding: 10px 15px;    border-bottom: 1px solid transparent;    border-top-left-radius: 3px;    border-top-right-radius: 3px; }

but you’ll have to add the .collapsed and .hidden (like I explain in the link) to make the collaps work

[ao3skin]

the ao3 comment skin is the raddest thing ever omg, thank you so much for sharing!!!

:D thank you!

[ao3skin]

Do you have any skins that either put more space between tags or alternate the text/background colour so they’re easier to tell apart? thank you

yes, I have this one: https://archiveofourown.org/works/34928095

you can change the colors of the tags the way you want (the changes in my example are subtle but you can use bolder colors)

if you want more space than the example you can add this code at the end:

.commas li:after {  margin-right: 5px; }

you can change the 5px to any other number

[ao3skin]

Is there a skin that hides stats and, once youre inside a work, also hides comments and the list of people who left kudos?

This should do it:

.blurb dl.stats, .meta .stats, #kudos, #comments_placeholder, #show_comments_link, #show_comments_link_top {  display: none; }

It also removes the buttons to see the comments. But it doesn’t remove the box to leave a comment or to leave kudos!

[ao3skin]

hi there! how do you make the tag background a light gray (without the underline at the bottom?) i can't seem to figure it out :(

This should do it:

a.tag {    border-bottom: none;    background-color: #ededed; }

the underline at the bottom is tricky because it is not an underline but a border. which is probably why you were having problems!