Actions

Work Header

Repository

Chapter Text

IOS Texting:

 

Max

A: Hello, friend.

B: Hello to you, too.

A: Should we get dinner?

A: My treat.

B: Sure. Tell me when.

Android Texting:

 

Viktor Nikiforov

  1. A:

    Hello, friend.

    2 min

  2. B:

    Hello to you, too.

    1 min

  3. A:

    Should we get dinner? We can go to that Chinese place you like so much.

    1 min

  4. A:

    My treat.

    1 min

  5. B:

    Sure. Tell me when.

    Now

Chapter Text

.hide {
    display: none;
}

/* ANDROID 6.0*/
.phoneAND {
    width: 300px;
    font-family: "Roboto", "Noto", Arial, sans-serif;
    margin: 20px auto;
}

.headerAND {
    background-color: #1993E6;
    color: #FFFFFF;
    width: 300px;
    font-size: large;
    padding: .5em 0 .5em .5em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    
    text-align: left;
    text-transform: capitalize;
    line-height: 30px;
    display: table;
    box-shadow: 0 7px 10px -3px #aaa;
}

.messagebodyAND {
    list-style: none;
    background-color: #EFEDEB;
    margin: 0;
    padding: 0 0 .5em 0;
}

.messagebodyAND li {
    padding: .5em;
    overflow: hidden;
    display: flex;
}
/*
.textAND {
    display: inline-block;
    width: 200px;
    text-align: left;
    color: #FFFFFF;
    margin: .5em 0 0.5em;
    border-radius: .2em;
    padding: 0.5em 1em;
    background: #1993E6;
    max-width: 75%;
    clear: both;
    position: relative;
    left: -2.5em;
}

.textAND::after {
    content: "";
    position: absolute;
    left: -1em;
    top: 0;
    width: 1em;
    height: .5em;
    border-top: 1em solid #1993E6;
    border-left: 1em solid transparent;
}

.textIconAND {
    position: relative;
    top: .5em;
    left: -2em;
    width: 50px;
    height: auto;
    border-radius: 50%;
    padding-left: 20px;
    padding-right: 20px;
}


.replyAND {
    display: inline-block;
    width: 200px;
    text-align: left;
    color: #000000;
    margin: .5em 0 0.5em;
    border-radius: .2em;
    padding: 0.5em 1em;
    background: #FEFEFE;
    max-width: 75%;
    clear: both;
    position: relative;
    right: -2.5em;
}

.replyAND::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1em;
    width: 1em;
    height: .5em;
    border-top: 1em solid #FEFEFE;
    border-right: 1em solid transparent;
}

.replyIconAND {
    position:relative;
    top: .3em;
    right: -2em;
    width: 50px;
    height: auto;
    border-radius: 50%;
    padding-left: 20px;
    padding-right: 20px;
}
*/

.iconWrapperAND {
    display: block;
    width: 40px;
    position: relative;
}

.iconWrapperAND img{
    width: 40px;
    height: auto;
    border-radius: 50%;
}

.textAND {
    width: 200px;
    background: #1993E6;
    color: #FFFFFF;
    padding: .5em;
    border-radius: .2em;
}

.textAND p {
    margin: 0 0 .2em 0;
}

.textIconAND::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-right: 5px solid #1993E6;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.replyWrapperAND {
}

.replyAND {
    width: 200px;
    background: #FEFEFE;
    color: #000000;
    padding: .5em;
    border-radius: .2em;
}

.replyAND p {
    margin: 0 0 .2em 0;
}

.replyWrapperAND .replyIconAND{
}

.replyIconAND::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-right: 1em solid #FEFEFE;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.timestampAND {
    font-size: smaller;
    opacity: 0.5;
}

Chapter Text

Since a lot of fic writers like to involve social media in their fics, why not do it with some style and flair than just a few lines of text? Technically, you could make an actual embedded Tweet, but it wouldn't be formatted the way we like it, so let's try this with some work skins. The code on this page provides several examples and options you can do with tweets.

Capturing a picture of a Tweet

Example of Image Tweet

The easiest method to "embed" tweets is to use a tweet generator, save the pic, then upload them to any image hosting site of your choice.

Your HTML should look like this:

<p align="center"><img class="twEasy" src="http://imgur.com/Yll9hGE.png" alt="Example of Image Tweet" width="760" height="288" /></p>

