ao3commentoftheday

[ao3commentoftheday]

I saw your tags about the work being anon, and yes you can still hide it - if you use a site skin.

Full instructions are over here on AO3, but if you already know how to use a site skin, this is the code to use:

.work-123456 {

display: none;

}

Change the number in the code to the number in the fic's url. You can find it like this:

https://archiveofourown.org/works/39038346

If you want to hide more than one work, put a comma between each one in your list

.work-11111, .work-2222, .work-333333 {

display: none;

}

Is there a way to block stories/story updates or hide stories on ao3? 🤔

[ao3commentoftheday]

ʚʚ New Release: Rose Pine Site Skin ɞɞ 

They're finally here! After much ✨ pain and suffering ✨, Rose Pine skins have finally arrived. Credits to the lovely @zerafinacss for the original neos skin, which forms the bulk of the codebase.

Installation instructions can be found on AO3 or Github.

I'll likely keep updating these and I'm open to adding more variations (cool-toned palette anyone?). If you notice any issues, feel free to drop a comment on AO3 or Github.

For now, I just needed to get these out into the world so they would stop consuming all of my energy. One can only hyperfixate on tag colors so much!

Let me know what y'all think! :))

[ao3commentoftheday]

The question posed was something along the lines of, "Aren't you worried that young people who read those stories (about adults/minors) will think that's a good kind of relationship to get into?" It was in reference to this post (which was, itself, referencing this one).

Apologies for not quoting the question directly but I deleted it hours ago.

My genuine answer to this question is: no, I'm not.

I have several reasons for having that opinion, and you're free to disagree with any or all of them.

This got incredibly long so I'm putting it under a cut.

Reason One: Before someone reads stories about adults having sex with minors, they need to first see, in bolded letters, the Archive Warnings on the fic's blurb.

Those warnings will include either Underage or Author Chose Not to Use Archive Warnings - or both. It might also include the warning Rape/Non-Con. That's before they see any additional tags or read the summary - both of which will likely clue them in to what the contents of the work are.

Reason One (b) If they decide they want to read it anyway, they need to click on a banner saying that they acknowledge that they're about to read a work with adult content.

If they have an account and have permanently dismissed that banner then they've still acknowledged it, but it happened back when they dismissed the banner.

Reason Two: No one reading fanfic on AO3 is visiting that site as their first activity on this planet. They are not seeing this story in a vacuum.

Reason Two (b) Every culture that I'm aware of has a taboo against incest. It has a taboo against adults sexually abusing children. These are universally seen as bad things that no one should do. Even if the story is "super hot" or whatever, it has a lot to compete with to make it seem in any way "normal" or "good."

Reason Three: Beyond all of that, I also think that teenagers have intelligence. I think they can read a story and maybe even find it sexy and it won't actually turn them into something they're not.

Reason Three (b) You know why? Because when I was a teenager I was super into incest fics. I got off on them super hard. I'd read about a dad and his teenage daughter fucking nasty and it made me horny. I did this while being a teenager and living in my home with my own father and having ZERO desire for him.

Reason Three (c) Because the stories weren't about that for me. They were about a young woman who found a position of power over an older man by seducing him. Or they were about a young woman being desired despite the fact that she was "off limits". They were about being wanted, being romanced, being given pleasure.

It was the wrongness of it that I found sexy, and while I don't read those stories anymore I still find it fascinating to explore other kinds of kinks in fiction.

