Building upon our previous article, Getting Started on Tumblr, we'll take a look at building our own custom tumblr theme. For this we'll want to take a look at other simple themes to base our custom design off of. It is entirely possible to build a custom theme from complete scratch, but building off of an existing theme will provide an existing structure to build from and save us a couple of hours of development time.
For a long time, I really preferred to simply build off of tumblr's default Redux theme as it already provides a relatively clean template with a large amount of customization being possible. However, I recently stumbled upon Tumblr Boilerplate, a tumblr theme built off of the popular HTML5 boilerplate template which includes a full CSS reset. In layman's terms, this theme provides all of the functionality of most other tumblr themes while including a reset of the default CSS styles that get included in most themes allowing you to style the theme however you want.
To explain it even simpler, it makes your tumblr page look like this
Obviously, you wouldn't use this theme as your finished product. However, as a jumping off point, this theme makes it much easier to customize as we'll no longer have to fight against and override any of tumblr's existing styles.
To install this theme, download it from http://www.tumblrboilerplate.com/ and unzip it. Inside the unzipped folder, you'll find a folder containing a file, index.html. Open that file with your favorite text editor and navigate to your tumblr's "Customize" page
inside this page, navigate to the "Edit HTML" section and copy/paste the contents of the index.html file into this page.
Developing Your Custom Tumblr Theme
Alright, now it's time for the fun part, actually building your new theme! We touched on this lightly in our previous article, but now we'll go a little more in depth.
If the design that you have in mind is relatively simple, then you can easily skip past editing any of the blocks or HTML and go straight to adding in your custom CSS to modify the background colors, container widths, fonts, etc. The primary thing to keep in mind is to keep all of your new styles below the CSS reset rules, preferably adding all of them right before the closing </head> tag.
With just a few lines of CSS, I was able to transform our incredibly plain looking tumblr into this
For added awesomeness, make sure to use percentages for the widths and em's for the font-sizes (while possibly adding a few media queries) to make sure that it looks consistant across all screen sizes.
Tumblr Blocks
While plain CSS will get you pretty far in developing your theme, there are a few situations where it won't be able get you the look or functionality that you're going for. In this case, we'll have to dive further into the code and get more familiar with tumblr's block system.
Tumblr has some pretty thorough documentation as far as the blocks they use (http://www.tumblr.com/docs/en/custom_themes#basic_variables), but to get a better understanding of how the block system works, we'll edit the posts to include the like and reblog button at the bottom of each post. Usually this is included by default in most tumblr themes, however as this isn't included in the boilerplate theme, it'll provide a good opportunity to practice adding custom blocks and HTML.
The first block to understand is the posts block, which is rendered by the opening and closing tags {block:Posts}{/block:Posts}. This calls upon a function within tumblr to render all posts associated with a tumblr page.
Within these blocks are other blocks which control the rendering of each post type. For example the opening and closing tags {block:Photo}{/block:Photo} controls the rendering of all photo posts, the tags {block:Text}{/block:Text} controls the rendering of text posts, etc.
Then within each post type are the blocks which render the content of each post. For the purpose of this article, we'll concentrate on the blocks that control reblogs and likes, {ReblogButton} and {LikeButton} conveniently enough.
To add the buttons to all text posts, we'll insert this code at the end of each post block.
<ul class="like_and_reblog_buttons">
<li>{ReblogButton}</li>
<li>{LikeButton}</li>
</ul>
The text block for example will now read like this.
After adding this code to the other text blocks, your tumblr page will now have this at the bottom of each post.
Creating Theme Options
Many themes have options that allow other users to easily change colors and other variables. Adding these options into your theme are actually fairly easy through the use of meta tags.
To add the option to change the text color within the tumblr blog, simply add the meta tag
<meta name="color:Text" content="#fff">
Then in whichever rule you use to control the font color, simply add the tag {color:Text} instead of a hexdecimal value, and it'll use whichever color is chosen in the theme options. In the example above, if no color is chosen, it'll fallback to the hexdecimal value #fff.
There are also special "if" blocks you can use in combination with these meta tags. For example, if you wanted to give the user an option for a two-column, or one-column layout, you can add the meta tags
<meta name="select:Columns" content="One" title="One">
<meta name="select:Columns" content="Two" title="Two">
This will add a drop down box to the theme options, but to make this drop down box actually do anything, we'll have to add the tag {select:Columns} into the class section of each post's div tag.
This code will add a CSS class according to the names used in the "content" section within the meta tag. Using this class we can add CSS rules according to what the user selected. In this case, if the user selects "One" column, we'll expand the size of each post to fill 100% of its container. In the case of "Two" column, we'll decrease the size of each post to 45% (taking off the extra 5% helps to compensate for the borders and padding in the middle).
That's it for this week! Next week we'll take a look at incorporating Facebook, Twitter, Google Plus, Pinterest, and Instagram into your tumblr blog.