New Premium Series: Tumblr Theme Design – Start to Finish
Tutorial Details
- Technology: Tumblr
- Length of Series: 3 Hours
- Difficulty: Intermediate
Download Source Files
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
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
Thanks to Kate Payton for submitting the design for this tutorial.
Join Net Premium
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 Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I must sign up!
same herw!
Hereafter say, first threaded comment…
Always seen u replying to the first comment :P
Agreed! :D
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
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
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
I will surely design for sell ;)
Cheers then! Pay for learning, sell for money. :) It is a nice circle.
Thanks for using my design, Jeffrey :) Looks fab!
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
Of course. We have a similar video series on our Premium site for WordPress theme design as well. :)
Try this
http://net.tutsplus.com/articles/news/the-best-psd-to-html-to-wordpress-video-series-available-new-plus-tutorial/
Videoes By Jeff :)
You are my Hero AGAIN ^^…
I have been waiting for this since months =)!!
Best Regards
From Swizerland
I think this is going to get my to finally sign up, thanks for the huge video Jeff!
Glad to see more people catching on to Tumblr
Already taught myself this, good looking tut though.
That’s great Jeff, I’ll start right away. :)
Then submit to ThemeForest. :)
That is an interesting idea, have never heard of Tumblr
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.
Destroys Blogger. :)
Sweet! I’ll have to download this later today, clean looking theme; will be great to learn how to build it out.
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.
I’m in the middle of designing a Tumblr theme for myself and figuring it out along the way. You have impeccable timing!
Very well done. I salute your patience to compile such an extensive tutorial..
I have been waiting for this since months
My first good tumblr theme is here: Loldaily.tumblr.com pretty much taught my self without looking at docs or tuts. :)
Nice :)
and LOL..
Lol thanks :)
Jeffry way gotta good skill in screen casts, its the one of best screen cast, all the credits should go to @jeff
Amazing timing, my plus account expired months ago, time to renew. I’m excited about this one
just at the right moment. I was thinking of redesigning my tumblr blog @ taufiqahmed.tumblr.com
thanx for the post.
Can we use the icons on this theme in our own designs and submit them to themeforest? What are the licence restrictions? Cheers
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!
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.
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.
The download appears to be missing the javascript files.
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?
You can grab the search code here – http://www.tumblr.com/docs/en/custom_themes
it works great, you can test out the search function on my website
I’m pro-user i get error when i unzip this file,please help me.
excellent tutorial, well done.
the @font-face doesnt seem to load in Firefox with absolute url? any idea? in safari works well.
I’m having the same problem. I’m using a sub-domain. Wondering if I need to host it on my server instead.
Try this, worked for me.
http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/
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!
i wish this is available for public
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.
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.
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?