Archive FAQ > Tutorial: Creating a Work Skin

Introduction

This tutorial will guide you step-by-step through creating a work skin on Archive of Our Own (AO3). By the end of this tutorial, you will have created your own work skin, used CSS to define custom styles, and applied the work skin to your chosen work.

This tutorial assumes the following:

  • You have prior knowledge of posting works on AO3. If you have not yet posted a work on AO3, consider checking out the Posting and Editing FAQ or follow step-by-step through Tutorial: Posting a Work on AO3.
  • You have basic knowledge of CSS. If you need a CSS overview, the W3Schools CSS Tutorial offers a free basic course.
  • You are accessing the site in the default skin (Archive 2.0). If you're using a custom skin, please make allowances where your site layout may differ from the instructions.

If you're not sure what a work skin is, or if you'd prefer to use an existing skin to style your work, please check out the Skins and Archive Interface FAQ.

Navigating to the Create New Skin Form

To get started, first go to 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 in a mobile device.

This takes you to your My Site Skins page, which lists your custom site skins and provides buttons to access your custom work skins and public skins. To review the difference between site skins and work skins, check out What is a skin?

For this tutorial, we want to create a new work skin, so select "My Work Skins", then "Create Work Skin" to navigate to the Create New Skin form.

Setting Up a New Work Skin

The only required fields for creating a new skin using custom CSS are the Type, Title, and CSS fields. The rest are optional, but we'll go through every field in this tutorial.

You'll be able to go back and edit any of these fields after submission (refer to Editing Your Work Skin for instructions).

Type (required)
If you selected the "Create Work Skin" button on the Skins page, this should default to "Work Skin".
Title (required)
Give your skin a descriptive title, so you can differentiate it from any other work skins you create in the future. Skin titles must be unique, so we recommend including your username in the title (e.g. "Homestuck Skin (username)").
Description
What will your skin do? Will there be a specific theme? You can refer to some example skin descriptions on the Public Site Skins or Public Work Skins pages.
Upload a preview
Here you can upload a screenshot of your CSS styles in action as a preview. You can come back and do this after you've started using your work skin.
Apply to make public
This feature has been deprecated. Custom skins can no longer be made public at this time, and checking this box won't affect your skin's privacy.
CSS
The last field in the Create New Skin form is where you input your custom CSS. In the next few sections, we'll explain how to input the CSS that will form your work's new styling.

You might notice a button at the top labeled "Use Wizard". This leads to the Site Skin Wizard, which unfortunately can only be used to create site skins and not work skins (What is the Skin Wizard?)

But don't worry—with this tutorial you'll be a wizard in no time!

Using CSS

For security reasons, AO3 is able to support only a limited set of CSS properties and their values. Any unsupported code will be removed after you save your changes.

You can review the full list of supported CSS properties by selecting the blue question mark symbol Help symbol at the top of the CSS field. You may also want to refer to What CSS properties and values can I use in custom skins? for additional information about fonts, colors, URLs, etc.

Inputting Your CSS

In this section, you'll enter the CSS that will determine what styling can be applied to your work(s). Feel free to add your own CSS or follow along with the example below.

Let's say you have a work with the following HTML:

  
  <p>Dear Billy,</p>
  <p>Here is a letter I've written you. I hope you are <em>very</em> impressed.</p>
  <p>Sincerely,</p>
  <p>Adelaide</p>

Without any work skins applied, this text would display with the default AO3 work styling.

Work text from example above with default Archive styling: sans serif font, black color

If we want the appearance of this text to simulate a handwritten letter, like in the image below, we'll need to create some custom styles using CSS.

Work text in 'Comic Sans MS' font, surrounded by a thin black border, with padding between the border and text. 'Adelaide' is slightly bigger and red. The word 'very' is underlined twice.

First, let's give this text a thin black border, change the font, and increase the font size. To do this, add the following to your work skin's CSS field:

  
  #workskin .letter {
    border: 1px solid;
    padding: 15px;
    font-size: 1.1em;
    font-family: "Comic Sans MS", cursive, sans-serif;
  }

Next, let's add to the CSS field to give special styling to the signature ("Adelaide"). Enter the following CSS to increase the font size even more and give the signature a red color:

  
  #workskin .signature {
    font-size: 1.2em;
    color: red;
  }

Finally, to underline the emphasized text ("very"), add the final CSS:

  
  #workskin em {
    border-bottom: 3px double;
  }

