AO3 @ZerafinaCSS | Main tumblr @notfinalized
Please send a dm if you have issues with my site skins. The askbox is only for general questions/comments.
Hi, I started learning css a few days ago, now I'm trying to make my own site skins, but there's one thing I'm not entirely sure about ā how to make skins look good both on computers and mobile? Should I make two separate skins? I don't see people doing that. I know there's something called media rule, but it doesn't work on ao3. I'm trying to read and investigate a lot of code but I'm still not sure what the secret is š I'd really appreciate a piece of advice ā¤ļø
Hi! Unless you manually change the settings, your site skin will automatically be appended to both the desktop and mobile versions of the default AO3 skin. (You can view the default skin here, for example; the mobile skin is "(26) media narrow"). So you may not need to adjust anything for mobile if your skin isn't too complicated and doesn't have many layout changes.
If you do want to use media queries, AO3 offers the option to create a mobile skin and attach it to your regular skin using the parenting method. Most people who use this method don't create an entirely new skin for mobile. They just add some code to adjust things that don't work well on mobile in their main skin.
Create a mobile skin:
Create a site skin and put in the CSS code you want to use
Click on Advanced Show
Select Parent Only (this is optional, so that you can't accidentally use it by itself) and under Choose @media select only screen and (max-width: 42em)
Click Submit
Add the mobile skin to your main skin:
Go to your skins settings
Click on Advanced Show
Click Add parent skin, type in the name of your mobile skin and select it from the dropdown
Click Submit/Update
If you're interested in seeing examples, my neos skin uses a chain skin to combine several parent skins, including tablet and mobile ones. For a much simpler example, take a look at my first icon replacement skin.
hiii love your works, ive started using the stat icon code but i found that a lot of the links have turned dark red is there a way to fix that? ty in advance!
Hi! The link colors are changed intentionally to match the AO3 default site skin. But you can change them to any color you want in this section of the code.
Is it possible to make a workskin where I can make a customized kudos message with a gif?
Hi! As far as I know, AO3 has removed the option to create custom kudos messages for workskins. You can only customize them with site skins. However, only you (and anyone else who applies your specific site skin, if you choose to share it) would be able to see it.
That being said, it is possible to add a gif to the kudos messages. Just be aware that you have to host it on an image hosting site like Squidge Images.
I'm modifying the code for the kudos message I previously shared to include a replaceable image. It can be a gif, but other formats work as well. You just have to replace the image url with your own.
Edited: 04 June 2026
#kudos_message {
margin: 0.643rem auto;
padding: 0.25rem 0.375rem;
border-radius: 0.25rem;
font-size: 0;
line-height: initial;
}
#kudos_message.notice::after {
#kudos_message.kudos_error::after {
display: block;
padding: 0.5rem 1rem 0.5rem 3rem;
background-position: left center;
background-size: 2rem;
background-repeat: no-repeat;
font-size: 0.875rem;
}
#kudos_message.notice::after {
background-image: url("https://images.squidge.org/images/2025/02/15/zerafina_icon_kudos_01.png");
content: "This is the new kudos message - replace this with your own text";
}
#kudos_message.kudos_error::after {
background-image: url("https://images.squidge.org/images/2025/02/15/zerafina_icon_kudos_01.png");
content: "This is the new message if you have already left kudos - replace this with your own text";
}
hi! the header centering anon here. i am trying to change the header colour of the header but without using wizard. i just want to have it blend in with the background, but it doesn't budge no matter what, stays the default header colour/the one in wizard. i was able to change the lower plaque of the page, #footer, with just background-colour, but this code is not working no matter what (i made it a parent skin, put it into the css editor of the skin, added the !important, nothing)
#header nav:has(> .primary) {
order: 2;
flex: 1;
min-width: 50vw;
max-width: 100vw;
background-color: #333333 !important;
}
i would say i am 99% sure it must be working and i found the right element definer(?), through firefox. but nope, still the same.
Hello again! Without seeing your entire current code, I can only guess what might be wrong. You could try removing the background from #header .primary and defining it for #header:
Hi! Love love LOVE your skin, and i was wondering if theres any way to remove like. A bunch of stuff from the dashboard (co-creator signups, assignments, claims, related works, gifts, etc etc)? I use your site wizard and have big font sizes but with some site skins my profile just ends up crowded :(
Hi! I'm not sure if you've got me mixed up with someone else, because I don't know what you mean by 'your site wizard'. However, I do know how to remove those elements. The simplest way I can think of is to hide the last section of your dashboard entirely. Just remember that it's hidden, in case you ever receive a gift.
I haven't tested it extensively, so please let me know if there are any issues.
Hi i love your work, recently I've been messing around and I was wondering if there's any way to COMPLETELY change the kudos message with only sites skin???, so far the closest so far ive found is using #kudos_message.notice::after {content:"";} but that doesnt override the previous text
Hi! You can replace the message by using a site skin, but only you will be able to see the new message. Everyone else will still see the default message.
Here is the code:
#kudos_message {
font-size: 0;
margin: 0.643rem auto;
padding: 0.25rem 0.375rem;
border-radius: 0.25rem;
}
#kudos_message.notice::after {
font-size: 0.875rem;
content: "This is the new kudos message";
display: block;
}
#kudos_message.kudos_error::after {
font-size: 0.875rem;
content: "This is the new message if you have already left kudos";
}
how do you change the margins on the left and right for the text inside a work?
One option is to simply use the Site Skin Wizard. There is a field for the work margin width, where you can enter a number such as 10 (= 10% of the page width).
If you want to add the code to an existing skin, you can use this snippet:
#workskin {
margin: auto; /* reset margin (just a precaution) */
max-width: 90%; /* change text width here */
}
Change the percentage to your preferred text width. I find this slightly more intuitive than the wizard's method, but that's just my preference.
Hi, Iāve been figuring out site skins to make my ao3 display less cluttered and was wondering if you know how to hide/remove the āadd to collectionā button in bookmarks. Iāve found snippets of css to remove other buttons I donāt use but I canāt find anything for that one. Thanks!
Hi! I've added the code for hiding that button to the "Hide Specific Buttons" section in my Utility Snippets file on GitHub.
Hi! Yes, that's possible! I assume you're looking for a more comprehensive option than the site skin wizard, where you can change the font for most of AO3, but some parts, like the headings, remain the same.
You can copy the part of the code for changing the fonts from my neos base skin and add it to your own skin. Look for the "FONTS" section, located relatively at the top, or use your browser's search function to search for "font-family" (without the quotation marks).
There are three parts for changing the fonts: The first one is for the main font, the second one is for headings, and the third one is for monospace fonts. Each section has a list of fonts right after "font-family", for example:
You can add the name of the font you want to use at the start of the list or replace the whole list. I recommend keeping a few other fonts as fallbacks. They are necessary because a font has to be installed on your device for it to be displayed. If it isn't, the next font on the list will be used instead.
ao3 header anon here. both snippets worked, i just couldn't get the ao3 heafer one to work, but ty a lot!!
as to that code, i shortened it to this (code listed down) and it did move the navigation to between "archive of out own" and "hi user" but it looks very chopped and even worse on mobile. is it possible to make it move without the pictograms for the "hi user", post and log out, or does it mess with the css and layout too bad? i just like these buttons and the search one written.
and ty for making all your skins!! the utility repository is a genuine treasure
Hello again! This is kind of tricky because some of it only works when the text takes up less space and in combination with the neos skin, which has tablet and mobile versions that make the header look better on smaller screens. I tried to tweak it so that it works on its own, but it's not an ideal solution. It looks ok on wide and small screens (I just centred everything there), but weird on midsize ones.
I also noticed that you kept the variables (the parts with "var(--ā¦)"), which only makes sense in combination with one of the neos themes where the values are defined. So I removed those too.
New Usercript: Change site skins from anywhere on AO3!
I'm back with a new userscript! This one was born out of my compulsive need to switch site skins throughout the day.
AO3: Skin Switcher lets you change site skins from anywhere on AO3 without losing your place. The skins are sorted alphabetically, and there's a home button in the top right corner that takes you to the site skins page.
There's also an Edit Mode, which is useful for site skin makers. Instead of activating a skin, it redirects you to the skin's editing page.
Installation
Get Tampermonkey (works on Safari / iOS, Chrome, Firefox).
Install the script from GreasyFork.
Under 'Userscripts' in the navigation bar, select Skin Switcher.
how did you learn ao3 css? just trial and error? because i have been just picking at skins others wrote to make something i like to use, but i can't really figure out how all that works. is chrome's developer even useful for that?
It definitely started out as trial and error, as well as looking at other people's code to figure out which parts changed which parts of the website. I still do that to some extent, and I often look up online how to code things in the best way to get the results I want.
But I only really started to know what I was doing after going back to university for an additional degree and having to take a coding class. The html and css stuff I learned there was VERY basic and I'm still an html novice. However, being able to read html code and understanding how it connects with css has helped immensely.
In short, before you dive too deep into AO3 site skins, make sure you have a basic understanding of what html and css is and how they work. There are many online tutorials for that, such as W3Schools.
And yes, I highly recommend using the developer tools (though I prefer Firefox). AO3 skins here on tumblr has a tutorial you might find helpful.
Haii I was curious if you did all your coding on GitHub? I want to make a custom skin for my Ao3 but I struggle when I can't actively see what changes I'm doing and I've just kind of been in there blind and changing things up to see what sticksš
When I first started out, I only used the AO3 editor, so I can feel your pain! š
But fear not! I have a few recommendations for seeing the changes live in your browser.
1. Your browser's style editor
I try out different tools every now and then, but I always end up going back to this one (at least in part). It allows you to view and edit the css code used on any site and to add your own code. Here is a short tutorial for Firefox, which is my preferred browser, but other browsers like Chrome have similar features.
Personally, I find this the most intuitive and seamless tool, even though it is rather rudimentary. Its main limitations are that you can't apply css to multiple pages at once and that you need to save your code before reloading a page. (At least as far as I know ā¦ if anyone knows a way around this, please share it with me!)
2. The Stylus browser extension
Similar to the browser style editor, the stylus extension allows you restyle websites via css. It is compatible with Firefox, Chrome and any Chromium-based browsers.
What I like about Stylus is that it flags syntax errors and that it lets you apply styles to the whole website, not just individual pages.
3. Visual Studio Code with the Live Server extension
The VS Code editor also allows you to edit your css files and to see the changes live in your browser, but only if you add the Live Server extension.
I have the least experience with this one, but I tested it briefly and it worked, so I want to at least mention it.
āāā
And a few general tips:
I recommend always working with two windows/monitors. One for the css editor and one for the browser.
Remember to occasionally check if your skin can be saved on AO3, because it does not allow all css properties that can be used with the recommended tools/editors.
If you're interested in chatting about site skins or need help with your code, you're welcome to join the Themes of Our Own Discord server!
