Archive of Our Own ^beta

Chapter Text

I was writing something with a lot of mixed media things going on, and I wanted to add some tumblr posts without using screenshots, but I couldn't find a reference on how to code them for AO3. So I did it myself! It's undoubtedly not the most brilliant code ever, but you have to remember all coding experience I have is whatever I learned in the two years of high school IT class that I attended like four times a year. But hey, it works! So.

First off, you'll need to make a work skin. You can do that by going to My Work Skins on your AO3 dashboard and selecting Create Work Skin. If you're already using a work skin, add the CSS to that one; you can only use one skin at a time for your work.

Now, after giving your skin a beautiful title (mine is called 'welcome to the tungle'), add the following CSS in the CSS box:

#workskin .tungle {
  max-width: 500px;
  font-family: Gibson,Helvetica Neue,HelveticaNeue,Helvetica,Arial,sans-serif;
  display: table;
  margin: auto;
  color: #444444;
}

#workskin .tunglebody {
  background-color: #ffffff;
  border-radius: 3px;
  border-style: solid;
  border-width: .1em;
  border-color: #dddddd;
  float: left;
  max-width: 100%;
  position: relative;
  padding: 15px 0 0;
}

#workskin .tungleurl {
  position: relative;
  top: -.2em;
  font-weight: 700;
  font-size: 14px;
  margin-top: 50px;
  margin-left: 20px;
  line-height: 20px;
  height: 20px;
}

#workskin .tungletext {
  display: inline-block;
  margin-top: 15px;
  margin-left: 20px;
  line-height: 21px;
  font-size: 14px;
  width: 92%;
  word-wrap: break-word;
}

#workskin .tungletext a {
  color: #444444;
}

#workskin .tungleh {
  display: inline-block;
  margin-left: 20px;
  font-weight: 400;
  font-size: 36px;
  line-height: 47px;
  width: 92%;
  word-wrap: break-word;
}

#workskin .tungletags {
  display: inline-block;
  width: 92%;
  font-size: 13px;
  color: #8f8f8f;
  line-height: 20px;
  position: relative;
  margin-top: 15px;
  margin-left: 20px;
  overflow: hidden;
  white-space: nowrap;
}

#workskin .tungletags:after {
  content: "";
  position: absolute;
  width: 20%;
  height: 100%;
  right: 0;
  top: 0;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

#workskin .tungletag {
  margin-left: 12px;
}

#workskin .tungletag:first-of-type {
  margin-left: 0px;
}

#workskin .tunglenotes {
  font-size: 14px;
  font-weight: bold;
  color: #8f8f8f;
  line-height: 45px;
  position: relative;
  margin-left: 20px;
}

#workskin .tungleicons {
  height: 45px;
  width: auto;
  float: right;
  margin-right: 10px;
}

Yes, everything is named tungle. Because I'm an idiot, that's why. Feel free to rename things.

That gives you a basic Tumblr text post like the one above! Make sure to save the skin. Now to insert this in your work, you're obviously going to need to create a new work first, and then make sure that above where you type your work text, select the right work skin in the box "Associations". Then the work text box itself should be set to HTML, not Rich Text. So far, so good. Now you can add the following HTML into that box:

<div class="tungle">

<p class="tunglebody">

<span class="tungleurl">phyripo</span>

<span class="tungleh">Lorem Ipsum</span>

<span class="tungletext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>

<span class="tungletext">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>

<span class="tungletags">
<span class="tungletag">#here is a tag</span><span class="tungletag">#and here is Another Tag</span> <span class="tungletag">#tags tags tags tags tags tags tagstagstagstagstags</span>
</span>

<span class="tunglenotes">
3,035,204 notes
</span>

<img class="tungleicons" src="http://i.imgur.com/LWKqh4u.png" />
</p></div>

And there you go! That'll give you something like this:

Now just change the username, text, tags and notes, and done! I made an image of the Tumblr icons at the bottom of the post (you can find it here) - Tumblr itself uses a special font. As you can see, if you want a line break, you'll have to close <span class="tungletext"> and open a new one. If you don't want a title, just remove the whole span containing the title ("tungleh").

Make a new <span class="tungletag"> for every tag, otherwise the white space between the tags will be too small. Also, you must have a tag, or the notes will float off. See, I'm not very good at HTML. Now suppose the tags of your Tumblr post are really important to your work and you want to show them all instead of having them fade out; then you can find this in the CSS

