Archive FAQ > Skins and Archive Interface

Can I change the AO3 interface?

Yes! You can change the colors, fonts, and layout of the Archive of Our Own (AO3), as well as of individual works, by applying a skin. You can use skins created by other people or create your own using custom CSS. You must be logged in to your AO3 account to experience any skin you apply to the site itself, but any work skins you apply to your works will display to all users unless they choose to disable it. Please note that downloaded works don't retain their work skin, so make sure your work still makes sense without it.

For more information on how to change AO3's appearance, check out How do I create a site skin? or Where can I find a list of available site skins? You can also check out How do I create a work skin? if you'd like to customize the formatting of your work. For some fan-created tools to further edit the AO3 interface, please refer to the Unofficial Browser Tools FAQ.

What is a skin?

A skin is a customized stylesheet that changes the presentation of the Archive of Our Own (AO3) or of an individual work. They are created using the CSS coding language. 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.

Site skins are custom stylesheets that change the way AO3 displays on your devices. Only logged in users can change how AO3 is set up for them personally. For more information on the different types of public site skins, refer to Where can I find a list of available site skins? For more on creating your own, check out How do I create a site skin?

Work skins are custom stylesheets that change the formatting of individual works. By default, all users accessing your work on AO3 will experience it with the work skin applied, unless they have disabled custom work skins in their preferences. To learn how to turn off custom work skins, check out Can I hide a work skin other users have on their works? For more information on the different types of public work skins, refer to Where can I find a list of available work skins?

Please note that downloaded works don't retain their work skin, and users have the option of disabling the work skin, so make sure your work still makes sense without it.

How do I create a site skin?

To create a site skin:

  1. Log in and go to your dashboard by selecting the greeting "Hi, [username]!" and choosing "My Dashboard" from the menu, or by selecting your profile image.
  2. Select "Skins" from the menu found at the side of the page or at the top on a mobile device.
  3. On the Skins page, select the "Create Site Skin" button towards the top right of the page on desktop (or below the My Site Skins heading on mobile).

This takes you to the Create New Skin page, where you have the option to enter your own CSS code or to use our Site Skin Wizard. The page automatically opens with the "Write Custom CSS" option selected. To use the Site Skin Wizard instead, select the "Use Wizard" button towards the top right of the page on desktop (or below the Create New Skin heading on mobile). To learn more about this feature, refer to What is the Skin Wizard?

You must enter a title for your skin. This can be up to 255 characters long, and it must be unique across all users. To ensure this, you might like to include something unique to you, such as your username, in the title. All other fields are optional; however, if you don't enter any CSS, the skin won't do anything. Select "Submit" at the bottom of the form once you're satisfied with your skin.

For a list of the colors, fonts, and other coding elements you can use in your skins, refer to What CSS properties and values can I use in custom skins? If you'd like to create a work skin instead, check out How do I create a work skin?

How do I edit a site skin?

To edit a site skin:

  1. Log in and go to your dashboard by selecting the greeting "Hi, [username]!" and choosing "My Dashboard" from the menu, or by selecting your profile image.
  2. Select "Skins" from the menu found at the side of the page or at the top on a mobile device. This will list any user-created site skins you've created or applied
  3. Select the "Edit" button found below the blurb of the site skin you want to edit. This will bring you to the Edit Skin page.
  4. Add your desired edits. For a list of the colors, fonts, and other coding elements you can use in your skins, refer to What CSS properties and values can I use in custom skins?
  5. Select the "Update" button at the bottom of the page to save your changes.

How do I delete a site skin?

To delete a site skin:

  1. Log in and go to your dashboard by selecting the greeting "Hi, [username]!" and choosing "My Dashboard" from the menu, or by selecting your profile image.
  2. Select "Skins" from the menu found at the side of the page or at the top on a mobile device. This will list any user-created site skins you've created or applied.
  3. Select "Delete" below the blurb of the site skin you want to delete.
  4. You will be asked to confirm that you want to delete your skin in a pop-up window. If you still want to continue, select the "OK" button. Your site skin will then be deleted.

