Ao3 Skins Faq

ao3 skins faq

Just a few answers to questions I've seen in the notes on this poll

What is a site skin? A site skin is CSS code that changes the way AO3 looks. This could be anything from changing the page colour to the font to the way tags look to hiding parts of the site - and more.

Where do I find site skins? There are a few places. The easiest one is in the site footer (that red band at the bottom of the page). There are four skins linked there under the word Customize, and you can click on them to see what they do. Another place to find skins is https://archiveofourown.org/skins?skin_type=Site Those skins were created years ago and loaded into AO3 for easy applicaiton. Just hit the Use button and they'll be applied to your account. Lastly, you can find skins created by other AO3 users. Some people post their code on AO3 itself, some use github or other code repositories. A lot of folks share their skins here on tumblr with images and then a link to the code itself.

How do I save them to my account? If you're using the ones in the footer or the ones linked on the Public Skins page, you don't need to save them. Those are built into AO3. If you want to create your own (or use one created by another user), that's when you save them to your account. Tap on your name at the top of the Ao3 page. Then select Dashboard, then select Skins. Tap the button labelled Create Site Skin and give your skin a unique name. Write or paste the CSS code into the big box, then hit the Submit button to save it. If you want to use it right away, hit the Use button on the next page.

What's the difference between a Work Skin and a Site Skin? A work skin changes the appearance of an individual AO3 work, and it changes it for everyone who looks at that work. This lets you turn your fic into something that looks like an email or a text chain or a newspaper, etc etc without having to use images. Work skins can also be turned off by other users, so if they just want to read the plain text of your work they still can. A site skin changes how the entire site looks - but only for you.

How do you have 100+ site skins?? I start a lot of skins that I abandon partway through. I also create skins for certain specific purposes - for example, changing the look of all of the buttons on the site - and then I can just grab that chunk of code and add it to any "full" site skins I create for the purposes of sharing. I have a lot of experiments that fail, but I keep the code around because maybe I'll learn how to fix it someday.

Can I create my own site skin if I don't know how to code? You can! AO3 has a site skin Wizard that will help you change the colours, fonts, and font sizes on the site. Go to your Dashboard > Skins > Create Site Skin and then tap on Use Wizard. Give your skin a unique title. Click on the ? bubbles to get examples of how to enter information into each box. If there's anything you don't want to change, you can just leave that box empty. When you add in colours, they must be hex colour codes, and they must include the # at the start. Any font you add need to exist on your device (so it might work on your computer but not on your phone because your phone doesn't have that font installed). You can add parent skins to Wizard skins, too. See below!

I wish I could have [X functionality] in [Y aesthetic skin] You can! If you create one site skin in order to block certain works or tags, you can add that skin on top of an aesthetic skin. To do so, edit your aesthetic skin, scroll down and tap on the Advanced button (lower left of the CSS box), tap on Parent Skin, type in the name of your blocking skin and Add Parent Skin. Then save your aesthetic skin, and the two are combined! You can also do this with those skins that are native to AO3. So for example, you want a Reversi (dark mode) skin that Shortens Long Tags and also hides the "you have muted some users" banner. Create a site skin with the muted users code:

p.muted.notice { display: none; } And add Reversi and Shortening Long Tag Fields to it as parents. (you can also copy/paste all of the code into a single site skin, if you'd prefer)

For more FAQs, you can check out the Skins & Archive Interface section on AO3's FAQ page. Or you can drop questions in the notes, too.