#workskin .tungletags {
  display: inline-block;
  width: 92%;
  font-size: 13px;
  color: #8f8f8f;
  line-height: 20px;
  position: relative;
  margin-top: 15px;
  margin-left: 20px;
  overflow: hidden;
  white-space: nowrap;
}

#workskin .tungletags:after {
  content: "";
  position: absolute;
  width: 20%;
  height: 100%;
  right: 0;
  top: 0;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

and replace it with

#workskin .tungletags {
  display: inline-block;
  width: 92%;
  font-size: 13px;
  color: #8f8f8f;
  margin-top: 15px;
  line-height: 20px;
  position: relative;
  margin-left: 20px;
}

which will give you something more like this:

The width of this is in the basis 500px, which makes it look more like a Tumblr post but is also a little wide for mobile screens. When you do the tag thing, though, the CSS property that prevents the resizing is also removed, so in that case the container will resize with the screen. So it's up to you what you prefer! (I was very proud of the fade myself, that's why I kept it.) If you have fewer tags, the container will also resize!

Alright, now we want to add an inline image! It's very easy. First, add the following CSS to the skin:

#workskin .tungleimg {
  max-width: 100%;
  height: auto;
}

(Again, feel free to give it a more sensible name, just make sure you replace it in the HTML code as well.) And just add this HTML somewhere in your code:

<img class="tungleimg" src="LINK TO IMAGE" />

To get that Authentic Tumblr Effect where it resizes your images to the full width of the post, you have to place this code outside the <span class="tungletext">. You can put the span before and after the image, though, so it is in the middle of a paragraph. Like so:

<div class="tungle">

<p class="tunglebody">

<span class="tungleurl">phyripo</span>

<span class="tungletext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>

<img class="tungleimg" src="http://i.imgur.com/UwnKlXj.jpg" />

<span class="tungletext">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>

<span class="tungletags">
<span class="tungletag">#here is a tag</span><span class="tungletag">#and here is Another Tag</span> <span class="tungletag">#tags tags tags tags tags tags tagstagstagstagstags</span>
</span>

<span class="tunglenotes">
3,035,204 notes
</span>

<img class="tungleicons" src="http://i.imgur.com/LWKqh4u.png" />
</p></div>

And that looks like this!

If you don't like the full width thing, you can fiddle around with percentage of the image a bit, and you can put the code inside the tungletext span if you want your image not to be stuck to the side and have a margin instead.

You can add all regular text decorations like italics or bold text in HTML, as well as links. Links won't look exactly like on Tumblr, which has a grey line instead of one the same color as the text, but AO3 won't let you remove the line for some reason, so there's really no way of mimicking that!

Alright, so much for the text post! Now, the next part, which is quote posts, because you never know when you might want to quote a quote from Tumblr, right? (I thought this would be the easiest one to mimic, which I why I did it first. I was wrong.)

You'll need to add this bit of CSS to your work skin.

#workskin .tunglequote {
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 1px;
  margin-left: 35px;
  line-height: 42px;
  font-size: 36px;
  width: 89%;
  word-wrap: break-word;
  font-family: Georgia, serif;
  text-indent: -15px;
}

#workskin .tunglequote:before {
  content: "\201C";
}

#workskin .tunglequote:after {
  content: "\201D";
}

#workskin .quotesourcedash {
  width: 20px;
  margin-left: 20px;
}

#workskin .quotesource {
  display: inline-block;
  margin-bottom: 15px;
  line-height: 21px;
  font-size: 14px;
  width: 90%;
  word-wrap: break-word;
}

And then the HTML in your work, which looks like this:

<div class="tungle">

<p class="tunglebody">

<span class="tungleurl">phyripo</span>

<span class="tunglequote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>

<span class="quotesourcedash">
— </span>
<span class="quotesource">
me, and some other people</span>

<span class="tungletags">
<span class="tungletag">#here is a tag</span><span class="tungletag">#and here is Another Tag</span> <span class="tungletag">#tags tags tags tags tags tags tagstagstagstagstags</span>
</span>

<span class="tunglenotes">
3,035,204 notes
</span>

<img class="tungleicons" src="http://i.imgur.com/LWKqh4u.png" />
</p></div>

Which results in this!

Tumblr resizes the text when your quote is longer. If you want to do that, just change the font-size under #workskin .tunglequote to something smaller. (The first resize is to 22px, if you want to stay faithful to Tumblr.)

Alright, let's agree quotes aren't really that exciting and move on to the next post type that might be useful!

Images! It's actually really simple. You just take the CSS code from the inline image

