jockles.com

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.

13.1 Chapter Contents

• 13.2 Getting the CSS
• 13.3 How the Module is Laid Out
• 13.4 The Card
• 13.5 The Header
• 13.6 Pictures and the Reblog Badge
• 13.7 Checkmarks
• 13.8 Reblog Chains
• 13.9 Asks
• 13.10 Quote and Chat Posts
• 13.11 Tags and the Bottom Row
• 13.12 The Feed
• 13.13 Links and Themes
• 13.14 Taking Parts Out

This chapter goes through the CSS for the Tumblr posts in the last chapter: the card, the header with its picture and checkmarks, reblog chains, asks, quote and chat posts, the bottom row, and the feed behind the cards.

13.2 Getting the CSS

The Tumblr CSS is here: jockles.com/fic/megaskin/css/tumblr.css. It needs the core CSS too (jockles.com/fic/megaskin/css/core.css), so paste the core into your work skin first and this underneath it.

13.3 How the Module is Laid Out

The usual order - the main rules, Links, Scrolling, Dark theme and Auto theme. Like a tweet or an Instagram post, a Tumblr post has no mob-body, so it scrolls as a whole once it's taller than 700px.

13.4 The Card

#workskin .tb {
  background: #ffffff;
  color: #000000;
  border: 1px solid #e3e3e3;
  border-radius: 14px;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

#workskin .tb .tb-body { display: block; padding: 0.3em 0 0.8em 0; }

#workskin .tb .tb-body p { margin: 0.5em 0; padding: 0 0.9em; }

A white card with rounded corners, like the mobile app. Tumblr posts are more spaced out than chats, so the lines are taller (1.5), and paragraphs in the body get their gaps back - the core takes them away from every chat, but a post needs them.

#workskin .tb :not(.pfp) > img {
  display: block;
  max-width: 92%;
  height: auto;
  margin: 0.6em auto;
  border-radius: 4px;
}

This one catches every picture in a post, but not profile pictures: :not(.pfp) > img means "a picture whose box isn't a pfp". The picture is centred, with a little space either side, and never wider than the card.

13.5 The Header

#workskin .tb .tb-header,
#workskin .tb .tb-blog {
  display: block;
  overflow: hidden;
  padding: 0.8em 0.9em 0.3em 0.9em;
  font-weight: normal;
}

#workskin .tb .tb-header { padding-bottom: 0.8em; border-bottom: 1px solid #eeeeee; }

#workskin .tb .tb-name { display: block; min-height: 38px; margin-left: 48px; }

#workskin .tb .tb-name > b { display: block; font-weight: bold; line-height: 1.3; }

#workskin .tb .tb-name > b:only-child { line-height: 38px; }

#workskin .tb .tb-subline { display: block; font-size: 0.85em; color: #6c7a8b; }

• The post's header (tb-header) and each reblog's header (tb-blog) are built the same, except the post's header has a line under it.
• The picture floats left, and the name is pushed 48px in from the left to clear it - the picture's 38px and a gap. min-height makes the name block at least as tall as the picture, so the next thing always starts below both.
• :only-child catches a name with no grey line under it, and makes its line as tall as the picture, which centres it from top to bottom beside the picture.

The header code is written over several lines, and AO3 turns line breaks into <br /> tags, so a couple of rules hide those and flatten the paragraph AO3 wraps around it, as in WhatsApp's message bar.

#workskin .tb .tb-follow { display: block; float: right; margin: 2px 0 0 0.5em; }

#workskin .tb .tb-menu {
  display: block;
  float: right;
  height: 38px;
  line-height: 38px;
  margin: 0 0 0 0.6em;
  color: #777777;
  letter-spacing: 0.05em;
  font-size: 0.8em;
}

13.6 Pictures and the Reblog Badge

#workskin .tb .tb-pfp {
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  position: relative;
  width: 38px;
  height: 38px;
  line-height: 1;
  text-align: center;
  border-radius: 50%;
  background-color: #8a8a8a;
  font-family: Arial, Helvetica, sans-serif;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  font-size: 0.85em;
  font-weight: bold;
}

The circle works like the other modules', with initials or a picture inside and colour1 to colour10 for the colours. It uses display: flex to centre the initials, which is a newer and more exact way than the line-height trick: align-items centres them top to bottom, and justify-content side to side.

#workskin .tb .tb-pfp.rb::after {
  content: '\21C4';
  position: absolute;
  right: -6px;
  bottom: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 1;
  text-align: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #0ccc3c;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: bold;
}

The reblog badge is added with ::after and pinned off the bottom right of the circle. \21C4 is the ⇄ arrows, in white on Tumblr's green, with a white edge to separate it from the picture.

13.7 Checkmarks

#workskin .tb .tb-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  line-height: 1;
  margin-left: 0.25em;
  border-radius: 50%;
  background: #42aaf5;
  color: #111111;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75em;
  font-weight: bold;
  vertical-align: 0.1em;
}

#workskin .tb .tb-check + .tb-check { margin-left: 0.12em; }

#workskin .tb .tb-check + .tb-check { background: #4ccd4a; }

