Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Series:
Part 11 of How to AO3 , Part 6 of pi learns how to site skin
Collections:
Ao3 Skins
Stats:
Published:
2022-04-05
Completed:
2022-04-05
Words:
1,144
Chapters:
2/2
Comments:
12
Kudos:
122
Bookmarks:
74
Hits:
4,429

Chapter 2: How to make a site skin

Chapter Text

In order to create a site skin, you need to have an AO3 account and you need to be logged in. 

  1. At the top of the page, tap on your username.
  2. From the dropdown menu that appears, tap on Dashboard.
  3. On your Dashboard, tap on the link called Skins.
  4. On the Skins page, tap on the button labelled Create Site Skin.
  5. Give your site skin a unique title. I usually add my username or nickname to the end of my title in order to make it unique. You need a unique title in order to save your skin.
  6. Copy the code you like from Chapter 1 and paste it into the CSS box. 
  7. After you have pasted all of the bits of code that you want to include, scroll to the bottom of the page and tap on the button labelled Submit. This will save your site skin and take you to a new page where you can see the title of your skin as well as all of the code.
  8. On the site skin page, tap on the button labelled Use. You will now have this skin every time you're logged in on any device. 

 

If you would like to use the code from Chapter One with another site skin that you're already using, you can edit that site skin and copy/paste the bits of code into the CSS box either before or after the other code you already have. 

 

If you want to pair the code from Chapter One with one of the Public Site Skins provided by AO3, such as Reversi (dark mode), follow Steps 1-6 from above. Then:

  1. At the bottom of the CSS box, look for the word Advanced and tap on the button labelled Show
  2. Tap on the button labelled Add Parent Skin.
  3. Start typing the name of the skin you want to combine your new code with. This can be any of the public site skins or any custom skin that you have made yourself. 
  4. Choose the name from the dropdown menu. 
  5. Follow steps 7 and 8 from above.