Archive of Our Own ^beta

Chapter Text

This document assumes you're familiar with the original , and HTML not covered here is available there. Please note that CSS should be copied as a whole from this document to use these changes.

Unlike the original, I use t_ instead of tungle. This is a personal preference; find and replace t_ with whatever you like, as long as it's consistent. HTML used in this chapter and CSS from the skin are in chapters 2 and 3 respectively.

As a lot of the code remains the same on the HTML side, I've skipped post types that I didn't meaningfully edit. Changes that apply to them are:

• I've made the posts render as true 540px to properly fit images and keep even borders; this may not work ideally on mobile. I'd edit this with a @media query (it would be fun if it rendered as Tumblr mobile on phones, right?), but AO3 does not allow these.
• I've edited the notes and URL to better place them in the boxes, as I was having rendering issues.
• I've updated all links with http:// to https://. In certain browsers, http:// links and image sources can cause a warning message to appear because "parts of the page are not secure." This can trick people into thinking your page is hosting a virus or something, when it isn't at all. https:// does the same thing, but makes it secure, so the warning won't appear.

The only update for reblogs from the original is that this code:

<span class="t_url">BLOG URL </span><img class="reblog" src="https://i.imgur.com/AEaCuxO.png" /><span class="reblogurl"> RB URL</span>
<span class="reblogorigin">
<span class="reblogheader"><img class="reblogicon" src="OP IMAGE" /> <span class="sourceurl">OP URL</span></span>

<span class="reblogtext">
TEXT HERE
</span></span>

has been changed to this:

<span class="t_url">BLOG URL </span><img class="reblog" src="https://i.imgur.com/AEaCuxO.png" /><span class="reblogurl"> RB URL</span>
<span class="reblogorigin"></span>
<span class="reblogheader"><img class="reblogicon" src="OP IMAGE" /> <span class="sourceurl">OP URL</span></span>

<span class="reblogtext">
TEXT HERE
</span>

(Yes, they are very similar. I had to click back and forth in the editor to find the difference.) Here's a live preview:

I've heavily modified the way photosets are rendered to allow for more modular customization. One of the casualties of my tweaks was the photoset url tag. So, instead of using t_url, use t_photourl for a photoset. Otherwise, the only difference is the classes.

I've separated the classes so that, instead of something like t_two_one, which uses one class for both number of images and position, the same image would be classed as t_two left, with t_two for number of images and left for position. The space is important!

Here are the classes for number of images:

1. t_one (a new addition for a one-image row; t_img doesn't play nice with photosets)
2. t_two
3. t_three

And here they are for position, with their original counterparts in parentheses for reference. Note that the code in parentheses will not work.

1. left (t_two_one and t_three_one)
2. mid (t_three_two)
3. right (t_two_two and t_three_three)

For obvious reasons, t_one can't take a position, and t_two can't take the mid position. If you'd like to change these to different names to disambiguate from other work CSS, keep in mind that there are properties like float: right; in the CSS, so a global find and replace may break your code.

Part of the reason for these changes was to prevent the need for code like t_two_four, which could quickly get confusing. Instead, photosets now have different default heights for two-image and three-image rows, as well as separate dimension classes which can be applied to any photoset row to alter height (in this case, t_two_four becomes t_two right portrait).

This is the CSS for the portrait class: #workskin .portrait { height: 412px; }

I chose this height because it was used in the original guide; it has no special meaning. Keep in mind, Tumblr automatically shows images as cropped, but these will be stretched or squished, so if you want that authentic Tumblr look, you'll need to crop them yourself.

Here's how the height class portrait class, used here in the second row, can change the dimensions of an image. All images on the same line must either have the same dimension class or no dimension class; otherwise, it'll break the illusion.

You can create new image heights by copying the code for .portrait, changing the name to something unique that you prefer, and editing the height value. For example, here I've applied the short class to two t_one images and a row of t_three images.

The CSS looks like this: #workskin .short { height: 50px; }.

Image credits: blue lemon sliced into two halves by davisco, multicolored hallway by Efe Kurnaz.

Next up, the HTML used to render these posts!