#workskin .tb .tb-check + .tb-check + .tb-check { background: #a6d03f; }

#workskin .tb .tb-check + .tb-check + .tb-check + .tb-check { background: #e3cf3c; }

#workskin .tb .tb-check + .tb-check + .tb-check + .tb-check + .tb-check { background: #efb238; }

#workskin .tb .tb-check + .tb-check + .tb-check + .tb-check + .tb-check + .tb-check { background: #f08b37; }

Every checkmark starts blue. Then the same + trick as iMessage's stacked tapbacks counts them: .tb-check + .tb-check is the second, and each extra + .tb-check is one further along, so the second is green, the third lime, and so on to orange. That's how the colours always come out in the right order, without you having to say which is which.

13.8 Reblog Chains

#workskin .tb .tb-reblog {
  display: block;
  margin: 0;
  padding: 0 0 0.3em 0;
  border-top: 1px solid #eeeeee;
}

#workskin .tb .tb-body > .tb-reblog:first-child { border-top: 0; }

Each reblog has a thin line along its top, and the first one in the chain doesn't, because the post's header already has a line under it.

13.9 Asks

#workskin .tb .tb-ask {
  display: block;
  position: relative;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0.8em 0.9em 0.4em 0.9em;
  margin: 0.6em 36px 0.6em 0.9em;
}

#workskin .tb .tb-ask::after {
  content: '';
  position: absolute;
  top: 1.2em;
  right: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 7px;
  border-color: transparent transparent transparent #f5f5f5;
}

#workskin .tb .tb-ask-pfp {
  display: block;
  position: absolute;
  top: 0.8em;
  right: -36px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 5px;
  background-color: #8a8a8a;
  font-family: Arial, Helvetica, sans-serif;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  font-size: 0.75em;
  font-weight: bold;
}

• The ask box is grey with a 36px margin on its right, leaving room for the picture outside it.
• The pointer is a CSS triangle - the same border trick as WhatsApp's bubble tails - pinned to the right edge, pointing at the picture.
• The picture is pinned outside the box with right: -36px. It's a square with rounded corners (5px) rather than a circle, like Tumblr's, and it has its own colour1 to colour10.

13.10 Quote and Chat Posts

#workskin .tb .tb-quote { font-family: Georgia, serif; font-size: 1.9em; line-height: 1.25; }

#workskin .tb .tb-quote::before { content: "\201C"; }

#workskin .tb .tb-quote::after { content: "\201D"; }

#workskin .tb .tb-chat {
  display: block;
  margin: 0.6em 0.9em;
  font-family: Courier, monospace;
  line-height: 1.4;
}

The quote is big and in a serif font, and the curly quotation marks are added before and after it - \201C is “ and \201D is ”. The chat post is in a typewriter font.

13.11 Tags and the Bottom Row

#workskin .tb .tb-footer {
  display: flex;
  align-items: center;
  padding: 0.5em 0.9em 0.8em 0.9em;
  color: #555555;
}

#workskin .tb .tb-notes {
  display: inline-block;
  margin: 0 auto 0 0;
  padding: 0.35em 0.9em;
  border: 1px solid #e3e3e3;
  border-radius: 2em;
  color: #777777;
  font-size: 0.85em;
}

display: flex lines the bottom row up. The note count has margin-right: auto (the second of the four numbers), which takes up all the spare room on its right, pushing every button after it over to the right-hand end. The save button is the same CSS bookmark as Instagram's (see Icons Drawn With CSS, in the Instagram CSS chapter), just a little smaller.

13.12 The Feed

#workskin .tb-feed {
  width: 380px;
  max-width: 100%;
  margin: 1.2em auto;
  padding: 0.5em 0;
  background: #001935;
  box-sizing: border-box;
  border-radius: 14px;
}

#workskin .tb-feed.black { background: #000000; }

#workskin .tb-feed .mob {
  width: auto;
  max-width: none;
  margin: 0.5em 0;
  border-color: transparent;
  border-radius: 14px;
}

The feed is a phone-sized navy box, Tumblr's own colour. The posts inside it lose their own width and fill the feed instead, with a small gap between each one and no visible edge, so they look like cards laid on the background. black swaps the navy for black. The feed has no theme of its own, so pick black or navy to go with your posts.

13.13 Links and Themes

#workskin .tb .fake-link, #workskin .tb a:not(.tl) { color: #0070b8; }

Links are Tumblr's blue. The dark theme makes the card dark grey (#1f1f1f) with light text, turns all the small print and the ask boxes darker, and gives links a brighter blue (#00b8ff) so they show up. The white edges round the reblog badge become the card colour. As always, the auto theme is the same again inside @media (prefers-color-scheme: dark).

13.14 Taking Parts Out

Search for the class names and delete every rule with them in, including in the dark and auto blocks:

• Asks: tb-ask, tb-answer, tb-asker and tb-ask-pfp.
• Quote posts: tb-quote and tb-source.
• Chat posts: tb-chat.
• Checkmarks: tb-check.
• Bottom row: tb-footer, tb-notes and tb-icon.
• The feed: everything starting .tb-feed.

Keep the card, the header, the name, the picture and the body, which every post uses.