astrifer-me - Tumblr blog

astrifer-me · 29 days ago

Text

Permanent Blacklists for AO3

Would you like to permanently remove fics with your squicks, triggers, and dislikes from all AO3 searches by default so that you never have to think about or encounter them again? Well now you can!

The ability to do this has actually been around for a little while but it relies on some new CSS functionality that wasn't supported on all major browsers until fairly recently (though you may still have to enable it manually on some). I'm not going to explain how this method works or how to code AO3 skins in general, as I've only dabbled in it a little and there are already some very good tutorials out there. If you want all of the details, check out these guides:

Skins and Archive Interface FAQ – The official skins guide created by AO3. Lots of good information but might be overwhelming and confusing for a beginner.

A Non-Extensive Guide on How to Start Creating a Skin for AO3 by ao3skin – Some good, fairly easy to understand, beginner info on CSS and specifically how it applies to AO3 skins.

Permablocking Specific Tags - Site Skin by Eli0t – Everything you need to know to create permablock lists. If your blacklist doesn't seem to be working as expected, check this for troubleshooting tips.

What I can offer though are some handy pre-made blacklists that you can use as-is or as a starting point to create your own so that you don't have to go to the trouble of figuring out how any of this works or hunting down relevant tags. Just copy the code, open AO3, go to My Preferences > Skins > Create Site Skin, paste it in the box, title it, and click Submit!

Note: The following lists are very specific to me and my own personal tastes. Absolutely no judgement if you love any of the things that I choose to blacklist. You do you. I just happen to like my fics fucked up and relatively canonical.

★ No Reader Fic – Hides all self-insert and reader fic.

★ No Alternate Universes – Hides anything tagged with the most common AU tags. There are so many incredibly specific AUs there's no way to list all of them and AU tagging is also extremely inconsistent from fic to fic so this blacklist may only catch 80% of AUs, but that's better than nothing. You could always exclude the entire alternate universe tag, rather than trying to list specific ones, but unfortunately canon divergence and other less extreme AUs would get caught in the crossfire, which is not worth it for me.

★ No Fluff – Hides anything tagged with the most common fluff and romance tags. I specifically left out "fluff and angst" though because sometimes that's used for things that are mostly angst with only a bit of fluff and I do love angst.

★ Bonus: No Dead Dove – This list is not mine (for obvious reasons) but I know some people may find it useful. Hides anything with the main archive warnings and many common problematic, taboo, or controversial tags. Some of these I wouldn't even classify as dead dove, they're literally just kinks, so I'd suggest reviewing the list carefully and removing any that don't apply to you.

Additional Notes:

This system doesn't work exactly the same as AO3's exclusion filters because you can't use top-level wrangled tags to block all subtags. It only blocks exact matches.

Once the blacklist is implemented you'll see no indication that anything was blocked (except for fewer fics listed on each search page); the entire blurb will be hidden. The tags and fic counts listed in the filter bar will remain unchanged. If you want more advanced features like whitelisting or adding something to indicate when a fic was removed, check out the permablocking guide by Eli0t.

Here's a link with info on which browsers currently support the new "has()" element, which this blacklist system relies on. As of right now Firefox for desktop still has to be manually enabled (for instructions see the section on flag enabling in the permablocking guide). Firefox for iOS isn't listed on this website but it seems to work fine for me.

