Archive of Our Own

To use this in your own work, first you need to go to your dashboard, then go to "Skins" on the side bar. Click into "My Work Skins" and use the button near the top to create a new work skin.

Then, paste this text into the work skin:

#workskin CSS Website Layout * {
box-sizing: border-box;
background-color: AntiqueWhite;
}

#workskin p.act {
color: #93a1a1;
font-family: "Libre Baskerville", Baskerville, "Book Antiqua", Georgia, Times, serif;
font-size: 18px;
margin: 10px 6.66% 10px 10%;
max-width: 1000px;
background-color: AntiqueWhite;
}

#workskin p.char {
color: #586e75;
font-weight: bold;
font-family: "Libre Baskerville", Baskerville, "Book Antiqua", Georgia, Times, serif;
font-size: 18px;
text-align: center;
text-transform: uppercase;
margin: 35px 26.25% 5px 35%;
max-width: 700px;
background-color: AntiqueWhite;
}

#workskin .dlog {
color: #657b83;
text-align: center;
font-family: "Libre Baskerville", Baskerville, "Book Antiqua", Georgia, Times, serif;
font-size: 18px;
margin: 3px 10% 20px 20%;
max-width: 700px;
background-color: AntiqueWhite;
}

#workskin body {
margin: 0;
}

#workskin .column {
float: center;
padding: 20px 10px 20px 10px;
}

#workskin .column.side {
width: 20%;
padding: 0 10% 0 10%;
}

#workskin .column.middle {
width: 40%;
max-width: 800px;
border: 1px solid AntiqueWhite;
background-color: AntiqueWhite;
padding: 0 5% 0 5%;
}

#workskin .row:after {
content: " ";
display: table;
clear: both;
}

#workskin .column.side,
#workskin .column.middle {
width: 100%;
}

Now, save the work skin with whatever name you like. When you post a new work, it should be available from the dropdown menu!

Here's how to use it in a work:

It will not work unless you put this text at the top of the html editor when posting the fic: (without the asterisks)

<*div class="row">

<*h2><*/h2>

<*/div>

<*div class="column middle">

If you want the color and skin to end before the work does, you can use <*/div*> wherever you want the skin to stop. (For this and the bullet points, once again remove the asterisks.)

• Actions and the tape recorder clicking should start with <*p class="act"> at the start of each paragraph
• Character names should start with <*p class="char">
• Normal dialogue lines should start with <*p class="dlog">

Happy transcripting!