Archive of Our Own ^beta

Chapter Text

Chapter Text

#workskin .redditoverlay {
background-color: #DAE0E6;
box-sizing: border-box;
margin: 0 auto;
max-width: 860px;
position: relative;
overflow-y: hidden;
}

#workskin .redditcontainer {
background-color: #ffffff;
border-radius: 4px;
margin: 32px auto;
padding-bottom: 32px;
color: #000000;
max-width: 740px;
}

#workskin .redditvotearrows {
float: left;
border-left: 4px solid transparent;
padding-top: 8px;
}

#workskin .redditclear {
margin: 0;
}

#workskin .redditvotes {
font-size: 12px;
font-weight: 700;
color: #1c1c1c;
margin-top: -20px;
margin-bottom: 4px;
text-align: center;
vertical-align: baseline;
}

#workskin .redditposterinfo {
font-size: 12px;
font-weight: 400;
line-height: 16px;
margin: 0;
color: rgb(135, 138, 140);
}

#workskin .reddith1 {
color: #1A1A1B;
font-size: 20px;
font-weight: 500;
line-height: 24px;
margin: 0;
}

#workskin .redditcategory {
background-color: #EDEFF1;
color: #1A1A1B;
font-size: 12px;
font-weight: 500;
line-height: 16px;
border-radius: 2px;
display: inline-block;
margin-right: 5px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: text-bottom;
white-space: pre;
padding: 0 4px;
}

#workskin .redditinteract {
position: relative;
}

#workskin .redditinteractcomment {
padding-left: 8px;
}

#workskin .redditinteracticon {
padding-left: 8px;
padding-right: 2px;
}

#workskin .redditinteracttext {
color: rgb(135, 138, 140);
font-size: 12px;
font-weight: 700;
padding-right: 8px;
position: relative;
top: -8px;
}

#workskin .redditupvoted {
float: right;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #878a8c;
padding-top: 5px;
}

#workskin .redditcommentsort {
border-bottom: 1px solid #edeff1;
border-left: 4px solid transparent;
display: flex;
margin: 16px 40px 0;
padding: 0 16px 4px 0;
}

#workskin .redditcommentsorttext {
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
line-height: 24px;
text-transform: uppercase;
color: #7c7c7c;
cursor: pointer;
}

#workskin .redditcommentsortbutton {
cursor: pointer;
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
line-height: 24px;
text-transform: uppercase;
border: none;
color: #0079d6;
display: flex;
margin-left: 4px;
padding: 0 4px 1px;
width: auto;
}

#workskin .redditcommentsortsvg {
display: inline-block;
height: 20px;
margin-left: 0;
width: 20px;
vertical-align: middle;
}

#workskin .redditusername {
color: #0079d3;
padding-right: 4px;
}

#workskin .redditpostsection {
margin: 16px 40px 0;
border-left: 4px solid transparent;
padding-top: 8px;
}

#workskin .redditsignup {
border-radius: 4px;
border: 1px solid rgb(237, 239, 241);
display: flex;
margin: 16px 30px 0;
padding: 12px 8px;
}

#workskin .redditsignuptext {
font-size: 16px;
font-weight: 500;
line-height: 20px;
color: rgb(124, 124, 124);
padding-top: 7px;
}

#workskin .redditsigninbutton {
background-color: transparent;
border: 1px solid rgb(0, 121, 211);
border-radius: 18px;
color: rgb(0, 121, 211);
font-size: 12px;
font-weight: 700;
height: 25px;
overflow: hidden;
letter-spacing: .5px;
line-height: 24px;
text-transform: uppercase;
padding: 4px 9px 2px;
width: 65px;
margin-left: auto;
margin-right: 8px;
text-align: center;
}

#workskin .redditsignupbutton {
background-color: rgb(0, 121, 211);
border-color: rgb(0, 121, 211);
border-radius: 18px;
color: #ffffff;
font-size: 12px;
font-weight: 700;
height: 25px;
overflow: hidden;
letter-spacing: .5px;
line-height: 24px;
text-transform: uppercase;
padding: 4px 9px 2px;
width: 65px;
text-align: center;
}