Your CSS field should now contain CSS for three different styles:

  
  #workskin .letter {
    border: 1px solid;
    padding: 15px;
    font-size: 1.1em;
    font-family: "Comic Sans MS", cursive, sans-serif;
  }
  #workskin .signature {
    font-size: 1.2em;
    color: red;
  }
  #workskin em {
    border-bottom: 3px double;
  }

The W3Schools CSS Reference provides a handy list of additional CSS properties you can add to your work.

We also recommend checking out the Public Work Skins for style examples.

Note: Nesting your CSS selectors (e.g. the .letter, .signature, and em elements) under the #workskin id is necessary so that your styles are applied only to your chosen work's content: everything below the blurb and above the "↑ Top" button on your work's page. However, if you forget to nest your CSS under the #workskin id, we'll automatically add this for you after you submit your code.

Saving Your New Work Skin

Once you've reviewed your CSS and are happy with your code, select the "Submit" button to save your new work skin. Your styling will not be applied to any works until you've manually added the skin to each work (we'll go over this in Applying Your Work Skin).

Once you select "Submit", we will remove any unsupported code and make sure all selectors are nested under a #workskin id.

Editing Your Work Skin

Immediately after submitting your new work skin, you can review your code and select the "Edit" button to make any changes.

Applying Your Work Skin

You've created the work skin—now you can apply this skin to any work you have on AO3. Some notes to keep in mind:

  • A work can only use one skin.
  • One skin can be applied to multiple works.
  • If you delete the skin, any works using that skin will lose their styling.
  • If you co-created a work, your co-creator(s) can also apply your work skin to your shared work.

When you know which work you want to apply your new formatting to, go to your work's Edit Work page. Refer to How do I edit a work? if you need instructions.

In the Associations section of the Edit Work page, select your work skin's title from the "Select Work Skin" list.

If the CSS selectors in your work skin correspond to elements already in your work's HTML (such as to all <p> or <em> tags), then feel free to skip the next section and go directly to Saving and Previewing Your Work. For example, if you wanted to give all italic text in your work a double underline, applying a work skin with the following CSS would automatically add a double underline to all text that is marked up with <em> tags:

  
  #workskin em {
    border-bottom: 3px double;
  }

Using the CSS Selectors in Your Work's HTML

If your CSS selectors don't yet correspond to your work's HTML, now's the time to add your <div> and <span> tags, classes, and ids to your work's markup. You can edit your work's markup by navigating to the Work Text section of your Edit Work page. Make sure the "HTML" button is selected.

If you entered your own CSS in Inputting Your CSS, go ahead and add your corresponding CSS selectors now to your work's markup. Otherwise, we'll pick up where our previous example left off.

In this example, you have a work that contains the following markup:

  
  <p>Dear Billy,</p>
  <p>Here is a letter I've written you. I hope you are <em>very</em> impressed.</p>
  <p>Sincerely,</p>
  <p>Adelaide</p>

To apply the three styles from the work skin example, you'll need to insert the HTML elements and attributes that correspond with the selectors in your CSS:

  1. To apply the letter style, wrap the entire block of text in a <div> tag with the .letter class referenced in your work skin.
  2. To apply the signature style, add the .signature class from your work skin to the final paragraph.
  3. To apply the underline style, no additional code is needed because the em selector you used in your work skin CSS already corresponds to the <em> tag in the above markup.

Your new markup should now match the following:

  
  <div class="letter">
    <p>Dear Billy,</p>
    <p>Here is a letter I've written you. I hope you are <em>very</em> impressed.</p>
    <p>Sincerely,</p>
    <p class="signature">Adelaide</p>
  </div>

Saving and Previewing Your Work

You can preview your newly styled work by selecting the "Preview" button, or save your changes directly by selecting "Post Without Preview".

Congratulations, your work is fancy now!

If you followed along with the example from Inputting Your CSS and Using the CSS Selectors in Your Work's HTML, your work's text should now resemble a handwritten letter.

Work text from the tutorial example in 'Comic Sans MS' font, surrounded by a thin black border, with padding between the border and text. 'Adelaide' is slightly bigger and red. The word 'very' is underlined twice.

If you'd like to apply your work skin to several works simultaneously, refer to How do I edit multiple works at the same time? Please note that you will still need to insert your skin's CSS selectors in each work's HTML individually, if you haven't done so already.

For more information on posting and editing works, please refer to the Posting and Editing FAQ. You may also want to check out Tutorial: Posting a Work on AO3 for a step-by-step guide.

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

For more information on skins, including site skins and public skins, refer to the Skins and Archive Interface FAQ. Some other frequently asked questions about AO3 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.