A Tumblr Theme Process

or, a lot of words about a specific project

Olivia is the fifth theme I’ve released to the Tumblr Theme Garden. It’s simple: one column, one post size, a few customizable colours. I used it for a while on my personal blog before updating it to make it suitable for public use. It’s the first theme I’ve released in a year and a half.

Olivia is my fifth public Tumblr theme. It’s named after Olivia Pope, one of my favourite television characters.

This post consists of disjointed thoughts on just some of the design decisions and challenges, and some reflections looking back a month later at what I would change.

The Origins

Before Olivia, I was using my Eliza theme. I wanted to make a new theme to address some specific problems I was having, but it had to be something good enough to publicly release. My blog is an art and design inspiration blog, and I reblog mostly illustration and other visual work.

So my design goals and challenges for this theme were:

Large post size

Since my blog is focused on visuals, I wanted a larger post size to better showcase artwork. Unfortunately, Tumblr’s themeing variables support displaying a maximum photo width of 700px, so one challenge would be to find a workaround to showcase bigger photos. I knew this was possible, since there were many existing themes that did so. Early on, I decided on 1280px as my post size, since this was the maximum width that Tumblr photo uploading supports.

Single-column layout

All of my published themes have had two columns: a sidebar and the blog posts. For my new theme, I wanted a single-column layout for a couple of reasons:

  • Content would then be centred, instead of offset by the sidebar.
  • The CSS would be simpler, as I wouldn’t have to hack my way around floats and clears and breakpoints.

Visible information

I’m a fan of having all post data visible, all the time. This refers to post dates, note counts, tags, and captions.

Many photo-centric blog layouts hide post data in hover effects and permalink pages, which is especially effective for grid layouts. However, I decided that this wasn’t suitable for my blog. Most of the time, I reblog artwork directly from tumblr artists, so it’s important for me to make it easy to see who created the artwork and what they had to say about it.

Personally, I’m a fan of information, so I like knowing everything about a post. Post dates and note counts are informative, and also act as links to the post permalink page. I use tags to categorize what I share, and often to express my thoughts about a post, so I like to keep that visible as well.

And that kind of information density leads to…

Whitespace

I knew that there would be a lot going on here — big images and lots of text in the form of captions and post data — and I wanted to avoid clutter. I didn’t want things to look too busy. I wanted, as they like to say, space for my content to breathe.

So: whitespace. Lots of padding and margins.

And of course, I wanted it to be good

I haven’t released a theme since early 2016. I’ve learned a lot since then, and I wanted to build something that was straight up better than what I’ve already made. I wanted my HTML to be semantic, I wanted my typography to be beautiful, I wanted my theme to add value to what was currently available in the Theme Garden.


Olivia existed as a one-column theme for a long time before I worked on it for public release. Most of it was simple to build, and I was able to reuse bits of code from my previous themes. Some of the more interesting problems came up when I readied the theme to be usable by others.

The large post size

I worked my around the 700px photo limit by using a custom photoset script by Style Hatch, and displayed glorious 1280px-wide images on my blog for a while.

Then I realized the problem with having giant images: it takes a lot longer to scroll through them, and it often wasn’t possible to view the entire image at once. I found myself minimizing my browser window to allow for viewing images without having to scroll. I got annoyed with how long it took to browse my blog if I was looking for something in particular.

This problem was exacerbated by Tumblr’s photoset format, which allows for posting multiple images in one post. Having to scroll past posts containing ten images all vertically stacked on top of each other got tiring, fast. And if I was annoyed looking at my own blog full of content that I liked, then surely someone else would be having the same problem.

(Sidenote: the thing about making Tumblr themes for the public is that I don’t exactly have rigorous user research to validate my decisions. I end up making mine based on what I think and experience, and guessing it for other people.)

So I brought the post size back down to 700 and removed the custom photoset script. I didn’t have my huge, cinematic images anymore, but the theme was a bit less annoying to use. This worked better for varied content where seeing high-resolution images wasn’t the priority — ie. it worked for a blog, rather than a portfolio.

A extra diamond

To keep things mildly interesting, I decided to add a decorative diamond. This pretty much has no function or utility whatsoever. I suppose it goes against the design principle where every element should have a purpose. Or perhaps, the diamond’s purpose is to be decorative.

The decorative post diamond.

But I included it because I decided that I’m not building themes for a company. There are no best case practices to follow for the purpose of generating leads, or getting people to buy something, or any number of other business goals. It’s not even there to add delight so that a user will feel happy and warm towards your brand and then like, subscribe to your newsletter, or something. That’s not the audience I’m building for. It’s there so that the blog owner has something to customize to an accent colour of their choosing, for fun.

(That was my initial reasoning. I later went on to style the Reblog and Like buttons to fit into diamonds as well, for some visual consistency. The diamond now has a purpose!)

Decorative diamond and reblog/like diamonds.

With that said, it’s important that the diamond didn’t actually hurt the theme.

A photo post without padding (mobile layout)

In my initial design for the mobile layout, I eliminated the padding around photo posts, and had the images fill up the screen width from edge to edge. However, this meant that the diamond would overlap the bottom of the image by just a little bit.

I thought this was an acceptable loss at first — it’s tiny! It barely covers anything! Whatever’s important in an image won’t be at the bottom edge anyway! But then while I was testing the theme, I realized that it did cover vital information: subtitles.

A popular use of Tumblr photo posts are animated gifs and screenshots from shows and movies, which will feature subtitles. I’ve spent a significant amount of time reblogging these things, but I completely forgot about them when I was considering cons of the overlap. I had two options: get rid of the diamond, or add padding to the image posts. I decided to add padding.