#workskin .redditboardicon {
background-color: rgb(0, 121, 211);
border-radius: 50%;
width: 20px;
height: 20px;
margin-right: 4px;
}

#workskin .redditboardname {
font-size: 12px;
font-weight: 700;
color: rgb(28, 28, 28);
display: inline;
line-height: 20px;
text-decoration: none;
vertical-align: baseline;
}

#workskin .redditboardposter {
position: relative;
bottom: 6px;
}

#workskin .redditcommentsection {
margin-top: 16px;
margin-right: 40px;
padding-bottom: 4px;
}

#workskin .reddituserinfo {
padding-left: 20px;
padding-top: 5px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: rgb(135, 138, 140);
}

#workskin .redditusericonbox {
border-radius: 50%;
border-bottom: 8px solid white;
margin-left: -14px;
float: left;
height: 28px;
width: 28px;
}

#workskin .redditusericon {
border-radius: 50%;
}

#workskin .redditcommentthread {
border-left: 2px solid rgb(237, 239, 241);
margin-top: 36px;
margin-left: 20px;
}

#workskin .redditcommenttext {
padding-left: 20px;
}

#workskin .redditcontinue {
color: #0079d3;
padding-left: 20px;
font-size: 12px;
font-weight: 700;
}

#workskin .bold {
font-weight: 700;
}

#workskin .pr0 {
padding-right: 0;
}

#workskin .mt0 {
margin-top: 0;
}

#workskin .c0 {
color: #000000;
}

Chapter Text

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

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

  <div class="redditvotearrows">
   <p class="redditclear">
    <img class="redditupvoteicon" alt="reddit upvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880423739903336468/reddit-upvote-icon.png" />
   </p>
   <div class="redditvotes"><p class="redditclear">##</p></div>
   <p class="redditclear">
    <img class="redditdownvoteicon" alt="reddit downvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880425104876638318/reddit-downvote-icon.png" />
   </p>
  </div>
  
  <p></p><div class="redditpostsection">

   <p class="redditposterinfo">
    <img class="redditboardicon" src="https://b.thumbs.redditmedia.com/G_B8XNBy33xqbEJxzVpN1YjV0YGgIIPbZNkpDFNjPuU.png" />
    <span class="redditboardposter">
     <span class="redditboardname"><b>r/relationships</b></span> · Posted by u/OP_USERNAME_HERE ## hours ago.
    </span>
   </p>

   <p class="reddith1">YOUR SUBJECT LINE</p>

   <p class="redditcategory">Relationships</p>

   <p>YOUR TEXT HERE</p>
   
   <p class="redditinteract">
    <img class="redditinteracticon" alt="comment icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880431802823622687/reddit-comment-icon.png" />
    <span class="redditinteracttext">## comments</span>
   
    <img class="redditinteracticon" alt="share icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880435980593659944/reddit-share-icon.png" />
    <span class="redditinteracttext">Share</span>

    <img class="redditinteracticon" alt="save icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880436462569553970/reddit-bookmark-icon.png" />
    <span class="redditinteracttext">Save</span>
    
    <img class="redditinteracticon" alt="hide icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880436605666607104/reddit-hide-icon.png" /> 
    <span class="redditinteracttext">Hide</span>
    
    <img class="redditinteracticon" alt="report icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880436733341233213/reddit-report-icon.png" /> 
    <span class="redditinteracttext">Report</span>
    
    <span class="redditupvoted">87% Upvoted</span>
   </p>

  </div>
  
  <p class="redditsignup">
   <span class="redditsignuptext">What are your thoughts? Log in or Sign up</span>
   <a class="redditsigninbutton" href="" rel="nofollow">log in</a>
   <a class="redditsignupbutton" href="" rel="nofollow">sign up</a>
  </p>

  <p class="redditcommentsort">
   <span class="redditcommentsorttext">Sort by</span>
   <span class="redditcommentsortbutton">relevance</span> 
  </p>

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

   <p></p><div class="redditcommentthread">
     <p class="redditclear redditusericonbox">
     <img class="redditusericon" alt="reddit user icon purple" src="https://www.redditstatic.com/avatars/defaults/avatar_default_7.png" />
    </p>
    <p class="reddituserinfo">
     <span class="redditusername">USERNAME</span>## points · ## hours ago
    </p>
    <p class="redditcommenttext">COMMENT TEXT HERE</p>
    
    <p class="redditinteract redditinteractcomment">
     <img class="redditinteracticon" alt="reddit upvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880423739903336468/reddit-upvote-icon.png" />
     <span class="redditinteracttext c0 pr0">Vote</span>
     <img class="" alt="reddit downvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880425104876638318/reddit-downvote-icon.png" />
    
     <img class="redditinteracticon" alt="comment icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880431802823622687/reddit-comment-icon.png" />
     <span class="redditinteracttext">Reply</span>
     <span class="redditinteracttext">Share</span>
     <span class="redditinteracttext">Report</span>
     <span class="redditinteracttext">Save</span>
    </p>
   </div>
  </div>
 </div>
