New Premium Series: Tumblr Theme Design – Start to Finish
plus

New Premium Series: Tumblr Theme Design – Start to Finish

on Mar 11th 2010 with 50 comments
Tutorial Details
  • Technology: Tumblr
  • Length of Series: 3 Hours
  • Difficulty: Intermediate
Download Source Files
Demo View It Online

Tumblr’s popularity over the last year has increased exponentially. The reason why is quite simple: Tumblr is flexible, powerful, and, most importantly, a pleasure to work with. Unfortunately, there aren’t many training resources available for the platform yet. In this video series, we’ll go through the process of taking a Tumblr theme, designed in Photoshop, and converting it into a fully working theme – in just a few hours.

To take advantage of this mammoth video series, become a Premium member!

Watch the Intro

Get the Flash Player to see this player.

The Full Series

  • Chapter 1: Intro
  • Chapter 2: Slicing the Design
  • Chapter 3: Creating the Markup and Adding the Tumblr Template Tags
  • Chapter 4: Adding the CSS
  • Chapter 5: Configuration Options
  • Chapter 6: @Font-Face and Custom Fonts
  • Chapter 7: Slide-out Panel – HTML and CSS
  • Chapter 8: Slide-out Panel – jQuery

Final Design


Final Design

Thanks to Kate Payton for submitting the design for this tutorial.

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. If you’re curious about the other Premium tutorials that we have available, check here. Join today!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.viking-tech.ro Victor

    I must sign up!

    • http://icontut.com nabeel

      same herw!

      • http://laranz.com lawrence77

        Hereafter say, first threaded comment…

        Always seen u replying to the first comment :P

      • Alez

        Agreed! :D

  • http://www.imblog.info Muhammad Adnan

    Jeffrey, Thanks I was waiting for this PLUS tut.

    can u please divide the Download ZIP file in chuncks ? it is 589 MB and it takes hours to download in Pakistan.

    THanks

    • http://laranz.com lawrence77

      i second that, its difficult to download…. :(

      anyway today going to download :D

      thanks Jeff for the wonderful full series after wordpress design. thumbs up…

      and waiting for this too for the next week screencast:) http://twitpic.com/gsjed

  • http://www.jeffrey-way.com Jeffrey Way
    Author

    Hey all – when you’ve learned how to code for Tumblr, be sure to sell your designs as an author on ThemeForest! http://themeforest.net/category/misc/tumblr

    • http://www.imblog.info Muhammad Adnan

      I will surely design for sell ;)

    • http://www.foxyturkey.com Yigit Ozdamar

      Cheers then! Pay for learning, sell for money. :) It is a nice circle.

    • http://www.katepayton.com Kate Payton

      Thanks for using my design, Jeffrey :) Looks fab!

  • Alan Ablett

    Thanks for the tut Jeff you have taught me no end of stuff!

    I dont suppose if there was enough interest you could do something similar for WordPress?

    Thanks for all the awesome tuts

  • http://www.freakfactory.ch FreakFactory

    You are my Hero AGAIN ^^…
    I have been waiting for this since months =)!!
    Best Regards
    From Swizerland

  • Paul Ehrenreich

    I think this is going to get my to finally sign up, thanks for the huge video Jeff!

  • http://www.gregbabula.com Greg Babula

    Glad to see more people catching on to Tumblr

  • http://craigps.info/ Craigsnedeker

    Already taught myself this, good looking tut though.

  • http://ivorpadilla.net Ivor

    That’s great Jeff, I’ll start right away. :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Then submit to ThemeForest. :)

  • http://www.jordanwalker.net Jordan Walker

    That is an interesting idea, have never heard of Tumblr

  • Carlos

    Awesome. We just got onto Tumblr. It is quite nice. Rivals Blogger hands down for a free blog forum. With some pretty nifty features. Thanks for the tutorial.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Destroys Blogger. :)

  • http://nathanmckinleynash.com Nathan

    Sweet! I’ll have to download this later today, clean looking theme; will be great to learn how to build it out.

  • http://www.jeffrey-way.com Jeffrey Way
    Author

    Hey guys – I woke up to dozens of you following that demo Tumblr account. :) But there’s really no need to. It won’t be updated again – was just for the tutorial.

  • http://roberttayco.com Robert Tayco

    I’m in the middle of designing a Tumblr theme for myself and figuring it out along the way. You have impeccable timing!

  • http://web2feel.com/ Jinsona

    Very well done. I salute your patience to compile such an extensive tutorial..

  • http://www.twitter.com/addiiis Adrian

    I have been waiting for this since months

  • http://craigps.info/ Craigsnedeker

    My first good tumblr theme is here: Loldaily.tumblr.com pretty much taught my self without looking at docs or tuts. :)

    • http://laranz.com lawrence77

      Nice :)

      and LOL..

      • http://craigps.info/ Craigsnedeker

        Lol thanks :)

      • http://magpielab.com Team Magpie

        Jeffry way gotta good skill in screen casts, its the one of best screen cast, all the credits should go to @jeff

  • Dave Kingsnorth

    Amazing timing, my plus account expired months ago, time to renew. I’m excited about this one

  • http://taufiqahmed.tumblr.com taufiqahmed(BD)

    just at the right moment. I was thinking of redesigning my tumblr blog @ taufiqahmed.tumblr.com
    thanx for the post.

  • Gavin

    Can we use the icons on this theme in our own designs and submit them to themeforest? What are the licence restrictions? Cheers

    • http://www.katepayton.com Kate Payton

      Hi Gavin,

      I used the icons “30 Free Vector Icons” that can be found here:

      http://www.dezinerfolio.com/freebie/30-free-vector-icons

      I changed the layer styles to suit the design. Very easy :)

      There is no apparently licence listed on the page, so I am unsure if you could use them for your ThemeForest submission.

      Enjoy!

  • http://www.joaquinrevuelta.com J. Revuelta

    Great, Jeff!! You’ve cleared up all my doubts about implementing css and jquery into a tumblr theme. Now I’m ready to go Theme Forest :))

    Thanks so much.

  • http://www.rawksteady.com Dennis Andersson

    Is there a way to load a bunch of example posts into tumblr from the beginning? As there is with wordpress. I could go about and add a few myself but for designing/buildning it would be nice with a bunch of posts already made, except for those in the customize-thing.

  • ted

    The download appears to be missing the javascript files.

  • http://www.dollen.com Rj

    I love this tut and want more MORE MORE…. but for now, anyone else banging their head against the wall trying to figure out why search never returns any results with this code?

    Any suggestions on what to look for?

  • http://twitter.com/Sp0nky Sp0nky

    I’m pro-user i get error when i unzip this file,please help me.

  • http://www.640pixels.com Carlo

    excellent tutorial, well done.

  • Rob

    the @font-face doesnt seem to load in Firefox with absolute url? any idea? in safari works well.

  • http://bitshare.tumblr.com BitShare

    Hello, I have been trying to find someone or some place to go for help in getting my ‘notes’ (notes, reblogs, likes) to display on my tumblr blog. For some reason they don’t show. I can see the HTML in the theme and I never removed it but did add my own HTML and CSS here and there to modify the theme to my liking but for the life of me I cannot get the notes to display at all when someone reblogs or likes my posts.

    Can someone please help? My URL is http://bitshare.tumblr.com

    I really would appreciate any help you can provide.

    Thanks!

  • http://mounir.tv sOLy MouniR

    i wish this is available for public

  • P

    I want to know what I can do with my Tumblr, but I don’t want to pay to be told what I already think, which is that there’s a lot that you can’t do. For instance, I have a theme I like — but I want to add sidebars and specifically-placed links to it, and make it possible for posts to cover more than one column, and have sizes that can be specified manually. But if you can do these things to any theme in the custom editor, why would anybody pay for a premium theme? And if you can’t, then you can’t help me anyway.

    • Anti-p

      I’m actually a bit shocked at how you got to be so silly. To the point of describing your own lack of curiosity beyond what is “easy”, or forethought in global people outside of your horrendously boring bubble. Total douche.

  • HelpPlease

    I’m having troubles getting the tags to display with some spacing at the top, then I noticed that your theme had 14px of margin on the top and bottom and I can’t find the place in the tutorial when you mentioned how to do this.

    Anyone know how to code the tags so it isn’t right up to the top?