The corresponding CSS should look like this:

.twEasy{
max-width: 300px;
height: auto;
}

The pros of this is that it's super duper easy to implement, but the cons is that you may not have crisp lines that you'd get from formatting. You also can't highlight text. If you're not comfortable with spending a bunch of time fiddling with HTML, then you can use this.

Text-Only Tweets

Now say you want to do this Tweet thing with higlightable text. So you want something like this.

Kayden Orona
@kayorona
@jayorona Wish you were here with us in #France. We miss you, Jaya.(Purple Heart ) 3:09 PM - 5 May 2014 2,144 2,901

The full CSS code can be found in the following entry, but the HTML used for this is as follows:

<div class="tw">
<p class="twBody">
<span>
<img class="twAvatar" src="http://imgur.com/tzkpXGS.png">
<span class="twUser">
<span class="twUserName">Kayden Orona
<img class="twIcon" src="http://imgur.com/eVQzzhT.png">
</span>
<br>
<span class="twUserHandle">@kayorona</span>
</span>
<img class="twFollow" src="http://imgur.com/p6lbN22.png">
<br>
</span>
<span class="twText">
<span class="twLink">@jayorona</span> Wish you were here with us at
<span class="twLink">#France</span>. We miss you.
</span>
<span class="twTimeStamp">
3:09 PM - 5 May 2014
</span>
<span>
<img class="twReplyIcon" src="http://imgur.com/9dwkilY.png">
<span class="twRetweet">
<img class="twRetweetIcon" src="http://imgur.com/ToOoCJz.png">
2,144
</span>
<span class ="twLike">
<img class="twHeartIcon" src="http://imgur.com/67stmhs.png">
2,901
</span>
</span>
</p>
</div>

As you can see, there are some icons required to load some of these things, most of I which I made myself for you to use. Here's a list of the links.

The avatar is just a sample one, so feel free to use your own. Be sure to make the avatar square shaped, because the code won't truncate it for you. All Twitter avatars get resized to 40px wide, so keep that in mind.

Essentially, you don't touch the tags, just edit the text as you see fit. If you need to make links, just make links like you usually do in HTML. I've been unable to remove the decorative line underneath it, but using spans breaks the HTML, and AO3 refuses to let me remove it. So... it's a little less authentic.

Edit 8/7/19: I've fixed the underline thingy so that you can have hashtags and linked stuff to not be links. The code presented here has been fixed to address those changes. Otherwise, just use <span> tags instead of <a> tags.

Single Image Tweets

Now, how about if you want to attach an image to your tweet? This isn't much different from your original text-only tweet. You just need to make sure you tag the img tag with "twImage"

Kayden Orona
@kayorona
@jayorona Wish you were here with us in #France. We miss you, Jaya.(Purple Heart ) 3:09 PM - 5 May 2014 2,144 2,901

The maximum width of these simulated tweets are 300px wide, so if you don't want your picture to be blown up, try to stay above that width. Don't worry about making your pictures too big, because tagging it as "twImage" should fit the image in the div container.

HTML:

<div class="tw">
<p class="twBody">
<img class="twImage" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/French_Formal_Garden_in_Loire_Valley.jpg">
<span>
<img class="twAvatar" src="http://imgur.com/tzkpXGS.png">
<span class="twUser">
<span class="twUserName">Kayden Orona
<img class="twIcon" src="http://imgur.com/eVQzzhT.png">
</span>
<br>
<span class="twUserHandle">@kayorona</span>
</span>
<img class="twFollow" src="http://imgur.com/p6lbN22.png">
<br>
</span>
<span class="twText">
<span class="twLink">@jayorona</span> Wish you were here with us at
<span class="twLink">#France</span>. We miss you.
</span>
<span class="twTimeStamp">
3:09 PM - 5 May 2014
</span>
<span>
<img class="twReplyIcon" src="http://imgur.com/9dwkilY.png">
<span class="twRetweet">
<img class="twRetweetIcon" src="http://imgur.com/ToOoCJz.png">
2,144
</span>
<span class ="twLike">
<img class="twHeartIcon" src="http://imgur.com/67stmhs.png">
2,901
</span>
</span>
</p>
</div>

Anyways, this is all for today. Once again, CSS is attached on the next chapter for you to look at for yourself. I could have went the full mile and add hover effects (changing colors), but I think that would detract from the fact that I just made this to make fictional tweets look nice on this site.