</div>

Chapter Text

Subreddits

This template uses r/relationships as basis. You can, of course, adjust it to whatever you like. The relevant section is this one:

   <p class="redditposterinfo">
    <img class="redditboardicon" src="https://b.thumbs.redditmedia.com/G_B8XNBy33xqbEJxzVpN1YjV0YGgIIPbZNkpDFNjPuU.png" />
    <span class="redditboardposter">
     <span class="redditboardname"><b>r/relationships</b></span> · Posted by u/OP_USERNAME_HERE ## hours ago.
    </span>
   </p>

Replace r/relationship with the subreddit of your choice. Don't forget to replace https://b.thumbs.redditmedia.com/G_B8XNBy33xqbEJxzVpN1YjV0YGgIIPbZNkpDFNjPuU.png with the subreddit's icon as well.

Throughout the template ## is used to indicate places where you can add numbers, either the number of comments or votes or points as well as the the amount of time that has elapsed since the post was created. You can also substitute "## hours ago" with something like "2d" for two days ago or "3m" for three months ago. Refer to actual reddit posts to see how it's used.

Some subreddits may use different icons for their vote arrows. Just substitute the links with your own images. The alt attributes will tell you which arrow goes here if the URL is too long to parse.

<div class="redditvotearrows">
   <p class="redditclear">
    <img class="redditupvoteicon" alt="reddit upvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880423739903336468/reddit-upvote-icon.png" />
   </p>
   <div class="redditvotes"><p class="redditclear">##</p></div>
   <p class="redditclear">
    <img class="redditdownvoteicon" alt="reddit downvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880425104876638318/reddit-downvote-icon.png" />
   </p>
  </div>

If the subreddit uses different icons for things like comments or sharing or what have you, the section is this:

<p class="redditinteract">
    <img class="redditinteracticon" alt="comment icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880431802823622687/reddit-comment-icon.png" />
    <span class="redditinteracttext">## comments</span>
   
    <img class="redditinteracticon" alt="share icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880435980593659944/reddit-share-icon.png" />
    <span class="redditinteracttext">Share</span>

    <img class="redditinteracticon" alt="save icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880436462569553970/reddit-bookmark-icon.png" />
    <span class="redditinteracttext">Save</span>
    
    <img class="redditinteracticon" alt="hide icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880436605666607104/reddit-hide-icon.png" /> 
    <span class="redditinteracttext">Hide</span>
    
    <img class="redditinteracticon" alt="report icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880436733341233213/reddit-report-icon.png" /> 
    <span class="redditinteracttext">Report</span>
    
    <span class="redditupvoted">87% Upvoted</span>
   </p>

Again, the alt attributes will tell you which icon hides behind which URL. In the comment section, there are also vote arrows and a comment icon:

<img class="redditinteracticon" alt="reddit upvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880423739903336468/reddit-upvote-icon.png" />
     <span class="redditinteracttext c0 pr0">Vote</span>
     <img class="" alt="reddit downvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880425104876638318/reddit-downvote-icon.png" />
    
     <img class="redditinteracticon" alt="comment icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880431802823622687/reddit-comment-icon.png" />

