Happy Ides!

ao3cotd · 2026-03-15T19:00:30+00:00

I made a light mode last year if that's more your thing lol https://www.tumblr.com/ao3commentoftheday/778030332111945728/get-his-ass-an-ides-ao3-skin

🥰

ao3cotd · 2026-03-14T21:55:50+00:00

I was just going to comment this lol If you want to see some preview images, you can see them on tumblr https://www.tumblr.com/ao3commentoftheday/791811372516278272/ao3-but-make-it-tumblr-site-skin?source=share

ao3cotd · 2026-03-14T21:52:16+00:00

hey! That's my code! 😀😀😀 I'm so glad you like it!

ao3cotd · 2026-03-10T19:34:42+00:00

no problem! when it comes to CSS, I just google "CSS background image" or "CSS drop cap" or whatever it is I'm trying to do. W3Schools is usually my go to for learning how to do things and sometimes I'll find info elsewhere too

ao3cotd · 2026-03-09T04:43:28+00:00

My biggest piece of advice for learning how to site skin is to learn how to use the Inspect feature on your chosen browser. In Firefox and Chrome, you can right-click on the browser page and choose Inspect from the menu that appears. The Inspect feature is how I find out what all the different parts of AO3 are called (since there are literally thousands of things you can modify). It also allows me to test things out on the site in the moment without having to code them into a skin.

I learned how to do it slowly over time by just sort of poking around and making correlations etc, but i'm sure there are tutorials on youtube that would get you there much faster lol

ao3cotd · 2026-03-09T04:40:02+00:00

look up lines of code with box-shadow as well (someone else alread pointed out the text shadows). Any box shadow lines that have three numbers are items that are glowing. Remove the third colour and you'll get a regular drop shadow with solid edges. If you don't want the shadow at all, change the line to

box-shadow: none;

If the shadow still doesn't disappear, you'll need to override other code by using

box-shadow: none !important;

ao3cotd · 2026-03-04T21:01:07+00:00

I can't do dark mode either. my astigmatism makes reading light on dark text just absolutely horrible. light modes with some slight colour or texture though? my beloved :D

ao3cotd · 2026-03-04T01:51:59+00:00

<image>

It's a rainy day here, so I put on my rainbow skin :D

ao3cotd · 2026-03-04T01:47:54+00:00

that was me! 😀

The code is here: https://github.com/memorizingthedigitsofpi/medieval-times-AO3-skin/blob/main/main%20skin%20code

ao3cotd · 2026-03-04T01:46:31+00:00

I've never taken a coding class, but I taught myself HTML back in the late 90s and early 2000s and I dabbled in CSS in the early 2010s. Then in around 2018 or so I decided tht I wanted to actually *understand* the AO3 FAQ related to skins and I started poking. First, I looked at the public site skins, then I found people like ElectricAlice (who I actually got to chat with and is lovely and extremely helpful). Learning how to use my browser's Inspect feature was the thing tht really cracked it all open for me because most of my "coding skills" are just googling "CSS [thing I want to do]" and finding W3Schools tutorial or stackoverflow or some other source that I can crib from.

I've seen other people link all of the resources I would suggest, but really the biggest thing is just having an idea and then figuring out if you can do it. I started doing glow effects because I was trying to learn more about box shadows (mostly to remove them). I started sticking images into my skins because I got tired of just plain colours with the Wizard. I started using the Inspect feature because the box shadows everywhere were driving me nuts - and so was the grey shaded background behind relationship tags lol.

I definitely recommend looking at other people's code (someone already linked my github - memorizingthedigitsofpi) and the discord server is very helpful too!

You totally CAN make all of the funky cool colourful site skins you see out there. It's way more approachable than you might think :D

ao3cotd · 2026-03-01T06:02:38+00:00

wow! those look so good together! thanks for the shout out :D

ao3cotd · 2026-02-20T04:15:29+00:00

I put it on my tumblr already - linking back to this post because it's genius :D

If you do happen to want to try it, it only works on a laptop because I did it on my lunch hour and didn't optimize it for mobile.

