Archive FAQ > Skins and Archive Interface

Can I change the Archive interface?

Yes! You can change the colors, fonts, and layout of the Archive, as well as of individual works, by applying a skin. You can use skins created by other people or write your own using custom CSS. Note: any skin you apply to the Archive will only be experienced by you when you are logged in, but any work skins you apply to your works will display to everyone using the Archive.

For more information on how to change the Archive's appearance, check out How do I create a site skin? or Where can I find a list of available site skins?. We also have a wonderful Unofficial Browser Tools FAQ that offers some fan-created tools for changing different elements of the Archive interface.

What is a skin?

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. For more information on the different types of public site skins, refer to Where can I find a list of available site skins?

Work skins are custom stylesheets that change the formatting of individual works. All users can access skins created for individual works. To learn how to disable custom work skins, check out Can I get rid of styling 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?

How do I create a site skin?

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. Select "Skins" from the menu found at the side of the page or at the top on a mobile device.

On the Skins page, select the "Create Site Skin" button. This will take you to the Create New Skin page, where you will have the option to enter your own CSS code or to use our Site Skin Wizard. The page will automatically open to the "Write Custom CSS" option. To use the Site Skin Wizard instead, select the "Use Wizard" button at the top of the page. To learn more about the Site Skin Wizard, refer to What is the Skin Wizard?

For a list of which colors, fonts, and other coding elements you can use in your skins, check out What CSS properties and values can I use in custom skins? To learn how to create a work skin, please refer to How do I create a work skin?

How do I apply a site skin?

There are many places from which you can apply a site skin. Here are a few of the common ones:

  • Select the "Hi, [username]!" button located at the top of the page in the default skin. Use the "My Preferences" option on the menu. Select the list next to "Your site skin" to pick the skin you wish to apply. Use the "Update" button at the bottom of the page to confirm your choice.
  • Go to the Archive's public skins and select "Use" beneath the site skin you wish to apply.
    • Another way from the Archive public skins page is by selecting the name of the site skin you wish to apply. You will be taken to the page showing the skin markup. At the bottom of the page, select "Use" to apply the skin.
  • If you have created a site skin that you wish to apply, go to your Dashboard by selecting the greeting "Hi, [username]!" and choosing "My Dashboard" from the menu, or by selecting your profile image. Select "Skins" from the menu found at the side of the page or at the top on a mobile device. You can then select "Use" next to the site skin you want to apply.

If you wish to test how a skin works before you fully apply it, select "Preview" instead of "Use". If you want to revert to the default skin, you can select the skin labeled Default from the skin options on the My Preferences page (as detailed in the first bullet point above).

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 (What is a skin?) without having any knowledge of CSS. You can change the color scheme, font properties, and spacing by entering the characteristics you would like your skin to have. Note: the Site Skin Wizard only creates skins for the Archive interface, not for individual works.

To access the Site Skin Wizard:

  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.
  3. Choose the "Create Site Skin" button, and then select the "Use Wizard" button. This will bring you to the Site Skin Wizard.

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

Where can I find a list of available site skins?

We have three official publicly available site skins that Archive users can apply to change aspects of the Archive interface for their own use.
The official public site skins are: Low Vision Default, Reversi, and Snow Blue.

Low Vision Default:
A skin that simplifies and enlarges text and Archive features.
Reversi:
A high contrast skin with a dark background and white text.
Snow Blue:
A skin similar to the default skin except with a light blue color scheme instead of red.

Please note that public skins are not as rigorously tested and maintained as the site's default style, so you may run into errors or bugs. To find out how to apply site skins, please check out How do I apply a 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. Choose the "My Work Skins" button. This will take you to the Work Skins page.
  4. Select the "Create Work Skin" button. This will take you to the New Skin page where you'll enter your own custom CSS.

