Archive of Our Own ^beta

Chapter Text

Chapter Text

The first thing you're gonna want to do is head to your dashboard, click on "skins", then "my work skins". Then go ahead and smash that like "create work skin" button.

Once you've opened up the "create new skin" page, paste this text into the box titled "CSS":

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

#workskin p.act {
font-weight: normal;
font-family: "Courier New", courier, monospace;
font-size: 18px;
margin: 10px 6.66% 10px 10%;
max-width: 700px;
background-color: white;
}

#workskin p.slug {
font-weight: normal;
font-family: "Courier New", courier, monospace;
font-size: 18px;
text-transform: uppercase;
text-decoration: underline;
margin: 0px 6.66% 25px 10%;
background-color: white;
max-width: 700px;
}

#workskin p.sub {
font-weight: normal;
font-family: "Courier New", courier, monospace;
font-size: 18px;
text-transform: uppercase;
margin: 0px 6.66% 25px 10%;
background-color: white;
max-width: 700px;
}

#workskin p.char {
font-weight: normal;
font-family: "Courier New", courier, monospace;
font-size: 18px;
text-align: center;
text-transform: uppercase;
margin: 35px 26.25% 5px 35%;
max-width: 700px;
background-color: white;
}

#workskin .dlog {
text-align: left;
font-family: "Courier New", courier, monospace;
font-size: 18px;
margin: 5px 20% 40px 30%;
max-width: 400px;
background-color: white;
}

#workskin p.trns {
text-align: right;
font-weight: bold;
font-family: "Courier New", courier, monospace;
font-size: 18px;
text-transform: uppercase;
margin: 10px 6.66% 10px 10%;
max-width: 700px;
background-color: white;
}

#workskin p.fadein {
font-weight: bold;
font-family: "Courier New", courier, monospace;
font-size: 18px;
text-transform: uppercase;
margin: 10px 6.66% 0px 10%;
background-color: white;
}

#workskin p.cuttoblack {
text-align: right;
font-family: "Courier New", courier, monospace;
font-size: 18px;
text-transform: uppercase;
margin: 10px 6.66% 10px 10%;
max-width: 700px;
background-color: white;
}

#workskin p.par {
text-indent: 7.5%;
text-align: left;
font-family: "Courier New", courier, monospace;
font-size: 18px;
margin: 5px 20% 0px 30%;
max-width: 400px;
background-color: white;
}

#workskin p.midpar {
text-indent: 7.5%;
text-align: left;
font-family: "Courier New", courier, monospace;
font-size: 18px;
margin: -30px 20% 0px 30%;
max-width: 400px;
background-color: white;
}

#workskin body {
margin: 0;
}

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

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

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

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

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

Then give it a name and click submit.

After that, you'll want to open up your fic or create a new one. After you've filled in all the tags, archive warnings, etc., select the work skin from the dropdown menu in the "associations" tab.

Then, MAKING SURE YOU'RE USING PLAIN TEXT w/ HTML, paste this text (your "header") *BEFORE* everything you want to be in the script style in the "Work Text" box:

<p></p><div class="row">

<p></p><div class="column side"><h2></h2></div><div class="column middle">

 

And THIS text (your "footer") *AFTER* everything you want to be in the script style in the "Work Text" box:

</p></div><div class="column side"><h2></h2></div></div>

 

Then, you're going to have to classify all your text. The basic formatting for doing so goes like this:

<p class="[INSERT CLASSIFICATION]"> [INSERT TEXT] </p>

 

An example:

<p class="act"> Harry yeets his AIRPODS across the room.</p>

You would put the code for the type of text it is (e.g. "act" for an action line) in the first set of brackets and your text (e.g."HARRY yeets his AIRPODS across the room.") in the second set of brackets. If PLACED BETWEEN the header and footer, this line will result in the following:

I've listed the codes below for each classification. I've also included their basic uses, if you're not sure what to put for each type of text or you're unfamiliar with the terms.

"fadein" - for FADE IN. Normally, these should be the first two words in your script.

"slug" - for SCENE HEADINGS. A one line description of the location and time of day of a scene, usually formatted as "INT. [LOCATION] - [TIME]" or "EXT. [LOCATION] - [TIME]" depending on whether the scene is inside (int.) or outside (ext.)

"sub" - for SUBHEADINGS. Used for when a full scene heading isn't really necessary, like if Spider-Man SWINGS AWAY or something. I use them for random things I want to give more emphasis to and ending montages also but you're not really supposed to.