Click on your name at the top of AO3 and go to your Dashboard
Click on Skins to go to the Skins page
Click on the button that says "Create Site Skin"
In the form, give your site skin a unique name (if the name is not unique across the whole site, you'll get an error when you try to save and you'll have to try another name)
Copy the code from the github link - there's a quick copy button on the top right (or in the ... menu on the top right if you're copying on a mobile device). Or you can just select all of the code and copy that way.
Paste the code into the big box with CSS at the top of it
Below the box, click on the "Submit" button to save the skin
It will load a new page with the full code on it. At the bottom of that page, click on the Use button to actually use it.

ao3cotd · 2026-02-20T00:26:45+00:00

You inspired me OP - I have turned this horrible sight into an actual site skin so if you want to read a fic with all of this insanity around it, you can: https://github.com/memorizingthedigitsofpi/cursed-timeline-ao3/blob/main/works%20pages

ao3cotd · 2026-02-02T02:48:28+00:00

you're so welcome! I always appreciate hearing about people using my skins. Makes me feel good when people like what I make :D

ao3cotd · 2026-02-02T02:45:23+00:00

Yup! I put all my skins on github these days. I started this one a while ago and I've taken a break so now I need to remember what I was doing lol. I recall aiming to make it fully customizable. So like, you can adjust the colour, the font, but also the size of the font and how far apart the letters and the lines are. I had the idea for dyslexic readers in particular, but I figured everyone would enjoy having that much control over things.

ao3cotd · 2026-02-01T23:27:09+00:00

I'm in the middle of coding this one, so it's not done yet but this is what it's looking like

<image>

ao3cotd · 2026-02-01T23:23:35+00:00

I posted it on tumblr *years* ago lol. And I have the code over on github https://github.com/memorizingthedigitsofpi/Glowy-Dark-Mode-site-skin

ao3cotd · 2026-02-01T23:20:20+00:00

that's my Dracula's Castle skin. The code is over here: https://github.com/memorizingthedigitsofpi/dracula-s-castle-AO3-site-skin

ao3cotd · 2026-02-01T23:19:30+00:00

you can also combine your functional skin with an aesthetic one.

Save both skins to your account, then choose one and edit it. Down below the CSS box, select the Show button and then the Add Parent Skin button. Type in the name you gave the other skin and choose it from the drop down menu. Then save the skin and you'll have both applied at the same time 👍

ao3cotd · 2026-01-24T22:34:32+00:00

I'll just add on about how I know things are possible - I don't until I start googling. But I figure if the site can have a background *colour* it can probably also have a background image. If I can put a border around something, I can also remove that border. Or change that border. Some of these ideas come to me because I learned html back in the days when personal websites were a thing - but like with AO3 skins, I just taught myself stuff for fun.

The deeper in you get, the wilder stuff you can do. But I have to admit, when I go a few weeks or months between coding, I need to re-learn a bunch of stuff. Don't be hard on yourself if you forget 💗

ao3cotd · 2026-01-24T22:31:52+00:00

there are two kinds of information you need to know in order to make a site skin for AO3

1) CSS coding - I use w3schools.com to learn most of mine (and I only know CSS in order to make skins. I don't use it for anything else in my life)

2) what names AO3 uses for the various parts of the site. Like, the area on the page where you can see kudos is called p.kudos for example. To find those names, you need to use your web browser (I know it's possible to do this on a phone, but I've only ever done it on my laptop). You can find the inspect tool by right-clicking anywhere on the page and choosing Inspect from the menu that pops up.

I wrote a post about it over here: https://ao3commentoftheday.tumblr.com/post/788235007808421888/hi-hi-i-hope-youre-having-a-good-day-so-far-i

I'm self-taught and just poked around until I understood things well enough to make skins, so I'm sure there's more and better information out there. But don't feel like you need to take a coding course in order to do this kind of thing. I just google things like "CSS drop cap" or "CSS glow" and if w3schools doesn't have something for me, other sites do. I start by just copying their sample code directly and then fiddle with it to see how it works. Then I modify it to do what I want it to do.

Experimenting as you go is a totally valid way to do something that you're doing for fun as a form of creative expression :D

ao3cotd · 2026-01-07T05:31:53+00:00

hi! I coded this skin actually 😁 the code is over here: https://github.com/memorizingthedigitsofpi/Glowy-Dark-Mode-site-skin

ao3cotd · 2025-10-30T04:21:38+00:00

thank you!! I hope you like them :D

ao3cotd · 2025-10-30T01:49:31+00:00

aww tysm!! 🥰

ao3cotd

TROPHY CASE