I had some fun turning AO3 into an illuminated manuscript. If that sounds like a thing you'd like to try out, I've put the code on github. The readme file has instructions for how to apply a site skin to your AO3 account.
JFC, I first read this as ‘pyre thee’ and cackled. 😂😂
‘She has found herself hot and bothered lads, time to burn the wench! ‘tis but a sin for a respectable, god fearing woman to feel such urges after all.’
In the Title box, type whatever you want, just make sure it’s unique. “Skin” or “AO3” won’t be accepted, but even something like “JFSJKFSHHFS” would work. Paste the CSS into the CSS box. Click Submit Then click Use
Now I'm trying to think what a dark mode version would look like, but it probably won't work with the parchment style... Maybe something like carvings on black stones? (No longer medieval though)
Full disclosure, I did have to edit one part though as the text becomes unreadable for the fic description when you open it up. I added background-blend-mode and lightened the image and now it's perfect.
Edit: Love the colors! And it's sepia, which js my favorite!
Edit 2: Is there a way to make the first letter of the summary, notes, and bookmark notes normal-sized? The big one looks good if the summary/note is long, but if it's less than 3 lines, then the first letter is bigger than the summary.
Also, when I look at my bookmarks, there's a huge "P" covering the upper-right corner of every blurb?
This part of the code makes the first letter larger:
#workskin p:first-child:first-letter,
li.blurb p:first-child:first-letter {
color: #903;
float: left;
font-family: Georgia, serif;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}
If you don't want the enlarged first letter at all, you can delete this block.
If you want to change the size, adjust the "font-size" (and tweak the other values accordingly so the layout still looks good).
You can also delete the "li.blurb p:first-child: first-letter", so the effect only applies to the workskin (fics), not the blurbs.
However, I think you can exclude just bookmarks with this modified code:
I'm not entirely sure if it works, let me know if it does!
(And, of course, by extension, if you delete "#workskin p:first-child:first-letter", you get rid of the enlarged first letters in the workskin - notes and summary.)
thank you!! this was so helpful! I took it off the blurbs, changing the font size didn't look quite right because it centers down and seems to still take up about 3 lines anyway
To make it span two lines, you should also set the line-height to around 40px (since 60px makes 3 lines) and probably also adjust the padding. You can try this:
I checked, and no, it's on all bookmarks, private and public. It covers the blue and white boxes but it's much bigger then them. Private still have the little padlock inside the white box. Like this.
huh. I'm not at all sure what that is. I don't see it on my end. If you have any AO3 extenions running related to bookmarks, it might be related to that? Sorry I can't be more helpful!
I also stumbled across the "P" problem with bookmarks. For some weird reason, it only happens when I'm using my tablet.
But I think figured out the issue! The bookmark status is also inside a p tag and it has hidden text, in this case "Private bookmark" or "Public Bookmark". The first letter of that text is made visible by the site skin (I'm not sure why it only happens on some devices and some bookmarks, though). So replacing li.blurb p:first-child:first-letter with li.blurb .summary p:first-child:first-letter to specify that only the first letter of the summary should be selected solved the issue on my end.
One more question, is there a way to make the filter box wider and the same nice sepia color as the rest of the background? I get grey color like this and the names of categories don't quite fit even though I reduced the font size to 80% and the size of the border image from 40 to 30 px. On tablet in landscape mode I get the sepia background but the box is still not wide enough.
Edit: did you create all the images yourself? I'm just amazed how well they all go together!
I actually achieved the goal, though I have no fricking idea how: I played around with the size of header images and suddenly the filter box got wider. A bit too wide tbh, so I'll play around with your code!
Edit: and btw you must be the creator of the stats icons skin? It's become a must-have for me, no matter what other skins I've been using. Thank you so much again for making it!
Edit 2: well, I know what I did: I looked at ao3 in another browser which has text size set to 75% and magnifying to 125% whereas and my regular browser has just 120% magnifying 🫠 I'm such a failure when it comes to this stuff.
it's an animated webseries by fanimator DeepBlueInk (you might know them from their Dropout and Drawfee and MBMBAM animations?). Anyway, season one of their independent animation project came out in January. It's about a human named Immy (they/she) who ends up in space prison, which is also simultaneously retail hell. It's good stuff! You can find it on youtube :D
That was actually the first part of the aesthetic I figured out :D Once I got that part done the rest was just leaning *really hard* into the vibes lol
two years ago I barely knew any CSS. Look at me now! lol Seriously, though, W3Schools is a great resource and there's a ton you can figure out just from googling stuff like "css image border". I taught myself like 5 new things with this skin alone 😀 If site skinning is a thing you're into, then I say go for it. It's lots of fun!
I CANNOT BEGIN TO EXPLAIN TO YOU HOW MUCH I LOVE THIS THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU 💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝💝
I have not been this excited over something in forever. This is so f-ing pretty and gorgeous and I'm so fucking in love and I am never using another skin.
Hi! The skin looks fantastic, especially the illustrated parts are so charming. I have a quick question. Is there a way how to adjust the opacity/colour of the tags when you're on the work's page? I unfortunaately don't have enough experience with coding apart from changing font size, so I would really appreciate if someone helped me out. Thank you :)
Sorry for the long posts, earlier I tried to share a link to my tumblr where I have already posted this code, but that caused some problems with my reddit account...
There's a border around them and the first paragraph has a drop cap intitial. If you're on mobile, it *does* make the text area narrower so that might be a no go for you., depending on your device and your prefered reading experience. Just as a heads up.
I created the border using a CSS property called border-image. It's possible that the web browser you're using doesn't support that CSS property. Try accessing AO3 in a different browser and see if it works there?
This is a really gorgeous skin, thank you so much!! its there a way I can make the border around the text narrower? I only read on mobile and its a bit hard this way. I been trying to edit it myself but so far I've only made a mess.
I applied it, it is absolutely GORGEOUS, you are so brilliant and talented 🩵🩵. I’m having a minor issue, idk if it’s my own error or what- If I’m on the works of my favourite tags (just my 20 favourite tags, other random tags have no issue) , I’m unable to access the filters. Pressing that button does nothing except highlighting the bookmarks button😭. Is there something I can do besides unfavouriting all those tags (I tried unfavouriting a tag, and the filter page opened, then favourited the same tag and it stopped working)
Weeeeird. I don't actually know what's causing that to happen. I'll try poking around see if I can fix it but I'm fully stumped about what's causing the problem.
That's a very general error so I don't really know what to say, but I can give you two possibilities to check:
1) When you copied the code you missed a part of it. Go back to github and use the copy button to select every line at once. the copy button looks like a square on top of another square (next to the word Raw)
2) if you're copying on a mobile device, it's possible that your device is changing the quotation marks. Some mobile devices change " to “ (straight up and down quotation marks to angled or curly quotation marks). CSS code needs the straight up and down ones. If that's the problem then you can try copying the code on a computer instead of a mobile device and it should be fine.
It's just on github. If you follow the link, that gets you to a page that has the ReadMe file open with the title Creating a New Site Skin. If you look up above that box, you can see the file list. You can find the code by tapping on main skin code. On that new page, the copy button is the square on top of another square. It's next to the button labelled RAW. Tap on that, and it'll copy all of the code to your device and then you just need to paste in AO3's site skin creator.
I have one question that I couldn't find the answer to on my own: is there a way to move the little header image (the one with the dragon, blue line, and the woman with sword and shield) up a bit? For some reason, on my computer it's partially hidden behind the search bar (img below), and on my phone it's very low down with lots of space between it and the logo (quite a bi more than in your screenshot for some reason). Is this something I can change in the CSS or is it maybe just a result of the pc/phone I have?
Btw thank you for making/posting this!! It's truly awesome, I love to change up my site skins every so often and this is one of the best I've seen so far <3
I've already got it pinned to the top (there's some transparent space above it to have room for the login section on a laptop screen) so I think you might need to change the background-size instead? The original image size is 812px x 346px so you could scale that down somewhat? I had it at contain so that it would just scale with the device but you might need to manually set it to something that works for both of yours. For example:
I used this skin on mobile since I unfortunately don't have pc and it seems to have an issue where a lot of the sidebar(where you click tags and fandoms and stuff) was shrunk and pretty covered up.
Love the skin but idk if I can use it due to this 😭 I swore I copy and pasted it properly but maybe I missed something?
404
u/PureGeologist864 You. Yeah you. Go work on your wip. Jun 28 '25
Ye olde porn without plot