"act" - for ACTIONS, i.e. narrative description of scenes. Within these, always write the introduction of characters as well as camera actions (such as tilt, pan, zoom) in all caps. You can also write key objects and character actions in all caps at your discretion here. Sorry, you have to do the capitalization yourself here :(

"trns" - for TRANSITIONS, i.e. film editing instructions such as cut, smash, match. Usually formatted as "[TRANSITION] TO:"

"char" - for CHARACTERS. Use this with the name of the person who will be speaking right before the line.

"dlog" - for DIALOGUE, i.e. a character's lines.

"par" - for PARENTHETICALS that occur at the *BEGINNING* of a character's dialogue. Use these to indicate how the actor would deliver this line, or an action that they would take, such as (choked sobbing) (he pauses) or (rolling her eyes). Feel free to get creative!

"midpar" - for PARENTHETICALS that occur in the *MIDDLE* of a character's dialogue. These are EXACTLY the same as "par" EXCEPT for the margins: these have a -30 px top margin so they don't create a weird gap in the dialogue.

"cuttoblack" - Imma keep it real w u chief, this ain't it. And by it I mean legit. I just use it whenever I cut to black or white because I think it looks sexy like that :/. If you want to do what I do paste your text in the line of code like usual but put <strong>black</strong> or <strong>white</strong> instead of just "black" or "white".

So once you put it all together, your "Work Text" box should look something like this:

If it does, nice job! You're ready to hit "preview". Or "post without preview", if you're wild like that. If you're having trouble, feel free to drop me a message! I hope this tutorial helped you :)

Chapter Text

To use this text editor, copy and paste the code below into any program or site capable of running code. I've been using this one. Go ahead and run it once you've done that, and hopefully you should see a page titled "Screenplay Skin - Speed Editor." The instructions are on the editor but basically you can then format your script line by line by pasting or writing it in the first text box, selecting a classification from the menu, and clicking add to script. When you're done, simply copy and paste the formatted text into your work on Ao3 as detailed in the chapter before!

Here is the code:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

  box-sizing: border-box;

}

input[type=text], select, textarea {

  width: 100%;

  padding: 12px;

  border: 1px solid #ccc;

  border-radius: 4px;

  resize: vertical;

}

label {

  padding: 12px 12px 12px 0;

  display: inline-block;

}

input[type=submit] {

  background-color: #4CAF50;

  color: white;

  padding: 12px 20px;

  border: none;

  border-radius: 4px;

  cursor: pointer;

  float: right;

}

input[type=submit]:hover {

  background-color: #45a049;

}

.container {

  border-radius: 5px;

  background-color: #f2f2f2;

  padding: 20px;

}

.col-75 {

  float: left;

  width: 100%;

  margin-top: 6px;

}

/* Clear floats after the columns */

.row:after {

  content: "";

  display: table;

  clear: both;

}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

  col-75, input[type=submit] {

width: 100%;

margin-top: 0;

  }

  

/*aesthetics*/  

  

}

.header {

  background-color: #f1f1f1;

  text-align: left;

  line-height: 20px;

  font-size: 24px;

  font-weight: normal;

  font-family: "Courier New", courier, monospace;

  padding: 25px;

}

.column {

  float: left;

  padding: 15px;

}

.clearfix::after {

  content: "";

  clear: both;

  display: table;

}

.menu {

  width: 25%;

}

.content {

  width: 75%;

  font-family: Verdana, Helvetica, sans-serif;

}

.menu ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}

.button {

  padding: 8px;

  margin-bottom: 8px;

  background-color: SteelBlue;

  color: #ffffff;

  width: 100%;

  font-family: "Courier New", courier, monospace;

  font-weight: bold;

}

