Hello, I am new here and I would really like to get to know that ropes but to start out, hello I am Lonely God's Muse. Reader. Writer. Lover of fanfiction. Quote collector. Seeking out new adventures and falling back in love with older ones.
I don't need AI in edits. I don't give a shit if you guys can make them kiss. Call me a boomer but you can make a good edit with just the subtext that makes people go are they together when they haven't watched the show. Splice the audio and have bad editing skills like a normal person.
just discovered ao3 twitter is in uproar because a user named [@]heatedrivalryai coded a skin for ao3 that enabled the web browser to scan fics for lingering code associated with claude ai (it turns the screen bright red if claude code is detected). I think that's hella neat! the link to the drive with instructions on how to use the skin. Its a pdf, well sourced too, and its banger!
ao3 changed their 'beta' near the logo to 'omega' for april 1st. is it possible to make a site skin that keeps it 'omega' year round? it was way to funny
Yes, that’s something that can be easily done with a site skin!
I have added the code to permanently replace "beta" with "omega" or anything else you like to my utility snippets file (in the "Hide/Modify AO3 Header Elements" section).
Edit: Since AO3 has exited open beta, the "beta" after the Website heading is completely gone now. But the code still works if you want to add it or "omega" or whatever you like back!
a guide by a newbie who knows nothing about code. please feel free to correct me and/or provide your own resources.
so if you're here at all you've likely heard of site skins on AO3. this is going to be your main "modifying medium" and the method that allows you to stay vanilla. the two other things I'll be talking about are bookmarklets, based in your bookmarks, and user scripts which you need an extension and sometimes a different browser to use. (BUT THEY'RE TOTALLY WORTH IT!!!!)
I'll be, in order, doing a quick explanation, helpful resources and a list of each kind of add-on. This is made by someone on a tablet, but a combination of common sense and provided resources should make doing this stuff on other devices fairly easy.
IF LIST ITEMS DO NOT HAVE CREDIT LISTED, I EITHER FORGOT, DON'T KNOW THE CREATOR, OR THE LINK IS TO THE CREATOR'S POST/WORK.
LIST ITEMS ARE LINKED ON THE COLORED TEXT
Site Skins!
What are they?
Site skins are the vanilla method of changing how your AO3 looks. Going to your dashboard and then skins [you need an account to use skins], you can see a list of your skins and public ones. The most popular, and likely the only skins you've seen before, primarily change the appearance of AO3. However, there is another kind of site skin that I've decided to call 'functional skins'. Functional skins differ from decorative skins in that they change things beyond font and color. My primary examples are perma-blocking tags, shortening blurb tags and adding a scroll bar, and replacing the (rating, relationships, etc.) icons with writing providing the same information.
To create a functional site skin, simply create a new skin and copy and paste your code below the CSS header! (the skin upon creation should automatically be set to a site skin with the CSS code box.)
To use a functional site skin in conjunction with a decorative site skin, set the F skin as the D's parent skin under "Advanced" in the D skin editor. If it doesn't immediately work, try flipping the parent chain around. If that doesn't work, your decorative skin might somehow block the function. (this is sadly the case with one of my functional skins.)
Resources
The best resources I can give you for site skins are Tumblr users @ao3commentoftheday and @ao3skin ! (sorry for the tag!!) Not only do they have a lot of decorative skins, they also both have functional skins!
The List
- warnings/rating/etc icons in text form
(I never really memorized the icon meanings so this is both easier for me to understand and is still colorful! I did change the text color to be lighter to work with my dark theme, though)
- shortens tag section and adds tag scroller
li.blurb .tags {
max-height: 7.5em;
overflow-y: auto;
}
(genuinely don't know where I found this one nor the link to it so here; very useful in preventing tag walls while browsing)
- perma-blocks tags (you won't have to filter them!)
(SO SOS SO SO SO AWESOME! haven't finished my list yet since it's (in my opinion) a bit tedious but definitely worth it and not all that difficult)
- rainbow text!!!
(very pretty! works with my decorative skin, too!)
- changes the color of links you've visited
(neat, but doesn't work with my deco skin :[ wanna try to figure out why!)
- my current decorative skin :]
(it glowy!!!!! prebby!!!!! need I say more)
Bookmarklets!
What are they?
Bookmarklets are bookmarks! But with javascript and therefore funky functions. Genuinely don't know how to explain them, nor how to free hand but the javascript from my understanding goes certain places in the bookmark's URL.
Resources
Again, I know nothing about javascript and therefore.... can only provide you a couple handy bookmarklets myself!
The List
- replaces y/n with specified name
(what it says on the tin! haven't tried this one out since I don't read y/n docs but it seemed helpful.)
- saved filters
(I should NOT need to explain why this one is awesome. seriously guys it's awesome)
- saved filters specifically filtering out smut tags
(This is my personal use of the last one listed! this is not an exhaustive filtering out but it's that many more that you won't have to type out next time. COPY AND PASTE THE TEXT ABOVE INTO AN EMPTY BOOKMARK'S URL TO USE!)
User Scripts!
What are they?
User scripts are where it gets spicy. They're outside the site, so can modify it beyond appearance, add new features and generally do stuff the other options can't.
To use a user script, you need a script manager extension, and some browsers don't support extensions (cough CHROME cough). Fear not, though! It's easy to download other browsers and find compatible script managers.
Resources
A good basic guide to scripts! Greasy Fork
A good, fairly universal script manager! Tampermonkey (search for downloading on your current browser)
A list of AO3-specific user scripts! Greasy Fork
The List
- adds Marked for Later button to work blurbs while browsing and on the home page/top of the screen
- recommends fics based on certain tag combos in a work
- adds download button to work blurbs while browsing
- allows filtering bookmarks by length
- assigns length to works and compares them to a list of published novels' lengths
- removes kudos button when you've already left kudos
- floaty reviewer box! for writing comments as you read
- when browsing, collapses blurbs of works that are later than part 1 in a series
- rearrange the tag order when editing works and bookmarks
- puts a badge in the menu when you have unread inbox stuff
- easy interface for formatting comments with HTML
- style editor, blacklist, bookmarks that mark your exact place, good all-in-one
(you can disable functions you don't want/need for this one ↑)
- score calculators based on kudos/hits ratio and chapters and a more complicated "engagement score"
(I more use these scores out of curiosity than anything)
Enfin!
Thank you for reading my guide! I don't usually do stuff like this but I suspect I'm hyperfixated. I'm very tired, worked pretty hard on this and it's currently past midnight for me so if this was helpful please share it!!!! All credit due to the respective creators in here.
For those of you who are interested in creating site skins (or modifying ones that others have created), here's how you can modify AO3's buttons to suit your needs.
Tutorial under the cut. It is aimed at absolute beginners with no knowledge of CSS, and I am exhaustive in my explanations. If you're interested in learning how to skin, this should be a helpful start!
(I just cover button styling, I don't explain how to create a new skin)
CSS for beginners
When you're creating CSS code, you can change how items look either individually or in groups. You can also change an item in one way or more than one way.
If you're styling one item with one change, that block of code will look like this:
name of the item {
change that you want to make;
}
If you're changing more than one item, list them off with a comma between each item. If you're making more than one change, list them off each on their own line. Each change must always end in a semicolon, whether you're making one change or multiple changes.
The { indicates where the changes are going to start. The } indicates where the changes end. Each of these little blocks of code work independently, so you can put them into a site skin in whatever order you want, as long as the block itself stays together.
The most common changes that you'll want to make to a button are probably
background colour / background image
border / thickness of the border / shape of the border
font / font size / font colour / font style
whether or not there's a shadow
Code (part 1)
This code is what the Default skin uses for buttons on AO3. I made the brackets red so that it will hopefully be easier to see where the list of items you can change ends and the list of changes starts.
The actual site code has a lot more specifics than this, but I trimmed those other parts of the code off. We don't want to change any of that, so we don't need to include it.
Backgrounds
To change the background colour on buttons, use a hex colour picker (like this one for example) or a gradient creator (like this one) to help you get the colour(s) you're looking for.
background: #2596be;
will change the buttons to blue. If I'd rather have a gradient background for my buttons, I could do something like
which will change the background to a yellow-peach-pink gradient. You can rotate the gradient to be left-right or top-bottom etc. by changing the number of degrees of rotation the gradient has.
If you want to use an image as the button background, your code would look like:
background: url("linktotheimage.jpg");
Here, you're indicating with url that the source of the image is a website. Then you're putting that web link into quotation marks to capture it all. Images used in site skins should be .jpg or .png or .gif
If you want your background colour to be semi-transparent, then I recommend using the RGB value instead of the hex value. For the blue I used earlier, the code would be
background: rgba(37, 150, 190, 0.5);
The first three numbers are the red, green, and blue components of the colour and the last number is the amount of transparency. 1 is fully opaque and 0 is fully transparent, so use decimals to indicate what you're looking for.
Borders
When you're styling a border, there are typically three things you're looking at
border: 1px solid #bbb;
The first is how thick it is. A 1px border is 1 pixel thick. You can make it thicker by increasing that number.
Next, we have the word solid. This is talking about what the line looks like. Borders can be solid, dotted, dashed and several other styles. You can change that look by changing that word.
The last indicator there is the colour, which we've already seen.
If you don't want a border, you can use the terms either none or hidden. None will remove the border entirely. Hidden will keep the space that the border occupies while not showing it. You can also do that by indicating the border should be transparent (which is how you can then add an image to a border, but I won't be doing that in this tutorial). You can choose any of these that you like, or you can stick with styling like the above.
Another part of the border that you can modify is the radius of the corners. That changes how rounded they are/are not.
border-radius: 0px;
Will give you square corners. The larger the number you put there, the more rounded they will become. If you want your buttons to have rounded ends, you can insert something like
border-radius: 20px;
(if you increase the size of the button, you might need to increase this number to get a fully curved end)
Another fun thing you can do is give each corner its own radius. That's how you can make more interesting shapes. The order that the corners are modified in is: top left, top right, bottom right, bottom left. So imagine yourself starting at the top left of the box and moving around it clockwise. Code to modify all four corners can look like this:
border-radius: 15px 0px 5px 0px;
You can experiment with changing each of the numbers to see how curved you want your buttons to be.
Fonts
AO3 has default fonts, but if you want you can change them to something else. In order to do so, you'll need to know the name of the font you want to use and that font will need to be installed on the device you want to use the skin on.
If your phone doesn't have Comic Sans on it, then you won't be able to use that as the font in your skin.
To deal with the fact that different devices have different fonts installed, you can do two things. 1) Use websafe fonts 2) provide more than one font for the skin to use.
To set the font to something other than the default, use the font-family property and use the exact name of the font(s). If the font name is more than one word, put the name in quotation marks. List the fonts in the order that you'd like them to be prioritized and put a comma between each item.
font-family: "Century Gothic", Arial, sans-serif;
My first choice of font here is Century Gothic. If the device I'm on doesn't have that font installed, then it should use Arial. If it also doesn't have Arial installed, then it should use any sans-serif font.
You can set the font size using several different measurements, but I tend to use either percentage or point.
font-size: 120%
This code will make the font 120% the size of whatever the site's default size is. If I want the font to be smaller instead, I can use a percentage smaller than 100%.
If you'd rather, you can also use a point size.
font-size: 24pt;
The reason why I prefer the percentage is because it will scale with your device, so if your computer and your phone have different default font sizes, it'll adjust based on that. Using the point size will set it at that size no matter the device.
To change the font colour, you just need to use a hex code (like above).
color: #2a2a2a;
(Note to people who learned English outside of the US - do not put a u in colour when you're coding)
Other changes you can make to a font are about the style of the font itself. For example:
AO3 uses a box shadows in a lot of areas in their skins, including buttons.
By default, box shadows appear on the outside of the item you're putting the shadow on, and they're visible along the bottom border and the right border. You can adjust this, but if you just use
box-shadow: 3px 3px #ccc;
Then you'll have a grey box shadow that is 3px wide along the bottom border and the right border. The first number is right/left and the second number is top/bottom. To put the shadow on the top and the left, use negative numbers:
box-shadow: -3px -3px #ccc;
If you want the shadow to be on the inside of the box instead of the outside, add inset to the end of the line. When you're working with an inset box shadow, the position is the opposite of a regular box shadow.
box-shadow: 3px 3px #ccc inset;
This code will give you a 3px shadow on the left side and the top of the inside of the button. To get it on the bottom and the right, you'll need to change those to negative numbers.
Bonus: making things glow
You can make the shadow softer by adding a third number to the list, which is the width of the blur effect you add.
box-shadow: 3px 3px 8px #ccc;
By adding 8px in that third position, I've softened that dark grey shadow and spread it out more. This is the same technique that you can use to make a glow effect.
box-shadow: 0px 0px 10px #2596be;
By setting the first two numbers at zero, I'm positioning the shadow directly behind the button instead of shifting it to one side or another. Then the 10px glow of blue will appear equally on all sides of the button.
Code (part 2)
This is the code that can change the styling of buttons when your mouse is hovering over them. Once again, this is what AO3 has set as the default (with extraneous code removed)
This code modifies what buttons look like when they indicate what page you're on - so if you're on page 3 of your favourite tag, the number 3 in the list of pages will look different, for example.
I'm separating this out because I've had people request in the past that these buttons be style differently. The first code block modifies the button in your inbox that shows you that you have not yet replied to a comment. The second code block modifies the button in your inbox that shows that you have replied to a comment.
ok so i have that post with my ao3 skin css but it looks like a lot of people don't actually know to use them and i know there's a post on here somewhere about it but i can't find it for the life of me so i'm making it myself.
first find an ao3 skin css. this is the code you will input into ao3.
then go into your ao3 and tap "my dashboard" (you will have to have an account to do any of this)
okay censoring my url is pointless bc i have my tumblr in my ao3 bio but whatever
now go to skins
next tap create site skin
so it's gonna look like this
make sure it says site skin in the first one.
put a unique title like poopydoopy33 or something.
put a super cool description like "the skin with the stars" or "i have now swallowed every platypus on the face of this earth"
i highly recommend not trying to give it an icon it's just ragebait
apply to make public was disabled on ao3 so don't check that box
and then paste in the css you have into the css box.
now scroll down and tap submit at the bottom
ok so on the new page you just scroll to the very bottom and tap use or preview!
It's very easy to select the text of a fic and copy-paste it on Ao3, right?
Well, we can stop people (and AI) from doing this by adding a skin to our fics!
I just did it with all my fics and it works.
How to do it, step by step⬇️
1) Log in. Click 'Skins' in the menu, at the left. Then click 'My Work Skins' and after doing this, click 'Create Work Skins' at the top right.
2) Write a title for your skin (anything you want, it doesn't matter). Then in the large text box, write this:
#workskin * {
user-select: none !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
This is what you should see:
3) Click 'Submit'. Your skin has been created, and now you have to add it to all your works.
4) Click 'Works'. Then click 'Edit Works' at the top right.
5) Click 'All' to select all your works. Scroll down and click 'Edit'.
6) Scroll down until you see 'Select Work Skin' and select the one you just created.
7) Click 'Update All Works'.
Now, people can't select the text of your fics and copy it😊
PS: I also recommend changing the visibility of your fics to 'Only Show to Registered Users'. You'll lose your anon readers, but it will protect your works a bit more against AI scrappers
I'm not sure if this is going to link correctly but there's also an anti AI skin going around on AO3. It prevents people from being able to just copy and paste your work into an AI bot.
I applied it to all my works. It has also drastically reduced how many bots leave comments on my stuff because they can't read the text.
How someone can help if you turn off the answers? Anyways, the easiest way is to sort by date. You cannot have addiction canon if noone knows yet it would become canon. Btw I have the similar problem with the death of Theo's parents
Hi! I’m so sorry-I’ve only ever made like two posts so I didn’t know the answers were off! I’m more a lurker than a poster, honestly. I’ll see how to turn them on! Thank you for letting me know!
That’s so smart. And so true. Thank you! Also, I agree! Why did they have to die? And why did the show have to make them seem lowkey shitty just before it happened? Absolutely crazy work.
Edit: I think I fixed the replies issue. Thank you again for letting me know!
Can someone tell me if there’s a common tag for 9-1-1 that lets me block the entire “Pick Your Poison” episode arc? I fucking hate it and it’s ruined the show for me as a whole.
For me it’s tainted what came after it and it’s slowly invaded other parts of fandom I enjoy - fanart, fanvideos, fanfiction.
I’ve always ignored addiction/dependency storylines when they’ve come up in the past for the characters - minus Bobby’s pre-existing addiction he’s had since he was introduced when looking for fanfiction. It’s not a storyline I enjoy at all. It’s not a slight against addiction, dependency, or addicts. It’s just not a storyline I like. And I’ve done the mature thing of moving beyond them in the results and found work I enjoy.
This further impacts the whole Theo thing. I don’t care about the kid one way or another. I’m very ambivalent to them. HOWEVER since he comes in after the dependency storyline, I can’t bring myself to interact with media that has him because, like I said earlier, his arrival is tainted by the dependency. He came after it happened and now if he’s in fanfiction that means he comes AFTER the dependency is considered canon.
I have fanfiction authors and video creators and fan artists I follow and I adore their work but the moment I see Theo is involved I’m turned off the work because it means the dependency has been taken as canon - and YES - I do look at the tags if it’s a fanfiction and try to make my determination off that but not everyone tags it or its not tagged consistently.
I’m upset because it’s cutting into the stories I can read and enjoy or I get the rug pulled out from under me when it appears in the work. I don’t want to fully rip season 9 out of the story (although I have a lot of problems with it, personally) because I don’t want to miss out on amazing fan works. But is there a consistent tag that people are using to block Buck’s addiction/dependency storyline out of their fanwork results?
I’m not looking for a debate on why I’m supposedly an asshole or not a real fan or how I should leave the fandom if I’m that upset over a plot. I’ve been here since the damn pilot episode and I love the series. But this storyline is something I CANNOT stand with so I have decided to leave the series and immerse myself only in the fandom. I have done this before with many other fandoms but it’s only this one that I’m having trouble navigating what tags to block and avoid. I’m no less of a fan because a show crossed a line or made a decision I disagree with. I love this series and I love the characters. And I love it enough to know when to leave the running series to enjoy the world fandom has invented. Marvel fans of the first Avengers movie can attest to this, I feel.
If you’ve read this long, thank you. And thank you for any suggestions you have. I really appreciate it.
TLDR: I hate Buck’s dependency storyline for many reasons. I want to read and enjoy fanfiction without it but tags are too broad. I ask for tecommended tags please and thank you.
has anyone noticed that after the porn ban of 2018 tumblr was essentially killed from the mainstream and everyone flocked to other social media sites like twitter and meta. then those sites got enshittified to where twitter became Nazi Central and meta sites had an entire meme around getting “zucced” aka mark zuckerberg himself would ban you for saying a no-no word like fuck. and then the mainstream shifted to tiktok where infamous toddlerspeak sentences like “he got unalived by a pew pew” were born because if you once again say a no-no word like kill or gun or any other word that isn’t corporate i mean kid friendly then the algorithm will bury your post into the ground. and somehow we’ve come full circle and tumblr is now the most bearable social media site because although we can’t have female presenting nipples we can at least talk to each other like adults. has anyone noticed that at all or is it just me and the flaming skull
Lonely God's Muse @lonelygodsmuse - Tumblr Blog | Tumgag