Archive of Our Own

Ever wondered how to style your text like this? You can do it with a work skin.

Some examples of what it can do:

Setup

1. Make a work skin using the code at the end of this work. Use the link above as a guide or find other guides on how to make one.
2. Set the new work skin as your fic's work skin.
3. Change to HTML mode when editing your fic and start adding the styling.

Crash Course to Styling

AO3 uses CSS classes to style fics. The work skin code holds these classes. Classes are defined by a period symbol followed by the class name, with the class' properties inside curly braces.

In HTML mode, you'll be able to see HTML tags. These are the angle brackets like <p> scattered in your text. The p in this tag stands for paragraph.

You may have noticed that they come in pairs, with the start being <p> and the ending being </p>. These are used to mark the start and the end of said element, which in this example is a paragraph.

HTML tags can also have attributes. This is where we'll put the classes in the element we want to style. For example, to center align a paragraph you can use <p align="center">. This align is a HTML attribute.

The attribute we will be using is the class attribute. When used in a tag, it looks like this: <p class="classname1 classname2">Paragraph text here.</p>. You can use more than one class in a tag, with each class separated by a space. The element will take the styling of all classes, with the latter classes overwriting any overlapping properties.

Please note that AO3 has a quirk of adding these </p> paragraph tags to text and messing up your formatting in general, so it's recommended to edit this in another text editor, especially one that can color-code HTML tags (such as Notepad++).

Also, users can use site skins, so some colors might be difficult to read depending on what background color the site skin uses. You can change text color alongside the background color of the text/box around it to make sure the text is readable.

Class List

Available customization classes in this work skin are:

• Text color: textred | textgold | textgrey | textwhite | textblack | textblue
• Background color: bgred | bggold | bggrey | bgwhite | bgblack
• Text size: textsizebig | textsizebigger | textsizebiggest
• Text shadow color: textshadowred | textshadowgold | textshadowgrey | textshadowwhite | textshadowblack
• Box border color: borderred | bordergold | bordergrey | borderwhite | borderblack
• Box size: boxsmall | boxmed | boxbig
• Box padding (the space between text and border): paddingsmall | paddingmed | paddingbig
• Box rounded border: roundedborder
• Box shadow: boxshadow
• Strikethrough color: strikered | strikegold | strikegrey | strikewhite | strikeblack
• Strikethrough thickness: strikemed | strikethick
• Text opacity: opacity25 | opacity50 | opacity75

Using Styling on Text

When you want to apply styling to an entire paragraph, you can add them to the paragraph tag class attribute. For parts of a paragraph, you can use the span tag, for example:

<p>I want <span class="textred">this text</span> to be red.</p>

will result in:

I want this text to be red.

Pay attention to where they are closed:

<p>I want <span class="textred">this <span class="textsizebigger">text</span> to be red.</span></p>

will result in:

I want this text to be red.

The closing tag </span> will end whichever styling you used last.

You can use <i>, <b>, and <u> respectively to make italic, bold, and underlined text, or you can combine them together.

For strikethrough, other than the strikered or other color/line thickness classes, it also needs the strikethrough class. Example: <span class="strikethrough strikered strikethick">text here</span>

Making Boxes

To make boxes, we're going to use the div element. Centering it requires another div wrapper with the boxparent class like this:

<div class="boxparent">

  <div class="borderwhite boxmed paddingsmall bgblack">

    <p align="center" class="nomargins textwhite">Text here!</p>

    <p align="center" class="nomargins textblue">Second paragraph :)<br/><br/></p>

    <p align="right" class="nomargins textgold">~END~</p>

  </div>

</div>

The nomargins class is used to disable the default spacing between paragraphs. You can use <br/> to add a new line in text.

Overlapping Text

To make overlapping text, we can make use of the relpos and abspos class. The anchor div will take the relpos class, while the overlapping text on top will take the abspos class.

The code:

<div class="boxparent">
  <div class="borderwhite boxmed paddingsmall bgblack relpos">
    <p align="center" class="nomargins textwhite">
      Put the relpos class into the box class attribute, and put the abspos class into the overlapping p attribute.
    </p>
    <p align="center" class="nomargins paddingsmall textred textshadowred abspos">
      <i>itworks?itworks?itworks?itworks?itworks?itworks?itworks?itworks?itworks?itworks?itworks?itworks?itworks?</i>
    </p>
  </div>
</div>

.textgold {
  color: gold;
}

.textred {
  color: red;
}

.textgrey {
  color: grey;
}

.textwhite {
  color: white;
}

.textblack {
  color: black;
}

.textblue {
  color: blue;
}

.bggold {
  background-color: gold;
}

.bgred {
  background-color: red;
}

.bggrey {
  background-color: grey;
}

.bgwhite {
  background-color: white;
}

.bgblack {
  background-color: black;
}

.textsizebig {
  font-size: 1.5em;
}

.textsizebigger {
  font-size: 2em;
}

.textsizebiggest {
  font-size: 2.5em;
}

.textshadowgrey {
  text-shadow: 2px 2px 0px rgba(128, 128, 128, 1);
}

.textshadowblack {
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
}

.textshadowwhite {
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 1);
}

.textshadowred {
  text-shadow: 2px 2px 0px rgba(255, 0, 0, 1);
}

.textshadowgold {
  text-shadow: 2px 2px 0px rgba(255, 215, 0, 1);
}

.boxparent {
  display: flex;
  justify-content: center;
}

.borderwhite {
  border: 1px white solid;
}

.borderblack {
  border: 1px black solid;
}

.bordergrey {
  border: 1px grey solid;
}

.borderred {
  border: 1px red solid;
}

.bordergold {
  border: 1px gold solid;
}

.boxsmall {
  width: 200px;
  max-width: 100%;
}

.boxmed {
  width: 400px;
  max-width: 100%;
}

.boxbig {
  width: 600px;
  max-width: 100%;
}

.paddingsmall {
  padding: 10px;
}

.paddingmed {
  padding: 20px;
}

.paddingbig {
  padding: 30px;
}

.nomargins {
  margin: 0;
}

.roundedborder {
  border-radius: 25px;
}

.boxshadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.strikethrough {
  text-decoration: line-through;
}

.strikered {
  text-decoration-color: red;
}

.strikewhite {
  text-decoration-color: white;
}

.strikeblack {
  text-decoration-color: black;
}

.strikegrey {
  text-decoration-color: grey;
}

.strikegold {
  text-decoration-color: gold;
}

.strikemed {
  text-decoration-thickness: 3px;
}

.strikethick {
  text-decoration-thickness: 6px;
}

.opacity25 {
  opacity: 25%;
}

.opacity50 {
  opacity: 50%;
}

.opacity75 {
  opacity: 75%;
}

.relpos {
  position: relative;
}

.abspos {
  position: absolute;
  top: 0;
  left: 0;
}