Many people have asked me ‘How do you do a tumblr theme?’ and the answer is a long one. Quite Big recently passed 200,000 installs and I am about to create a brand new theme. So I’ve decided to write about my experience here and pass on what I’ve learnt.
It was the summer of 2009 and I had just graduated from college with a triple distinction in Interactive Media (BTEC). I had decided to take a year out and start earning before heading to Salford University to do a degree in Graphic Design. At this time I thought it was important to keep researching in the area as preparation for going back in to education, and I was searching the internet for a way to create a personal website for my inspiration. I stumbled across tumblr after seeing another design students blog and I signed up instantly. It has a unique offering because you can fully customise every aspect of how your site looks, it’s easy to update your content and it’s free!
Above: My first few posts on tumblr with this theme (modified)
The themes on offer by tumblr are great but when I first started using it I noticed practically all of them only offered images at 500px or less. For me that wasn’t very big at all and I thought it would be great to have a blog for my lomography photos that showed them off at a much bigger size. I had seen tumblr blogs already doing this but there were no themes available with that feature, so I had to go about making my own. I studied the code of an existing, simple, single column theme and the tumblr docs and taught myself basic coding. I worked through the existing themes code, keeping the basic structure but changing almost everything else to fit my vision. The hardest to manipulate to a larger size was the videos because of the various embed options and tumblr’s limiting variables.
Above: Out in the wild with bright purple title and orange lines
I was quite shocked when my theme was accepted in to the ‘theme garden’, as it was called then. However I regret submitting it too quickly without extensive testing and a decent default colour scheme. I didn’t take in to consideration the line length for comfortable reading either. I think I was so focused on the aim of getting everything big and lined up that everything else was a second thought. A lot of blogs are heavily image based but you never know how your theme will be used and you want it to look good in every case (or not). A theme usually won’t be accepted unless it supports ALL post types.
Above: Quite Big latest version 2.1
One thing I wasn’t prepared for was about 3 messages a day asking ‘how do I add this?’, ‘I don’t want to show the dates’, ‘how do I add a link?’ etc.. Common questions include the words endless scroll and social icons/links. Also at the bottom of my theme is a design credit with my name but some people seem to think I OWN and run these blogs. I had an angry question calling me a monster for running a porn blog and even CNN and national newspapers emailed me for the right to use images of Actresses without teeth. However on the bright side I now have their contact details and I’ve had a few custom theme job offers. It’s great to see who is using Quite Big and the credit means I can easily google it. Brands like Gap and Yahoo! have previously used it before moving on to much flashier layouts.
During my time at uni, I have learned an incredible amount. Not just in the area of web design but also the whole design process. Rather than diving straight in to the code, for my new theme I’m going to start at the beginning. It’s important to understand the intended audience and from all the questions I’ve received for Quite Big, I now have a better understanding of what people want from a theme. I’ve already stated researching the visual style and elements to include. I’ve got a folder full of reference images, icons, colour schemes, fonts etc and bookmarked some good resource websites.
Above: Screen shots and saved images folder of new theme inspiration
Things I want to include this time round- unique google fonts, google anylitics input, set of social media buttons that are easy to implement, colour change options (with better default), like/reblog buttons cleaner structured code.