If you don't want to delete your site skin and just want to return to the default skin, check out How do I revert to the default site skin?

How do I apply a site skin?

There are two main ways to apply a site skin to the Archive of Our Own (AO3), both of which require you to be logged in to your account.

Applying a skin from your Preferences page:

  1. When you're logged in, select "My Preferences" from the "Hi, [username]!" menu at the top of the page. If you're on your dashboard, you can also choose "Preferences" in the navigation sidebar (found at the top of the page when you're using a mobile device).
  2. Scroll to the third section, where it says "Your site skin". You can select the "Public Site Skins" button to get a list of available skins, or select the menu below this button to choose the skin you wish to apply. The menu lists any skins you've created yourself and then the public site skins.
  3. Use the "Update" button at the bottom of the page to confirm your choice.

Applying a site skin from your Skins page:

  1. Go to your dashboard by selecting the greeting "Hi, [username]!" and choosing "My Dashboard" from the menu, or by selecting your profile image.
  2. Select "Skins" from the menu found at the side of the page or at the top on a mobile device.
    • To use a skin you've created yourself, select the "Use" button below its blurb.
    • To use a public site skin, select the "Public Site Skins" button
      • Select the "Use" button beneath the blurb of the skin you wish to apply.
      • Or you can check out a site skin's markup by selecting its name. At the bottom of the page, select the "Use" button to apply the skin.

If you wish to test how a skin works before you apply it, select the "Preview" button instead of the "Use" button. Check out How do I revert to the default site skin? for help with returning the site to its default format.

To use a public site skin for a limited period of time, please refer to What is the "Set for Session" option and how do I apply it?

How do I revert to the default site skin?

There are a couple of different ways to return to the default skin. Below are the two main options.

From the footer

  1. While logged in, scroll to the bottom of any Archive of Our Own (AO3) page.
  2. Select the "Choose skin" menu below the "Customize" title
  3. Select "Default". This will revert to the default skin and redirect to the AO3 homepage with a message confirming "You are now using the default Archive skin again!"
    1. From your skins page

      1. Log in and go to your dashboard by selecting the greeting "Hi, [username]!" and choosing "My Dashboard" from the menu, or by selecting your profile image.
      2. Select "Skins" from the menu found at the side of the page or at the top on a mobile device.
      3. Select the "Revert to Default Skin" button towards the top right of the page on desktop (or below the My Site Skins heading on mobile) The page will refresh to display the default skin. This button will only appear if you're using a skin other than AO3'sdefault.

What is the Skin Wizard?

The Site Skin Wizard is a fill-in-the-blank system that helps you create a basic skin for the Archive of Our Own (AO3) without needing any knowledge of CSS. You can change the color scheme, font properties, and spacing by entering the characteristics you'd like your skin to have. Note: the Site Skin Wizard only creates skins for the AO3 interface, not for individual works.

To access the Site Skin Wizard:

  1. Log in and go to your dashboard by selecting the greeting "Hi, [username]!" and choosing "My Dashboard" from the menu, or by selecting your profile image.
  2. Select "Skins" from the menu found at the side of the page or at the top on a mobile device.
  3. Select the "Create Site Skin" button towards the top right of the page on desktop (or below the My Site Skins heading on mobile)
  4. Select the "Use Wizard" button towards the top right of the page on desktop (or below the Create New Skin heading on mobile). This will bring you to the Site Skin Wizard.
  5. Fill in the fields with the properties you'd like your skin to have.
  6. Select "Submit" towards the bottom of the form when you are satisfied with your skin.

For a list of available customizations, please refer to What CSS properties and values can I use in custom skins? For information on how to apply or edit a site skin, refer to How do I apply a site skin? or How do I edit a site skin?

Where can I find a list of available site skins?

As well as the default skin, we have three official, publicly available site skins that Archive of Our Own (AO3) users can apply to change aspects of the AO3 interface for personal use. These skins have features that aren't included in the default skin. You can find these on the Public Site Skins page.
The official public site skins are Archive 2.0 (the site default), Low Vision Default, Reversi, and Snow Blue.

Archive 2.0:
The default site interface with dark grey text on a white background and red highlights.
Low Vision Default:
A skin that simplifies and enlarges text and AO3 features.
Reversi:
A high contrast skin with a dark background and white text. "Dark Mode" is a commonly used term to describe such a skin.
Snow Blue:
A skin similar to the default skin except with a light blue color scheme.

For help with using these, check out How do I apply a site skin? Please note public skins aren't as rigorously tested and maintained as the site's default style, so you might run into errors or bugs. Should you encounter bugs when using one of the public site skins, please contact Support.

What are parent skins and how do I make one?

A parent skin is an option for you to use the same base settings for multiple site skins without having to recreate them every single time. For example, if you prefer a certain font family and size, you can make that into a parent skin. You can then make child skins that involve further specific changes, like having one skin with blue headings and purple text, while another has red headings and pink text.

You can apply multiple parent skins and order them based on the characteristics you want your site skin to have. For example, one parent skin can dictate a font family while another gives the headings a specific color.

If you're layering skins with conflicting characteristics, the skin ordered farther down the list will be used. Following the example above, if the parent skin has a blue background, but the child has a green background, when you apply the child skin, the background will be green. Likewise, if parent skin 1 has blue text, but parent skin 2 has green text, the text will be green.

Parent skins can be public skins, but please note public skins can be altered or deleted without prior notice.

A parent skin is defined when creating or editing the child skin, and must already exist. Once you have chosen or created your parent skin, you can follow the below steps to apply it to your child skin:

  1. Log in and go to your dashboard by selecting the greeting "Hi, [username]!" and choosing "My Dashboard" from the menu, or by selecting your profile image.
  2. Select "Skins" from the menu found at the side of the page or at the top on a mobile device.
  3. Select the "Edit" button below the blurb of the skin you wish to make a child, or select the "Create Site Skin" button towards the top right of the page on desktop (or below the My Site Skins heading on mobile) to start from scratch.
  4. Go down to the Advanced heading and, if necessary, select the "Show" button.
  5. Under the Parent Skins section, select the "Add parent skin" button.
  6. Enter the name of the site skin you wish to use as a parent skin. This is an autocompleting field, which means you can start entering the name and a list of suggestions will come up.
  7. Add more skins as parent skins as needed.
    • You can customize the order of parent skins using the provided textboxes next to Parent #.
    • If you chose the wrong skin and need to change it, select the "×" (remove) button next to the incorrect skin and enter the correct skin title.
    • If you added a parent skin level you don't require, select the "x" (cancel) button to the right of the Parent # line to remove it.
  8. When you're satisfied with your parent skin or skins and their order, select the "Submit" or "Update" button at the bottom of the page.

For more information on how to edit a site skin or to check out our public site skins, please refer to How do I edit a site skin? or Where can I find a list of available site skins?

What is the "Set for Session" option and how do I apply it?

The Set for Session option allows you to temporarily use a public site skin other than AO3's default. The skin will remain applied for two weeks, even if you log out and log back in.

To use the Set for Session feature:

  1. Scroll to the bottom of any Archive of Our Own (AO3) page.
  2. Select the "Choose skin" menu below the "Customize" title.
  3. Select the skin you wish to use.
    • If you selected Low Vision Default, Reversi, or Snow Blue, that skin's page will open with the skin applied, and a message will display stating that "The skin [skin name] has been set. This will last for your current session."
    • If you selected Default, you will be returned to the site's homepage with the Default skin permanently applied, along with the message "You are now using the default Archive skin again!"

Please note this feature only exists for public site skins, not skins that you create.

If you want to apply a site skin you've created or permanently apply a public site skin, please refer to How do I apply a site skin? If you want to go back to using the default skin, please refer to How do I revert to the default site skin?

How do I create a work skin?

To create a work skin:

  1. Log in and go to your dashboard by selecting the greeting "Hi, [username]!" and choosing "My Dashboard" from the menu, or by selecting your profile image.
  2. Select "Skins" from the menu found at the side of the page or at the top on a mobile device.
  3. Select the "My Work Skins" button towards the top right of the page on desktop (or below the My Site Skins heading on mobile). This will take you to the Work Skins page.
  4. Select the "Create Work Skin" button above the "My Work Skins" button you just selected. This will take you to the New Skin page where you can enter your custom CSS.
  5. This can be up to 255 characters long, and it must be unique across all users. To ensure this, you might like to include your username or pseud in the title.
  6. Add your desired properties. All fields other than the title are optional; however, if you don't enter any CSS, the skin won't do anything. (Check out our Tutorial: Creating a Work Skin for tips.)
  7. Select the "Submit" button towards the bottom of the page to save your changes.

Once you create a work skin, you still need to both attach the work skin and add the HTML markup to your work to connect the CSS class(es) to your work's formatting. Check out How do I apply a work skin to my work? for more information. For more detailed instructions, refer to our Tutorial: Creating a Work Skin.

For a list of the colors, fonts, and other properties you can use in your skins, check out What CSS properties and values can I use in custom skins? If you'd like to create a site skin instead, check out How do I create a site skin?

How do I edit a work skin?

To edit a work skin:

  1. Log in and go to your dashboard by selecting the greeting "Hi, [username]!" and choosing "My Dashboard" from the menu, or by selecting your profile image.
  2. Select "Skins" from the menu found at the side of the page or at the top on a mobile device.
  3. Select the "My Work Skins" button towards the top right of the page on desktop (or below the My Site Skins heading on mobile). This will list all the work skins you've created.
  4. Select the "Edit" button below the blurb of the work skin you want to edit. This will bring you to the Edit Skin page.
  5. Add your desired edits. (Check out our Tutorial: Creating a Work Skin for tips.)
  6. Select the "Update" button at the bottom of the page to save your changes.

Please note that only the creator of a skin can edit it.

How do I delete a work skin?

To delete a work skin:

  1. Log in and go to your dashboard by selecting the greeting "Hi, [username]!" and choosing "My Dashboard" from the menu, or by selecting your profile image.
  2. Select "Skins" from the menu found at the side of the page or at the top on a mobile device.
  3. Select the "My Work Skins" button towards the top right of the page on desktop (or below the My Site Skins heading on mobile). This will list all the work skins you've created.
  4. Select the "Delete" button below the blurb of the work skin you want to delete.
  5. You will be asked to confirm that you want to delete your skin in a pop-up window. If you still want to continue, select "OK". Your work skin will then be deleted.

Once a skin is deleted, any work to which the skin was still attached will revert to default formatting.

How do I apply a work skin to my work?

You can apply a skin you've created to a work with the following steps:

  1. When you're logged in, select "New Work" from the "Post" menu at the top of the page.
    • To edit an existing work instead, select "My Works" from the "Hi, [username]!" menu at the top of the page and then select the "Edit" button below the blurb of the relevant work.
  2. In the Associations section of the Post New Work page, navigate to the "Select Work Skin" option. Choose the skin you wish to apply from the menu, which lists any skins you've created and the Archive of Our Own's (AO3) three public work skins.
  3. Add HTML markup to your work to connect the CSS class(es) to your work's formatting.
  4. Select the "Preview" button to make sure the skin is displaying correctly or select the "Post" button to finalize the update.

Please note that downloaded works do not retain their work skin, and users have the option of disabling the work skin, so make sure your work still makes sense without it.

For more detailed instructions, please check out our Tutorial: Creating a Work Skin . For more information on how to create a work please check out our Posting and Editing FAQ or the Tutorial: Posting a Work on AO3.

How do I apply a work skin to a co-created work?

You can apply a work skin to a co-created work the same way as you would to a work owned by one person, using any skin owned by you or your co-creators. However, please note that work skins can only be edited by their owners, even if the skin is applied to a co-created work.

If the creator posting the work doesn't have the related work skin on their account, the work skin can't be added when first posting the work. The work will need to be edited to add the co-creator's work skin after they have accepted the co-creator request for the work.

Please check out How do I apply a work skin to my work? for more information. For more on co-creator requests, check out How can I allow others to add me as a co-creator to a work or series?

Where can I find a list of available work skins?

To reach the list of all available Public Work Skins:

  1. Log in and go to your dashboard by selecting the greeting "Hi, [username]!" and choosing "My Dashboard" from the menu, or by selecting your profile image.
  2. Select "Skins" from the menu found at the side of the page or at the top on a mobile device.
  3. Select the "Public Work Skins" button towards the top right of the page on desktop (or below the My Site Skins heading on mobile).

What public work skins are available?

There are three public work skins available for Archive of Our Own (AO3) users: Basic Formatting, Undertale Work Skin, and Homestuck Skin. You can add the skin you'd like to use and add the HTML markup to connect the CSS classes to your work's formatting. Refer to How do I apply a work skin to my work? or our Tutorial: Creating a Work Skin.

Basic Formatting: The Basic Formatting skin gives creators common formatting options for their text. Creators can use this skin to indent text, add small caps, hide spoilers, change font color, alignment, and size, etc.

Undertale Work Skin: This skin is custom-made for the Undertale fandom, but feel free to use it for other fandoms as well. The skin allows you to apply distinct fonts for each character's dialogue.

Homestuck Skin: This skin is custom-made for the Homestuck fandom, but feel free to use it for other fandoms as well. It is similar to the Undertale work skin, in that it allows you to apply different formatting for character dialogue; however, this skin applies both font and color differences for each character.

Please note that public work skins aren't as rigorously tested and maintained as the site's default skin, so you might run into bugs. If you notice an error in a public work skin please contact Support.

Can I hide a work skin other users have on their works?

Yes! There are two different ways you can hide a creator's work skin. One is for individual works while the other applies to all works.

  • To disable a custom skin on a single work, select the "Hide Creator's Style" button located at the top of the work's page in the default skin.
  • To disable custom skins for all works:
    1. Log in and go to your Preferences by selecting the greeting "Hi, [username]!" and choosing "My Preferences" from the menu. If you're on your dashboard, you can also choose "Preferences" in the navigation sidebar (found at the top of the page when you're using a mobile device).
    2. In the Display section, check the box for "Hide work skins".
    3. Select the "Update" button towards the bottom of the page.

