Styling NPF Post Elements
In the last major update Tumblr did for posts (a while ago now), some post types were effectively deprecated, and they became (essentially) text-posts-and-a-thing, also known as NPF or Neue Post Format. This kind of made it a bit annoying to write themes for and cover, so let's go over these real quick.
To be clear, you will not have a massive amount of control over these in a custom theme. They just render as text posts, plus some specific types of elements for whatever other media happens to be in that post; the {PostType} token you can sometimes use to determine things even just shows up as text for the newer types of posts.
These new-fangled elements include:
Video posts
Chat posts
Quote posts
Images in text posts or in reblog trails
Videos
Videos in the NPF style basically have a tumblr-embed and tumblr-full class both attached to the same <figure> element, and also contain an iframe element.
If you have a non-standard post width (or just see your theme breaking around videos as they push things around and don't resize well) you can adjust the iframe behaviour to resize properly with a simple max-width: 100% like below. I'd recommend doing at least that much to save yourself some headache.
figure.tmblr-embed.tmblr-full { /* styles for the NPF container */ } figure.tmblr-embed.tmblr-full iframe { /* styles for the iframe itself */ max-width: 100%; }
Chats
Chats come in with the npf_chat class attached to a <p> element; one element per line of the chat. Labels for each line are just a simple <b> element. If you wanted to style your chat lines with, say, alternating colors, you could do something like this:
p.npf_chat { color: rgb(120, 120, 120); /* dim grey */ } p.npf_chat b { color: red; /* labels in red */ } p.npf_chat:nth-child(2n) { color: rgb(20, 20, 20); /* dark, almost black */ }
Quotes
Quotes only have the npf_quote class attached to a </b></p><p> element, though in the vast majority of cases, the </p><p> element immediately following it will be the attribution line (quote author, source, etc.) so you can target that as well.
p.npf_quote { font-family: Georgia, serif; /* nice fancy font for the quote */ } p.npf_quote+p { font-style: italic; /* style author/source as italic */ }
Inline Images
Images can be used inline in any reblog trail segment, and will be wrapped in a <figure> element with a class of .tmblr-full, so you can style their containers or the images themselves to ensure they don't overflow your post containers or just apply any manner of weirdness to them.
Personally I like to restrict their height a bit as well, so that reblog trails are still, well, readable. Giant images in the midst of a conversation get very distracting, in my opinion.
figure.tmblr-full { } figure.tmblr-full img { /* Restrict images to the width of their container, and 25ex tall */ max-width: 100%; max-height: 25ex; /* Enforcing auto for width/height avoids distortion */ width: auto; height: auto; }
Legacy Styles
The legacy post styles are still used in some places. From what I've seen it looks like most occupy a sort of halfway, where the NPF reblog trails are still used for them, and the main post content is a weird kind of legacy content type. These will still have the proper {PostType} markers and will render according to their appropriate block types in themes.