More on comments below. Be sure to replace the arrows before adding more comments to the section to save yourself some work in the long run.

The actual post

Now let's get to the main body of the reddit post:

   <p class="reddith1">YOUR SUBJECT LINE</p>

   <p class="redditcategory">Relationships</p> -- this is the category tag that you see below subject lines. If the post has just been created, it might just read [new]. Use however you see fit.

   <p>YOUR TEXT HERE</p>

Make sure to wrap each of your post's paragraphs with <p>...</p> tags. AO3 likes them very much.

And now for the fun part: comments! If you want a long discussion in the comments, I'd recommend you type it out somewhere where you can add indents so you know which level of the conversation you are on. Because with the code it can get pretty confusing pretty quickly.

<div class="redditcommentthread">
     <p class="redditclear redditusericonbox">
     <img class="redditusericon" alt="reddit user icon purple" src="https://www.redditstatic.com/avatars/defaults/avatar_default_7.png" />
    </p>
    <p class="reddituserinfo">
     <span class="redditusername">USERNAME</span>## points · ## hours ago
    </p>
    <p class="redditcommenttext">COMMENT TEXT HERE</p>
    
    <p class="redditinteract redditinteractcomment">
     <img class="redditinteracticon" alt="reddit upvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880423739903336468/reddit-upvote-icon.png" />
     <span class="redditinteracttext c0 pr0">Vote</span>
     <img class="" alt="reddit downvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880425104876638318/reddit-downvote-icon.png" />
    
     <img class="redditinteracticon" alt="comment icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880431802823622687/reddit-comment-icon.png" />
     <span class="redditinteracttext">Reply</span>
     <span class="redditinteracttext">Share</span>
     <span class="redditinteracttext">Report</span>
     <span class="redditinteracttext">Save</span>
    </p>
 </div>

This whole beauty is one comment. Let's go through the relevant lines here.

<img class="redditusericon" alt="reddit user icon purple" src="https://www.redditstatic.com/avatars/defaults/avatar_default_7.png" />

Here you can substitute whatever icon the commenter is using. You can do steal reddit's icons by using a different number at the end. They'll give you different-coloured reddit default icons.

<span class="redditusername">USERNAME</span>## points · ## hours ago

As mentioned above, the ## are to be substituted with actual numbers. USERNAME here implies a commenter who is not the OP. If you want the OP to reply, change this line to

<span class="redditusername bold">OP_USERNAME</span>## points · ## hours ago

or

<span class="redditusername"><b>OP_USERNAME</b></span>## points · ## hours ago

That way the username will be bolded.

Now for the actual text of the comment

    <p class="redditcommenttext">COMMENT TEXT HERE</p>

If you want to use more than one paragraph, just comment that whole deal again. Otherwise it might not be styled correctly.

Comment threads

Comment threads are the tricky bit about this template. Make sure you pay attention to the closing div tags.

<div class="redditcommentsection"> <-- This is the whole comment section

   <p></p><div class="redditcommentthread"> <-- This is where a comment starts
     <p class="redditclear redditusericonbox">
     <img class="redditusericon" alt="reddit user icon purple" src="https://www.redditstatic.com/avatars/defaults/avatar_default_7.png" />
    </p>
    <p class="reddituserinfo">
     <span class="redditusername">USERNAME</span>## points · ## hours ago
    </p>
    <p class="redditcommenttext">COMMENT TEXT HERE</p>
    
    <p class="redditinteract redditinteractcomment">
     <img class="redditinteracticon" alt="reddit upvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880423739903336468/reddit-upvote-icon.png" />
     <span class="redditinteracttext c0 pr0">Vote</span>
     <img class="" alt="reddit downvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880425104876638318/reddit-downvote-icon.png" />
    
     <img class="redditinteracticon" alt="comment icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880431802823622687/reddit-comment-icon.png" />
     <span class="redditinteracttext">Reply</span>
     <span class="redditinteracttext">Share</span>
     <span class="redditinteracttext">Report</span>
     <span class="redditinteracttext">Save</span>
    </p>

    <-- If you want to create a reply to a comment, you copy and paste the whole comment structure before the closing div tag of the comment you want to reply to.
   </div> <-- This is the comment's closing div

   <-- This is where you would add anther top-level comment, after the closing tag of the previous comment.
  </div> <-- This is the comment section's closing div

