Designing and building a Tumblr theme
Filed under: design
Number of comments: 
Number of trackbacks: 
Tagged with: Last weekend I decided to start using Tumblr for my smaller posts, rather than having them as a part of this website. I have several reasons for this:
Low barrier posting
Posting to my tumblelog has a very low barrier. It's super easy to quickly post a few lines about something nice I am thinking about or something I found online. Posting to Tumblr can be done through a Mac OS X dashboard widget, a bookmarklet and a mobile phone. Any time, anywhere.
More 'social'
Tumblr shares a fair amount of features with Twitter. People can leave notes, create favorites and become your follower. Let's say it adds a bit of a social touch to my smaller posts. Tumblr is more than Twitter and less than a real blog. Perfect!
Kick ass templating
Tumblr has totally kick ass customization. You can make your tumblelog look like pretty much anything you want. Write your own markup, your own CSS, add Javascript widgets, you name it, Tumblr has it. Too much fun to play with to resist.
screenshot of the iBlack theme
I like it even better than Virb though that may change again since Virb is about to release it's long awaited 2.0 version. But, we're talking about Tumblr right now.
Introducing 'iBlack'
As most of you know, I love doing graphic design. I never got the privilege of calling myself 'designer' as an official job title but I sure do love to do it. Solution: do it in my own time. So here's my latest creation: the 'iBlack' theme for Tumblr. This theme sports a slick, Apple inspired design combined with a fair amount of juicy extras that many themes don't have. Some highlights:
- pretty photo posts with a 'sunscreen' overlay
- pretty tags display
- built-in reblog display so you can ditch the default 'via: blah'.
- built-in tag cloud using Heather's code
- built-in sidebar menu (just add your own list items with links in the code)
- Looks good in IE6, sweet in IE7 and Firefox and awesome in WebKit and Opera
reblog display, tag rendering and pretty blockquotes
Creating this theme was a breeze. Tumblr has most excellent documentation on how everything works. It took virtually no efford. Another absolutely awesome offering is the option of uploading static assets to Tumblr's own servers. On Virb I had to host all images myself. Not with Tumblr. All images, css and javascript can be uploaded to their servers. You won't have to host anything yourself. Sweet!
Built-in tag cloud
Available now!
I have submitted 'iBlack' to Tumblr to be added to the official theme repository. I don't know how long it takes to get approved and / or if it will get approved. In case you don't want to wait for this to happen I have made the code available already. All you need is the template because everything else is hosted on the Tumblr servers. You'll find a download link at the bottom of this article. To use it, choose 'custom HTML' in customize->theme and simply copy/paste the code and you're good to go. If you want items in your sidebar below the search box just add some LI elements that contain links. If you want to change the tagline in the header, find the H3 element that contains it and change it.
Not included but available anyway
When visiting my tumblelog you'll see that I have a few more features, notably Disqus comments and a slick Twitter badge that matches the theme. These are not included by default because they require some custom code that you need to get from Disqus and / or Twitter. If you are running my theme and you want these features enabled just send me an email and I'll let you know how to add these features.
So, here it is, my new tumblelog which is already integrated in the bottom of 'The Net is Dead', replacing the old 'side salads' section and a new free Tumblr theme!
Happy Tumblin' !
At 28 January '09 - 14:51 angela wrote:
At 30 January '09 - 04:33 Alin wrote:
So I say now that I ADORE THE iBlack Theme! IT is one amazing theme probably the best on Tumblr for years!
And I e-mail you now because I want some futures on my theme and since you made it tou know it better and you can help me… now I see you have lots there….Twitter, your webblog and many…. I am asking you…. could you put some like Youtube, MySpace and Disqus and other favorite site there? I really love it and it’s an amazing theme that suits my needs! And I hope you will help me with it!
I must say I don’t know lots about the html code or others because I just study it …. And I don’t get it very well….. You said above that you will tell the ones who want those futures how to do it….. I am asking you and I beg you please if you can add those futures that I want to it and give me the code….. I beg you please help me! I know I am shameless and if you think I am not worth it don’t do it but please help me! Do it for me! Like a star to a fan! Please! I will always be grateful because I like and help at my turn people who help me! And you have lots to offer to all! You are a good person so please help me!
If you want to e-mail me back and I will tell you the links to the sites! PLEASE!
Thank you very very much!
Alin Cezar
At 30 January '09 - 07:28 Marco wrote:
Thanks a lot for the kind words! And yes if you want the Twitter functionality and Disqus like I have on my own tumblr you can have it. The only reason this isn’t included in the ‘official’ theme is because it would require people to edit the source. Themes from Tumblr should be ‘click and go’ which is why I couldn’t add it. It’s not because I wanted to keep it for myself or anything!
Please send me an email so I know your email address and I’ll send you the code and instructions on how to get Twitter and Disqus to work.
At 12 May '09 - 14:45 Fredrik wrote:
You wrote about being able to upload static assets like css and javascript to tumblr. How do you do that?
I’ve googled forever and can only find your blogpost referencing it :P
Thank you in advance
At 09 July '09 - 02:29 Andy C wrote:
However, one minor comment – on Firefox 3.5 it looks a little scrunched up on the left whereas on IE6 (boo hiss), the content is centred beautifully.
Andy
At 07 September '09 - 11:16 ELFONSON ZEPHANIAH wrote:
Firstly i would like to thank you for posting this theme.
However I would hope that you send me the code and instructions on how to get Twitter and Disqus to work. I take your tumblr as a role model and certainly i wish to have them.
Beside that I also wish to move the entire tumblr theme from the left to centre, is that possible? I would also wish to change the grey background as well.
Please kindly help me because i am really trying to learn here. Thank you.
Cheers :),
Elfonson
At 14 December '09 - 05:57 Elspeth wrote:
btw I have tried to integrate my tumblr into my website here: http://www.elspethbriscoe.com.. Looks messy. Is there a badge you know of?
thx Elspeth
At 26 December '09 - 03:12 Lj wrote:
I’ve been looking for weeks on how to build my own Tumblr theme,
I don’t get the markup, like the classes for “posts, quotes, chat,photos,
At 18 March '10 - 03:13 Gavin Steele wrote:
I was wondering if it is possible in Tumblr to only display certain info on a the front end?
I want to post a text post, chat and 2 images. They are related in subject so I want them on my front page.
When the user clicks on the previous button, the page that loads shows another group of related content?
Is that possible?
Thanks
At 01 April '10 - 07:14 unkown wrote:
At 07 April '10 - 18:13 Sam wrote:
At 25 May '10 - 18:17 Sairah wrote:
Also, hilarious admonitions against spam, loved ‘em. =P What comment form do you use? Or did you create your own script for them?
At 01 June '10 - 02:51 amanda wrote:
I have seen some of your works and think that they are fantastic. :D I would want to design my own theme too, but need help with the html programming bit. Could I take a look at the coding that you have done for your current theme and learn from you?
Would sincerely hope to hear from you soon.
Thanks!
Amanda
One or more comments are waiting for approval by me.