Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Series:
Part 5 of AO3 Site Skins
Collections:
Ao3 Skins
Stats:
Published:
2025-12-21
Updated:
2025-12-22
Words:
668
Chapters:
3/?
Kudos:
11
Bookmarks:
3
Hits:
246

Site Skin Add-Ons

Summary:

A collection of code snippets that can be added to the AO3 default site skin or other skins.

Contains:

  1. Instructions and General Information (Updated: 21 Dec 2025)
  2. Replace the Content Icons With Text Labels (Updated: 22 Dec 2025)
  3. Color-Coded Tag Boxes (Updated: 22 Dec 2025)

Notes:

This collection is the result of my decision to only post site skins that change the appearance of the entire website, like my neos skin, as separate works. I have three older skins that I would maybe post as chapters here if I were to create them today:

Chapter 1: Instructions and General Information

Summary:

Here are some basic explanations about site skins in general and my skins in particular. I'll be updating this chapter when necessary.

Chapter Text

What Are Site Skins?

Site skins are customisable style sheets that alter the appearance of AO3. They are created using the CSS (Cascading Style Sheets) coding language.

If you want to learn more, I recommend reading the Skins and Archive Interface FAQ.

 

Create a Site Skin

This is also explained here in the FAQ. Here is my short version:

  • Log in and go to My Dashboard → Skins → Create Site Skin (or follow this link)
  • Give the skin a unique title
  • Paste the code you want to use into the CSS field
  • Click Submit to save the skin
  • If you want to apply the skin, select the Use button

 

Combine Site Skins

You can combine site skins by either pasting different code parts into the CSS field, or by using the parenting method described here in the FAQ.

 

Customize the Site Skins Shared Here

I usually add comments to my code to make it easier to identify areas where you might want to make changes. A CSS comment always starts with /* and ends with */. Unfortunately, AO3 removes all comments from the code after you save the skin, which makes it harder to customize. Therefore, I strongly recommend that you download or copy the code and save it somewhere before you start editing.

 

Troubleshooting

If you find any errors while using the code shared here, you are welcome to report them to me. But please check first if you are using the latest version from the GitHub repository and update your skin if you aren't—maybe the issue has already been fixed.

Please also specify the device, operating system, and browser that you are using, as well as whether you combined the code with another site skin.

As I don't know everything there is to know about CSS code, I may not be able to fix every issue, but I'll try my best. I also might not be able to respond right away.