Archive of Our Own ^beta

Chapter Text

This is what the Headline class looks like!

And This is the Byline

The headline has <strong> HTML tags as well as the CSS, so that it will still be distinct from the body text if you disable the CSS. I think mixing CSS and HTML for the final aesthetic effect is sloppy as hell, but I'm not sure. In the twitter section below, I managed to get it so that the skin overrides the HTML, so that quoted tweets are italicized with the style turned off but display normally with the style turned on. I would love to do that with the headlines and the italics, but I can't replicate the effect to save my life, so have my messy code. If anyone knows why it works there and how to make it work again, I'd love to hear about it.

This is what the SubHead class looks like.

That's in bold same as the headline, and then the italics are part of the skin (technically oblique, but I don't think there's much of a difference with ao3's standard fonts). You could use<em> instead of bold tags if you want; it's up to you.

This is what using the MagLink class within a heading looks like.

You could, technically, create a MagLink outside of a SubHead category. I don't know what it will look like, but probably ass. The body paragraphs are unmodified, so if you want to do a link within one of those, just do it normally.

This is the PullQuote class!

Without styles on, the example text for the PullQuote will be a paragraph right above this one. That was a whole lot of work for something that I didn't end up using in the fic. It intersects all right with the SubHead class, but I didn't have any good quotes to pull. Here's some junk text so it displays properly: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia at nisi viverra tincidunt. Vivamus congue libero ut nisi tempor maximus. Phasellus feugiat, velit ac dignissim congue, erat lacus commodo magna, et auctor quam massa vel dolor. Donec diam elit, eleifend ac lacus in, lobortis pretium leo. Sed ullamcorper arcu purus, eu molestie elit facilisis a. Cras sagittis risus id velit fringilla aliquet. In gravida massa neque, et finibus ante vehicula eu. Maecenas sed semper nisl. Nunc aliquam urna nisl, vitae luctus augue interdum eget. Nulla a turpis vitae augue finibus lobortis.

Aenean ligula metus, gravida bibendum tempus in, rhoncus a mi. Fusce a quam feugiat, tristique diam et, consequat elit. Donec malesuada magna at turpis tempor, non finibus tellus gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla convallis tincidunt rutrum. Vivamus et auctor urna. Aenean tincidunt est non placerat bibendum. Suspendisse potenti. Phasellus feugiat molestie facilisis. Praesent id turpis et ligula malesuada tempus. Pellentesque semper faucibus elit ac blandit.

This is the PullRight class.

The PullRight example is right before this paragraph in the code and with styles hidden. (This bold is normal bold.) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia at nisi viverra tincidunt. Vivamus congue libero ut nisi tempor maximus. Phasellus feugiat, velit ac dignissim congue, erat lacus commodo magna, et auctor quam massa vel dolor. Donec diam elit, eleifend ac lacus in, lobortis pretium leo. Sed ullamcorper arcu purus, eu molestie elit facilisis a. Cras sagittis risus id velit fringilla aliquet. In gravida massa neque, et finibus ante vehicula eu. Maecenas sed semper nisl. Nunc aliquam urna nisl, vitae luctus augue interdum eget. Nulla a turpis vitae augue finibus lobortis.

And finally, a sample of the Twitter replica.

Chapter Text

Chapter Three contains the full code for the skin, and you can copy and paste that into the WorkSkin window (as shown in the guide) unaltered. All of the code here can be copied and pasted directly into the HTML tab when posting a new fic.

To create a headline, copy and paste the following:

<p class="Headline">
  <strong>YOUR HEADLINE TEXT GOES HERE</strong>
</p>

For a byline, use this:

<p class="Byline">
  <em>FICTIONAL AUTHOR NAME OR WHATEVER</em>
</p>

For a subheading (such as the interview questions in the original fic), use this:

<p class="SubHead">
  <strong>YOUR TEXT GOES HERE</strong>
</p>

To make a few words within a subheading into a link, use this:

<p class="SubHead">
  <strong>TEXT PRIOR TO LINK HERE IF DESIRED <a class="MagLink" href="URL HERE OR LEAVE BLANK TO LOOK LIKE A LINK BUT GO NOWHERE" rel="nofollow"> LINKED WORD(S) HERE</a> TEXT AFTER LINKED WORDS IF DESIRED </strong>
</p>

For a pull quote (large pink block) aligned to the left, use the below. If the reader disables your style, this will appear right before the paragraph after it in the HTML.

<p class="PullQuote">
  <em>PULLQUOTE TEXT HERE</em>
</p>

For a pull quote on the right, use this:

<p class="PullRight">
  <em>YOUR TEXT HERE</em>
