13 min read

At this moment, surely, you must have heard something about Tumblr, but in case you haven’t, we can summarize by telling it’s a platform for microblogging. We can publish texts, audio, photos, quotes, links etc in a very easy way.

As other users can follow our posts, comment on them or ask questions to us, Tumblr can be considered a great social tool. Apart from being very easy to use, we can also customize it’s appearance, so it shares our business look and feel, or simply because we prefer some other appearance.

Not only can we customize it’s appearance, but also design our own customized themes; that’s exactly what we are going to do in this article:

  • What we have and what we want
  • First steps, a basic html template
  • Generating the Tumblr theme from our template
  • Adding a bit of jQuery

Keep with us and by the end of the article, you will learn how to create very interesting Tumblr themes, and use also them.

What we have and what we want

For this article, we are going to use my own account as an example. For now, I’m using a theme that looks this way:

This is a great theme, very clean, centered on showing our content. The theme we are going to create is going to be very clean too, and also enough for us to see how we can create a template. Let’s take a look at it:

As you can see, it’s a quite easy design; hope you like it too. Also, you can download the PSD if you wish, maybe it will help you follow the article.

Well, once we know which design we want to use, our next step will be to generate a plain html template.

First step, a basic html template

A basic html template is a good place to start our theme, and that’s where we are going to start. First the basic structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
	    <title>Our first theme</title>
	    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	</head>
	<body id="theme">
		<div id="container">
			<div id="menu">
				<a href="#" class="menu_link">About me</a> | <a href="#" class="menu_link">Archives</a>
         | <a href="#" class="menu_link">Random</a> | <a href="#" 
         class="menu_link">Mobile</a> | <a href="#" class="menu_link">RSS</a>
			</div>
			<div id="right_col">
				<div class="post">
					<div class="post_type">
						<div class="blue_box">Text</div>
						<a href="#" class="content_link">Permalink</a>
					</div>
					<div class="date">
						<div class="blue_box">Mar 22</div>
						Posted at 7:54am
					</div>
					<div class="post_contents">
						<h1>Codeigniter 1.7</h1>
						<p>
							<img src="sample_image.jpg" />
							<br/>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fermentum
              vestibulum nisl vitae placerat. Praesent nec massa neque. Nam dictum commodo posuere. Sed vitae est risus.
              Nunc suscipit justo vitae mi faucibus cursus. Morbi eu arcu erat. Nam venenatis, urna non 
              tempus pretium, felis nunc blandit risus, non elementum elit turpis in diam. Proin 
              ullamcorper blandit lacinia. Nulla nibh metus, lacinia at luctus vel, tincidunt et mauris.
              Sed rutrum, felis in tincidunt porttitor, nulla nunc placerat elit, ac tempor magna arcu
              non nisi. Proin ac sagittis lorem. Morbi imperdiet consectetur ipsum, volutpat convallis
              arcu pulvinar in. Nulla eget quam elit, vitae molestie ligula. Praesent rhoncus diam id
              lorem sagittis consequat ac et magna. 	
						</p>
						<hr>
					</div>
				</div>
			</div>
			<div id="left_col">
				<div id="description">
					<h1>Jose Argudo's Blog!</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fermentum vestibulum
           nisl vitae placerat. Praesent nec massa neque. Nam dictum commodo posuere. Sed vitae est
           risus. Nunc suscipit justo vitae mi faucibus cursus. Morbi eu arcu erat. Nam venenatis,
          urna non tempus pretium, felis nunc blandit risus, non elementum elit turpis in diam. </p>					
				</div>
				<div class="banner">
					<img src="codeigniter_book.gif" />
					&nbsp;&nbsp;
					Check my Codeigniter book
				</div>
			</div>
			<div id="footer">
				<div id="left_footer">
					Jose Argudo´s Blog
				</div>
				<div id="right_footer">
					<img src="arrow.gif" />
				</div>
			</div>
		</div>
	</body>
</html>

We have our basic html structure here, quite simple by now, all html without any styling as of now. Our next step will be to add some css to our basic page, which, by now, looks more or less this way:

Some reset css will be useful here, I usually use Eric Meyer’s one, which you can find here:

http://meyerweb.com/eric/tools/css/reset/

We are going to place this code in the head section of our page, just like this:

.
.
.
	    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	    <style type="text/css" media="screen">
	    	/* CSS reset from Eric Meyer */
				html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
        blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
        em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup,
        tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
        legend, table, caption, tbody, tfoot, thead, tr, th, td {
					margin: 0;
					padding: 0;
					border: 0;
					outline: 0;
					font-size: 100%;
					vertical-align: baseline;
					background: transparent;
				}
				body {
					line-height: 1;
				}
				ol, ul {
					list-style: none;
				}
				blockquote, q {
					quotes: none;
				}
				blockquote:before, blockquote:after,
				q:before, q:after {
					content: '';
					content: none;
				}
				:focus {
					outline: 0;
				}
				ins {
					text-decoration: none;
				}
				del {
					text-decoration: line-through;
				}
				table {
					border-collapse: collapse;
					border-spacing: 0;
				}	    	
	    </style>

We have included this css styles in our html file, instead of including it from an external source. Why have we done that? Mostly because we have no ftp access to our Tumblr account, also themes are not packed in a zip file and installed somehow.

Soon we will be answering all these questions; for now, placing our css styles directly in our html is the best solution.

Now that we have added our reset styles, we can start working in the theme own styles, let’s see:

/* Theme's own styles */
				#theme{
					font-family: arial, sans-serif;
					font-size: 12px;
					color: #333333;
					background-color: #F5F5F5;	
				}
				
				#container{
					width: 960px;
					margin: 20px auto;						
				}
				
				#menu{
					height: 22px;	
				}
				
				#left_col{
					float: left;
					width: 320px;	
				}
				
				#right_col{
					float: right;
					width: 630px;	
				}
				
				#footer{
					float: none;
					clear: both;
					height: 20px;	
				}
				
				#description, .banner{
					background-color: #0087C5;
					padding: 12px;
					color: #ffffff;
					margin-bottom: 5px;
				}
				
				#description h1{
					font-size: 24px;
					margin-bottom: 15px;
				}
				
				#description p{
					line-height: 18px;
				}
				
				.banner{
					font-style: italic;
					font-size: 10px;
				}
				
				.post_type{
					width: 54px;
					float: left;
					margin-left: 10px;
				}
				
				.date{
					width: 54px;
					float: left;	
					color: #0087C5;
					font-style: italic;
					font-size: 10px;				
				}
				
				.post_contents{
					margin-left: 10px;
					margin-bottom: 22px;
					width: 500px;	
					float: right;
				}
				
				.blue_box{
					height: 54px;
					background-color: #0087C5;
					color: #ffffff;
					font-size: 14px;
					padding: 6px;
					padding-bottom: 0px;
					margin-bottom: 10px;
				}
				
				.post_contents h1{
					font-size: 18px;
					color: #0087C5;
					margin-bottom: 22px;	
				}
				
				.post_contents img{
					margin-bottom: 24px;	
				}
				
				.post_contents p{
					line-height: 18px;
				}			
				
				hr{
					height: 1px;
					color: #0087C5;
					border: 1px solid #0087C5;
				}	
				
				a.content_link:link, a.content_link:visited{
					color: #0087C5;
					font-style: italic;
					font-size: 10px;		
					text-decoration: none;					
				}
				
				a.content_link:hover{
					text-decoration: underline;
				}
				
				#menu{
					color: #0087C5;
				}
				
				a.menu_link:link, a.menu_link:visited, a:link, a:visited{
					color: #0087C5;
					font-size: 12px;		
					text-decoration: none;					
				}
				
				a.menu_link:hover, a:hover{
					text-decoration: underline;
				}			
				
				#left_footer{
					width: 332px;
					height: 20px;
					float: left;
					background-color: #0087C5;
					color: #ffffff;	
				}	
				
				#right_footer{
					width: 43px;
					float: right;	
				}
				
				.padd{
					padding: 4px;	
				}

				.clear{
					clear: both;
					float: none;
				}

With these styles our template will be looking very similar to our design, maybe later we will need some small changes, but that’s not so important. With all this in place, we can start with the interesting work, the Tumblr part.

Generating the Tumblr theme from our template

Converting this template into a working Tumblr theme is not going to be that hard, mostly we will be using some special tags to determine where some specific contents will be placed.

Tumblr uses two type of tags

  • Variable tags
  • Block tags

But we will see that better by working with our theme, for example, our page title:

<title>Our first theme</title>

We will change that for this code:

<title>{Title}</title>

In bold, we can see a {Title} tag. This tag, when rendered will be substituted by the title of our blog, without any html tag. Easy, isn’t it? Most of our work will be quite similar, we are going to see the main tags to use.

One of our main work will be showing the posts, after all, our main objective is to show these posts. Tumblr divides posts into eight possible types:

  • Text posts, with only text and html.
  • Photo posts, with one photo and its description
  • Photosets, for when you need to show more than one photo
  • Quote, used when we want to quote other site or source
  • Link to other sites or online resources
  • Chat, interesting option, for showing conversation, where each line, separated be a carriage return, is show in a different color.
  • Audio, from an uploaded or external source
  • Video, similar to audio but with videos.