For both of these options, you can always re-apply the creator's skins by selecting the "Show Creator's Style" button at the top of the work's page in the default skin.

What CSS properties and values can I use in custom skins?

The Archive of Our Own (AO3) allows a limited set of CSS properties and values.

Allowed Properties

You can find a maintained list of allowed properties at CSS Help.

Colors

You can specify colors using hex values (e.g. #000000 is black), RGB values (e.g. rgb(0,0,0) is black), or RGBA values (e.g. rgba(0,0,0,0.5) is black at 50% opacity). We recommend using any of these methods rather than color names, since not all browsers support all color names.

However, color names are more understandable and easier to remember, so we also allow the use of commonly supported HTML color names.

Font Families

We allow all font families, but keep in mind that a font has to be installed on the user's operating system to work. AO3's parser currently strips out links to web fonts such as Google Fonts, so make sure to choose a font that doesn't need a link. It's a good idea when specifying fonts to give alternative fonts as well in case your first choice of font isn't available. Check out web safe fonts with fallbacks for a list of fonts likely to be available to most users.

Images

We allow externally hosted image URLs in JPG, GIF, and PNG formats.

Numeric Values

You can specify numeric values either as percentages or in various units, including cm, em, ex, in, mm, pc, pt, and px.

We highly encourage learning about and using "em", which lets you set dimensions relative to the user's current font size! This will make your layouts much more flexible and responsive to different browser and font settings, and improve their accessibility to users with differing needs.

What are you doing to make the Archive more accessible?

Accessibility is a top priority for us and we do our best to make things work well for all users. If you want to know more about how we are keeping the Archive of Our Own (AO3) accessible, please check out What are you doing to make the Archive accessible? in the About the Archive FAQ.

Where can I get more information if my question isn't answered here?

Some frequently asked questions about the Archive are answered in other sections of the Archive FAQ, and some common terminology is defined in our Glossary. Questions and answers about our Terms of Service can be found in the Terms of Service FAQ. You may also like to check out our Known Issues. If you need more help, please submit a Support request.