< !-- Digital window verification 001 -->

Finally, a Tumblr Theme Tutorial that is Useful

| Get awesome (and free) stuff here


Coming across the GA Dash Tumblr theme tutorial was like a Godsend.

In the past I scoured the internet for making-your-own Tumblr theme guidance but always came out empty-handed. Either it was some specific how-to on a personal Tumblr account or an outdated Youtube video that skimmed the surface.

So I was thrilled when I inadvertently stumbled on the Dash tutorial for making your own Tumblr theme from scratch. I jumped into it immediately.

My goal was to convert the Learn To Code With Me Tumblr into a custom theme I created myself. Basically, no more relying on a bulky packaged theme. Unfortunately, things didn't turn out as I had hoped.

Side note: For Those Unfamiliar With Tumblr

When using Tumblr, you basically have your own website. There are a variety of free themes you can use on your Tumblr page – just like WordPress or Blogger. There are even paid themes.

You can also build your own custom theme, which is obviously ideal. This way, you have total control over everything: where the content goes, picture sizes, the navigation bar, colors, fonts, etc.

But the way Tumblr structures their theme-creation is unique to Tumblr: it's not like building a normal website.

Sure, it requires basic HTML and CSS. But it also uses a bunch of special variables and blocks that are special to Tumblr.

Yes, Tumblr does provide documentation on creating your own theme. But it's sorta confusing. And mostly boring. And super long. Who wants to read through some dense, mega-page? 

This snooze fest of a page is what brought me to GA Dash.

The GA Dash Interface

Unlike some of the coding lessons I've done in the past where all information is posted to the site (i.e. Made with Code and Hour of Code), to access any free projects on Dash you must create an account. It's no big deal – just a name and email confirmation. And it's smart on their part – now they have an email address where they can up sell their paid courses.

Beyond the Tumblr theme tutorial, they have five other projects that focus on HTML, CSS and Javascript.

Within the project itself, instead of using video (like they do in their paid GA monthly membership plan), Dash uses a slideshow style to present the information in the lessons. Below the slide show, then, is a mini code editor where you type in the code yourself. And to the right hand side of the interface is an area where you can preview the work you have done thus far.

As you make changes to the code, it appears instantly in that right hand side. Also in the top right of that area, there is a desktop view and a button to swipe to see the mobile preview of the site.

This feature is pretty cool – and something I have yet to see in other online tutorials. Even more, the decision to include that capability is very forward thinking given the current mobile trends of more and more people using mobile/tablet to web browse.

In any case, as you worked through the project there are periodic “checkpoints.” Basically ensuring that your code up to that point was inputted in the correct way. If it is, a green check mark appears with a button reading “I DID IT” so you could move onward.

Check out how the Tumblr Project Interface looks below!

Dash Tumblr Project Interface

Overall, I think the technology behind Dash is top notch. My only bone to pick is the fact that the slideshow portion took up 1/4 of the screen. Meaning at times I was squinting to see what was written on the slides. If they added an option of making the slideshow fullscreen, the whole experience would be even better.

Tumblr Project: Good in the beginning, then it just halts

In my opinion, the tutorial is perfect for a beginner-ish level. Having some HTML and CSS knowledge would be ideal.

The Tumblr project was broken down into six sections:

  • Template Tags and Variables
  • Making the header pretty
  • Learn about Blocks
  • Post types
  • More post types (there are seven post types on Tumblr)
  • Creating pages

All of the above sections were informative. Dash does a good job walking you through the code and explaining what everything does. Now, I finally understand how to make posts in Tumblr with the {block} and how variables basically pull info to fill-in into the theme.

Then, when all is said and done, you have to export the theme you built in the Dash interface onto Tumblr. But instead of Dash's helpful slideshows highlighting a step-by-step process, they just offer a blog post thats explains it. I mean, it's not rocket science to copy and paste the theme into Tumblr. But I feel like they sorta leave you hanging at the end.

And to be honest, once you do export it, it sorta looks like crap.