Emoji Implementation

It's not a Tweet unless you can add emojis!(Smiling Face With Open Mouth And Smiling Eyes )

Thankfully, someone's already done work for that! For full documentation, see All the Emoji by CodenameCarrot. It's really easy to implement, and is non-intrusive to the tweet structure. Another advantage to formatted Tweets instead of images is that they're easy to change. All you gotta do is go the editing chapter and fix a few things. Or you could just copy and paste from your IDE like I do. Either way, less steps! (Winking Face )

Chapter Text

/*If you still want to use image formatted tweets. Don't feel bad.*/
.twEasy{
    max-width: 300px;
    height: auto;
}

/*The Fun Stuff*/
.tw {
    max-width: 300px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: table;
    margin: auto;
}

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

/* Images */
.twImage{
    width: 111%;
    height: auto;
    margin: -1em 0em 1em -1em;
}

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

.twIcon {
    width: 17px;
    height: auto;
}

.twFollow {
    position:relative;
    top: -1.7em;
    width: 17px;
    height: auto;
    display: inline-block;
    float: right;
    color: #5EA9DD;
}

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

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

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

/* Text */

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

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

.twText {
    display: inline-block;
}

.twTimeStamp {
    display: inline-block;
    font-size: 14px;
    width: 100%;
    font-weight: 300;
    color: #697882;
    padding: .5em 0em .5em 0em;
}

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

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

}

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

Chapter Text

I made this skin because I needed to make scripting easier, since I didn't want to format every single cell individually.

Firstly, the script is made through a table, so it's a little extra work to put together. But, you can easily put a table through word processor of your choice. In this case, I used Word. We start with a simple script like this:

Niles: This is the first time I've seen you wear boots.
Anri: They're uncomfortable, but if it's for the sake of keeping my cover, I'll wear them.
Niles: Hmm, ever wore heels before?
Anri: I have. They aren't the most pleasant of memories.
Niles: A shame, then.
    

I use Word's feature of converting text into a table, splitting the cells by the colon, then with a bit of tweaking (ie adding images and removing extra characters), we get a table like this:

<table>
<tbody>
<tr>
<td><img src="http://imgur.com/STYEtz8.png" alt="Niles" width="128" height="128" /></td>
<td>This is the first time I've seen you wear boots.</td>
</tr>
<tr>
<td><img src="http://imgur.com/ZJOMCNG.png" alt="Anri" width="128" height="128" /></td>
<td>They're uncomfortable, but if it's for the sake of keeping my cover, I'll wear them.</td>
</tr>
<tr>
<td><img src="http://imgur.com/STYEtz8.png" alt="Niles" width="128" height="128" /></td>
<td>Hmm, ever wore heels before?</td>
</tr>
<tr>
<td><img src="http://imgur.com/bQQi2yY.png" alt="Anri" width="128" height="128" /></td>
<td>I have. They aren't the most pleasant of memories.</td>
</tr>
<tr>
<td><img src="http://imgur.com/tmoSITI.png" alt="Niles" width="128" height="128" /></td>
<td>A shame, then.</td>
</tr>
</tbody>
</table>

We then put together the CSS to make the table pretty. This means fitting the first column to huge the sides of the sprite image and centering text to align center vertically.

td {
    vertical-align: middle;
}

td:nth-child(1) {
    width: 128px;
}
    

So, the end result is this:

Niles This is the first time I've seen you wear boots.
Anri They're uncomfortable, but if it's for the sake of keeping my cover, I'll wear them.
Niles Hmm, ever wore heels before?
Anri I have. They aren't the most pleasant of memories.
Niles A shame, then.

An additional feature of the code is to format stage directions, which can look a little different from normal speaking text.

.stagedir {
  text-align: center;
  font-style: italic;
}
    

Say we have a script that looks like this.

<tbody>
<table>
<td><img src="http://imgur.com/NeJLquH.png" alt="Takumi" width="128" height="128" /></td>
<td>I've waited. For a long time, perhaps much like you. I've waited for things to turn back to normal again, but that time never came.</td>
</tr>
<tr>
<td><img src="http://imgur.com/fftPEV3.png" alt="Elise" width="128" height="128" /></td>
<td>I don't know what you're wishing for, but I'm sure you will get what you want someday.</td>
</tr>
<tr>
<td><img src="http://imgur.com/qqSzY4X.png" alt="Takumi" width="128" height="128" /></td>
<td>… F-Forget all the nonsense I just said.</td>
</tr>
<tr>
<td> </td>
<td class="stagedir">(Takumi quickly leaves, and shuts the door behind him.)</td>
</tr>
<tr>
<td><img src="http://imgur.com/FylhaCy.png" alt="Elise" width="128" height="128" /></td>
<td>… Why should I...?</td>
</tr>
</tbody>
</table>

