Archive of Our Own

Chapter Text

This is a little intro, explaining how everything is presented:

Summary: What the code does

Top author's note: What can be customized

Text: The code (sometimes separated by linebreaks, explanation on why in one of the author's note)

Bottom author's note:  Further explanations/info as needed

Starting with the basics, here's how to create a site skin:

1. Log in to your AO3 account;
2. Go to the 'Skins' page;
3. Click 'Create Skin';
4. In the 'About' section,
   • Make sure the 'Type' is 'Site Skin';
   • Give your skin a 'Title' (it has to be unique!).

Now that your foundation has been created, you can choose the main colours for the website. You can do that by:

1. Clicking the 'Use Wizard' button, near the 'Create New Skin' title;
2. Go to the 'Colours' section;
3. Add your site colours! I personally use the Adobe colour wheel to find my colours, but I'm sure there are plenty of other websites offering the same or similar tools;
4. If you wish, you can also change the fonts in the section above ('Fonts and Whitespace'). Just make sure to choose backup fonts (separated by commas) in case the device you use doesn’t have your first choice.

Great! Now onto the code. You can simply copy + paste any code you'd like to add to your skin in the 'CSS' section back on the 'Write Custom CSS' page, click 'Submit' when done and voila! All that's left to do is click 'Use' on your custom site skin!

Chapter index:

1. Intro
2. Header: removing the AO3 logo and changing the title at the top of the website
3. Avatar: removing your avatar from the header
4. Buttons: changing the colour of the buttons to match with your chosen colours
   • the last part of the code comes from one of @memorizingthedigitsofpi’s Tiktok (they make AO3 coding videos if you want to check it out
5. Tag Emojis: replacing the commas in between tags by emojis
   • this and the next chapter were inspired by @memorizingthedigitsofpi who gave titles to introduce the tag category (here)
6. Tags' Text: changing the tags text colours
7. Highlight Tags: highlighting and 'hiding' certain tags
8. Stats Emojis: changing the stats titles to emojis (language)
   
   • the original code is from @memorizingthedigitsofpi (here) but I've added onto it
9. Comments' Colours: changing the comments colours
10. Updates page: where I publish any updates made