AO3 Work Skins

Easy-to-use skins for works on Archive of Our Own.

Have an idea, but don't know what to do? Make an issue and I'll work with you to bring your idea to fruition.

Skins

Each skin below is built using the modular components listed. Descriptions of each component and how to use it are here.

• Generic theme: demo {images, skin-warning, book-paragraph, texting} (generic.css)

Installation

1. Log in to AO3, go here, and click "Create Work Skin." Or, click here.
2. Fill out the form. Name, description, etc.
3. Copy the contents of the built skin (from the latest release) to the big empty CSS box.

   Tip: If you only want some of the features, look for the headings enclosed by /* and */ - they indicate what the following styles do.

4. Hit "Submit" at the bottom.

Usage

When drafting a work, select the skin you created above from the drop-down menu in the "Associations" box, under the collections, gifting, and series settings. Also, please add a link back to here in the notes for other people to see! It'll help other authors discover this skin.

Tips

Sanitization

Archive of Our Own runs your input through a sanitizer to make sure it's safe to share with the world. It enforces a number of rules, which can be found here.

Here are some quirks I've noticed:

• The only root elements allowed are paragraphs (<p>) and content divisions with a class attribute (<div class="somename">). Everything else will be wrapped in a paragraph.

Composition

You're writing a story, not building a website. Regardless, when drafting in HTML, you should use an actual code editor. Visual Studio Code is lightweight and easy to use.

• Image <img> tags should go inside a content division.

  This will work, but not quite right. It'll get wrapped in a paragraph tag.

  <img src="..." />

  This will work better:

  <div class="_">
      <img src="..." />
  </div>