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:
Keep with us and by the end of the article, you will learn how to create very interesting Tumblr themes, and use also them.
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.
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" />
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.
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
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:
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>
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:
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.
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:
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…