Tumblr Theming Tips

A few weeks back, I was thinking “it’d be nice if there was a way to style long quotes in one way (namely, with small text), and short quotes another way (namely, large, chunky text). If only there were some easy way to do it.”

Should’ve known: There is an easy way to do it.

Tumblr automatically gives quote blocks a keyword, based on the length of the quote. “Short” blocks have fewer than 100 characters. “Medium” blocks have fewer than 250 characters. Everything else is “long”.

You can add these keywords into your theme as a class, which you can then style with CSS. So, for example:

{block:Quote}
<div class="content quote {Length}">
<div class="quote_body">{Quote}</div>
{block:Source}
<div class="quote_source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}

That {Length} will insert the “short” / “medium” / “long” keyword into your code, and you can use CSS to style the quote appropriately.