#workskin .tungleimg {
  max-width: 100%;
  height: auto;
}

and the HTML too

<img class="tungleimg" src="LINK TO IMAGE" />

and just put it ahead of the text this time!

<div class="tungle">

<p class="tunglebody">

<span class="tungleurl">phyripo</span>

<img class="tungleimg" src="http://i.imgur.com/UwnKlXj.jpg" />

<span class="tungletext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>

<span class="tungletext">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>

<span class="tungletags">
<span class="tungletag">#here is a tag</span><span class="tungletag">#and here is Another Tag</span> <span class="tungletag">#tags tags tags tags tags tags tagstagstagstagstags</span>
</span>

<span class="tunglenotes">
3,035,204 notes
</span>

<img class="tungleicons" src="http://i.imgur.com/LWKqh4u.png" />
</p></div>

And behold!

If you want to have more images, you can simply stack them on top of each other by repeating the code. If you want to mimic a photo set, you're going to need some more CSS. Unfortunately, I couldn't figure out a way to 'crop' the images like Tumblr does within the constraints of AO3 HTML, so you're going to have to make sure your images have the same dimensions yourself. Just take the dimensions of one image, and then crop the other one in the same row to approximately the same dimensions, or else it'll be stretched weirdly. If you can, group the same sort of images in a row, so you have landscape view images in one and portrait view in another. This may seem a bit backwards, but I can't figure out anything better. It is also a good idea not to use huge images, because even if they get resized, it'll still be a lot to load for your readers!

Alright, the CSS for a row containing two images is the following.

#workskin .tungletwo_one {
  width: 49.5%;
  height: 177px;
  margin-top: 4px;
  display: block;
  overflow: hidden;
  float: left;
}

#workskin .tungletwo_two {
  width: 49.5%;
  height: 177px;
  margin-top: 4px;
  display: block;
  overflow: hidden;
  float: right;
}

If you change the height value, your images will be resized differently. If you want to have different image heights in different rows, you'll need to copy that bit of CSS and give it a different name, and change the height. For example:

#workskin .tungletwo_three {
  width: 49.5%;
  height: 412px;
  margin-top: 4px;
  display: block;
  overflow: hidden;
  float: left;
}

#workskin .tungletwo_four {
  width: 49.5%;
  height: 412px;
  margin-top: 4px;
  display: block;
  overflow: hidden;
  float: right;
}

For a row with three pictures, the CSS is basically the same.

#workskin .tunglethree_one {
  width: 32.8%;
  height: 120px;
  margin-top: 4px;
  display: block;
  overflow: hidden;
  float: left;
}

#workskin .tunglethree_two {
  width: 33%;
  height: 120px;
  margin-top: 4px;
  display: inline-block;
  overflow: hidden;
  margin-left: 4px;
}

#workskin .tunglethree_three {
  width: 32.8%;
  height: 120px;
  margin-top: 4px;
  display: block;
  overflow: hidden;
  float: right;
}

And then the HTML.

<img class="tungletwo_one" src="LINK" />
<img class="tungletwo_two" src="LINK" />
<img class="tungletwo_three" src="LINK" />
<img class="tungletwo_four" src="LINK" />
<img class="tunglethree_one" src="LINK" />
<img class="tunglethree_two" src="LINK" />
<img class="tunglethree_three" src="LINK" />

And repeat! Again, put it before the text span, just like this.

<div class="tungle">

<p class="tunglebody">

<span class="tungleurl">phyripo</span>

<img class="tungletwo_one" src="http://i.imgur.com/UwnKlXj.jpg" />
<img class="tungletwo_two" src="http://i.imgur.com/A8HG5M2.jpg" />
<img class="tungletwo_three" src="http://i.imgur.com/A8HG5M2.jpg" />
<img class="tungletwo_four" src="http://i.imgur.com/UwnKlXj.jpg" />
<img class="tunglethree_one" src="http://i.imgur.com/UwnKlXj.jpg" />
<img class="tunglethree_two" src="http://i.imgur.com/A8HG5M2.jpg" />
<img class="tunglethree_three" src="http://i.imgur.com/UwnKlXj.jpg" />

<span class="tungletext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>

<span class="tungletext">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>

<span class="tungletags">
<span class="tungletag">#here is a tag</span><span class="tungletag">#and here is Another Tag</span> <span class="tungletag">#tags tags tags tags tags tags tagstagstagstagstags</span>
</span>

<span class="tunglenotes">
3,035,204 notes
</span>

