Megaskin by Jockles
← Previous Chapter · Chapter Index · Next Chapter →
Chapter 12: Tumblr
Thanks to phyripo and Aposiopesis, whose How to Make Tumblr posts on AO3 and Tumblr-style CSS Tweaks this module is built on. Copied and adapted from them: reblog chains, asks, quote posts, chat posts, and the reblog and photoset tweaks.
12.1 Chapter Contents
- 12.2 A Reblog Chain
- 12.3 Posts on the Feed
- 12.4 Tumblr Post Container
- 12.5 The Header: Picture, Name and Time
- 12.6 The Green Reblog Badge
- 12.7 Verified Ticks and the Follow Button
- 12.8 Reblog Chains
- 12.9 Asks
- 12.10 Quote Posts
- 12.11 Chat Posts
- 12.12 Notes and Buttons Along the Bottom
- 12.13 The Feed Background
The Tumblr module is styled after the Tumblr mobile app: each post is a rounded card, and a reblog chain is a list of comments with a thin line between each one.
Before we begin, here's the two kinds of thing you can build: a single post (here, a reblog chain), or several posts together on the feed background, like scrolling the app (here, an ask, a quote post and a chat post). The full HTML is underneath each, which you can copy and modify yourself. The rest of the chapter takes the HTML apart so that you can modify all the individual parts to say exactly what you want.
12.2 A Reblog Chain
CB cutebrini Reblogged formulahs · 18m ago
wennberg baby at the halloween party...... there will be no drunk wm there will be no wm handsy makeout in the downstairs half bath
MO moonywithatrafficcone 5h ago
remembering when reavo said that will and mack got upset when he put his elementary school aged children to bed before 12am
The full HTML for this post
<div class="mob tb theme-auto">
<p class="tb-header">
<span class="tb-pfp rb colour4">CB</span>
<span class="tb-menu">•••</span>
<span class="tb-name"><b>cutebrini</b>
<span class="tb-subline">Reblogged <b>formulahs</b> · 18m ago</span></span>
</p>
<div class="tb-body">
<div class="tb-reblog">
<p class="tb-blog">
<span class="tb-pfp"><span class="pfp"><img src="https://64.media.tumblr.com/a14cfd79a77e6fe95ba16426e1aa5659/188bbfab996df056-f7/s400x600/617010ef3747484faf4ef9b7d1459b72aeeef952.pnj" alt="Profile picture of two-seventyone"></span></span>
<span class="tb-menu">•••</span>
<span class="tb-follow"><span>Follow</span></span>
<span class="tb-name"><b>two-seventyone
<span class="tb-check">✓</span><span class="tb-check">✓</span></b>
<span class="tb-subline">6h ago</span></span>
</p>
<p>wennberg baby at the halloween party...... there will be no drunk wm there will be no wm handsy makeout in the downstairs half bath</p>
</div>
<div class="tb-reblog">
<p class="tb-blog">
<span class="tb-pfp rb colour1">MO</span>
<span class="tb-menu">•••</span>
<span class="tb-name"><b>moonywithatrafficcone</b>
<span class="tb-subline">5h ago</span></span>
</p>
<p>remembering when reavo said that will and mack got upset when he put his elementary school aged children to bed before 12am</p>
</div>
</div>
<p class="tb-tags">#hockey rpf #wennberg #he is so normal about it</p>
<p class="tb-footer">
<span class="tb-notes"><b>171</b> notes</span>
<span class="tb-icon save"></span>
<span class="tb-icon">⇧</span>
<span class="tb-icon">✉</span>
<span class="tb-icon">⇄</span>
<span class="tb-icon">♡</span>
</p>
</div>12.3 Posts on the Feed
FS fuckyeahsnackables ✓✓✓✓✓✓ Reblogged · 37m ago
P perch0leap asked:
If you were an animal, what species would it be? Love your pod btw :b
JO jonkspwatsonbloggingitup answered:
Uh again I'll say pigeon... I don't really know why, they're just chill!
And thank you!
PoseyRosey 1h ago
I go where I want.
— Scott Hunter, to a very brave reporter
RR rinkrat 2h ago
Shane: why are you awake
Ilya: thinking
Shane: that's never good
The full HTML for these posts
<div class="tb-feed">
<div class="mob tb theme-auto">
<p class="tb-header">
<span class="tb-pfp rb colour6">FS</span>
<span class="tb-menu">•••</span>
<span class="tb-name"><b>fuckyeahsnackables
<span class="tb-check">✓</span><span class="tb-check">✓</span><span class="tb-check">✓</span><span class="tb-check">✓</span><span class="tb-check">✓</span><span class="tb-check">✓</span></b>
<span class="tb-subline">Reblogged · 37m ago</span></span>
</p>
<div class="tb-body">
<div class="tb-ask">
<p class="tb-asker"><span class="tb-ask-pfp colour3">P</span><span class="hide"> </span><b>perch0leap</b> asked:</p>
<p>If you were an animal, what species would it be? Love your pod btw :b</p>
</div>
<div class="tb-ask tb-answer">
<p class="tb-asker"><span class="tb-ask-pfp colour5">JO</span><span class="hide"> </span><b>jonkspwatsonbloggingitup</b> answered:</p>
<p>Uh again I'll say pigeon... I don't really know why, they're just chill!</p>
<p>And thank you!</p>
</div>
</div>
<p class="tb-tags">#answered</p>
</div>
<div class="mob tb theme-auto">
<p class="tb-header">
<span class="tb-pfp"><span class="pfp pfp-rose"></span></span>
<span class="tb-menu">•••</span>
<span class="tb-name"><b><span class="handle pfp-rose"><span class="hide">PoseyRosey</span></span></b>
<span class="tb-subline">1h ago</span></span>
</p>
<div class="tb-body">
<p class="tb-quote">I go where I want.</p>
<p class="tb-source">— Scott Hunter, to a very brave reporter</p>
</div>
<p class="tb-tags">#iconic #no further questions</p>
</div>
<div class="mob tb theme-auto">
<p class="tb-header">
<span class="tb-pfp colour2">RR</span>
<span class="tb-menu">•••</span>
<span class="tb-name"><b>rinkrat</b>
<span class="tb-subline">2h ago</span></span>
</p>
<div class="tb-body">
<div class="tb-chat">
<p><b>Shane:</b> why are you awake</p>
<p><b>Ilya:</b> thinking</p>
<p><b>Shane:</b> that's never good</p>
</div>
</div>
<p class="tb-tags">#hollanov #this is how I imagine every night</p>
<p class="tb-footer">
<span class="tb-notes"><b>2,904</b> notes</span>
<span class="tb-icon save"></span>
<span class="tb-icon">⇧</span>
<span class="tb-icon">✉</span>
<span class="tb-icon">⇄</span>
<span class="tb-icon">♡</span>
</p>
</div>
</div>12.4 Tumblr Post Container
A Tumblr post has a header with the blog's picture and name, a body, and then the tags and notes along the bottom. The module class is tb. Here's the outline of a post, with the parts filled in with placeholders:
[the header goes here]
[the post goes here]
<div class="mob tb theme-auto">
<p class="tb-header">[the header goes here]</p>
<div class="tb-body">
<p>[the post goes here]</p>
</div>
<p class="tb-tags">#hockey rpf</p>
<p class="tb-footer"><span class="tb-notes"><b>12,481</b> notes</span></p>
</div>tb-headeris the header row at the top of the post.tb-bodyholds the post itself, written as ordinary paragraphs. You can put a normal<img>picture in here too, and it'll fit the width of the card.tb-tagsis the grey row of tags. Type the#in yourself, and use to space the tags out.tb-footeris the row along the bottom, with the note count in it. You can leave it out, or add the buttons too (see Notes and Buttons Along the Bottom, further down).
Here are the tags from the reblog chain:
<p class="tb-tags">#hockey rpf #wennberg #he is so normal about it</p>12.5 The Header: Picture, Name and Time
The header has a round picture, then the name with a small grey line under it, and the three dots at the end. The picture is tb-pfp - with no image it shows initials on a grey circle, and colour1 to colour10 give it a colour:
RR rinkrat 2h ago
<p class="tb-header">
<span class="tb-pfp colour2">RR</span>
<span class="tb-menu">•••</span>
<span class="tb-name"><b>rinkrat</b>
<span class="tb-subline">2h ago</span></span>
</p>tb-name holds the name, in <b>, and tb-subline is the small grey line under it. tb-menu is the three dots on the right. The order matters here: picture, dots, then name. Anything that sits on the right-hand side, like the dots or a Follow button, has to come before the name in the code, so the name fits in beside it.
For a real picture, put the picture tag inside a pfp span inside the tb-pfp. The green reblog badge (next section) works with it too:
<span class="tb-pfp"><span class="pfp"><img src="https://64.media.tumblr.com/a14cfd79a77e6fe95ba16426e1aa5659/188bbfab996df056-f7/s400x600/617010ef3747484faf4ef9b7d1459b72aeeef952.pnj" alt="Profile picture of two-seventyone"></span></span>Or use a profile, so the same person has the same picture everywhere, like Rose's quote post on the feed. The blog name can come from the profile too, with the name typed inside in a hide span. That's for readers with the workskin switched off - the blog name comes from the CSS, so without it they wouldn't know who posted (see Profile Pictures and Accessibility, in the Core, Themes, and Extras chapter):
PoseyRosey 1h ago
<p class="tb-header">
<span class="tb-pfp"><span class="pfp pfp-rose"></span></span>
<span class="tb-menu">•••</span>
<span class="tb-name"><b><span class="handle pfp-rose"><span class="hide">PoseyRosey</span></span></b>
<span class="tb-subline">1h ago</span></span>
</p>The colours for colour1 to colour10 are set in the core CSS and shared with every app, so you can change them there.
12.6 The Green Reblog Badge
When a header belongs to a reblog, Tumblr puts a little green reblog symbol on the corner of the picture. To add it, put rb after tb-pfp. The grey line then usually says who it was reblogged from - write that name in <b> so it stands out:
CB cutebrini Reblogged formulahs · 18m ago
<p class="tb-header">
<span class="tb-pfp rb colour4">CB</span>
<span class="tb-menu">•••</span>
<span class="tb-name"><b>cutebrini</b>
<span class="tb-subline">Reblogged <b>formulahs</b> · 18m ago</span></span>
</p>12.7 Verified Ticks and the Follow Button
Some blogs have coloured checkmarks after their names. On Tumblr these are bought for fun - lots of people have them as a joke - so they don't mean a blog is verified, and you can give them to any blog you like. They come in twos, fours or sixes, and always in the same colour order: blue and green, then lime and yellow, then amber and orange. So two checkmarks are always blue and green, and the other colours only show up on blogs with four or six. Add a tb-check span for each one, straight after the name, like <span class="tb-check">✓</span><span class="tb-check">✓</span>, and the colours are added for you in the right order. Tumblr has lots of other badges too, but the skin only does the checkmarks.
A Follow button is <span class="tb-follow"><span>Follow</span></span>. It goes after the three dots and before the name, which is why everything on the right-hand side comes first in the code below:
<p class="tb-blog">
<span class="tb-pfp"><span class="pfp"><img src="https://64.media.tumblr.com/a14cfd79a77e6fe95ba16426e1aa5659/188bbfab996df056-f7/s400x600/617010ef3747484faf4ef9b7d1459b72aeeef952.pnj" alt="Profile picture of two-seventyone"></span></span>
<span class="tb-menu">•••</span>
<span class="tb-follow"><span>Follow</span></span>
<span class="tb-name"><b>two-seventyone
<span class="tb-check">✓</span><span class="tb-check">✓</span></b>
<span class="tb-subline">6h ago</span></span>
</p>12.8 Reblog Chains
When a post has been reblogged with comments, each comment is its own tb-reblog block inside tb-body. Each block starts with a tb-blog header, built just like tb-header, and the comment goes underneath it. Put them one after another, oldest first, and the workskin draws the thin line between them:
wennberg baby at the halloween party...... there will be no drunk wm there will be no wm handsy makeout in the downstairs half bath
MO moonywithatrafficcone 5h ago
remembering when reavo said that will and mack got upset when he put his elementary school aged children to bed before 12am
<div class="tb-reblog">
<p class="tb-blog">
<span class="tb-pfp"><span class="pfp"><img src="https://64.media.tumblr.com/a14cfd79a77e6fe95ba16426e1aa5659/188bbfab996df056-f7/s400x600/617010ef3747484faf4ef9b7d1459b72aeeef952.pnj" alt="Profile picture of two-seventyone"></span></span>
<span class="tb-menu">•••</span>
<span class="tb-follow"><span>Follow</span></span>
<span class="tb-name"><b>two-seventyone
<span class="tb-check">✓</span><span class="tb-check">✓</span></b>
<span class="tb-subline">6h ago</span></span>
</p>
<p>wennberg baby at the halloween party...... there will be no drunk wm there will be no wm handsy makeout in the downstairs half bath</p>
</div>
<div class="tb-reblog">
<p class="tb-blog">
<span class="tb-pfp rb colour1">MO</span>
<span class="tb-menu">•••</span>
<span class="tb-name"><b>moonywithatrafficcone</b>
<span class="tb-subline">5h ago</span></span>
</p>
<p>remembering when reavo said that will and mack got upset when he put his elementary school aged children to bed before 12am</p>
</div>Use the same picture colour for the same blog every time, so the reader can keep track of who's talking.
12.9 Asks
An ask and its answer are two boxes, one after the other. The question box is tb-ask, and the answer box is tb-ask with tb-answer added. Each one starts with a tb-asker line, with the blog's name in <b> and then "asked:" or "answered:". The small square picture on the right is tb-ask-pfp:
P perch0leap asked:
If you were an animal, what species would it be? Love your pod btw :b
JO jonkspwatsonbloggingitup answered:
Uh again I'll say pigeon... I don't really know why, they're just chill!
And thank you!
<div class="tb-ask">
<p class="tb-asker"><span class="tb-ask-pfp colour3">P</span><span class="hide"> </span><b>perch0leap</b> asked:</p>
<p>If you were an animal, what species would it be? Love your pod btw :b</p>
</div>
<div class="tb-ask tb-answer">
<p class="tb-asker"><span class="tb-ask-pfp colour5">JO</span><span class="hide"> </span><b>jonkspwatsonbloggingitup</b> answered:</p>
<p>Uh again I'll say pigeon... I don't really know why, they're just chill!</p>
<p>And thank you!</p>
</div>For an anon ask, leave out the picture and write Anonymous as the name. Both boxes go inside tb-body, and you can put an <img> picture in the answer box after the text.
12.10 Quote Posts
A quote post is a big line of text in a serif font, with whoever said it underneath. The quotation marks are added for you. Put it in tb-body:
I go where I want.
— Scott Hunter, to a very brave reporter
<p class="tb-quote">I go where I want.</p>
<p class="tb-source">— Scott Hunter, to a very brave reporter</p>tb-quote is the big quoted line, and tb-source is the smaller line with the source.
12.11 Chat Posts
A chat post is a block of dialogue in a typewriter font. Each line is its own paragraph, with the speaker's name in <b>:
Shane: why are you awake
Ilya: thinking
Shane: that's never good
<div class="tb-chat">
<p><b>Shane:</b> why are you awake</p>
<p><b>Ilya:</b> thinking</p>
<p><b>Shane:</b> that's never good</p>
</div>12.12 Notes and Buttons Along the Bottom
Like the real app, Tumblr shows one note count rather than a count for every button - notes are all the likes, reblogs and replies added together. The bottom row is tb-footer, and it goes after tb-body and the tags. The note count is a tb-notes span with the number in <b>, and it sits in a rounded box on the left. After it come the buttons, each a tb-icon span: save (tb-icon save, a bookmark drawn for you), share, reply, reblog and like, which line up on the right. Leave out any button you don't want:
<p class="tb-footer">
<span class="tb-notes"><b>171</b> notes</span>
<span class="tb-icon save"></span>
<span class="tb-icon">⇧</span>
<span class="tb-icon">✉</span>
<span class="tb-icon">⇄</span>
<span class="tb-icon">♡</span>
</p>12.13 The Feed Background
In the Tumblr app, the white cards sit on a dark navy background (or black in dark mode). To get that, wrap one or more posts in a tb-feed, like the posts on the feed at the top of the chapter, and the cards sit on it with a gap between each one: <div class="tb-feed">, then your posts, then </div>. Add black for the black version: <div class="tb-feed black">.
This is completely optional - without it, each post is just a card on its own, like the reblog chain.