September 11, 2014

Tumblr Theme Tutorial for Beginners

tumblr-theme-tutorial-for-beginners

Have you ever wanted to create your own custom theme for Tumblr. This tutorial is jam packed with all the essentials to get started.

Your first Tumblr Theme

In Tumblr, there are 7 different post types (text, photos, links, quotes, chat, audio, and video). Later in the tutorial, I will show how to style each one of these post types seperately. 

Getting Started

Begin by selecting the blog you want to customize in the top right hand corner, and click customize.

customize_1

 

Then Click Edit Html

 

tumblr_tutorial_2

 

You will be brought to a live html editor where you will learn the basics of creating a Tumblr theme.

Time to Code

Begin by deleting all the code in the editor (you can do this by pressing Ctrl + a and then pressing delete.

tumblr_tutorial_3

 

Now you can begin writing the code.

Variables and Blocks

 

Variables

In Tumblr there are two kinds of special operators used to render your content.

Variables are used to insert dynamic content into your blog.

For example:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
	<h1>{Title}</h1>
</body>
</html>

In this example, the {Title} Variable is being used to display the title of your blog.
 
tumblr_tutorial_4
 
If you would like to have a look at all the Variables and Blocks visit www.tumblr.com/docs/en/custom_themes
 

Blocks

Blocks are used to render a certain block of html or a set of data (like your tumblr posts).

For example:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <ul class="posts">
    	{block:Posts}
            <li> content </li>
        {/block:Posts}
    </ul>
</body>
</html>

 

Setting up your workflow

Up until now, we have been doing all of our code writing inside the Tumblr live html editor. Although this is possible, I would recommend using an external text editor. My personal favourite is Sublime Text.

Time to Build

Start by setting up your html page for creating your Theme.

<!DOCTYPE html>
<html>
<head>
	<title>{Title}</title>
</head>
<body>
	<h1>{Title}</h1>
</body>
</html>

The next step will be to add our blog Description (as seen at www.tumblr.com/docs/en/custom_themes).

	<h1>{Title}</h1>

	{block:Description}
		<p id="description">{Decription}</p>
	{/block:Description}

You are essentially creating a block for your Tumblr blog description, and then calling upon the {Description} Variable. You have assigned the ID of description, so we can style it later.

We will now need to add the blocks for the Tumblr posts

	<div class="posts">
		{block:Posts}
			<!-- All post types inside here -->
		{/block:Posts}
	</div>

We will need to include our layout for the 7 different kinds of Tumblr posts inside the {block:Posts} block.

Let’s start with the Text Post.

	<div class="posts">
		{block:Posts}
			{block:Text}
				<div class="post text">
					{block:Title}
						<h3><a href="{Permalink}">{Title}</a></h3>
					{/block:Title}
					{Body}
				</div>
			{/block:Text}
		{/block:Posts}
	</div>

Inside the Text Block, we have wrapped everything inside a div with the classes post and text. Inside that, we have created another Block, which encloses the h3. Inside the h3, there are two Variables, {Permalink} and {Title} which are pulled from the title information of the Text Post. Inside this block, these variables show information for the Text Post (not the entire blog).

	<div class="posts">
		{block:Posts}
			{block:Text}
				<div class="post text">
					{block:Title}
						<h3><a href="{Permalink}">{Title}</a></h3>
					{/block:Title}
					{Body}
				</div>
			{/block:Text}
			{block:Photo}
				<div class="post photo">
					<img src="{PhotoURL-500}" alt="{PhotoAlt}" />

					{block:Caption}
						<div class="caption">{Caption}</div>
					{/block:Caption}
				</div>
			{/block:Photo}
			{block:Panorama}
				<div class="post panorama">
					{LinkOpenTag}
						<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
					{LinkCloseTag}
					{block:Caption}
						<div class="caption">{Caption}</div>
					{/block:Caption}
				</div>
			{/block:Panorama}
			{block:Photoset}
				<div class="post photoset">
					{Photoset-500}

					{block:Caption}
						<div class="caption">{Caption}</div>
					{/block:Caption}
				</div>
			{/block:Photoset}
			{block:Quote}
				<div class="post quote">
					<blockquote>
						<p>"{Quote}"</p>
						<small>
							{block:Source}
								<div class="source">{Source}</div>
							{/block:Source}
						</small>
					</blockquote>
				</div>
			{/block:Quote}
			{block:Link}
				<div class="post link">
					<a href="{URL}" {Target}>{Name}</a>

					{block:Description}
						<div class="description">{Description}</div>
					{/block:Description}
				</div>
			{/block:Link}
			{block:Chat}
				<div class="post chat">
					{block:Title}
						<h3><a href="{Permalink}">{Title}</a></h3>
					{/block:Title}

					<ul class="chat">
						{block:Lines}
							<li class="{Alt} user_{UserNumber}">
								{block:Label}
									<span class="label">
										{Label}
									</span>
								{/block:Label}{Line}
							</li>
						{/block:Lines}
					</ul>
				</div>
			{/block:Chat}
			{block:Video}
				<div class="post video">
					{Video-500}

					{block:Caption}
						<div class="caption">{Caption}</div>
					{/block:Caption}
				</div>
			{/block:Video}
			{block:Audio}
				<div class="post audio">
					{AudioEmbed}

					{block:Caption}
						<div class="caption">{Caption}</div>
					{/block:Caption}
				</div>
			{/block:Audio} 
		{/block:Posts}
	</div>

As you can see, many of the blocks and variables are reused in between posts. For example the {block:Caption} can be used in the Photo, Panorama, Photoset, Video and Audio Blocks.

Let’s go ahead and copy all of this code from our editor ( Ctrl + a and then Ctrl + c ) and then paste it into your Tumblr live html editor ( Ctrl + v ).

tumblr_tutorial_5

As we can see, our blog title is being displayed, along with our posts. Seeing as this is the bare skeleton of our blog, I think it’s time to add some style.

Jazz it up

Now that we’ve inserted the majority of our HTML, it’s time to start writing some CSS. Later on, you could divide up the CSS into a seperate file, but for now we will write it directly into our HTML file.

First off, we will need to import some libraries. My favourite base framework is Bootstrap, which we can easily include in our Tumblr theme.

We will need to find a CDN for bootstrap (CDN is a content delivery network which is essentially a host for common frameworks, or libraries that we can include in our project to use without having to download). A good CDN for bootstrap, is www.bootstrapcdn.com.

In this project, I will be using a Bootstrap Theme from Bootswatch. The theme is called Cosmo and you can download it from bootswatch.com (or use the CDN from www.bootstrapcdn.com).

I will also be using FontAwesome (a CSS toolkit for icons) which will easily allow us to include icons in our theme.

For our theme, we will need to include the Cosmo Bootstrap.css and the Font Awesome.css in the header:

<head>
	<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cosmo/bootstrap.min.css" rel="stylesheet">
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>

We will also need to include the Bootstrap.js in our footer:

	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

You will now see when you Update Preview that the styles of our blog have changed. Let’s begin adding the Bootstrap elements we will need (which you can view on getbootstrap.com).

To start off, let’s add the container class to enclose our content.

<body>
	<div class="container">

		<h1>{Title}</h1>

As well as a closing div at the bottom.

		</div>

	</div>
	<!-- Close Container -->

	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

 
 
Note: if you are using Sublime Text, and you notice that all your code is not lined up properly like this:

<body>
	<div class="container">

	<h1>{Title}</h1>

And like this:

	</div>

	</div>
	<!-- Close Container -->

	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

You can very easily indent the lines in between by selecting the lines 10 to 117, and pressing Ctrl + ]. As well as unindenting by pressing Ctrl + [.

 
 
Let’s have a look at our code in the live editor.

tumblr_tutorial_6

As we can see, our blog is starting to look better.

 

Here is all the code that we’ve written so far:

<!DOCTYPE html>
<html>
<head>
	<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cosmo/bootstrap.min.css" rel="stylesheet">
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
 
</head>
<body>
	<div class="container">
 
		<h1>{Title}</h1>
 
		{block:Description}
			<p id="description">{Decription}</p>
		{/block:Description}
 
		<div class="posts">
			{block:Posts}
				{block:Text}
					<div class="post text">
						{block:Title}
							<h3><a href="{Permalink}">{Title}</a></h3>
						{/block:Title}
						{Body}
					</div>
				{/block:Text}
				{block:Photo}
					<div class="post photo">
						<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
 
						{block:Caption}
							<div class="caption">{Caption}</div>
						{/block:Caption}
					</div>
				{/block:Photo}
				{block:Panorama}
					<div class="post panorama">
						{LinkOpenTag}
							<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
						{LinkCloseTag}
						{block:Caption}
							<div class="caption">{Caption}</div>
						{/block:Caption}
					</div>
				{/block:Panorama}
				{block:Photoset}
					<div class="post photoset">
						{Photoset-500}
 
						{block:Caption}
							<div class="caption">{Caption}</div>
						{/block:Caption}
					</div>
				{/block:Photoset}
				{block:Quote}
					<div class="post quote">
						<blockquote>
							<p>"{Quote}"</p>
							<small>
								{block:Source}
									<div class="source">{Source}</div>
								{/block:Source}
							</small>
						</blockquote>
					</div>
				{/block:Quote}
				{block:Link}
					<div class="post link">
						<a href="{URL}" {Target}>{Name}</a>
 
						{block:Description}
							<div class="description">{Description}</div>
						{/block:Description}
					</div>
				{/block:Link}
				{block:Chat}
					<div class="post chat">
						{block:Title}
							<h3><a href="{Permalink}">{Title}</a></h3>
						{/block:Title}
 
						<ul class="chat">
							{block:Lines}
								<li class="{Alt} user_{UserNumber}">
									{block:Label}
										<span class="label">
											{Label}
										</span>
									{/block:Label}
								</li>
							{/block:Lines}{Line}
						</ul>
					</div>
				{/block:Chat}
				{block:Video}
					<div class="post video">
						{Video-500}
 
						{block:Caption}
							<div class="caption">{Caption}</div>
						{/block:Caption}
					</div>
				{/block:Video}
				{block:Audio}
					<div class="post audio">
						{AudioEmbed}
 
						{block:Caption}
							<div class="caption">{Caption}</div>
						{/block:Caption}
					</div>
				{/block:Audio}
			{/block:Posts}
		</div>
 
	</div>
	<!-- Close Container -->
 
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

Next let’s start by setting up our CSS coding area (inside the HTML file).

<head>
	<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cosmo/bootstrap.min.css" rel="stylesheet">
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
 
	<style type="text/css">
		body {
			background: #E0E0E0;
		}
	</style> 

With the background slightly grey, let’s modify the post background color and add some padding and margins.

		body {
			background: #fafafa;
		}
		.post {
			background: #fff;
			padding: 10px 30px;
			margin: 20px 5px;
		}

We will now need to add some custom CSS for Specific Posts.

		.post {
			background: #fff;
			padding: 20px 30px;
			margin: 20px 5px;
		}
		.caption {
			font-size: 20px;
			font-weight: 550;
			padding: 5px;
		}
		.chat li {
			list-style: none;
		}
		.chat, 
		.chat .label {
			color: #000;
		}

Lastly, we will need to add Social Buttons to the bottom of every post.

First we will include the CSS required for the buttons.

		.social-links {
			padding: 20px 5px !important;
		}
		.social-links i {
			padding: 5px !important;
		}
		.left {
			float:left;
		}
		.right {
			float:right;
		}
		.my-like{
			color:#2780e3;
			transition: All .3s ease;
			-webkit-transition: All .3s ease;
			-moz-transition: All .3s ease;
			-o-transition: All .3s ease;
		}
		.my-like i{
			transition: All .3s ease;
			-webkit-transition: All .3s ease;
			-moz-transition: All .3s ease;
			-o-transition: All .3s ease;
		}
		.my-liked{
			color:#fff;
			padding:10px 15px;
			margin:5px;
			transition: All .3s ease;
			-webkit-transition: All .3s ease;
			-moz-transition: All .3s ease;
			-o-transition: All .3s ease;
		}
		.my-liked:hover{
		  cursor:hand;
		}
		.my-liked, .my-like:hover {
		  cursor: pointer;
		  color: #fff;
		}

		.my-liked i, .my-like:hover i{
		  color: #e74c3c;
		}

Don’t worry too much about the .my-like class. It is simply defining the class for the like button which we will be including later. The 4 CSS transitions, are just ensuring that each 0.3 second transition is cross browser compatible. If you would like to learn more about CSS transitions, check out this post http://css3.bradshawenterprises.com/transitions/.

Next we will add the HTML at the end of each post type.

<div class="social-links">
	<div class="right">
		<a href="http://www.facebook.com/sharer/sharer.php?u={Permalink}"><i class="fa fa-facebook"></i></a>
		<a href="http://twitter.com/share?url={Permalink}"><i class="fa fa-twitter"></i></a>
		<a href="https://plus.google.com/u/0/share?url={Permalink}"><i class="fa fa-google-plus"></i></a>
	</div>
	<div class="left">
		<a href="{Permalink}"><i class="fa fa-retweet"></i></a>
		<span class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}" title="Like">
            <i class="fa fa-heart"></i>
		</span>
		<a href="{Permalink}"><i class="fa fa-link"></i></a>
	</div>
</div>

 

Voila! You’ve just created yourself a working Tumblr Theme from Scratch.

 

Your Tumblr Blog should be looking something like this:

tumblr_tutorial_7

Now you can simply click save, and your new re-designed Tumblr blog is ready to go.

If you got lost along the way, here is the full source code, along with a demo.

View Source View Demo

 

I’d love to know if this tutorial helped you out, or if you have any questions. So please leave a comment below.

Share this Post
Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on PinterestShare on Reddit