Note there is a row tagged with the class "stagedir". With the added CSS script, the script with stage directions will look like this:

Takumi I've waited. For a long time, perhaps much like you. I've waited for things to turn back to normal again, but that time never came.
Elise I don't know what you're wishing for, but I'm sure you will get what you want someday.
Takumi … F-Forget all the nonsense I just said.
  (Takumi quickly leaves, and shuts the door behind him.)
Elise … Why should I...?

And that's all, really. I hope this will be useful for anyone who considers writing fics in the same format.

Chapter Text

We continue our series of social media mockups, this time with Instagram! This is not quite like the official embedded Instagram post, but more like the mobile version of an Instagram app, mostly because I think that's the format people are most familiar with. For an easy way to post an Instagram post (i.e. capture the instagram post and posting it as a picture), refer to a previous chapter on the Twitter mockup. As for the nitty gritty version, let's take a look.

kayorona 200 likes
kayorona Wish you were here with us in #France. We miss you, Jaya.(Purple Heart )
View all 28 comments May 5, 2014

Edit 8/7/19: hyperlink tags have been changed to span tags so the links won't have underline anymore.

This is currently the only look I've got so far. It's pretty close to the actual standard, and is essentially just a retool of my Twitter mockup. I will attach the full CSS code in a following chapter. So the HTML for this is pasted below. For those who just want to know which fields to change, I have bolded those places.

<div class="inst">
<p class="instBody">
<span>
<img class="instAvatar" src="http://imgur.com/tzkpXGS.png">
<span class="instUser">kayorona</span>
</span>
<img class="instImage" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/French_Formal_Garden_in_Loire_Valley.jpg">
<img class="instIcon" src="http://imgur.com/XcdMBeP.png">
<img class="instIcon" src="http://imgur.com/gB6K2qR.png">
<img class="instIcon" src="http://imgur.com/d7ItqK3.png">
<img class="instIconRight" src="http://imgur.com/ccdl7jh.png">
<span class="instText">
<img class="instHeart" src="http://imgur.com/stCkCdV.png"> <b>200</b> likes</br>
<b>jayorona</b> Wish you were here with us in
<span class="instLink">#France</span>. We miss you, Jaya.<span class="x1F49C"><span class="hide">(Purple Heart )</span></span>
</span>
<span class="instComments">View all 28 comments</span>
<span class="instTimestamp">May 5, 2014</span>
</p>
</div>

It's a lot more simple than the Twitter one, (less icons and less fancy stuff floating around). I hope this code will help people make polished pretty Instagram posts in their fics in the future.

Chapter Text

.inst {
    max-width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: table;
margin: auto;
}

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

/* Images */
.instImage{
width: 111%;
height: auto;
margin: 0em -1em 0em -1em;
}

.instAvatar {
width: 30px;
height: auto;
float: left;
margin: 0em 0.3em .5em -.1em;
border-style: solid;
border-width: .1em;
border-color: #dddddd;
border-radius: 50%;
}

.instIcon {
height: 20px;
width: auto;
margin: 0.3em 0.3em 0.1em 0em;
}

.instIconRight {
height: 20px;
width: auto;
float: right;
margin: 0.3em 0.3em 0.1em 0em;
}

/*Text*/

.instUser {
color: #343436;
position: relative;
top: .1em;
font-size: 16px;
font-weight: bold;
}

.instText {
border-top:1px solid #ADADAD;
margin: .1em 0em .1em 0em;
padding: .1em 0em .1em 0em;
display: inline-block;
font-size: 14px;
}

.instLink {
color: #135588;
}

.instComments {
display: inline-block;
width: 100%;
color: #ADADAD;
font-size: 14px;
}

.instTimestamp {
display: inline-block;
width: 100%;
color: #ADADAD;
text-transform: uppercase;
font-size: 12px;
}

Chapter Text

