Repository: Work Skins

by gadaursan

Summary:

Primarily just where I share work skin code and discuss ways to improve the Ao3 experience, including:
- Twitter and Instagram like posts
- Non iOS messaging systems
- Avatar and image formatting for script formats.
- Search engine interfaces
- Documentation on AO3 Site Skins

Notes:

This isn't a new fic. This is just my test bed where I attempt to experiment with work skins.

Chapter 1: An Introduction

Summary:

[This post is under construction]

Notes:

A bit late to post since the publishing of this guide, but I might as well do it for documentation's sake.

These work skins are made firstly, to help make your fics as pretty as you desire them to be. Who doesn't want some cool Tweets in your fics, or a convincing Google search bar?

Why all the emphasis on highlighted text?

The major design principle of the code I share here is to make user-friendly, native HTML/CSS code that can be used in AO3. It is incredibly easy to simply paste a screenshot of a tweet or instagram post and call it a day, but I don't believe this would be helpful to the preservation of fics. As of now, AO3 doesn't host images on its own and requires users to host such content on their own. If the content host shuts down before AO3 does, the image will no longer be accessed and is at the mercy of the Wayback Machine. Additionally, some readers might not be able to read off of an image and will have greater difficulty understanding the story if they miss out on possibly valuable text, and images in a lossy format (like .jpeg) will degrade over the time.

For images and illustrations, this may not be significant for a medium that's heavy on text, but if you used those images to depict social media posts or anything text heavy, a broken link is a major problem. These work skins may require some work to configure, but using text and some fancy formatting could be better in the long run. Even if you lose the user images and the photos, you can still preserve the text and allow some more accessibility while still maintaining your immersive, stylish experience.

Some ground rules, policies, yada yada

I don't think much needs to be said here, but you are free to make modifications to the code shared here. For troubleshooting, please be as detailed as possible about what the problem is when you post your comments. The ideal situation is to actually share the code, so like, directly pasting code for us to see or a codepen link can be most useful.

Chapter 2: Android 6.0 Messaging

Notes:

This is one of the first work skins I made, so I didn't put any documentation, and I don't plan to, mostly because this was only as an experiment and wasn't very robust to begin with.

Edit (10/25/23): At request of a commenter, the source HTML has been added.

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

Source HTML

<div class="phoneAND">
<p class="headerAND">Viktor Nikiforov</p>
<ol class="messagebodyAND">
<li class="replyWrapperAND">
<span class="iconWrapperAND">
</span>
<span class="replyAND">
<p class="hide">A: </p>
<p>Hello, friend.</p>
<p class="timestampAND">2 min</p></span>
<span class="replyIconWrapperAND">
<img class="iconAND" src="http://imgur.com/tzkpXGS.png">
</span>
</li>
<li class="textWrapperAND">
<span class="textIconWrapperAND">
<img class="iconAND" src="http://imgur.com/6X2Gdg9.png">
</span>
<span class="textAND">
<p class="hide">B: </p>
<p>Hello to you, too.</p>
<p class="timestampAND">1 min</p></span>
<span class="iconWrapperAND">
</span>
</li>
<li class="replyWrapperAND">
<span class="iconWrapperAND">
</span>
<span class="replyAND">
<p class="hide">A: </p>
<p>Should we get dinner?
We can go to that Chinese place you like so much.</p>
<p class="timestampAND">1 min</p></span>
<span class="replyIconWrapperAND">
<img class="iconAND" src="http://imgur.com/tzkpXGS.png">
</span>
</li>
<li class="replyWrapperAND">
<span class="iconWrapperAND">
</span>
<span class="replyAND">
<p class="hide">A: </p>
<p>My treat.</p>
<p class="timestampAND">1 min</p></span>
<span class="iconWrapperAND">
</span>
</li>
<li class="textWrapperAND">
<span class="textIconWrapperAND">
<img class="iconAND" src="http://imgur.com/6X2Gdg9.png">
</span>
<span class="textAND">
<p class="hide">B: </p>
<p>Sure. Tell me when.</p>
<p class="timestampAND">Now</p></span>
<span class="iconWrapperAND">
</span>
</li>
</ol>
</div>

Chapter 3: Android 6.0 CSS file

Notes:

Technically, this is only part of the full code I used for Chapter 1. The other half of the code, namely the iOS code can be found with detailed specifications by How to Make iOS Text Messages on AO3 by CodenameCarrot and La_Temperanza. A word of caution: this code isn't stable by AO3 standards, meaning that if you use this and follow the way I styled the HTML in Chapter 1 (use Inspect Source), and constantly go back to AO3's editing page to change your HTML, AO3 will break the HTML. I highly suggest you edit this in a separate IDE and paste it onto AO3 when you're ready.