Once you create a skin, you still need to both attach the skin and add the HTML markup to your work to connect the CSS class to your work's formatting. To find out how to apply a skin, please refer to How do I apply a work skin to a new work? or How do I apply a work skin to that already exists? For more detailed instructions, refer to our Tutorial: Creating a Work Skin.

For a list of which colors, fonts, and other properties you can use in your skins, check out What CSS properties and values can I use in custom skins? To learn how to create a site skin, please refer to How do I create a site skin?

How do I apply a work skin to a new work?

To apply a skin to a new work:

  1. Log in and select "Post" from the options in the header, and then "New Work" from the menu that appears.
  2. In the Associations section, go to the "Select Work Skin" option.
  3. Select the skin you want from the list.
  4. Add HTML markup to your work to connect the CSS class to your work's format.
  5. Select the "Preview" button to check out how your skin turned out, or select "Post Without Preview" to finalize the changes without testing them first.

For more information on how to create a work and other available options, 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 work that already exists?

To apply a skin to one of your existing works:

  1. Go to your work by selecting the greeting "Hi, [username]!" and choosing "My Works" from the menu.
  2. Navigate to the work you wish to change and then select the "Edit" button. The "Edit" button also appears on other pages where your works are listed, such as your Works page and on series index pages. This button will take you to the Edit Work page.
  3. Under the Associations section, go to the "Select Work Skin" option. A list will display any skins you've created along with the Archive's three public work skins.
  4. Add HTML markup to your work to connect the CSS class to your work's format.
  5. Select the "Preview" button to check out how your skin turned out or select "Post Without Preview" to finalize the changes without testing them first.

To add a work skin to multiple works at the same time, check out How do I edit multiple works at the same time? For more information on how to edit your work, please refer to our Posting and Editing FAQ.

Where can I find a list of available work skins?

You can browse all available public work skins on our Public Work Skin page.
There are three public work skins available for Archive users: Basic Formatting, Homestuck Skin, and Undertale 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. However, you will still need to add the HTML markup to connect the CSS classes to your work's format.

Undertale Work Skin: This skin is custom-made for the Undertale fandom, but feel free to appropriate it for your own use as well. The skin allows creators to apply distinct fonts and colors for each character's dialogue; however, you will still need to add the HTML markup to connect the CSS classes to your work's format.

Homestuck Skin: This skin is custom-made for the Homestuck fandom, but feel free to appropriate it for your own use as well. Creators can attach the skin and add the HTML markup to connect the CSS classes to your work's format.

Please note that public work skins are not as rigorously tested and maintained as the site's default skin, so you may run into bugs. If you notice an error in a public work skin, either due to obsolete code or a missing canonical character, please Contact Support.

Can I change the fonts the Archive is displayed in?

Yes! You can customize options such as font, color, and spacing by applying a site skin. Refer to How do I create a site skin? for more information.

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

The Archive allows a limited set of CSS properties and values.

Allowed properties

A maintained list of allowed properties is kept at CSS Help.

Colors

You can specify colors using hex values (e.g. #000000 is black in hex), 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 will necessarily support all color names.

However, color names are more readable and easier to remember, so we also allow the use of commonly-supported 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. The Archive's Parser currently strips out links to web fonts such as Google Fonts, so make sure to choose a font that doesn't require a link. It's a good idea when specifying fonts to use fallbacks in case your first choice font isn't available. To make sure your font is common enough, check out web-safe fonts with fallbacks.

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: cm, em, ex, in, mm, pc, pt, px.

We highly encourage learning about and using 'em', which lets you set things relative to the user's current font size! It will make your layouts much more flexible and responsive to different browser/font settings, which makes them much more accessible to users with differing needs.

Can I get rid of styling other users have on their works?

Yes. If you don't want to have this styling on an individual work, please check out Can I disable custom formatting (work skins) on works?

What are you doing to make the Archive more accessible?

Accessibility is a top priority for us, and we've done our best to make things work well for all users. If you want to know more about how we are keeping the Archive 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 the broader Archive FAQ. 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 contact Support.