Sup, back at it again, but this time with a more updated version of embedded highlightable "Tweets" for your fics. In addition to adapting to Twitter's new look as of 2019, I've added some more features such as quote retweeting. In case you've never read my stuff before, please refer to the previous chapters on the original Twitter mockup.

Twitter (2019) Simple Embedded Tweet

Much of new look hasn't exactly changed, except for the lower half. Thankfully the new Twitter has less fancy icons, but the added complexity of things like quote retweets basically broke AO3's ability to handle the number of nested span elements and images, so I took the janky approach and used emoticons and fancy CSS. This means that mobile and desktop view will vary wildly. Also ran into some issues managing the different span containers so I wasn't able to quite get that border line between the reply count and the rest of the Tweet to reach the edges. Oh, well, still looks pretty legit, right?

Kayden Orona
@kayorona

@jayorona Wish you were here with us at #France. We miss you. ❤ 123 3:09 PM - 5 May 2014 192 people are talking about this

Much like the Instagram mockup, I have bolded the portions where you should change to personalize the HTML code

<div class="tw19">
<p class="tw19Body">
<span class="tw19User">
<!-- Account Avatar/Image/Icon/PFP -->
<img class="tw19Avatar" src="https://farm8.staticflickr.com/7802/46881290791_909a8c9898_m.jpg">
<span>
<span class="tw19UserName">Kayden Orona <!-- Account Name -->
<span class="tw19Verified">✔</span> <!-- Verified Icon (optional) -->
</span>
<br>
<span class="tw19UserHandle">@kayorona</span> <!-- Account Handle/Username -->
</span>
<img class="tw19Follow" src="https://i.ibb.co/vBp37v2/p6lbN22.png">
<br>
</span>
<span class="tw19Text">
<!-- Enter Text Here, use class="tw19Link" for links/mentions/etc. -->
<span class="tw19Link">@jayorona</span> Wish you were here with us at
<span class="tw19Link">#France</span>. We miss you.
</span>
<span class="tw19LikesAndTime">
<span>❤ 123</span> <!-- Likes Count -->
<span class="tw19TimeStamp">3:09 PM - 5 May 2014 </span> <!-- Timestamp -->
</span>
<span class="tw19ReplyCount">
192 people are talking about this <!-- Reply Count -->
</span>
</p>
</div>

