AO3 Bookmarks and Site Skins

[quihi]

I like poking at websites. Archive of Our Own is a nice website because it lets you poke at it and makes it pretty easy. It really does block you from giving kudos to your own fic, as far as I can tell, and I haven't managed to do some stuff I'd like with workskins. But I have had success with site skins and bookmarks!

Bookmarks

AO3 allows you to bookmark a fic multiple times on the same account, and it allows you to bookmark unrevealed works. Given that I bookmark every single fic in a fandom and then some under a pseud, this is very handy, since it allows me to actually have personal bookmarks of them too. (Without having to wait for the day when I shift it all onto a designated account, and have to write a script for it because I'm not transferring hundreds of bookmarks by hand.) It might also be useful to have both a private and a public bookmark of the same work with different notes, or something.

It's actually pretty simple. In Mozilla Firefox, at least. I haven't tested other browsers, but it's probably similar.

1. If you're bookmarking a fic that's visible, just that you've already posted, go to the fic and grab the work ID from the URL.
   
   If you're bookmarking a fic that's unrevealed, go to the collection where it's listed, right click, and choose "Inspect Element". Click the little square with a cursor that's in the top left corner. Position your cursor, preferably at the top of the fic so the whole thing lights up blue, and click on it. In the row that's blue, double-click, and where it says "work-12345678", copy the "12345678".


2. Write this number down for later.


3. Find some random fic that you've never bookmarked before.


4. Right-click on the page and choose "Inspect Element".


5. Click on the Network tab.


6. Bookmark the fic.


7. Scroll to the top of the list in the Inspect Element half of the screen, and click the row where it says "POST" instead of "GET" in the second column.


8. On the right side, there should be a button that says "Resend". Click it and select "Edit and Resend".


9. Grab that number from earlier. Stick it in place of the existing work ID in the URLs in the "URL" box at the top and in the "Request Headers" box in the "Referer" row.


10. Click the blue box that says "Send". You should have a new bookmark on your profile within a few minutes!


11. Repeat as desired. You can use any of the rows that say "POST" as the request to edit and resend.

One thing is that when you try to edit your bookmark from the work page, only one bookmark will be shown. Both can be still edited from your profile.
Update - August 30, 2021: You can now use the unofficial AO3 API to bookmark fics multiple times. More on that another day.

Site Skin Filters

AO3 makes it easy to filter out specific fics or a specific users' fics by making them invisible with site skins. But I want to do more.
Unfortunately, because of how CSS works, you can't make fics invisible based on the required tags like I did here. You can, however, make the archive warning box a solid color that covers up the entire fic, effectively blacking it out. It's not perfect, but it doesn't require an outside tool like uBlock Origin or whatever that one AO3 recommends.

Just use Inspect Element to find the class of whichever required tag you want to block out - it'll be something like "rating-explicit" or "warning-yes" or "category-het" or "complete-no". Swap out what's in the site skin for the ones you want to block - you can have only one or as many as you like - and you will have a giant box over the fic blurb! This image is very dark and noticeable. Particularly if you're looking to cover NSFW fics in a work or school environment or something, you'd probably want to use an image that's solid white or looks like text. If the boxes are too small, increase the height and width numbers.

.rating-explicit,
.warning-yes,
.category-het,
.complete-no {
   background-color: black !important;
   background-image: url("/images/skins/textures/tiles/red-ao3.png") !important;
   background-repeat: repeat !important;
   height: 40em !important;
   width: 1500px !important;
   top: -50px;
   left: -50px;
   position: absolute;
   z-index: 5;
}

Last detail is that fic blurbs are a variable size, and this has to be a specific size. To keep the box from covering extra stuff, add this bit of code too.


li.blurb {
   overflow-y: hidden;
   overflow-x: hidden;
}

This code can be found mixed in here on my GitHub account.