There are other browser-specific extensions that let you permablock tags, such as this one and this one, that may be more a little more user friendly, but I've never tried them so I can't vouch for them and they may not work consistently between different devices. The good thing about doing blacklists via skins is that, after setting it up once, it should work automatically on pretty much any device (as long as you're logged in to your AO3 account).

388 notes · View notes

astrifer-me · 29 days ago

Text

AO3 Tag category coloring!

Allows you to separate each tag category (warnings-relationships-characters-freeforms) with a color

all text redacted for the sake of demonstration

siteskin css below

li.warnings a { background-color: #ff000080; } li.relationships a { background-color: #ff7b0080; } li.characters a { background-color: #ffff0080; } li.freeforms a { background-color: #00800080; }

Hex color codes can be changed to any prefered color, end each Hex color with "80" for 50% opacity

793 notes · View notes

astrifer-me · 29 days ago

Text

Here is a helpful article on how to use a site skin on AO3 to hide or warn for works that include tags about AI (except for ones that are saying they've used a spell checker or grammar checker). A friend in my Starsky and Hutch fandom found this after a group discussion we had about AI generated stories. The instructions are easy to follow and it works just fine.

110 notes · View notes

astrifer-me · 29 days ago

Text

Ao3 skins that aren't site recolors:

(why? Because I felt like making a list!)

obviously, I did not code any of these.

lets you bestow your favourite commenters a different color from the others.

Hides MCD warnings!

Helps you block tags without a third party extension

Permablocks specific stats

Creates a border around tags, for accessibility!

How to make bookmarklets for ao3

Easier reading

Blocks works with a lot of tags

Alternate tag blocker that doesn't even SHOW YOU the blocked tag in question, just a black box.

+ a tutorial on how to combine site skins to make the FREINKINSKIN >:)

435 notes · View notes

astrifer-me · 29 days ago

Text

Cut together from multiple videos because my internet kept dying in the wee hours.

Displays only the main index and bookmark index due to them being fully complete, the bookmark main page and chapter main index are also complete, just less interesting to show off. Also showing only the light skin (Epipelagic) since that's easier to work with due to my astigmatism, multiple dark modes will be released alongside it.

Works wholly within the AO3 system, bar some alignment that's accomplished with a stylus compatibility layer because AO3 still doesn't accept calc(). This is only needed on PC and will be included during the installation steps for you. (And, honestly, it still looks fine if you decide not to add it.)

Basically, what you see here is what you get. An AO3 rebuilt entirely from the ground up.

Edit: It's also WCAG AA and AAA compliant.

233 notes · View notes

astrifer-me · 29 days ago

Text

begging people to look more into ao3 skins. mostly because they're fun and also because they happen to solve some of your problems (example: i know when i've read a fic before because it darkens the title of the fic like other links)

728 notes · View notes

astrifer-me · 29 days ago

Text

[AO3 skin] Lily Garden

Dark AO3 skin with a dash of yellow

>> relationship and character tags are color coded

header is from yizaicons

Get the code here

571 notes · View notes

astrifer-me · 29 days ago

Text

EDIT: I have finally released this skin! Find it here.

I've made a few more previews of the neos site skin for AO3 to motivate myself to finally finish it soonish.

Currently, I'm planning to release three different color variations in the beginning: powder & pink, dusky dark purple and tumblr blue. Powder pink is the color scheme of the base skin. For the other ones I am creating add on skins that can be chained together with the base.

This is what the powder & pink base skin looks like:

This is what it looks like with the dusky dark purple add on (I'm struggling a bit with dark mode, but I think it looks okay):

And this is the tumblr blue add on (not only the colors are different here, but also a few other elements):

And here are a few previews for the mobile skin:

90 notes · View notes

astrifer-me · 29 days ago

Text

Replace the AO3 Icons 2.0

A while ago, I made a site skin that replaces all of the AO3 icons with new ones. I was pretty happy with it, but I wanted more options for changing the colors of the icons. So I made a new skin with customizable colors!

Here are preview images for the two example color schemes I created (default and reversi blue):

Almost all icon background colors (and a few other ones) can be changed to any color you want!

Find instructions for adding and customizing the site skin here on AO3:

389 notes · View notes

astrifer-me · 29 days ago

Text

This is for the ao3 users who enjoy color or prefer non-white backgrounds

There is a TikTok user who made a tutorial of how to make your ao3 colorful, I’ll link her profile down below cuz she has MANY diff skin tutorials

Here is her tutorial, here is her link to her page.

These are two that caught my attention, but that’s cuz I need darker colors, she has a lot of pretty and colorful themes for y’all to check out!

Enjoy!

And thank you @cloudysao3 (her TikTok and Instagram handle)

4K notes · View notes

astrifer-me · 29 days ago

Text

ao3 site skin filters to block (most) AI generated/assisted works <-- pastebin link

because i'm sick and fucking tired.

how to use: make a parent skin for your usual site skin. it sort of breaks a bit on firefox if you have too many filters in one skin, so you'll need multiple parent skins in that case. when you find more tags, you can add them by copy pasting one of the filters and replacing it with the same part of the URL for the different tag (right click on desktop>copy link/long press on mobile>copy link, get rid of the "archiveofourown.org" section, boom). to add a parent, create a new site skin, put the code in it, then go back to your usual skin and scroll down to the add parent section, type in whatever you named your filter skin, and select it, then update the skin.

if not all of the filters work (happened to me a couple times for some reason) you probably have too many in the same skin and you'll need to split them up.

this should work on any device so long as you're logged into your ao3 account. probably won't work with older browsers, though i'm not sure which ones. firefox works but is finnicky with the number of filters you can add in one skin, safari works, i can't speak for any other browser but chromium should support it.

this is every single major (more than 5 works) tag for AI generated works. unfortunately it can't catch untagged works or works with weird one-off tags like "licking chatgpt's boot" unless you add them yourself.

disclaimer that my knowledge of html and css is limited to dabbling in toyhou.se codes four years ago. for more detailed information go here or here

36 notes · View notes

astrifer-me · 29 days ago

Text

i figured out how to get both a background image and a gradient to work at the same time so here are some pastel bichrome skins!

as always, the code is a mishmash of tealtiam's teal skin with stars and ao3commentoftheday's peachy keen site skin as well as including shortening long tag fields by Xparrot on ao3

you can find the code for them here along with my monochrome ones!

253 notes · View notes

astrifer-me · 29 days ago

Text

Title: Possible Guide To Basic Code On AO3

Summary:

This is a list of helpful tips and tricks I have come across in my time using AO3. I by no means know how to code, this was all found through internet searches and trial and error. Basically a whole lot of 'fuck around and find out'. It includes things like the basics of creating a site skin (that I muddled my way through) like adding personalised colours/font/text size, how to block tags permanently (so you don't have to filter it out of every search manually), and how to add cool things like hyperlinks/drop down menus/coloured text/ bold & italics text anywhere (I know it shows you this one but it took me way too long to find this feature).

This is something I'm making up as I learn myself, so if it doesn't work please forgive me. 🙏

95 notes · View notes

astrifer-me · 29 days ago

Text

Kitty Bell's AO3 Skin!

@ivylor You asked for my AO3 skin code! I don't really know code either but I know what's vaguely happening. So I don't know where I got the main code originally but I do know that I got the stats icon code from (here). Then I think I picked bits and pieces from other places. I would like to mention I have code in there to remove buttons. This prevents me from accidentally deleting my fics. Still working on some of those pieces. If you want to delete a fic you will have to turn off the skin. Also, Ivylor you could have commented on the post, you didn't have to msg me. I thought you were a bot tbh. For next time ig. Also meant to make this earlier sorry for making you wait!

Anyways! Photos of my AO3 skin!

Code down below! WARNING THIS CODE IS VERY LONG:

Edit: If you ever need help with the skin please contact me! I will be very happy to help!

Edit Edit: SO I made a pastebin so you all can click copy so you can paste it easier in AO3! https://pastebin.com/28Ah7QMs. Again if you have troubles with the skin please don't be afraid to contact me.

div#main.profile-show.dashboard.region ul.navigation.actions li:nth-child(5) { display: none !important; }

div#main.works-edit.region ul.navigation.actions li:nth-child(2), div#main.works-edit.region ul.navigation.actions li:nth-child(3) { display: none !important; }

div#main.works-show_multiple.dashboard.region p.submit input:nth-child(2), div#main.works-show_multiple.dashboard.region p.submit input:nth-child(3) { display: none !important; }

div#main.series-show.region ul.navigation.actions li:nth-child(2) { display: none !important; }

div#main.series-show.region ul.navigation.actions li:nth-child(4) { display: none !important; }

.works-edit .navigation.actions li a[href*="orphans"] { display: none; }

.works-edit .navigation.actions li a[href*="delete"] { display: none; }

.actions a[href*="toggle_rejected"] { display: none; }

header {

background-image: url("https://i.imgur.com/MEXgrDx.png"); background-repeat: repeat; }

header .heading {

height: 12em; }

header .logo,

header h1 sup {

display: none; }

header .heading a {

padding-left: 1em; font-variant: small-caps; color: #a6894b; }

greeting .icon img {

box-shadow: none; border: 1px solid #fff; border-radius: 90%; }

greeting .dropdown .menu,

greeting .dropdown .menu a,

greeting li a {

font-variant: small-caps; color: #a6894b !important; background: #f7f2e9 !important; border: none; box-shadow: none; }

greeting .dropdown .menu a:hover,

greeting li a:hover,

a.tag:hover { background: #c8d0c1 !important; color: #fff; }

greeting .menu {

width: 12em; }

header .menu {

background: #f7f2e9; box-shadow: none; width: 20em; }

header .primary li:not(.search),

greeting li {

border: none; }

header #search {

display: none; }

header .primary {

background: #c8d0c1; box-shadow: none; border-bottom: 5px solid #d5b56e; border-top: 5px solid #d5b56e; }

header .dropdown .menu li:hover a,

header .primary li a {

font-variant: small-caps; color: #f7f2e9 !important; background: #d5b56e; border: none; box-shadow: none; }

header .dropdown:hover a,

header .primary li:not(.search) {

background: #a5b399; }

outer.wrapper {

background: #f7f2e9; }

.actions a, .action, input[type="file"], .actions input, input[type="submit"], button, .actions label,

main .actions a,

main .actions a:visited,

main .action,

main .actions input,

main input[type="submit"],

main button,

main .actions label {

background: #d5b56e; font-variant: small-caps; color: #fff; border: none; }

dashboard .actions a,

dashboard .actions a:visited {

background: #f7f2e9; border: 1px solid #d5b56e; color: #a6894b !important; font-variant: small-caps; }

.required .autocomplete, p.notice, .notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash { background: #c8d0c1; }

.current,

dashboard .current,

main .current {

background: #a5b399; color: #fff; font-variant: small-caps; border: none; }

input[type="submit"]:hover, input[type="submit"]:focus,

dashboard .actions a:hover,

dashboard .actions a:focus,

main .actions a:hover,

main input[type="submit"]:hover,

main button:hover .actions label:hover,

main .action:hover {

box-shadow: none; text-shadow: none; border: none; background: #f7f2e9; color: #a5b399; font-weight: bold; }

main a {

color: #a6894b; }

main a:visited {

color: #76826c; }

a.tag:visited { color: #a6894b !important; }

h1, h2, h3, h4, h5, h6, .heading { font-variant: small-caps; color: #d5b56e; }

.splash .module h3 { color: #a5b399; font-variant: small-caps; }

.splash .favorite li:nth-of-type(odd) a { background: none; }

fieldset { background-image: url("https://i.imgur.com/MEXgrDx.png"); background-repeat: repeat; border: 2px solid #d5b56e; box-shadow: none; }

fieldset dl, fieldset fieldset { background: #f7f2e9; color: #a6894b !important; font-variant: small-caps; border: 2px solid #d5b56e; box-shadow: none; }

input, textarea { background: #f7f2e9; border: 2px solid #d5b56e; box-shadow: none; }

span.question { background: #d5b56e; color: #fff; box-shadow: none; border: none; }

form.verbose legend, .verbose form legend { background: #f7f2e9; border: 2px solid #d5b56e; color: #a6894b; font-variant: small-caps; box-shadow: none; }

select { background: #f7f2e9; border: 1px solid #d5b56e; }

modal {

border: 5px solid #d5b56e; background: #f7f2e9; color: #76826c; }

modal .footer .action.modal-closer {

background: #d5b56e; color: #fff; border: none; box-shadow: none; }

.listbox, fieldset fieldset.listbox { background: #d5b56e; border: 2px solid #d5b56e; font-variant: small-caps; }

.listbox > .heading, .listbox > .heading a { color: #fff !important; }

.listbox > .heading a:visited { color: #76826c; }

.listbox .index { background: #f7f2e9; box-shadow: none; }

.listbox li.blurb { border: none; }

li.blurb { border: 2px solid #d5b56e; }

li.relationships a, .work .relationship a.tag { background: none; }

ol.index.group { background: #f7f2e9; }

div.comment, li.comment { border: 2px solid #d5b56e; }

.comment div.icon { border: none; }

.comment h4.byline, .comment h4.byline a { background: #d5b56e; color: #fff !important; }

.unread, .thread .even, .statistics .index li:nth-of-type(2n) { background: #c8d0c1; }

span.unread { background: #f7f2e9; color: #a6894b; border: 2px solid #d5b56e; }

.comment .icon .anonymous, .comment .icon .visitor, .index .skins .icon, .skins .primary .icon, .index .mystery .icon, .index .tag .icon, .index .tagset .icon, .abbreviated .icon .anonymous, .abbreviated .icon .visitor { background: url("https://i.imgur.com/rdqdtqz.png"); background-repeat: no-repeat; background-size: contain; border: 1px solid #d5b56e; }

a img { border-radius: 95%; border: 2px solid #fff; }

p.kudos { background: url("https://i.imgur.com/7wX03zP.png") no-repeat; }

p.kudos { color: #a6894b !important; }

dashboard.own {

background-image: url("https://i.imgur.com/MEXgrDx.png"); border: 2px solid #d5b56e; }

dashboard ul {

border: none; }

main.errors,

main.error-502,

main.error-503-maintenance {

background: url("https://i.imgur.com/FxUVd04.png") center right no-repeat; }

footer {

border-top: 5px solid #d5b56e; }

footer.region {

background: #c8d0c1; }

footer h4.heading {

color: #fff; font-variant: small-caps; font-size: 120%; }

footer,

footer a {

color: #fff; }

footer a:hover {

color: #fff; background: #d5b56e; }

dl.stats dt { display: none; }

.skins .header dl.stats dt { display: inline-block; }

dl.stats dd:nth-of-type(1)::before { background: url(https://64.media.tumblr.com/db492b00dffe5c3059151bf531bac9ea/270ee5afe68cadd6-46/s500x750/a6bc3e5d57023d005da4a1f3d11c383db8dd7df6.png); }

dl.stats dd:nth-of-type(2)::before { background: url(https://64.media.tumblr.com/f835b437a474b4b672a8d4ebe61402b8/8979adde76f2ff05-fb/s100x200/8f86556b6896e96427f5a4a54f0de7be38ddba75.png); }

dl.stats dd.language::before { display: none !important; }

dl.stats dd.kudos::before { background: url(https://64.media.tumblr.com/23a3c6f134a96386f50fb8982a353590/8b704f26c7323545-01/s100x200/31e25f0be03646918168c4d49bd2ee9733b2cd59.png); }

dl.stats dd.words::before { background: url(https://64.media.tumblr.com/fff96d500a04ddf12517a48d83b228d2/b2e751421a20aa0c-a7/s100x200/c848a67de8f463ccdafa5b60948c61a172d5fe24.png); }

dl.stats dd.chapters::before { background: url(https://64.media.tumblr.com/a8ca48310f24581ae539336583690b26/b2e751421a20aa0c-5c/s100x200/a51b914598b64c3ddf6f705b278f11a68301d443.png); }

dl.stats dd.comments::before { background: url(https://64.media.tumblr.com/7172c0bbe03a0eef7b236014dc78c905/8b704f26c7323545-78/s250x400/f37ba1ff69b5ef2ad7e5fe66b61fd748badc00d1.png); }

dl.stats dd.bookmarks::before, dl.stats dd a[href$=bookmarks]::before { background: url(https://64.media.tumblr.com/9b95d189a57699762d2262536e922ece/b2e751421a20aa0c-2a/s100x200/1aabb2ad7b90746f0469aefaa39af5b83728f8b9.png); }

dl.stats dd.hits::before { background: url(https://64.media.tumblr.com/b2b8862a356132ac1aa41e9e9f0ddd1d/b2e751421a20aa0c-9e/s100x200/dcd2bcb1adbbb8f9e1844b61aee3dd3a653531e3.png); }

dl.stats dd.collections::before { background: url(https://64.media.tumblr.com/ae825c2ad8071426c298c5b52970e294/b2e751421a20aa0c-18/s100x200/d1eb5dd259e2db588cda2100057c2c8fd9efaaf0.png); }

dl.work dl.stats dd.published::before { background: url(https://64.media.tumblr.com/7e13419071a7eeb35f48a76c7aa0ba36/b2e751421a20aa0c-5d/s250x400/7f351f60793ad683e4a9dc4de55e4ee4d625f9d2.png); }

dl.work dl.stats dd.status::before { background: url(https://64.media.tumblr.com/0ef9349a36cf808783e9488a97b64678/b2e751421a20aa0c-10/s250x400/8df1d3da298f875381822968f8e71ed4d7bcae31.png); }

ul.statistics dl.stats dd.subscriptions::before { background: url(https://64.media.tumblr.com/64db76a65209eff79515dfc23842eb54/fd0b10e0262ddb71-14/s250x400/921de73c3d5bb819f4e3c58c7c45bd4c6edfe55f.png); }

dl.stats dd.published::before, dl.stats dd.status::before { width: 0px; margin-right: 0px; }

li.collection dl.stats dd a[href$=collections]::before { background: url(https://64.media.tumblr.com/ae825c2ad8071426c298c5b52970e294/b2e751421a20aa0c-18/s100x200/d1eb5dd259e2db588cda2100057c2c8fd9efaaf0.png); }

li.collection dl.stats dd a[href$=works]::before { background: url(https://64.media.tumblr.com/f835b437a474b4b672a8d4ebe61402b8/8979adde76f2ff05-fb/s100x200/8f86556b6896e96427f5a4a54f0de7be38ddba75.png); }

li.collection dl.stats dd a[href$=bookmarks]::before { background: url(https://64.media.tumblr.com/9b95d189a57699762d2262536e922ece/b2e751421a20aa0c-2a/s100x200/1aabb2ad7b90746f0469aefaa39af5b83728f8b9.png); }

li.collection dl.stats dd a[href$=fandoms]::before { background: url(https://64.media.tumblr.com/0a2f3d28fb850907a859726916e04e6f/8979adde76f2ff05-48/s250x400/926b1499363f66438d02fdc8bbea5ce610a75395.png); }

ul.statistics dl.stats dd::before, li.work dl.stats dd::before, li.bookmark dl.stats dd::before, dl.work dl.stats dd::before, .collection dl.stats dd a[href$=collections]::before, li.collection dl.stats dd a[href$=works]::before, li.collection dl.stats dd a[href$=bookmarks]::before, li.collection dl.stats dd a[href$=fandoms]::before, li.series dl.stats dd:not(.language):not(.words):not(.chapters):not(.collections):not(.comments):not(.kudos):not(.bookmarks):not(.hits):not(.published):not(.subscriptions):nth-of-type(1)::before, li:not(.collection) dl.stats dd:not(.language):not(.words):not(.chapters):not(.collections):not(.comments):not(.kudos):not(.bookmarks):not(.hits):not(.published):not(.subscriptions):nth-of-type(2)::before, dl.stats dd:not(.bookmarks) a[href$=bookmarks]::before { display: inline-block; width: 14px; height: 14px; content: " "; background-size: 14px 14px !important; margin-right: 5px; }

382 notes · View notes

astrifer-me · 29 days ago

Text

Raspberry Delight

The css for the buttons is from a skin made by @ao3commentoftheday with the colors changed to make them more pink.

The pink icons were made by @zerafinacss

@zerafinacss also has pink stat icons that look really good with this skin. It would replace the language/words/chapters ect. with some cute pink icons.

If you want this skin, the code is under here!

First, you have to put these codes into the wizard.

After you save that, you just copy and paste this code:

#header .logo {

background-image: url("https://images.squidge.org/images/2024/03/30/AO3_imageset_pink.png");

background-size: 250px 1044px;

padding: 42px 0 0 60px;

width: 0 !important;

height: 0 !important;

background-position: -140px -749.6px;

}

#header ul.primary,

#header h2 {

box-shadow: none;

}

.required-tags .rating-notrated,

.required-tags .rating-general-audience,

.required-tags .rating-explicit,

.required-tags .rating-mature,

.required-tags .rating-teen,

.required-tags .category-femslash,

.required-tags .category-gen,

.required-tags .category-slash,

.required-tags .category-none,

.required-tags .category-het,

.required-tags .category-multi,

.required-tags .category-other,

.required-tags .complete-no,

.required-tags .complete-yes,

.required-tags .warning-yes,

.required-tags .warning-no,

.required-tags .warning-choosenotto,

.required-tags .external-work,

.status .private .text,

.status .public,

.status .hidden,

.status .rec,

.status .count,

.index .skins .icon,

.index .mystery .icon,

.index .tag .icon,

.index .tagset .icon,

.comment .icon .anonymous,

.comment .icon .visitor,

.abbreviated .icon .visitor,

.abbreviated .icon .anonymous,

.skins .primary .icon,

.admin .primary .icon,

.tagset .primary .icon,

.tag .primary .icon,

a.rss span,

p.kudos,

#symbols-key dl img,

#bookmark-symbols-key img,

img[src$="/images/skins/iconsets/default/icon_user.png"],

img[src$="/images/skins/iconsets/default/icon_collection.png"],

img[src$="/images/lockblue.png"] {

background-image: url("https://images.squidge.org/images/2024/03/30/AO3_imageset_pink.png");

background-size: 200px 835px;

}

#symbols-key dl img,

#bookmark-symbols-key img {

width: 0 !important;

height: 0 !important;

padding: 25px 0 0 25px;

}

img[src$="/images/skins/iconsets/default/rating-notrated.png"],

img[src$="/images/skins/iconsets/default/category-none.png"],

img[src$="/images/skins/iconsets/default/warning-no.png"] {

background-position: -150px 0px;

}

img[src$="/images/skins/iconsets/default/rating-general-audience.png"] {

background-position: -50px -25px;

}

img[src$="/images/skins/iconsets/default/rating-teen.png"] {

background-position: 0px -25px;

}

img[src$="/images/skins/iconsets/default/rating-mature.png"] {

background-position: -75px -25px;

}

img[src$="/images/skins/iconsets/default/rating-explicit.png"] {

background-position: -25px -25px;

}

img[src$="/images/skins/iconsets/default/category-femslash.png"] {

background-position: -25px 0px;

}

img[src$="/images/skins/iconsets/default/category-het.png"] {

background-position: -75px 0px;

}

img[src$="/images/skins/iconsets/default/category-gen.png"] {

background-position: -50px 0px;

}

img[src$="/images/skins/iconsets/default/category-multi.png"] {

background-position: -100px 0px;

}

img[src$="/images/skins/iconsets/default/category-other.png"] {

background-position: -125px 0px;

}

img[src$="/images/skins/iconsets/default/warning-choosenotto.png"] {

background-position: -125px -25px;

}

img[src$="/images/skins/iconsets/default/warning-yes.png"] {

background-position: -150px -25px;

}

img[src$="/images/skins/iconsets/default/warning-external-work.png"] {

background-position: -75px -50px;

}

img[src$="/images/skins/iconsets/default/complete-no.png"] {

background-position: -100px -25px;

}

img[src$="/images/skins/iconsets/default/complete-yes.png"] {

background-position: -175px -25px;

}

img[src$="/images/skins/iconsets/default/bookmark-rec.png"] {

background-position: -100px -50px;

}

img[src$="/images/skins/iconsets/default/bookmark-public.png"] {

background-position: -125px -50px;

}

img[src$="/images/skins/iconsets/default/bookmark-private.png"] {

background-position: -175px -50px;

}

img[src$="/images/skins/iconsets/default/bookmark-hidden.png"] {

background-position: -150px -50px;

}

img[src$="/images/skins/iconsets/default/icon_user.png"],

img[src$="/images/skins/iconsets/default/icon_collection.png"],

img[src$="/images/lockblue.png"] {

width: 0 !important;

height: 0 !important;

}

img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 100px 0 0 100px;

background-position: 0px -75px;

}

.index:not(.comment) .abbreviated img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 75px 0 0 75px;

background-position: 0px -375px;

}

.index:not(.comment) img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 55px 0 0 55px;

background-position: 0px -525px;

}

#greeting img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 1.786em 0 0 1.786em;

background-position: 0 -19px;

background-size: 201% !important;

}

img[src$="/images/skins/iconsets/default/icon_collection.png"] {

padding: 100px 0 0 100px;

background-position: -100px -175px;

}

.index img[src$="/images/skins/iconsets/default/icon_collection.png"] {

padding: 55px 0 0 55px;

background-position: -55px -525px;

}

img[src$="/images/lockblue.png"] {

padding: 15px 0 0 15px;

background-position: -155px -305px;

}

button,

.actions a,

.actions a:link,

.action,

legend .action:link,

input[type="submit"],

.actions a:visited,

.actions li label,

a.action.modal-closer {

color: #FCF5ED;

background: #A0153E;

border: 1px solid #A0153E;

box-shadow: none;

}

button:hover,

.actions a:hover,

.action:hover,

input[type="submit"]:hover {

color: #00224D;

background: #ff2071 !important;

border: 1px solid #ff2071;

box-shadow: none;

}

.actions li .current,

.current,

#dashboard .current {

color: #FCF5ED;

background: #ff2071;

border: 1px solid #ff2071;

box-shadow: none;

}

dl.meta {

border: 1px solid #a0153e;

}

.wrapper {

box-shadow: 1px 1px 5px #a0153e;

}

.actions input:focus {

border-top: 1px solid #a0153e;

border-left: 1px solid #a0153e;

box-shadow: none;

}

#dashboard .secondary {

background: #ff2071;

box-shadow: inset 2px 2px 5px #a0153e;

}

.alert .userstuff {

background: #ff91ba;

border-color: #ffd6e6;

color: #8a0035;

}

.qtip-content,

.notice:not(.required),

.comment_notice,

.kudos_notice,

ul.notes,

.caution,

.notice a {

color: #fcb6d1;

}

.notice,

.comment_notice,

.kudos_notice,

ul.notes,

.caution,

.error,

.comment_error,

.kudos_error,

.alert.flash {

background: #a0153e;

border: 1px solid #ff91ba;

}

.required,

.error,

.alert.flash {

color: #fcc2d8;

}

button:hover,

.actions a:hover,

.action:hover,

input[type="submit"]:hover {

color: #4f001b;

}

.comment img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 55px 0 0 55px !important;

background-position: 0px -525px !important;

}

^ If you only read on desktop, this last bit is unnecessary. It fixes the blank profile pics from being too big on mobile, but in doing so, it does keep the pics small on desktop

EDIT: If you have any problems with the tags on mobile, go to media and select: "max screen and (max-width: 42 em)" and it should fix it!

2K notes · View notes