<img class="tungleicons" src="http://i.imgur.com/LWKqh4u.png" />
</p></div>

That code will give you this:

Just fiddle around with the height until the images are to your liking, but be careful not to change the width percentages! If, for some reason, you want to put a video in a Tumblr post in a fic, and let's assume it's a YouTube video, just get the embed code from YouTube, put it where you would put the image HTML, and set the iframe width to 100%. The height is a bit weird - for me it works well to set it to 320 (not a percentage), but just see what works best for you. Here is a post with a video. (I love this video series, don't mind me.)

Moving on to ask posts now. This was easier than I thought it would be. You do need to add this CSS:

#workskin .tungleask {
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 3px;
  float: left;
  position: relative;
  padding: 15px 14px 18px;
  display: inline-block;
  margin-top: 15px;
  margin-left: 20px;
  line-height: 21px;
  font-size: 14px;
  width: 80%;
  word-wrap: break-word;
}

#workskin .tungleasktip {
  display: inline;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #f2f2f2;
  right: -8px;
  top: 10px;
}

#workskin .tungleaskicon {
  display: inline-block;
  float: right;
  height: 37px;
  width: 37px;
  margin-top: 15px;
  border-radius: 2px;
  margin-right: 15px;
}

#workskin .tungleasker {
  color: #a6a6a6;
  font-size: 13px;
  display: inline-block;
  width: 100%;
  line-height: 21px;
  margin-bottom: 7px;
}

And the HTML to put in your work! You just need to put this before the text, which will now be the answer to the ask.

<span class="tungleask">
<span class="tungleasker"><b>URL OF ASKER</b> asked:</span>QUESTION
<span class="tungleasktip"></span></span><img class="tungleaskicon" src="LINK TO ICON" />

Which gives you a full HTML like this.

<div class="tungle">

<p class="tunglebody">

<span class="tungleurl">phyripo</span>

<span class="tungleask">
<span class="tungleasker"><b>kuchlkastl7</b> asked:</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?
<span class="tungleasktip"></span></span><img class="tungleaskicon" src="http://i.imgur.com/9z4Us0g.jpg" />

<span class="tungletext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>

</span>

<span class="tungletags">
<span class="tungletag">#here is a tag</span><span class="tungletag">#and here is Another Tag</span> <span class="tungletag">#tags tags tags tags tags tags tagstagstagstagstags</span>
</span>

<span class="tunglenotes">
3,035,204 notes
</span>

<img class="tungleicons" src="http://i.imgur.com/LWKqh4u.png" />
</p></div>

And that results in a post such as this.

And lastly, as far as original posts go: a chat post! There's some extra CSS to add to the work skin again.

#workskin .tunglechat {
  display: inline-block;
  font-size: 14px;
  width: 92%;
  line-height: 1.4;
  font-family: Courier, monospace;
  padding-top: 3px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 3px;
  margin-top: 15px;
  margin-left: 20px;
}

#workskin .tungleline {
  display: block;
  padding-top: 6px;
  padding-right: 0px;
  padding-bottom: 6px;
  padding-left: 0px;
  width: 100%;
}

#workskin .tungleline:first-of-type {
  padding-top: 0px;
}

#workskin .tungleline:last-of-type {
  padding-bottom: 0px;
}

#workskin .tungleline:nth-of-type(even) {
  background: #fdfdfd;
}

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

#workskin .tungleline>strong:after {
  content: "\A0";
}

And the HTML, which will come in place of the text, is this:

<span class="tunglechat">
<span class="tungleline"><strong>Speaker:</strong> chat</span>
<span class="tungleline"><strong>Speaker:</strong> chat</span>
<span class="tungleline"><strong>Speaker:</strong> chat</span>
<span class="tungleline"><strong>Speaker:</strong> chat</span>
</span>

So the full code now looks like this!

<div class="tungle">

<p class="tunglebody">

<span class="tungleurl">phyripo</span>

<span class="tunglechat">
<span class="tungleline"><strong>Lorem ipsum:</strong> dolor sit amet</span>
<span class="tungleline"><strong>consectetur:</strong> adipiscing elit</span>
<span class="tungleline"><strong>sed do eiusmod tempor:</strong> incididunt ut </span>
<span class="tungleline"><strong>labore:</strong> et dolore magna aliqua</span>
</span>

<span class="tungletags">
<span class="tungletag">#here is a tag</span><span class="tungletag">#and here is Another Tag</span> <span class="tungletag">#tags tags tags tags tags tags tagstagstagstagstags</span>
</span>

