Social Media

Choosing Your Tumblr Theme Social Media Blog

MUNICH, GERMANY – JANUARY 23: Founder of Tumblr David Karp speaks during the Digital Life Design conference (DLD) at HVB Forum on January 23, 2012 in Munich, Germany. DLD (Digital – Life – Design) is a global conference network on innovation, digital, science and culture which connects business, creative and social leaders, opinion-formers and investors for crossover conversation and inspiration. (Image credit: Getty Images via @daylife)

Themes and Customisation

Hundreds of themes are available for Tumblr, most of them for free. Take some time to go through the theme options when you sign up, either to find one for your tumblr or to get ideas to create your own theme. One thing you may notice with Tumblr themes is that a lot of them have very narrow content areas. While wider themes are available, the vast majority are narrower than 800 pixels (and some even narrower than that).

Most Tumblr themes come with some customisation options that don’t require any HTML and CSS knowledge (if you plan to create some public themes, you’ll probably want to include some customisation options). There’s also an area to enter custom CSS that will override existing styles.You can customize the HTML in any theme, too. Click on the “Customise” link from your dashboard, and then click on “Theme” and “Custom HTML.” This is also how you would create a theme from scratch. You can link to an external style sheet, too (Tumblr has a static file uploader for uploading theme assets). Editing an existing theme is a great way to start designing for Tumblr. It also gives you complete control over how your theme looks and works without having to start from scratch.

Creating Custom Tumblr Themes

While Tumblr makes it easy to customize the HTML and CSS of almost any theme, you may want to start from scratch. If you’ve ever created a theme for another blogging platform or CMS, creating a Tumblr theme won’t be any more difficult. Even if you haven’t created a theme for another CMS, creating a Tumblr theme isn’t much more difficult than creating a standard HTML template.

Basic Structure

Tumblr themes include the same basic parts as any website. There’s usually a header and main content area, as well as an optional sidebar and footer. Beyond that, Tumblr themes are broken down into blocks. Each block on your tumblelog contains some piece of data. For example, there are blocks for each of the post types (text, photo, audio, video, etc.), as well as blocks for things like your tumblelog’s description and “Previous” and “Next” page links.

The Tumblr loop has a huge number of variables to take advantage of. You’ll need to define blocks for each post type in order to display them properly in your theme. Beyond that, you choose what to include in your theme.

A complete list of Tumblr variables can be found on the Creating a Custom HTML Theme page on Tumblr’s website. The page also includes more information on creating Tumblr themes in general.

Tumblr Theme Variables

Variables allow you to do various custom things with your Tumblr themes. There are basic variables for things like the theme title, portrait URLs and favicons. There are unique variables for each of the post formats, too. Some formats (like text posts) have only a handful of variables, while others have over a dozen.

Related articles

9 quick and effective Tumblr SEO Tips

7 ways to share content on Tumblr

Adding a Static Page to Tumblr

Tumblr Google Analytics 

A Complete Guide To Tumblr (smashingmagazine.com)

About the Author:

I have worked in online / digital for 20 years! Yes, it is possible. Started in the early days before freeserve was a scribble on a napkin, developing and marketing online self help products for the likes of BT, Cable& Wireless. MCI WorldCom et al. Set up the first online retailer channel for Demon Internet (Now part of C&W) before moving Agency side. As MD of grow* i focus on strategy and head up the client management team as well as keeping my toe in the water.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>