.button:hover {

  background-color: lightSteelBlue;

  color: white;

 

/*content*/

 

</style>

</head>

<body>

<div class="header">

  <h3><u>SCREENPLAY SKIN - SPEED EDITOR</u></h3>

  <p> For use with the ao3 WORK SKIN created by ASTRONOUGHT.</p>

</div>

<div class="clearfix">

 

<!-- classification menu -->

  <div class="column menu">

<ul>

   <li><button class=button onclick="slugFunction()">Slug</button></li>

   <li><button class=button onclick="actFunction()">Action</button></li>

   <li><button class=button onclick="charFunction()">Character</button></li>

   <li><button class=button onclick="dlogFunction()">Dialogue</button></li>

    <li><button class=button onclick="subFunction()">Subheading</button></li>

    <li><button class=button onclick="trnsFunction()">Transition</button></li>

    <li><button class=button onclick="parFunction()">Parenthetical (Before Dialogue) </button></li>

    <li><button class=button onclick="midparFunction()">Parenthetical (Mid-Dialogue)</button></li>

    <li><button class=button onclick="fadeinFunction()">Fade In</button></li>

    <li><button class=button onclick="cuttoblackFunction()">Cut To Black</button></li>

</ul>

  </div>

  <div class="column content">

 

<!-- engine -->

<div class="container">

  <form action="/action_page.php">

<div class="row">

   <div class="col-25">

     <label for="subject">HOW TO USE:<p>Enter your unformatted text into the topmost text field (below). Select the correct classification from the menu on the left to show a preview of the formatted text, then click "add to script" to finish the line. When you're done, simply copy and paste the generated text into your work text. Run the code again to clear your script.</p></label>

   </div>

   <div class="col-75">

   </div>

</div>

  </form>

 

<!--input code-->

<!--text fields-->

   <input type="text" id="text" onKeyUp="my()"placeholder="Enter text here! ex: 'Harry yeets his AIRPODS across the room'"><br><br>

<span id="demo_span">

    

    <input type="text" id="demo" placeholder="Formatted line will appear here after classified! ex: '<p class=&quot;act&quot;> Harry yeets his AIRPODS across the room.</p>">

</span>

<p></p>

</div>

 

<!--classification input code-->

<div id="container">

  <button onclick="listen()" id="button">Add to script</button>

</div>

  <p id="slug"></p>

  <p id="act"></p>

  <p id="char"></p>

  <p id="dlog"></p>

  <p id="sub"></p>

  <p id="trns"></p>

  <p id="par"></p>

  <p id="midpar"></p>

  <p id="fadein"></p>

  <p id="cuttoblack"></p>

  </div>

</div>

<div class="footer">

</div>

<script>

function slugFunction() {

 document.getElementById("slug");

  var a=document.getElementById("text").value;

  var b="<p class=\"\slug\"\>"

  var c="</p>"

      document.getElementById("demo").value=b+a+c;

}

function actFunction() {

  document.getElementById("act");

  var a=document.getElementById("text").value;

  var b="<p class=\"\act\"\>"

  var c="</p>"

      document.getElementById("demo").value=b+a+c;

}

function charFunction() {

  document.getElementById("char");

  var a=document.getElementById("text").value;

  var b="<p class=\"\char\"\>"

  var c="</p>"

      document.getElementById("demo").value=b+a+c;

}

 

function dlogFunction() {

  document.getElementById("dlog");

  var a=document.getElementById("text").value;

  var b="<p class=\"\dlog\"\>"

  var c="</p>"

      document.getElementById("demo").value=b+a+c;

}

 

function subFunction() {

  document.getElementById("sub");

  var a=document.getElementById("text").value;

  var b="<p class=\"\sub\"\>"

  var c="</p>"

      document.getElementById("demo").value=b+a+c;

}

 

function trnsFunction() {

  document.getElementById("dlog");

  var a=document.getElementById("text").value;

  var b="<p class=\"trns\"\>"

  var c="</p>"

      document.getElementById("demo").value=b+a+c;

}

 

function parFunction() {

  document.getElementById("par");

  var a=document.getElementById("text").value;

  var b="<p class=\"\par\"\>"

  var c="</p>"

      document.getElementById("demo").value=b+a+c;

}

 

function midparFunction() {

  document.getElementById("midpar");

  var a=document.getElementById("text").value;

  var b="<p class=\"\midpar\"\>"

  var c="</p>"

      document.getElementById("demo").value=b+a+c;

}

 

function fadeinFunction() {

  document.getElementById("fadein");

  var a=document.getElementById("text").value;

  var b="<p class=\"fadein\"\>"

  var c="</p>"

      document.getElementById("demo").value=b+a+c;

}

 

function cuttoblackFunction() {

  document.getElementById("cuttoblack");

  var a=document.getElementById("text").value;

  var b="<p class=\"\cuttoblack\"\>"

  var c="</p>"

      document.getElementById("demo").value=b+a+c;

}

 

function final() {

  var x = document.getElementById("demo").value;

  document.getElementById("addToScript").innerText = x;  

}

 

const listen = event => {

  const p = document.createElement('p');

   var x = document.getElementById("demo").value;

  p.innerText = x;

  document.querySelector('#container').appendChild(p);

}

 

</script>

</body>

</html>