Pictures have also been moved to the bottom of the tweet and are framed by the Tweet (unless it's Quoted). Not much on the user end to change.

Kayden Orona
@kayorona
@jayorona Wish you were here with us at #France. We miss you. ❤ 123 3:09 PM - 5 May 2014 192 people are talking about this

<div class="tw19">
<p class="tw19Body">
<span class="tw19User">
<!-- Account Avatar/Image/Icon/PFP -->
<img class="tw19Avatar" src="https://farm8.staticflickr.com/7802/46881290791_909a8c9898_m.jpg">
<span>
<span class="tw19UserName">Kayden Orona <!-- Account Name -->
<span class="tw19Verified">✔</span> <!-- Verified Icon (optional) -->
</span>
<br>
<span class="tw19UserHandle">@kayorona</span> <!-- Account Handle/Username -->
</span>
<img class="tw19Follow" src="https://i.ibb.co/vBp37v2/p6lbN22.png">
<br>
</span>
<span class="tw19Text">
<!-- Enter Text Here, use class="tw19Link" for links/mentions/etc. -->
<span class="tw19Link">@jayorona</span> Wish you were here with us at
<span class="tw19Link">#France</span>. We miss you.
</span>
<!-- Image is posted here -->
<img class="tw19Image" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/French_Formal_Garden_in_Loire_Valley.jpg">
<span class="tw19LikesAndTime">
<span>❤ 123</span> <!-- Likes Count -->
<span class="tw19TimeStamp">3:09 PM - 5 May 2014 </span> <!-- Timestamp -->
</span>
<span class="tw19ReplyCount">
192 people are talking about this <!-- Reply Count -->
</span>
</p>
</div>

Quote Retweet

So now for something different: Tweets within a Tweet. The format of the quoted Tweet is not that different from the normal Tweet, only now there are a few new classes. On the user's end, you only need change the avatar's image, the username, the handle, the content/picture. Below are two demonstrations of a Quote Retweet with and without a picture.

Jaya Orona
@jayorona
Awww I miss you too!! Kayden Orona @kayorona @jayorona Wish you were here with us at #France. We miss you. ❤ 123 3:09 PM - 5 May 2014 192 people are talking about this

<div class="tw19">
<p class="tw19Body">
<span class="tw19User">
<!-- Account Avatar/Image/Icon/PFP -->
<img class="tw19Avatar" src="https://farm5.staticflickr.com/4857/46881290631_d4c6d2bbac_m.jpg">
<span>
<span class="tw19UserName">Jaya Orona <!-- Account Name -->
<span class="tw19Verified">✔</span> <!-- Verified Icon (optional) -->
</span>
<br>
<span class="tw19UserHandle">@jayorona</span> <!-- Account Handle/Username -->
</span>
<img class="tw19Follow" src="https://i.ibb.co/vBp37v2/p6lbN22.png">
<br>
</span>
<span class="tw19Text">
<!-- Enter Text Here, use class="tw19Link" for links/mentions/etc. -->
Awww I miss you too!!
</span>

<span class="tw19BodyEmbed">
<span class="tw19User">
<!-- Embedded Avatar/Image/Icon/PFP -->
<img class="tw19AvatarEmbed" src="https://farm8.staticflickr.com/7802/46881290791_909a8c9898_m.jpg">
<span class="tw19UserNameEmbed">Kayden Orona</span> <!-- Embedded name -->
<span class="tw19VerifiedEmbed">✔</span> <!-- Embedded Verified Icon (optional) -->
<span class="tw19UserHandleEmbed">@kayorona</span> <!-- Embedded Handle -->
</span>
<span class="tw19Text">
<!-- Enter Embedded Text Here -->
<span class="tw19Link">@jayorona</span> Wish you were here with us at
<span class="tw19Link">#France</span>. We miss you.
</span>
</span>

<span class="tw19LikesAndTime">
<span>❤ 123</span> <!-- Likes Count -->
<span class="tw19TimeStamp">3:09 PM - 5 May 2014 </span> <!-- Timestamp -->
</span>
<span class="tw19ReplyCount">
192 people are talking about this <!-- Reply Count -->
</span>
</p>
</div>

The same applies for tweets that have photos. It works similarly to how the normal one does.

Jaya Orona
@jayorona
Awww I miss you too!! Thanks for the pics! Kayden Orona @kayorona @jayorona Wish you were here with us at #France. We miss you. ❤ 123 3:09 PM - 5 May 2014 192 people are talking about this

<div class="tw19">
<p class="tw19Body">
<span class="tw19User">
<!-- Account Avatar/Image/Icon/PFP -->
<img class="tw19Avatar" src="https://farm5.staticflickr.com/4857/46881290631_d4c6d2bbac_m.jpg">
<span>
<span class="tw19UserName">Jaya Orona <!-- Account Name -->
<span class="tw19Verified">✔</span> <!-- Verified Icon (optional) -->
</span>
<br>
<span class="tw19UserHandle">@jayorona</span> <!-- Account Handle/Username -->
</span>
<img class="tw19Follow" src="https://i.ibb.co/vBp37v2/p6lbN22.png">
<br>
</span>
<span class="tw19Text">
<!-- Enter Text Here, use class="tw19Link" for links/mentions/etc. -->
Awww I miss you too!! Thanks for the pics!
</span>

<span class="tw19BodyEmbed">
<span class="tw19User">
<!-- Embedded Avatar/Image/Icon/PFP -->
<img class="tw19AvatarEmbed" src="https://farm8.staticflickr.com/7802/46881290791_909a8c9898_m.jpg">
<span class="tw19UserNameEmbed">Kayden Orona <!-- Embedded name -->
</span>
<span class="tw19VerifiedEmbed">✔</span> <!-- Embedded Verified Icon (optional) -->
<span class="tw19UserHandleEmbed">@kayorona</span> <!-- Embedded Handle -->
</span>
<span class="tw19Text">
<!-- Enter Embedded Text Here -->
<span class="tw19Link">@jayorona</span> Wish you were here with us at
<span class="tw19Link">#France</span>. We miss you.
</span>
<!-- Enter Embedded Image Here -->
<img class="tw19ImageEmbed" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/French_Formal_Garden_in_Loire_Valley.jpg">
</span>

<span class="tw19LikesAndTime">
<span>❤ 123</span> <!-- Likes Count -->
<span class="tw19TimeStamp">3:09 PM - 5 May 2014 </span> <!-- Timestamp -->
</span>
<span class="tw19ReplyCount">
192 people are talking about this <!-- Reply Count -->
</span>
</p>
</div>

Now you can spruce up your fic in a more updated style. Maybe when I have more time it would be cool to try Tweet threads. I hope this will prove useful for those of you who want to make Tweets in your fics. And now I'll go back into my den to hibernate for the winter.

Chapter Text

/*The general Tweet container. Sets fonts and other fancy formatting.*/
.tw19 {
    max-width: 300px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: table;
    margin: auto;
}

/*The body of the Tweet. Formatting for borders, rounded edges, padding.*/
.tw19Body {
    overflow: hidden;
    background-color: #ffffff;
    border: .05em solid #dddddd;
    border-radius: .3em;
    float: left;
    min-width: 100%;
    position:relative;
    padding: 1em;
    margin-left: -1em;
}

/*Body formatting for embedded tweets, mostly changes in width/padding*/
.tw19BodyEmbed {
    overflow: hidden;
    display: inline;
    border: .05em solid #dddddd;
    border-radius: .3em;
    float: left;
    min-width: 90%;
    position:relative;
    padding: 1em 1em 0em 1em;
    margin-bottom: 0.5em;
}

/* Images */
/*Formatting for the Tweet's main image, gives rounded edges*/
.tw19Image{
    width: 100%;
    height: auto;
    border-radius: 0.3em;
    margin: 0em 0em 0em 0em;
}

/*Formatting for embedded images.*/
.tw19ImageEmbed{
    width: 115%;
    height: auto;
    margin: 0em 0em -1em -1em;
}

/*Avatars are automatically formatted to be circles*/
.tw19Avatar {
    width: 40px;
    height: auto;
    float: left;
    margin: 0em 0.3em .3em 0em;
    border-radius: 20px;
}

/*Embedded avatars are small and fit the height of username text*/
.tw19AvatarEmbed {
    width: 20px;
    height: auto;
    float: left;
    margin: 0em 0.3em .3em 0em;
    border-radius: 20px;
}

/*Formatting for the Verified Icons*/

.tw19Verified {
  position: relative;
  bottom: 2px;
  display: inline-block;
  font-weight: normal;
  text-align: center;
  font-size: 10px;
  width: 15px;
  height: 15px;
  background-color: #1DA1F2;
  color: #fff;
  border-radius: 50%;
}

.tw19VerifiedEmbed {
  position: relative;
  bottom: 2px;
  display: inline-block;
  font-weight: normal;
  text-align: center;
  font-size: 9px;
  width: 12px;
  height: 12px;
  background-color: #1DA1F2;
  color: #fff;
  border-radius: 50%;
}

/*Formatting for the Twitter bird icon*/
.tw19Follow {
    position:relative;
    top: -1.7em;
    width: 17px;
    height: auto;
    display: inline-block;
    float: right;
    color: #5EA9DD;
}

/* Text */
.tw19User {
  display: inline;
}

.tw19UserName {
    position: relative;
    top: -.2em;
    font-size: 18px;
    font-weight: bold;
}

.tw19UserNameEmbed {
    position: relative;
    font-weight: bold;
}

.tw19UserHandle {
    position: relative;
    top: -.5em;
    font-size: 16px;
    color: #697882;
}
.tw19UserHandleEmbed {
    position: relative;
    color: #697882;
}

/*Formatting for the Tweet's actual text*/
.tw19Text {
    width: 100%;
    display: inline-block;
    margin-bottom: 0.5em;
}

/*Formatting for the span of the like count and timestamp*/
.tw19Heart {
  height: 10px;
  width: auto;
}

.tw19LikesAndTime {
    display: inline-block;
    font-size: 14px;
    width: 100%;
    font-weight: 300;
    color: #697882;
    padding: 0em 0em .5em 0em;
}

.tw19TimeStamp {
    padding: 0em 0em 0em 0.6em;
}

/*Formatting for the span of reply counts*/
.tw19ReplyCount {
    display: inline-block;
    font-size: 14px;
    width: 100%;
    font-weight: 300;
    color: #2C7BB8;
    padding: .5em 0em 0em 0em;
    border-top: .05em solid #dddddd;
}

/*Defines the color of "links" and "hashtags" in a Tweet*/
.tw19Link{
    text-decoration: none;
    color: #2C7BB8;
}