AO3 Skins

From Fanlore
Jump to navigation Jump to search

Examples Wanted: Editors are encouraged to add more examples or a wider variety of examples.

Related terms: Skin (web design)
See also: Help:Skins, Archive of Our Own
Click here for related articles on Fanlore.

Skins are custom website styling using CSS that is applied to the site to change its appearance from a default, sometimes also allowing for more options interacting with/accessing the site.

AO3 has a native ability to reskin the site. According to AO3's FAQ:

There are two types of skins: work skins and site skins. You can choose to apply an existing public skin, or create one for yourself using CSS.

Site skins are custom stylesheets that change the way the Archive is displayed for you. Only logged in users can change how the Archive is set up for them personally...

Work skins are custom stylesheets that change the formatting of individual works. All users can access skins created for individual works.[1]

Skins are coded using limited CSS, and for work skins also are written in conjunction with HTML used in the work they are applied to.

On AO3, a logged-in user can code their own skin, choose any skin from the public list of skins, or for site skins use the Site Skin Wizard to create a color palette swap for the site. Logged out users or those with no accounts are limited to the default Archive skin.


Skins were introduced on AO3 in September 2010 through a short tutorial post (which also linked to the unofficial ao3_skins Dreamwidth community).[2]

In November 2011, there was a major overhaul of the code for skins. This added new features (such as the ability to make site skins modular, or limit them to only mobile devices), though the changes also were expected to break some of the old skins.[3] Following this news post, one of the coders, lim, compiled a list of the new public skins, conveniently grouped by their type/purpose.[4] Along with this change came tweaks to the default archive appearance. In the comments of lim’s list, it's apparent that some fans appreciated the larger default text size, while others requested a skin to change back to the old default appearance.

The skins feature has remained unchanged since the 2011 overhaul. There have been changes to the default site skin such as the 2016 update to make the archive more friendly to smaller displays (e.g. mobile devices). The actual skins creation, however, has not changed, meaning users are limited to CSS stable in 2011.

Impact on Fans

Work Skins

Work skins are a staple of the Homestuck fandom, as they are used to imitate the iconic color and text style of the original webcomic. In fact, a Homestuck skin is one of only three public work skins to exist on AO3 (as of 27 May 2018). One user even wrote and shared a script that will automatically format a document, allowing fan to more easily take advantage of the public skin.[5] For an idea of how popular this skin is, look at the Homestuck works page and enter work_skin_id:277 to see how many works use it.

The Undertale fandom has been known to use work skins in order to style characters' fonts to match their in-game styles.

Work skins are also commonly used to mock-up texting or social media such as Twitter, as an alternate to plain text or static images. User La_Temperanza has the series AO3 Work Skins/Tutorials which teaches users how to use work skins to format stories so that they mimic iOS Messenger app, emails, notebook paper, stationary, AO3 stories' kudos and notes, as well as create extra tools like highlightable invisible text, footnotes, a choose your own adventure format, etc. There are many other users with similar guides regarding the different applications of work skins on AO3.

Site Skins

Site skins can be very useful for people with disabilities or alternate viewing preferences by increasing the text and button size, changing the site to a dark background with light text to reduce eye strain, or other changes.


Thank you thank you!! This new default skin is already better with the large font I need to read with, and being able to hide bits and pieces selectively will help even more. I really appreciate all the hard work :)[6]

They also are used to customize the experience for organizational or aesthetic results. For example, users who dislike large blocks of tags can use a skin which fixes the tag section to a maximum length and gives it a scroll bar. If a user wants to emphasize certain meta information more than others (say they care about the word count more than the number of comments), they can change the more important part to a bright color so that it stands out and they have an easier time navigating and making quick judgements.

(Here would be an ideal place to get an opinion from someone about the usefulness and/or issues of AO3's site skins in regards to this.)

Why Arent't Skins More in Use?

Most works on the Archive don't use work skins. One user posits that it's because many users come from sites like and Tumblr where customization in posts is limited.[7]

Fannish Resources


  1. ^ "FAQ What is a skin?". Retrieved 27 May 2018.
  2. ^ "Tutorial: Skins". Archived from the original on 2021-04-11. Retrieved 30 September 2018.
  3. ^ "Yay, Skins are Coming! Beware, Skins are Coming!". Archived from the original on 2021-03-09. Retrieved 30 September 2018.
  4. ^ "Skins: A Love Story (by lim)". Archived from the original on 2018-02-14. Retrieved 30 September 2018.
  5. ^ complexQuanta. Homestuck pesterlog autoformatting script, posted to Archive of Our Own on 15 November 2013. (Accessed 27 May 2018.)
  6. ^ Jeshyr on 11 November 2011. "comment on announcement post". Retrieved 30 September 2018.
  7. ^ La_Temperanza. Comment posted to Archive of Our Own on 25 January 2016. (Accessed 27 May 2018.)