<span class="tunglenotes">
3,035,204 notes
</span>

<img class="tungleicons" src="http://i.imgur.com/LWKqh4u.png" />
</p></div>

Add as many lines as you want!

Alright, that's it for original posts! Now for reblogs! (I turned xkit off for this, you know.)

We're going to need some CSS again, namely this.

#workskin .reblog {
  height: 15px;
  width: auto;
}

#workskin .reblogheader {
  position: relative;
  line-height: 25px;
  padding-top: 15px;
  padding-left: 20px;
  width: 96%;
  display: inline-block;
  border-top: 1px solid #e7e7e7;
  margin-top: 5px;
}

#workskin .reblogurl {
  position: relative;
  top: -.2em;
  font-weight: 700;
  font-size: 13px;
  margin-top: 50px;
  margin-bottom: 10px;
  line-height: 25px;
  height: 25px;
  color: #8f8f8f;
}

#workskin .reblogicon {
  border-radius: 2px;
  width: 25px;
  height: 25px;
  vertical-align: baseline;
}

#workskin .sourceurl {
  position: relative;
  font-weight: 700;
  font-size: 13px;
  vertical-align: top;
  display: inline-block;
}

#workskin .reblogorigin {
  width: 100%;
  word-wrap: break-word;
  padding-top: 20px;
  padding-bottom: 15px;
  padding-right: 20px;
}

#workskin .reblogtext {
  display: inline-block;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
  line-height: 21px;
  font-size: 14px;
  width: 92%;
  word-wrap: break-word;
}

#workskin .reblogtext a {
  color: #444444;
}

There's quite some components, first adding the URL the post is 'reblogged' from, the HTML code for which (bolded) is put right behind the URL you've already got. The reblog icon is an image, which you can find here but it's also just included in the code.

<span class="tungleurl">URL OF POSTER </span>
<img class="reblog" src="http://i.imgur.com/AEaCuxO.png" /><span class="reblogurl"> URL OF REBLOGGED PERSON</span>

Alright, and then the reblog chain. It's pretty close to what it looks like on Tumblr, minus the little green reblog icons over the icons of people commenting. I did try, but I didn't find a way to add those. Anyway! The code for one block of reblog... content, whatever you want to call it, is this.

<span class="reblogorigin">
<span class="reblogheader">
<img class="reblogicon" src="IMAGE LINK" /> <span class="sourceurl">URL</span>
</span>
<span class="reblogtext">
TEXT
</span>

</span>

You can put inline images in here too, but again, only outside the reblogtext span. If you want to mimic a picture or photo set with a reblog chain, put the code for that anywhere between the end of the URLs and the start of the text span. This will leave you with a grey line that isn't there on Tumblr itself, but it doesn't really bother me, and getting rid of it would mean even more CSS.

The reblog content block can be repeated to create a chain, and you can even add a source by just repeating the whole code for tags but writing "source: URL" instead of tags! So all together, that looks like this:

<div class="tungle">

<p class="tunglebody">

<span class="tungleurl">phyripo </span><img class="reblog" src="http://i.imgur.com/AEaCuxO.png" /><span class="reblogurl"> kuchlkastl7</span>
<span class="reblogorigin">
<span class="reblogheader">
<img class="reblogicon" src="http://i.imgur.com/UwnKlXj.jpg" /> <span class="sourceurl">battle-tosti</span>
</span>
<span class="reblogtext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>

</span>

<span class="reblogorigin">
<span class="reblogheader">
<img class="reblogicon" src="http://i.imgur.com/9z4Us0g.jpg" /> <span class="sourceurl">kuchlkastl7</span>
</span>
<span class="reblogtext">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>

</span>
<span class="tungletags">
<span class="tungletag">Source: battle-tosti</span>
</span>
<span class="tungletags">
<span class="tungletag">#here is a tag</span><span class="tungletag">#and here is Another Tag</span> <span class="tungletag">#tags tags tags tags tags tags tagstagstagstagstags</span>
</span>

<span class="tunglenotes">
3,035,204 notes
</span>

<img class="tungleicons" src="http://i.imgur.com/LWKqh4u.png" />
</p></div>

And then you get this!

You can also add this to ask posts as I explained them earlier! For the full effect, you'll have to put your answer inside the same box as the question. That's super easy, though - just copy it, change the URL and "asked" to "answered", and there you go!

And that's it! Try not to go back and forth editing too much, especially when making something with reblogs, or else there's a good chance AO3 will break some stuff. I hope someone finds this useful.