(Sidenote here that they were also written better than any other smutty stories that I'd found at that point? so that was likely part of it too. This was long before AO3 existed.)

Reason Four: And those other kinks all stay in fiction and never enter my real life beyond making me feel excited.

Reason Four (b) These days I'll read D/s or humiliation kink or sexual free use or cuck or whatever the fuck else sounds interesting when I read the blurb, and I'll do all of that while fucking absolutely no one but myself. Because I'm also aro/ace. Reading about sex is 10000% hotter than actually doing it myself.

Reason Five The last reason why I'm not worried is actually the best one. I'm not responsible for hypothetical young person's life and choices. That hypothetical young person is as fictional as the stories we're talking about because that's what hypothetical means.

Reason Five (b) Even if we're talking about an actual person, like say you have a 14 year old third cousin that you're worried about. That 14 year old is still not my responsibility because I'm not in their life. You are.

Reason Five (c) If you're worried about your third cousin reading those stories and then seeking out that kind of relationship, then have a conversation with them. Be a resource for them when they have questions about sex and relationships. Share your own knowledge and experience with them so they don't have to try to figure it all out on their own.

-----

I'm about to post this and I thought of

Reason Six: Even if an adult used stories on Ao3 as a means of convincing a child to get into a scenario where they could abuse them, I don't blame the story. I blame the person who used the story.

Reason Six (b) Because if it wasn't that story, it'd be the kid's favourite movie. Or some toy that they wanted. Or a million other things that abusers have been using for centuries longer than either the internet in general or AO3 in particular have existed.

Okay, I think that might be it?

[ao3commentoftheday]

I've been stewing on an extremely ill-advised post for the past several hours, and on the one hand? I think it needs to be said. But on the other hand? I don't really want to be the person to say it?

[ao3commentoftheday]

styling buttons on AO3

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.

.actions a, .actions a:link, .action, .action:link, .actions button, .actions input, input[type="submit"], button, .actions label { background: #eee; color: #444; font-size: 100%; border: 1px solid #bbb; box-shadow: none; }

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

background: linear-gradient(90deg,rgba(250, 218, 97, 1) 0%, rgba(255, 145, 136, 1) 50%, rgba(255, 90, 205, 1) 100%);

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.

border: none; border: hidden; border: transparent;

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:

font-weight: bold; font-style: italic; font-variant: small-caps;

Box Shadows

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)

.actions a:hover, .actions button:hover, .actions input:hover, .actions a:focus, .actions button:focus, .actions input:focus, label.action:hover, .action:hover, .action:focus { color: #900; border-top: 1px solid #999; border-left: 1px solid #999; box-shadow: inset 2px 2px 2px #bbb; }

Code (part 3)

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.

.actions a:active, .current, a.current, a:link.current, .current a:visited { color: #111; background: #ccc; border-color: #fff; box-shadow: inset 1px 1px 3px #333; }

Code (part 4)

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.

span.unread, .actions span.defaulted { background: #ccc; color: #900; border: 1px solid #bbb; }

.replied, span.claimed { background: #ccc; color: #008000; border: 1px solid #bbb; }

[ao3commentoftheday]

Hi! Sorry for the delay. I saw this late at night and then forgot where I'd seen it 😆

To change the background on the replies, you need to modify .thread .even

I made it the same as the background on the icon and the byline by adding that selector to this section of the code:

.comment h4.byline, .comment div.icon, .thread .even { background: #263b53; border-bottom: 5px solid #00b8ff; }

But if you want to make it its own colour, you can separate it out too. And if you want to change the text, add in a colour

.thread .even { background: #hexcode; color: #hexcode; }

ao3 but make it tumblr - site skin

I've had several people over the years tell me I should make a site skin that makes AO3 look like tumblr. Well, I learned the float property and now here you go!

You can get these two colourways over here on github. No promises, but I might update with additional colourways in the coming days. As always, I've included instructions for how to apply a site skin if you've never used one on your account before.

I've seen some folks use the title "work is published Wednesday" and I like it, so I'm going to drop it at the end here.

[ao3commentoftheday]

To improve account security, AO3 has updated our password change process to prevent users from choosing passwords that are known to be compromised on other sites. To learn more about how to protect your account, check out: otw-news.org/y8jnay3v

Posted: 21:35 UTC August 19, 2025

[ao3commentoftheday]

div.latest.news.module, div.latest.messages.module, div.random.readings.module { display: none; }

To create a site skin:

Log into your account

Click/tap on Hi, username at the top of the page and go to your Dashboard

Click/tap on the link to Skins

Click/tap on the button labelled Create Site Skin

Give your site skin a unique name (if the name is not unique, the skin will not save and you will just get an error message)

Paste the above code into the big CSS box

Click/tap on the Submit button below that box

On the next page, Click/tap on the Use button

If you are already using a site skin, you can add this one as a parent. Edit your other site skin and:

Click/tap on the button labelled Show (next to the word Advanced below the CSS box)

Scroll down and click/tap on the button labelled Add Parent Skin

Start typing the name you gave the skin described here and select it from the dropdown menu.

Click/tap on the Update button.

You could also just copy/paste that code to the end of whatever skin you're using, but by making it a separate skin, you can add it as a parent onto whatever other skins you might use in the future without having to track down the code again.

Hi sorry not sure where to ask this! Is it or will it ever be possible to customize the homepage on AO3? I don't really want to see the News/Unread Messages/Marked for Later on it (they were perfectly well accessible before and this is just visual clutter to me which I'd like to turn off!)

Hi an-chan-thevolleyballplayer

The best place to ask questions about features/request features is always the AO3 Support Form.

HOWEVER - this seems like a thing that folks have tried to solve using Site Skins.

(If you search, I bet there are tutorials for removing those boxes with a site skin. There is a non-zero chance that someone reading this post will know, and put it in the notes even!)

Hope this helps!

Mod Remi

[ao3commentoftheday]

There was a reply on that last post (which I have deleted, so don't go looking) asking why I want to defend pedophilia, and I think the crux of the issue is that i don't think fanfiction is pedophilia

The reason why pedophilia is such a shocking thing to think about and such a strong taboo across cultures is because it can result in the harm of children.

No child is harmed when someone types words on a screen and posts those words to the internet.

Now, I have no idea about the real life habits of the person who did the writing and the posting - I admit that. But neither does anyone else. That person could be a criminal, but it's much more likely they're a teenager writing a fantasy about an older actor/character they have a crush on. Or someone grappling with what was done to them when they were a child. Or someone who enjoys the sensation of being horrified and writes horrific stories because of that. Or a bunch of other types of people who have other reasons all their own.

Writing about sex (even sex you find absolutely horrific and vile) is not the same as having sex or committing rape. Writing about murder is not the same thing as actually killing someone. Writing about being drunk is not the same thing as chugging down a mickey of whiskey. I once wrote a story about waltzing and I've barely ever danced in my life.

The reason why people like me make a distinction between stories and real life is because the people in stories (even if those stories are about real people!) are only as real as the Barbies I played with when I was a kid. I used to smoosh their faces together to make them kiss. I'm doing the same thing with characters, and the smooshing is happening with words instead of dolls, but it amounts to the same thing.

[ao3commentoftheday]

man "ship and let ship" kinda stops working when ppl are actively shipping minor and adult characters together like hello?? same with the "dont like dont read" mentality, some shit shouldn't be fetishised maybe??

You've got a lot going on in this ask, anon, and it's obviously not asked in good faith. If I were a smarter human being, I'd delete it and move on with my life, but it's 9am on a Saturday morning and I'm still on my first cup of coffee so I'm just dumb enough to take the bait and respond.

Ship and let ship doesn't mean you need to approve of what other people are shipping. It doesn't mean you need to like what other people are shipping. It means that what other people ship is their business and what I ship is my business.

If I don't like a ship, I don't read it. I don't search out the tag. I don't try to find creators for it. I don't watch youtube compilations or stare at gifs or read meta analysis about how the ship is supported by canon.

If I don't like a ship, I just... don't think about it. It really is that easy. And when I do think about it, I might be annoyed for a moment, but then I move on with my life because guess what? Shipping is a meaningless hobby that I engage in during my free time and I don't want to waste my free time feeling pissed off.

I've seen a lot of bizarre definitions of "minor/adult" shipping, but even if we use the definition of an adult sexually abusing a child, it's still very easy for me not to read that story on AO3. I'm assuming this is all about AO3? It always seems to be in this kind of ask.

AO3 requires people to use one of two warnings in those cases. Either Underage or Creator Chose Not to Use Archive Warnings - or both. I use the filter system to remove works with those warnings from my search results and guess what? Those works might as well not exist for me because I've never seen one. And I've been on AO3 since about 2013.

The thing about these kinds of opinions is that they only ever come up in relation to shipping. I never see these opinions related to violence or drugs or swearing or whatever else you might find morally repugnant. But the handy thing about "don't like, don't read" is that it applies across the board.

I don't think I'm going to like the new Jurassic Park movie, so I'm not going to go to a movie theatre, spend $15, and sit in a dark room with strangers for two hours to watch it. I'm not going to read reviews of it. I'm not going to watch the trailer. If a friend of mine invites me to go see it, I'll pass. I won't stop my friend from going to see it, though. If they're going to enjoy it then they should - and they're not going to fetishize dinosaurs or paleontologists or the tourism industry when they do.

If you're not able to control your own reading habits, then you should probably be more careful on the internet. Use Net Nanny or other content filtering tools to make sure that you can avoid the content that you're unable to resist through willpower alone. But don't make your inability to stay away from things you don't like my problem. That's all on you.

[ao3commentoftheday]

ao3 but make it tumblr - site skin

I've had several people over the years tell me I should make a site skin that makes AO3 look like tumblr. Well, I learned the float property and now here you go!

You can get these two colourways over here on github. No promises, but I might update with additional colourways in the coming days. As always, I've included instructions for how to apply a site skin if you've never used one on your account before.

I've seen some folks use the title "work is published Wednesday" and I like it, so I'm going to drop it at the end here.

[ao3commentoftheday]

ao3 but make it tumblr - site skin

I've had several people over the years tell me I should make a site skin that makes AO3 look like tumblr. Well, I learned the float property and now here you go!

You can get these two colourways over here on github. No promises, but I might update with additional colourways in the coming days. As always, I've included instructions for how to apply a site skin if you've never used one on your account before.

I've seen some folks use the title "work is published Wednesday" and I like it, so I'm going to drop it at the end here.

[ao3commentoftheday]

someone on discord suggested modeling the dark mode version after 404 media, and I couldn't resist 😆

this skin is available alongside the light mode version: here

instructions for using it are in the readme file

WIP Wednesday

what if AO3 but it looked like the New York Times?

for those of you who need a stealthier way to read fic

Editing to add a link to the skin on github

[ao3commentoftheday]

the “beautiful cinnamon roll too good for this world, too pure” meme is so good i don’t even feel right calling it a meme? i am so glad to have this way to describe characters because it so concisely sums up such important concepts

[ao3commentoftheday]

Image description: on the left is Agent Dale Cooper from Twin Peaks. On the right is a screenshot from The Onion. The headline reads "Beautiful Cinnamon Roll Too Good For This World, Too Pure" and beneath it is an image of an iced cinnamon roll on a plate, sitting on a wooden tabletop.

my beautiful son

[ao3commentoftheday]

Stealth Mode site skin available on github

Please note: In order to make the site look less like AO3, some functions and features have been removed. This skin is not optimized for regular use. It was created to allow you to read AO3 without looking like you're reading AO3.

WIP Wednesday

what if AO3 but it looked like the New York Times?

for those of you who need a stealthier way to read fic

[ao3commentoftheday]

So far, I've done the home page? But here's where we're at 🤣

Video has no sound. It shows a logged in user scrolling down the homepage of AO3. The site is styled to look like the New York Times or a similar outlet.

Changes are listed below the cut because there are quite a few!

Editing to add a link to the skin on github

At the top of the page, in the center, is Archive.org in bold, italic Times New Roman. Below it in call caps Tahoma in smaller letters are the words Of Our Own.

The user menu no longer shows the user's icon or hi, username! instead it simply says Menu in all caps Tahoma font. The logout button has a pale blue background.

The header is all white, with a black line denoting where the bottom of the header is. The dropdown menu names are the same, but they each have a ⌄ after the word to denote the dropdown.

Instead of being named Favourites, the section is now called Top Stories. Below the top stories is an article from The Onion titled "Beautiful Cinnamon Roll Too Good for this World, Too Pure." There is an image of a cinnamon roll as well as the text of the article.

The News section is now called Tech News. Comments are now called Local News. There is no heading above the social media section, but the text and buttons are still present.

Below the social media section there is an article with the movie poster for Goncharov (1973) and an image credit to beelzeebub on tumblr. The article is labeled "critic's notebook" and the title is, "Scorsese's Lost Film- Is It Really The Greatest Mafia Movie Ever Made?" There is no article text.

The footer of the site has a black line denoting where it begins. At the top left of the footer section, we see the same masthead as at the top of the site. The background of the footer is white.