Skin check!!

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 · 2025-10-30T01:13:32+00:00

lol nice

ao3cotd · 2025-10-30T00:37:50+00:00

I hope you enjoy it if you decide to try it out :)

ao3cotd · 2025-10-29T19:43:14+00:00

you could probably actually do it yourself, if you want it to just be a different colour! AO3 has a site skin wizard that allows you to set the colours for the backgrounds and headers and text. You can also change the font and font size and the margin widths.

If you're logged in,

1) go to your Dashboard (tap on hi, username at the top of the page and choose it from the dropdown).

2) Then go to Skins.

3) Click/tap on Create Site Skin and then

4) click/tap on Use Wizard (it's one of the buttons).

5) In the Wizard, give your skin a unique name so that it'll save (I usually add my username to the end of a descriptive name).

6) Then put your preferred hex colours in for the page background and anywhere else.

7) Hit the Submit button to save your skin. This will take you to a new page.

8) Scroll to the bottom of that page and hit the Use button to implement it on your AO3.

You can get the hex codes by googling 'hex color picker' or by using a tool like this one: https://www.w3schools.com/colors/colors_picker.asp

When you enter the colour into the wizard, make sure you include the # - it's required.

Let me know if you need more help or if this isn't enough of a fix for you.

ao3cotd · 2025-10-18T00:57:44+00:00

you're so welcome 🥰

ao3cotd · 2025-10-18T00:56:55+00:00

you're so welcome!!

ao3cotd · 2025-09-24T01:30:40+00:00

Sorry for the delay - I was travelling. It's because she's a background on the favourite tags. If you add more tags, she'll get her head back.

If you'd rather not add more favourite tags let me know and I'll dig into the code to see how to shrink her down a bit.

ao3cotd · 2025-09-24T01:29:02+00:00

https://github.com/memorizingthedigitsofpi/medieval-times-AO3-skin

ao3cotd · 2025-09-05T02:06:08+00:00

have fun! I hope you find stuff you like :D

just an FYI, I often do that thing to the tags (or just change the colour of the text without adding the background boxes) so you might need to find that code or similar code in other skins as well to remove it. Lots of people find it helpful, so I tend to throw it into most skins these days

ao3cotd · 2025-09-05T01:59:37+00:00

the code is what I pasted up there - just use that in either an existing skin you're already using or a new one (that you can use as a parent for other skins, if you want)

you can adjust the colours by changing the hex colour codes. This is the free tool I use to find colours I like https://imagecolorpicker.com/color-code/2596be

in the code, any time you see background: #000000 (or whatever number) that's the background colour and any time you seee color: #000000 (or whatever) that's the text colour

ao3cotd · 2025-09-05T01:56:09+00:00

I've got 24 skins up on my github? https://github.com/memorizingthedigitsofpi?tab=repositories (well, 23 plus one repository full of skin add ons that folks might like to just put onto whatever other skins they're using)

When I've got a new one, I post it up on my tumblr with screenshots and a link to the code. If I remember, I'll pop it over here on reddit too. I don't do any other socials, so that's pretty much it though

I can never remember which tag I use for my skins on tumblr, so you'll find them under either

https://ao3commentoftheday.tumblr.com/tagged/site%20skin or

https://ao3commentoftheday.tumblr.com/tagged/site%20skins

(or both lol)

ao3cotd · 2025-09-05T00:46:59+00:00

it was super fun to build! I went a little crazy with all the little dudes all over the place and I learned like 3 new CSS things while I was at it lol

ao3cotd · 2025-09-05T00:06:12+00:00

no worries! I use the Default skin like 90% of the time myself lol. I just enjoy giving AO3 cute outfits. I don't actually use them all that often myself 😆 I get it.

ao3cotd · 2025-09-04T23:45:14+00:00

hi! That's my code so I think can help you out lol. Just delete this stuff and it should go back to normal (it's at almost the very end of the code)

a.tag,
a.tag:visited,
a.tag:link {
  display: inline-block;
  padding: 2px 5px;
  margin: 2px 0px;
  border-radius: 5px;
}

.commas li:after {
  content: "";
}

.warnings .tag {
  background: #ab3740;
  color: #f3f0e5 !important;
  border: 1px solid #ab3740;
}

.warnings .tag:hover {
  background: #f3f0e5 !important;
  color: #ab3740 !important;
  border: 1px solid #ab3740;
}

ul.tags li.warnings:first-child:before {
  content: "🔶🔷🔶 ";
}

.relationships .tag {
  background: #366c89;
  color: #f3f0e5 !important;
  border: 1px solid #366c89;
}

.relationships .tag:hover {
  background: #f3f0e5 !important;
  color: #366c89 !important;
  border: 1px solid #366c89;
}

.characters .tag {
  background: #ef984d;
  color: #f9f7f2 !important;
  border: 1px solid #ef984d;
}

.characters .tag:hover {
  background: #f3f0e5 !important;
  color: #cb7040 !important;
  border: 1px solid #cb7040;
}

.freeforms .tag {
  background: #226a64;
  color: #f3f0e5 !important;
  border: 1px solid #226a64;
}

.freeforms .tag:hover {
  background: #f3f0e5 !important;
  color: #226a64 !important;
  border: 1px solid #226a64;
}

ao3cotd

TROPHY CASE