.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 4: Twitter Mockup (deprecated)

Summary:

A test run of mobile-based embedded Tweets.

UPDATE 02/06/20: This is work skin example has been deprecated, meaning that a newer version of this work skin is out. A more updated version can be found here.

Notes:

An beginning note to check if my stuff doesn't play hopscotch.

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

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.

• Twitter Icon
• Like Button
• Reply Icon
• Retweet Button
• Verified User Icon

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 )

Notes:

An endnote to check if my stuff doesn't play hopscotch.

Chapter 5: Twitter Mockup CSS Code (deprecated)

Notes:

02/06/20: This is work skin example has been deprecated, meaning that a newer version of this work skin is out. A more updated version can be found here.

/*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 6: Fire Emblem Support Scripting

Summary:

formatting and CSS to format screenplay and scripts specifically for Fire Emblem. This skin is implemented in my fic As Dark Comes the Night

Notes:

A fairly minor addition. Someone had asked me to share the code for this a year ago, so I should just put it all here instead of putting it on some random pastebin.

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:

	This is the first time I've seen you wear boots.
	They're uncomfortable, but if it's for the sake of keeping my cover, I'll wear them.
	Hmm, ever wore heels before?
	I have. They aren't the most pleasant of memories.
	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:

	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.
	I don't know what you're wishing for, but I'm sure you will get what you want someday.
	… F-Forget all the nonsense I just said.
	(Takumi quickly leaves, and shuts the door behind him.)
	… 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 7: Instagram: Documentation

Summary:

Instagram posts with highlightable text for your fics.

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 8: Instagram: CSS Code

Summary:

A dump of the CSS Code for the Instagram post.

.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;

}



#workskin .instHeart {

  height: 10px;

  width: auto;

}



/*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 9: Twitter (2019): Documentation (deprecated)

Notes:

UPDATE 02/06/20: This is work skin example has been deprecated, meaning that a newer version of this work skin is out. A more updated version can be found here.

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.

Notes:

CSS Code is in the following chapter.

Chapter 10: Twitter (2019): CSS Code (deprecated)

Notes:

Here's what you need to paste into the workskin. If the comments weren't enough to help you, please reach out to me, and I can help you troubleshoot.

02/06/20: This is work skin example has been deprecated, meaning that a newer version of this work skin is out. A more updated version can be found here.

/*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;
}

Chapter 11: Google Search: Documentation

Google

who is the current

who is the current green lantern
who is the current queen of genovia
who is the current james bond actress
who is the current va for mickey mouse
who is the current president

Now I might not be familiar with what are the hottest trends in modern AU, but suppose your character needs to do some internet sleuthing, or maybe they just want to know what vampires are. Perhaps you're writing a fic about your character's public reputation. How might you want to portray that? The work skin is meant to illustrate and simulate a search engine, complete with highlightable text. No more do you need to screencap and photoshop some pictures.

Getting Started.

First things first, create a work skin, or open an existing works skin you're planning to put CSS code into. After you save the skin and see a #workskin next to everything, don't worry about it. That's just AO3 making sure your code only works in the text of your fic.

The first part is the main wrapper we call browser. We will use this class to wrap the entire thing in a nice bow.

  .browser {
    min-width: 200px;
    max-width: 80%;
    margin: auto;
  }
  

The browser wrapper's HTML will start out looking like this.

  <div class="browser">
 </div>
  

The Logo

Next we have the browser's logo with search_logo to center and give some padding to the logo.

  .search_logo {
    text-align: center;
    margin: 0px 0px 0px 0px;
  }
  

Now we add code for the logo's color and font. I've provided two font options for Google, the classic serif font, and the 2015 sans serif version. You are free to change the font in font-family to whichever you want.

  .chrome_logo {
    font-weight: bold;
    font-size: x-large;
    font-family: "Lato", "Verdana", sans-serif;
  }
  .chromeold_logo {
    font-weight: bold;
    font-size: x-large;
    font-family: "Cardo", "Garamond", serif;
  }
  .chrome_blue {
    color: #4285F4;
  }
  .chrome_red {
    color: #DB4437;
  }
  .chrome_yellow {
    color: #F4B400;
  }
  .chrome_green {
    color: #0F9D58;
  }
  

With these classes, we can make the logo with the following HTML

Google

  <div class="browser">
 <p class="search_logo chrome_logo">
 <span class="chrome_blue">G</span><!-- DO NOT REMOVE COMMENTS
 --><span class="chrome_red">o</span><!--
 --><span class="chrome_yellow">o</span><!--
 --><span class="chrome_blue">g</span><!--
 --><span class="chrome_green">l</span><!--
 --><span class="chrome_red">e</span>
 </p>
 </div>
  

You might notice how the different letters of 'Google' have been separated, and that's to change the color. Also don't remove the commented parts unless you want the letters to be more spaced out.

The Search Bar

Now for the search bar itself. These classes. The chrome_term will put the border for the search bar like in Google. You can change the color of this if you wish.

  .search_bar {
    margin-top: 5px;
    margin-bottom: 0px;
  }

  .search_bar span {
    position: relative;
    display: block;
    margin: 0 0 0 0;
    padding: 5px;
  }
  .chrome_term {
    border: 1px solid #aaa;
  }

Now, when we put the search bar stuff in, it'll look like this.

Google

Who is the current queen of genovia

<div class="browser">
 <p class="search_logo chrome_logo">
 <span class="chrome_blue">G</span><!-- DO NOT REMOVE COMMENTS
 --><span class="chrome_red">o</span><!--
 --><span class="chrome_yellow">o</span><!--
 --><span class="chrome_blue">g</span><!--
 --><span class="chrome_green">l</span><!--
 --><span class="chrome_red">e</span>
 </p>
 <p class="search_bar">
 <span class="chrome_term">Who is the current queen of genovia</span>
 </p>
 </div>
  

You change the search term within the span element of search_bar. The customizable portion of the HTML code has been bolded for emphasis.

Stats and Suggestions

You might remember the stats that pop up from using Google. These clases below will format the proper classes to look like the search results stats or result suggestions.

  .search_stats {
    margin: 0 0 0 0;
    color: #999;
    font-size: smaller;
    padding-top: 5px;
  }

  .search_dym {
    margin: 0 0 0 0;
    font-size: smaller;
    padding-top: 5px;
  }

  .search_dym1 {
    color: #de5246;
  }

  .search_dym2 {
    color: #0645AD;
    font-weight: bold;
    font-style: italic;
  }
  

Within the element with the class search_stats, you can display the amount of number of results of your search and how fast it took for the engine to execute the search. Put an arbitrary number or put zero for a plot point where nothing shows up (insert X-Files theme).

Google

Who is the current queen of genovia

About 24,040,000,000 results (0.56 seconds)

<div class="browser">
 <p class="search_logo chrome_logo">
 <span class="chrome_blue">G</span><!-- DO NOT REMOVE COMMENTS
 --><span class="chrome_red">o</span><!--
 --><span class="chrome_yellow">o</span><!--
 --><span class="chrome_blue">g</span><!--
 --><span class="chrome_green">l</span><!--
 --><span class="chrome_red">e</span>
 </p>
 <p class="search_bar">
 <span class="chrome_term">Who is the current queen of genovia</span>
 </p>
 <p class="search_stats">About 24,040,000,000 results (0.56 seconds)</p>
 </div>
  

For memes or drama, search suggestion corrections can be added in the search_dym classed element. The customizable portion is in the search_dym2 classed span.

Google

Jack Sparrow

Did you mean: Captain Jack Sparrow

<div class="browser">
 <p class="search_logo chrome_logo">
 <span class="chrome_blue">G</span><!-- DO NOT REMOVE COMMENTS
 --><span class="chrome_red">o</span><!--
 --><span class="chrome_yellow">o</span><!--
 --><span class="chrome_blue">g</span><!--
 --><span class="chrome_green">l</span><!--
 --><span class="chrome_red">e</span>
 </p>
 <p class="search_bar">
 <span class="search_term chrome_term">Jack Sparrow</span>
 </p>
 <p class="search_dym">
 <span class="search_dym1">Did you mean: </span><!-- DO NOT REMOVE COMMENTS
 --><span class="search_dym2">Captain Jack Sparrow</span></p>
 </div>

Autocomplete Dropdown

While I don't believe actual dropdowns are allowed here on AO3, we can still scrape by with a bit of CSS.

.search_autocomplete {
  border: 1px solid #aaa;
  padding: 5px 5px 5px 5px;
  margin-top: 0px;
}

Now you have something resembling that dropdown that guesses what you're typing next. Maybe you might need this to show recent searches to show related topics or trending scandals.

Google

my husband is too

my husband is too big
my husband is too nice
my husband is too busy for me
my husband is too tired to make love
my husband is too big for me

<div class="browser">
 <p class="search_logo chrome_logo">
 <span class="chrome_blue">G</span><!-- DO NOT REMOVE COMMENTS
 --><span class="chrome_red">o</span><!--
 --><span class="chrome_yellow">o</span><!--
 --><span class="chrome_blue">g</span><!--
 --><span class="chrome_green">l</span><!--
 --><span class="chrome_red">e</span>
 </p>
 <p class="search_bar">
 <span class="search_term chrome_term">my husband is too</span>
 </p>
 <p class="search_autocomplete">
 <span>my husband is too <b>big</b></span><br/>
 <span>my husband is too <b>nice</b></span><br/>
 <span>my husband is too <b>busy for me</b></span><br/>
 <span>my husband is too <b>tired to make love</b></span><br/>
 <span>my husband is too <b>big for me</b></span>
 </p>
 </div>

Or, you know, maybe your character is looking up something naughty and dreading the entire internet journey as they read the suggestions.

Not Google?

Google might not be your search engine of your choice in the world you're writing for. Good thing I designed this work skin to allow for others to easily customize. For a test case, I'll be using Naver, a Korean search engine.

  .naver_logo {
    font-weight: bold;
    font-size: x-large;
    font-family: "Maven Pro", "Verdana", sans-serif;
  }
  .naver_green {
    color: #2DB400;
  }
  .naver_term {
    border: 2px solid #2DB400;
  }
  

It's not an exact copy, but this could be useful for some of you writing for Kpop fandoms or Korean webtoons or novels.

NAVER

where in the world is

where in the world is kim namjoon
where in the world is kim seokjin
where in the world is min yoongi
where in the world is jung hoseok
where in the world is park jimin
where in the world is kim taehyung
where in the world is jeon jungkook

<div class="browser">
 <p class="search_logo naver_logo">
 <span class="naver_green">NAVER</span>
 </p>
 <p class="search_bar">
 <span class="search_term naver_term">where in the world is</span>
 </p>
 <p class="search_autocomplete">
 <span>where in the world is <b>kim namjoon</b></span><br/>
 <span>where in the world is <b>kim seokjin</b></span><br/>
 <span>where in the world is <b>min yoongi</b></span><br/>
 <span>where in the world is <b>jung hoseok</b></span><br/>
 <span>where in the world is <b>park jimin</b></span><br/>
 <span>where in the world is <b>kim taehyung</b></span><br/>
 <span>where in the world is <b>jeon jungkook</b></span>
 </p>
 </div>
  

Maybe your fic's setting was set before 2015, before Google filed the edges of their logo. We can simply change the font family of the chrome_logo class, as demonstrated in chromeold_logo below:

Google

Who is the current queen of genovia

<div class="browser">
 <p class="search_logo chromeold_logo">
 <span class="chrome_blue">G</span><!-- DO NOT REMOVE COMMENTS
 --><span class="chrome_red">o</span><!--
 --><span class="chrome_yellow">o</span><!--
 --><span class="chrome_blue">g</span><!--
 --><span class="chrome_green">l</span><!--
 --><span class="chrome_red">e</span>
 </p>
 <p class="search_bar">
 <span class="chrome_term">Who is the current queen of genovia</span>
 </p>
 </div>
  

And that's about it. The following chapter is just the entire raw CSS code for easier copy pasting.

Chapter 12: Google Search: CSS Code

.browser {
  min-width: 200px;
  max-width: 80%;
  margin: auto;
}

.search_logo {
  text-align: center;
  margin: 0px 0px 0px 0px;
}

.chrome_logo {
  font-weight: bold;
  font-size: x-large;
  font-family: "Lato", "Verdana", sans-serif;
}
.chromeold_logo {
  font-weight: bold;
  font-size: x-large;
  font-family: "Cardo", "Garamond", serif;
}
.chrome_blue {
  color: #4285F4;
}
.chrome_red {
  color: #DB4437;
}
.chrome_yellow {
  color: #F4B400;
}
.chrome_green {
  color: #0F9D58;
}
.chrome_term {
  border: 1px solid #aaa;
}

.naver_logo {
  font-weight: bold;
  font-size: x-large;
  font-family: "Maven Pro", "Verdana", sans-serif;
}
.naver_green {
  color: #2DB400;
}
.naver_term {
  border: 2px solid #2DB400;
}

.search_bar {
  margin-top: 5px;
  margin-bottom: 0px;
}

.search_bar span {
  position: relative;
  display: block;
  margin: 0 0 0 0;
  padding: 5px;
}

.search_autocomplete {
  border: 1px solid #aaa;
  padding: 5px 5px 5px 5px;
  margin-top: 0px;
}

.search_stats {
  margin: 0 0 0 0;
  color: #999;
  font-size: smaller;
  padding-top: 5px;
}

.search_dym {
  margin: 0 0 0 0;
  font-size: smaller;
  padding-top: 5px;
}

.search_dym1 {
  color: #de5246;
}

.search_dym2 {
  color: #0645AD;
  font-weight: bold;
  font-style: italic;
}

Series this work belongs to:

• Part 1 of Repository: A Collection of Work Skins and Guides