This is what would look like:

<div class="redditcommentsection"> <-- This is the whole comment section

   <p></p><div class="redditcommentthread">
     <p class="redditclear redditusericonbox">
     <img class="redditusericon" alt="reddit user icon purple" src="https://www.redditstatic.com/avatars/defaults/avatar_default_7.png" />
    </p>
    <p class="reddituserinfo">
     <span class="redditusername">USERNAME 1</span>## points · ## hours ago
    </p>
    <p class="redditcommenttext">This is a top-level comment.</p>
    
    <p class="redditinteract redditinteractcomment">
     <img class="redditinteracticon" alt="reddit upvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880423739903336468/reddit-upvote-icon.png" />
     <span class="redditinteracttext c0 pr0">Vote</span>
     <img class="" alt="reddit downvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880425104876638318/reddit-downvote-icon.png" />
    
     <img class="redditinteracticon" alt="comment icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880431802823622687/reddit-comment-icon.png" />
     <span class="redditinteracttext">Reply</span>
     <span class="redditinteracttext">Share</span>
     <span class="redditinteracttext">Report</span>
     <span class="redditinteracttext">Save</span>
    </p>

    <div class="redditcommentthread">
     <p class="redditclear redditusericonbox">
     <img class="redditusericon" alt="reddit user icon purple" src="https://www.redditstatic.com/avatars/defaults/avatar_default_7.png" />
    </p>
    <p class="reddituserinfo">
     <span class="redditusername">USERNAME 3</span>## points · ## hours ago
    </p>
    <p class="redditcommenttext">This is a reply to the first comment</p>
    
    <p class="redditinteract redditinteractcomment">
     <img class="redditinteracticon" alt="reddit upvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880423739903336468/reddit-upvote-icon.png" />
     <span class="redditinteracttext c0 pr0">Vote</span>
     <img class="" alt="reddit downvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880425104876638318/reddit-downvote-icon.png" />
    
     <img class="redditinteracticon" alt="comment icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880431802823622687/reddit-comment-icon.png" />
     <span class="redditinteracttext">Reply</span>
     <span class="redditinteracttext">Share</span>
     <span class="redditinteracttext">Report</span>
     <span class="redditinteracttext">Save</span>
    </p>
 </div>
   </div>

   <div class="redditcommentthread">
     <p class="redditclear redditusericonbox">
     <img class="redditusericon" alt="reddit user icon purple" src="https://www.redditstatic.com/avatars/defaults/avatar_default_6.png" />
    </p>
    <p class="reddituserinfo">
     <span class="redditusername">USERNAME 2</span>## points · ## hours ago
    </p>
    <p class="redditcommenttext">This is another top-level comment</p>
    
    <p class="redditinteract">
     <img class="redditinteracticon" alt="reddit upvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880423739903336468/reddit-upvote-icon.png" />
     <span class="redditinteracttext c0 pr0">Vote</span>
     <img class="" alt="reddit downvote icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880425104876638318/reddit-downvote-icon.png" />
    
     <img class="redditinteracticon" alt="comment icon" src="https://cdn.discordapp.com/attachments/543394832454909963/880431802823622687/reddit-comment-icon.png" />
     <span class="redditinteracttext">Reply</span>
     <span class="redditinteracttext">Share</span>
     <span class="redditinteracttext">Report</span>
     <span class="redditinteracttext">Save</span>
    </p>
 </div>
  </div>

You can continue this for a number of levels, probably until you can no longer comfortably read the comment because each new level will add another indent. Just make sure you keep an eye on those div tags.

If you want to suggest that a discussion continues without showing the other comments, you can add the following before the comment's closing div:

<p class="redditcontinue">Continue this thread →</p>

or

<p class="redditcontinue">1 more reply</p>

Happy coding!