Of course, I then went back into the theme to make my own changes. The project you build in Dash is very generic. But there were things I wanted to do to my theme that the tutorial never touched upon. I realized at that point how bare bones the tutorial was.

Sure, I now understand how to build a basic Tumblr theme from scratch. But who wants a basic theme? (Unless you're going for that minimalist look.) I realized in order to achieve a truly awesome Tumblr theme, I was going to have to put in a lot more research, time and effort.

Let's be real: I am a one woman show. I juggle multiple responsibilities. (Like I'm sure many people reading this do as well.)

How much time can I really dedicate to my Tumblr theme?

What I wish Dash did differently

I would have loved if the tutorial went further. I wish it discussed more advanced Tumblr theme capabilities like adding a special bio box on the front page with social links, different navigation options, social media sharing, adding a Google Analytics ID, incorporating custom fonts – and that's just to name a few.

Moreover, despite having the nifty “mobile view” option built into the dashboard, the Dash tutorial never once mentions mobile issues. (Tumblr actually has a preset appearance for all accounts when on mobile, but one can choose to override it and make their theme look as they wish when on mobile.)

Learned about Tumblr themes, Didn't achieve my goal

Without a doubt I learned a lot about how Tumblr themes work and the concept behind the structure.

But I didn't achieve my main goal: having the Learn To Code With Me Tumblr be on a custom theme. If you look, it's still running on a theme I certainly did not create. I wish I could build something to that caliber, though.

I was excited to take on a tutorial I could apply to my real life instantly. So excited, in fact, I finished the entire project in a few days.

But after I exported it and went to make my own changes, I quickly learned that in order to make a really kick-butt Tumblr theme, I'd have to dedicate the time. Time I could spend elsewhere, like redoing my actual Learn To Code With Me site.

Maybe I expected too much from a free tutorial.

Still, this Dash project is a step in the right direction. To my knowledge, this is the only legitimate Tumblr theme tutorial. Even the resourceful Lynda.com's Up and Running with Tumblr lesson barely scratches the surface of making a customized theme.

Looking ahead, I hope more online education portals, like Lynda, Codecademy, etc., add Tumblr theme making to their agenda. Heck, even smaller-sized companies/people trying to make a name for themselves.

In the end, I have to give General Assembly a major hat tip for even offering this project.

TL;DR

  • There is nothing like the GA Dash's Tumblr theme tutorial on the web
  • Dash platform technology almost perfect, combines slideshow + code editor + instant results
  • Dash Tumblr Project is awesome, till you get to end and have to export it
  • If you know some HTML and CSS, it's easy
  • Wish tutorial included advanced topics like: addressing mobile issues, social sharing, adding other variables (like social links, Google Analytics)
  • Learned about what goes into basic Tumblr themes
  • Didn't achieve goal of making a pimped out custom Tumblr theme

Do you use Tumblr with a custom theme? If yes, how did you learn how to make it? Let me know in a tweet or in the comment section below.

Image courtesy of Romain Toornier, Flickr.


  • Pingback: 45 of The Best Places to Learn to Code For Free()

  • Thank you!! You really helped me a lot :)

  • snarkykitten

    Yes, unfortunately I found GA’s tutorial to be lacking. Have yet to find any worthwhile guide that bridges the gap between hideous bare bones & actually functional/visually pleasing gap.

    • dubiousradicals

      I know this is a late reply but the best way to bridge that gap is to learn html, css, javascript and the fundamentals of design.

      The visually pleasing aspect is really not a Tumblr Theme tutorial but an HTML/CSS design one. I’d suggest going to Codrops (https://tympanus.net/codrops/) and looking at sites you generally find nice and listing what qualities you like about them.

      The functional part of Tumblr could really only be comprehensively understood by looking at their documentation guide (https://www.tumblr.com/docs/en/custom_themes). Their current official default theme is Optica (https://www.tumblr.com/theme/37310) take a look at their code. It’ll show you how to use their block structures.