At the time, I think I would have kept the overlapping diamond if I had not realized the subtitle issue. In hindsight though, this would have been a bad decision — the whole point of this theme was to showcase visual content! And yet here I was, going against that goal for decoration.

Lesson learned: no matter how infallible I think I am about making good design decisions, I’m not.

The abyss of user-generated content, customization, and Tumblr limitations

As usual, the hardest part about making public themes is that they’re not for me. I have no way of knowing how other people will use it or what they want. While I initially created this theme for my own blog, with a focus on photo posts, I needed to style all the other Tumblr post types (eg. text, quotes, links, etc.) to look and work well. This is not technically difficult, but it helps to have some familiarity with Tumblr as a platform.

An example obscure technical problem: Tumblr quotes

For quote posts on Tumblr, there is presently no (as far as I know) way to wrap quotation marks around the quote without some possibility of styling error. The entire quote post function is finnicky, with paragraph tags sometimes being present, and sometimes not, and weird formatting issues in the Tumblr dashboard.

A quote post with three paragraphs, and rendered in paragraph tags. Words by Kelton Wright.
A quote post with one paragraph, without paragraph tags. Words by Margaret Atwood.
A quote post with multiple line breaks and no paragraph tags. Words by Angeli Cabal.

The problem arises when writing the theme markup. A typical quote post markup might look like this:

<h1 class="quote quote-{Length}">{Quote}</h1>
Quotation marks in the theme markup don’t display the way you’d want them to with paragraph tags. Words by Michael Wolf.

The {Quote} variable outputs the text. If I wrap it with quotation marks so that it reads “{Quote}”, inserted paragraph tags would force the them onto new lines. As a theme maker, this isn’t something I can control. I tried hacking around it by inserting the quotation marks as pseudo elements, making the paragraphs inline elements, and so on, but these weren’t successful. There might be a way to specify/cascade around it, but I haven’t figured it out yet.

In the end, I added an open quotation mark as a pseudo-element at the beginning of the quote. For the most part, this works for styling purposes, but not semantics.

A quote post. Words by James Baldwin.

This is a formatting issue I’m aware of simply because I’ve spent enough time on this platform that the problem happened to me. Many quote posts contain just a single paragraph of text and no paragraph tags, so the issue is easy to miss.

A less obscure problem: customization

What do the people want? I have no idea, and every theme I make is a shot in the dark at providing the options I think will be useful. In the past, I’ve provided a lot — colours, post sizes, layout options, 3rd-party integrations — but here I didn’t want to do that. I wanted something simple enough that someone wouldn’t be overwhelmed at all the different things. I stuck to the basic options: a limited number of custom colours, backgrounds, and fonts.

When it comes to fonts for Tumblr themes, I have yet to figure out the best way of going about providing options. Tumblr provides its own set of custom font options that developers can put in, but truth be told, I’m not overly fond of them.

Some options for my Rue Theme. The Font option is separated from the Google Font option by Tumblr default.

Ideally, I would allow for users to insert whichever Google Font they want, or be able to pick from Tumblr’s set choices, or use a system font like Arial or Georgia. However, the Tumblr Customization panel isn’t very conductive to this because options are grouped by type; ie. dropdowns, booleans, and text fields will be grouped with each other rather than in a logical way that I can choose. This makes font changing unintuitive if options are available in multiple places and can override each other.

I decided to allow users to pick from a custom set of three different Google Fonts — two sans-serifs (Roboto and Karla) and one serif (Amiri) — though I don’t think this is the best way to go about it. I don’t know if this is a better or worse option than the above Rue theme example either. The customization experience is more straight-forward, but this is at the expense of limiting user options.

In my Eliza theme, I provided eight Google Font options. So many options! Possibly too many options! Who knows! Not me. You’d have to click through each of them to preview them too, so it’s a lot of unnecessary work.

I haven’t figured out the best way around this yet. My goal for my next theme or update is to provide something better.

A new problem: accessibility

I know a bit more about accessible web design than I did two years ago, and I’m coming up against the problem of: how do you push for your users to make good customization choices?

In my Customization Guide, I inform readers that they should consider colour contrast, and I suggest a minimum font size. But ultimately, this is not up to me. How much direction is acceptable to give to your users? I want people to do what they want with their blog. I want teenagers (a big Tumblr demographic) to make their blogs the way they want it to be. I don’t want to preach design principles to an audience that is just having fun. We’re not here to sell products.

But at the same time, these things are important, and I want to communicate them as best I can. I currently have the following guidelines:

Note: ensure that there enough contrast between your text colour and your background colour. This is a matter of web accessibility and allows for more people to comfortably read your blog. Use a colour contrast checker to see if your text has a minimum contrast ratio of 4.5:1 (WCAG AA compliance).

In retrospect, this is not the most friendly way I could word this to a non-design audience. It’s neutral, but not encouraging. “Minimum contrast ratio of 4.5:1 (WCAG AA compliance)” are like, just words to most people. I don’t even understand the WCAG compliance levels.

My next task would be to rewrite this to better communicate what I mean. There’s a limit to how much I can sway this though. What I can do is make sure everything else under the hood is accessible — there’s a lot to work to do in my markup.


What’s next?

In writing this post and revisiting my theme, I found things address, such as:

  • Accounting for empty states I missed (eg. a post with no tags or notes)
  • Conducting thorough browser and device testing
  • Making my HTML markup more accessible
  • Revisiting the custom fonts challenge

And of course, I’d like to update my old themes to bring them up to standard. They’re a mess of terrible code, and they also all have sidebars, so I can start working on putting CSS Grid into production. I’ve accumulated a lot of support questions, so I have somewhat of an idea of what power users want, and where my guidelines fall short. So that’s exciting.


My themes are available in the Tumblr Theme Garden. Thanks for reading!

Like what you read? Give anh a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.