</p>

Twitter is the hard part.

For a single tweet, use this:

<div class="TwitterThread">

<p class="TwitterOP"><img class="twAvatar" src="TWITTER AVATAR URL HERE" width="14" height="14" /> <span class="twUserName">DISPLAY NAME HERE</span><br />
<span class="twUserHandle">@HANDLEHERE</span><br />
<span class="twText">TEXT OF TWEET HERE<br />
<span class="twTimeStamp"> 00:00 AM/PM - # MONTH YEAR<br />
</span> <span class="twReplyCount"> <img class="twReplyIcon" src="http://imgur.com/9dwkilY.png" alt="Replies" width="14" height="14" /> REPLY #</span> <span class="twRetweet"><img class="twRetweetIcon" src="http://imgur.com/ToOoCJz.png" alt="Retweets" width="14" height="14" /> RETWEET # </span> <img class="twHeartIcon" src="http://imgur.com/67stmhs.png" alt="Likes" width="14" height="14" /> <span class="twLike">LIKES #</span><br />
<br />
</p></div>

For a thread of replies, use this:

<div class="TwitterThread">

<p class="TwitterOP">
<img class="twAvatar" src="AVATAR URL HERE" height="14" width="14" />
<span class="twUserName">XX USER ONE</span><br />
<span class="twUserHandle">@OPHERE</span><br />
<span class="twText">
WHAT THE TWEET SAYS HERE
</span><br />
<span class="twTimeStamp">
00:00 AM/PM - # Month YEAR<br />
</span>
<span class="twReplyCount">
 <img class="twReplyIcon" src="http://imgur.com/9dwkilY.png" height="14" width="14" alt="Replies" /> REPLY #</span>
<span class="twRetweet"><img class="twRetweetIcon" src="http://imgur.com/ToOoCJz.png" height="14" width="14" alt="Retweets" /> RETWEET #
</span>
<span class="twLike"><img class="twHeartIcon" src="http://imgur.com/67stmhs.png" height="14" width="14" alt="Likes" />
LIKES #<br />
</span><br />
<span class="TwitterReply">
<img class="twAvatar" src="AVATAR LINK HERE" height="14" width="14" />
<span class="twUserName">REPLIER DISPLAY NAME</span><br />
<span class="twUserHandle">@USERHERE</span><br />
<a class="twLink" rel="nofollow">@REPLIERHERE</a>
<span class="twText">
REPLY HERE
</span><br />
<span class="twTimeStamp">
00:00 AM/PM - # Month ####
</span><br />
<span class="twReplyCount">
<img class="twReplyIcon" src="http://imgur.com/9dwkilY.png" height="14" width="14" alt="Replies" /> REPLY #</span>
<span class="twRetweet"><img class="twRetweetIcon" src="http://imgur.com/ToOoCJz.png" height="14" width="14" alt="Retweets" /> RT #</span>
<span class="twLike"><img class="twHeartIcon" src="http://imgur.com/67stmhs.png" height="14" width="14" alt="Likes" /> LIKES #</span></span>
  </p></div>

For additional replies, copy everything from <span class="TwitterReply"> to the end. Scroll down to right before </p></div>. Right before </p>, paste. Delete the extra </p></div>. Repeat as many times as you need.

For a quote-tweet, go to the end of WHAT THE TWEET SAYS HERE, before the first < there. Paste this:

<br />
<span class="QuotedTweet"><em> <img class="twAvatar" src="https://pbs.twimg.com/media/E5BTNpDXMAEUEox?format=png&amp;name=large" width="14" height="14" /> <span class="twUserName">QUOTED PERSON'S DISPLAY NAME</span><br />
<span class="twUserHandle">@QUOTEDHANDLE</span> <span class="twText">WHAT THE QUOTED TWEET SAYS</span> </em></span> 

If you're posting multiple separate twitter threads (or multiple single tweets, which we'll call threads of one), then, after you have copy-pasted the code chunk, type or C&P the below. This will keep your threads distinct from each other even with the style turned off.

<hr />

