Work Text:
Previews of the work icons and the default user icon
| Default colors with white text/symbols (+ rainbow user icons): | Default colors with black text/symbols: |
|---|---|
 |
 |
| Muted/darkish: | Black and white: |
 |
 |
| Pastel colors (+ pastel rainbow user icons): | Pink: |
 |
 |
Step 2: Give the skin a unique title like "AO3 Icons by Zerafina - [your user name]"
Step 3: Paste this code into the CSS field.
-
If you want to use the icons with the default color scheme and white text, you can go to Step 4.
Click here if you want to use one of the other color schemes instead.
Find this line of code:background-image: url("https://zerafinacss.github.io/ao3/imageset/default.png")Then replace the link between the quotation marks with one of the following ones:
- Default colors + black text:
https://zerafinacss.github.io/ao3/imageset/darkmode.png - Muted/darkish colors:
https://zerafinacss.github.io/ao3/imageset/muted.png - Black and white:
https://zerafinacss.github.io/ao3/imageset/bw.png - Pastel colors:
https://zerafinacss.github.io/ao3/imageset/pastel.png - Pink:
https://zerafinacss.github.io/ao3/imageset/pink.png
- Default colors + black text:
Step 4: Click Submit
Step 5: If you only visit AO3 on your computer, you can now click on Use and you're done!
If you are using a mobile device, I recommend that you also install the mobile skin, otherwise some images will not be resized correctly on mobile.
How to install the mobile skin
Step 1: Go back to My Dashboard → Skins → Create Site Skin
Step 2: Give the skin another unique title like "AO3 Icons by Zerafina - [your user name] - mobile"
Step 3: Paste this code into the CSS field.
Step 4: Click on Advanced Show
Step 5: Select Parent Only and under Choose @media select only screen and (max-width: 42em)
Step 6: Click Submit
Step 7: Go back to the main skin you created before and click Edit
Step 8: Click on Advanced Show
Step 9: Click Add parent skin, type in the name of your mobile skin and select it
Step 10: Click Update
And that's it!
How to change the color of the AO3 logo in the header
Since AO3 finally supports more values for the CSS filter property, it is now possible to change the color of the logo with a single line of code. I recommend using a tool like this that generates the code for you. You just have to enter the color that you want the logo to have (as a hex or rgb code).
If you want the logo to match the pink icons (hex code: #ec137a), for example, the tool generates a line of code that looks like this: brightness(0) saturate(100%) invert(45%) sepia(96%) saturate(7491%) hue-rotate(320deg) brightness(93%) contrast(99%).
Now you have to find the following part of the icon replacement code:
#header .logo {
content: url("/images/logo.png");
}
The next step ist to put the generated line of code between the semicolon and the curly bracket at the end. Make sure that it starts with filter: brightness(0) saturate(100%) - if it doesn't, you can just add this part yourself. Otherwise the filters will not work properly for every color.
The final code for the pink logo should look like this:
#header .logo {
content: url("/images/logo.png");
filter: brightness(0) saturate(100%) invert(45%) sepia(96%) saturate(7491%) hue-rotate(320deg) brightness(93%) contrast(99%);
}
Updates
11 July 2024: The gen icons for ratings and relationships are no longer swapped in the symbols key.
11 August 2024: Fixed an issue where the collection icon was displayed in the wrong size in some places. Changed the way the header logo is replaced so that it automatically resizes on mobile devices, and deleted the part of the mobile fix that was previously necessary for this. I have also adjusted the code in a few places so that everything is more consistent and updated some of my comments in the code.
20 November 2024: A short tutorial on how to change the logo color has been added. I also created a GitHub repository to make it easier to share and modify the code. Future updates can be tracked there, but I will (probably) continue to add the date of the latest update in the description here. Additionally, I shortened the title of this work (it was previously called "Replace the AO3 icons and default images").