In our html code, we have prepared a zone for showing posts:

<div class="post">
					
					<div class="date">
						<div class="blue_box">Mar 22</div>
						Posted at 7:54am
					</div>
										
					<div class="post_type">
						<div class="blue_box">Text</div>
						<a href="#" class="content_link">Permalink</a>
					</div>
					
					<div class="post_contents">
						.
						.
						.
						
						<hr>
					</div>
					
				</div>
				<br class="clear" /><br/>

Now we need to generate one of these post zone for each post type. It’s important to note that this is absolutely necessary for the theme to be correct, all post type must be present in our code.

Firstly, we need to define these tags:

{block:Posts} … {/block:Posts}

All the other types of posts will go into these tags, let’s summarize it a bit:

{block:Posts} 
		{block:Text} Text posts will go inside these tags {/block:Text}
		{block:Photo} Photo posts will go inside these tags {/block:Photo}  
		{block:Photoset} Photoset posts will go inside these tags {/block:Photoset} 
		{block:Quote} Quote posts will go inside these tags {/block:Quote} 
		{block:Link} Link posts will go inside these tags {/block:Link} 
		{block:Chat} Chat posts will go inside these tags {/block:Chat} 
		{block:Audio} Audio posts will go inside these tags {/block:Audio} 
		{block:Video} Video posts will go inside these tags {/block:Video} 
{/block:Posts}

Now, we will be working on each one of these blocks. Remember that we will be placing them between {block:Posts} … {/block:Posts}, so we will have more or less this code:

<div id="right_col">
	{block:Posts}
		All the other block types will go here
	{/block:Posts}
</div>

Text Posts

We will start with this type of posts, I will put the code and after we take a look at the different options

{block:Text}
	<div class="post">
		
		<div class="date">
			{block:Date}
				
				{block:NewDayDate}
					<div class="blue_box">{Month} {DayOfMonth}</div>
					Posted at {12Hour}{AmPm}
				{/block:NewDayDate}
								
				{block:SameDayDate}
					<div class="blue_box">{Month} {DayOfMonth}</div>
					Posted at {12Hour}{AmPm}
				{/block:SameDayDate}								
								
			{/block:Date}
		</div>
							
		<div class="post_type">
			<div class="blue_box">Text</div>
			<a href="{Permalink}" class="content_link">Permalink</a>
		</div>
		<div class="post_contents">
      {block:Title}
          <h1>{Title}</h1>
      {/block:Title}
			<p>
				{Body}	
			</p>
			<hr>
		</div>
		
	</div>
	<br class="clear" /><br/>
  {/block:Text}

Here we have some interesting tags, let’s talk a bit about them:

  • {block:Date} — this will render the date, with the options we are defining inside.
  • {block:NewDayDate} — this is used for showing the date, but it’s only show for the first post of the day.
  • {block:SameDayDate} — If we want to show the date in each post, we need to use this tag.
  • {Month} — with this tag we will show the day of the post
  • {DayOfMonth} — and with this other we will show the day
  • {12Hour} — the hour in a 12 hour format
  • {AmPm} — and the am or pm text, where applicable
  • {Permalink} — we used this inside our link href in order to generate a permalink
  • {block:Title} — the code inside these tags will only be shown if the article has a title.
  • {Title} — this is the title of the post.
  • {Body} — and the content of the same.

Most of the options are in fact very self explanatory, and quite easy to use. The next blog types are similar, but with some differences.

Photo Posts

The code for photo posts is quite similar, let’s take a look to it:

{block:Photo}
	<div class="post">
		
		//same as before
		
		<div class="post_contents">
			<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
			<p>
          {block:Caption}{Caption}{/block:Caption}
    		</p>
			<hr>
		</div>
	</div>
	<br class="clear" /><br/>
{/block:Photo}

As you can see, we have changed the title tag for caption tag, but the structure remains mostly the same. The other main difference is the img tag we have used:

<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>

The {PhotoAlt} tag will show the alt attribute of the photo, if there’s any. {PhotoURL-500} is the more important one, as it will create the url of the image, but for a photo equal or smaller to 500px width. There are other options for this tag, which are as follows:

  • {PhotoURL-400} — just the same tag, but will create a url for a image equal or smaller to 400px.
  • {PhotoURL-250} — a smaller image, this time of 250px.
  • {PhotoURL-100} — just the same as before, but will make urls for images of 100px width or less.
  • {PhotoURL-75sq} — this one is a bit different, as will make a url for a reduced, squared image of the post, of 75px.
  • {PhotoURL-HighRes} — this last tag will create a url for the high resolution image.
Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here