The Reply, Retweet, and Like icons are all image files stored on Imgur, and not by me. They have alt-text already provided above, so they should function with screenreaders and there'll be an option if something ever happens to the images, but if you want complete control, make the replacements below. Emoji show up with creator's styles disabled. Screenreaders do read out emoji names, but I don't actually know if it'll be contextually obvious what the emoji mean the way it would be clear in looking at it (I don't use a screenreader myself). I am sorry to report that I also don't have a solution if it isn't clear, which is why I went with the embedded images myself. But if you need the option, or something does happen to the images:

Replace <img class="twRetweetIcon" src="http://imgur.com/ToOoCJz.png" height="14" width="14" alt="Retweets" /> with 💬 or 🗨️ or ↪️ as you prefer.

Replace <img class="twRetweetIcon" src="http://imgur.com/ToOoCJz.png" height="14" width="14" alt="Retweets" /> with 🔁

Replace <img class="twHeartIcon" src="http://imgur.com/67stmhs.png" height="14" width="14" alt="Likes" /> with ❤️

I think that's all of it? I'll try to answer questions, but 1) I am very bad at replying to things, and 2) I only know the code I taught myself for this project, so I don't know if I'll have any advice besides: delete and copy-paste afresh; if that doesn't work or isn't applicable, try Googling it; if that doesn't work then IDK sacrifice a goat?

Chapter Text

#workskin .Headline {
font-size: xxx-large;
background-color: black;
color: #ff0080;
text-transform: uppercase;
margin-bottom: 0px;
padding: 10px;
font-style: italic;
}

#workskin .Byline {
font-size: x-large;
background-color: black;
color: #ff0080;
margin-top: 0px;
border-bottom-style: solid;
border-color: #ff0080;
border-width: thick;
padding-right: 5%;
text-align: right;
font-style: normal;
}

#workskin .PullQuote {
font-size: xx-large;
float: left;
background-color: #ff0080;
color: black;
text-transform: uppercase;
width: 30%;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 0px;
border-bottom-style: solid;
border-right-style: solid;
border-color: black;
border-width: thick;
font-style: italic;
padding: 10px;
}

#workskin .PullRight {
font-size: xx-large;
float: right;
background-color: #ff0080;
color: black;
text-transform: uppercase;
text-align: right;
width: 30%;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
border-bottom-style: solid;
border-left-style: solid;
border-color: black;
border-width: thick;
font-style: italic;
padding: 10px;
}

#workskin .SubHead {
color: #ff0080;
background-color: black;
text-transform: uppercase;
font-style: oblique;
padding: 10px;
border-bottom-style: solid;
border-color: #ff0080;
border-width: thick;
word-spacing: 2px;
font-size: large;
}

#workskin .MagLink {
color: #ff0080;
text-transform: uppercase;
font-style: oblique;
text-decoration: underline;
}

#workskin .TwitterThread {
max-width: 500px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
}

#workskin .TwitterReply {
overflow: hidden;
background-color: #ffffff;
float: left;
min-width: 100%;
position: relative;
padding: 1em;
margin-left: -1em;
border-top-style: solid;
border-top-width: .1em;
border-top-color: #dddddd;
border-top-radius: .3em;
}

#workskin .TwitterOP {
overflow: hidden;
background-color: #ffffff;
min-width: 100%;
position: relative;
padding: 1em;
margin-left: -1em;
border-style: solid;
border-width: .1em;
border-color: #dddddd;
border-radius: .3em;
}

#workskin .QuotedTweet {
overflow: hidden;
float: left;
padding: 1em;
margin-left: 10px;
margin-right: 10px;
margin-top: 14px;
background-color: #ffffff;
border-style: solid;
border-width: .1em;
border-color: #dddddd;
border-radius: .3em;
font-style: normal;
}

#workskin .twAvatar {
width: 40px;
height: auto;
float: left;
margin: 0em 0.3em .3em 0em;
border-radius: 5px;
}

#workskin .twUserName {
position: relative;
top: -.2em;
font-size: 18px;
font-weight: 500;
font-style: normal;
}

#workskin .twUserHandle {
position: relative;
top: -.5em;
font-size: 16px;
font-weight: 300;
color: #697882;
font-style: normal;
}

#workskin .twText {
display: inline-block;
font-style: normal;
color: black;
}

#workskin .twTimeStamp {
display: inline-block;
font-size: 14px;
width: 100%;
font-weight: 300;
color: #697882;
padding: 7px 0px 7px 0px;
text-transform: uppercase;
}

#workskin .twRetweet {
font-size: 14px;
color: #697882;
margin: 14px;
}

#workskin .twLike {
font-size: 14px;
color: #697882;
}

#workskin .twLink {
color: #2C7BB8;
text-decoration: none;
}

#workskin .twReplyCount {
font-size: 14px;
color: #697882;
}

#workskin .twReplyIcon {
width: 17px;
height: auto;
}

#workskin .twRetweetIcon {
width: 22px;
height: auto;
margin-right: .1em;
}

#workskin .twHeartIcon {
width: 13px;
height: auto;
margin-right: .1em;
}

Chapter Text

Hopefully this chapter will be and remain short.

7/11/2021:

Specified black text for the body of a tweet.