Creating a Tumblr Theme

Exclusive offer: get 50% off this eBook here
WordPress 2.8 Themes Cookbook

WordPress 2.8 Themes Cookbook — Save 50%

Over 100 simple but incredibly effective recipes for creating powerful, custom WordPress themes

$23.99    $12.00
by Jose Argudo Blanco | April 2010 | Open Source

In this article by Jose Argudo Blanco, we will discuss how to design our own customized themes.

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 xmlns="http://www.w3.org/1999/xhtml">
<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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{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.
WordPress 2.8 Themes Cookbook Over 100 simple but incredibly effective recipes for creating powerful, custom WordPress themes
Published: July 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Photoset Posts

After photo posts, we are going to see photoset posts. These kind of posts are like groups of images, so it work in a very similar fashion, just take a look at the code:

{block:Photoset}
<div class="post">
//same as before
<div class="post_contents">
{Photoset-500}
<p>
<h1>{block:Caption}{Caption}{/block:Caption}</h1>
</p>
<hr>
</div>
</div>
<br class="clear" /><br/>
{/block:Photoset}

The only difference between our previous photo post, and this one, is that where we have:

<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{PhotoURL-500}" alt="{PhotoAlt}"/>

We now have:

{Photoset-500}

This will create a photoset of 500px wide, but we also have options for creating it:

  • {Photoset-400}
  • {Photoset-250}

And with that we are done with creating our photoset, our next blog type will be the quote one.

Quote Posts

We will use this type of block for showing quote posts, here we have the quote and source tags:

{block:Quote}
<div class="post">
//same as before
<div class="post_contents">
<p>
<h1>"{Quote}"</h1>
</p>
{block:Source}
<p>
{Source}
</p>
{/block:Source}
<hr>
</div>
</div>
<br class="clear" /><br/>
{/block:Quote}

The {Quote} tag is used to show the real content for the quote, and the {Source} tag is used to show the source for the quote; the {block:Source} tag is used to check if there's a source defined, showing the code inside or not.

Link Posts

This is another kind of block, well suited for showing link posts. But don't worry, the code necessary for rendering this block is easy again:

{block:Link}
<div class="post">
//same as before
<div class="post_contents">
<p>
<a href="{URL}" {Target}>{Name}</a>
</p>
{block:Description}
<p>
{Description}
</p>
{/block:Description}
<hr>
</div>
</div>
<br class="clear" /><br/>
{/block:Link}

At this point, we are already getting used to these tags, anyway let's comment on the newest:

  • {URL} — this is the url we would have inserted for the link post
  • {Target} — if when creating the post we selected to open the link in a new window, this tag would create the target=”_blank” tag.
  • {Name} — the name of the link, if nothing has been inserted, the url will be used.
  • {block:Description} — checks if the title has a description, and if it has, then it simply shows the code inside it.
  • {Description} — the description for the link tag.

Video Posts

This is going to be one of our favorites, along with text posts I think, it's code is pretty easy too:

{block:Video}
<div class="post">
//same as before
<div class="post_contents">
{Video-500}
{block:Caption}
<p>
{Caption}
</p>
{/block:Caption}
<hr>
</div>
</div>
<br class="clear" /><br/>
{/block:Video}

At this point the caption part will be quite easy for us, the new tag {Video-500}, indicates the width of the video, other options are:

  • {Video-400} — for 400 px width
  • {Video-250} — for 250 px width

Next, we are going to talk about audio, another interesting post type.

Audio Posts

These are similar to video posts, but instead of videos we will be showing an audio player:

{block:Audio}
<div class="post">
//same as before
<div class="post_contents">
{AudioPlayerBlack}
{block:Caption}
<p>
{Caption}
</p>
{/block:Caption}
<hr>
</div>
</div>
<br class="clear" /><br/>
{/block:Audio}

The {AudioPlayerBlack} option will show a default audio player, but we have other options possible:

  • {AudioPlayerWhite} — for a white colored player
  • {AudioPlayerGrey} — for a grey colored player
  • {AudioPlayerBlack} — for a black colored player
WordPress 2.8 Themes Cookbook Over 100 simple but incredibly effective recipes for creating powerful, custom WordPress themes
Published: July 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Chat Posts

This is our last post type, and is also quite easy like the previous ones we have seen, check it and we will talk about the differences:

{block:Chat}
<div class="post">
//same as before
<div class="post_contents">
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
<hr>
</div>
</div>
<br class="clear" /><br/>
{/block:Chat}

The main elements here are:

  • {block:Lines} — renders the lines of the post
  • {Alt} — this will render the text “odd” or “even”, and we can use them for styling each line, to be different from the others.
  • {Label} — if the line has a label, this tag will render it.
  • {Line} — this is the line for the post.

With this, we are done with the block part. All the types of blocks are present, and will be used in our theme.

Other Useful Tags

We have seen how to show our posts, but we also need some more tags, if you remember, at the first part of the article we have used the {Title} tag to show the title of our blog. But we did that in the head section.

We will do the same with other contents of our site, for example, we are going to change this:

<div id="description">
<h1>Jose Argudo's Blog!</h1>

to this:

<div id="description">
<h1>{Title}</h1>

And this way our title will be show here too. We are going to do this in the footer section also:

<div id="left_footer">
<div class="padd">Jose Argudo´s Blog</div>
</div>

change that to:

<div id="left_footer">
<div class="padd">{Title}</div>
</div>

But what about our description, by now we have:

<div id="description">
<h1>{Title}</h1>
<p>...</p>
</div>

And we are going to change it to this:

<div id="description">
<h1>{Title}</h1>
<p>{Description}</p>
</div>

As we are using the {Description} tag to render the description of our theme; if you want to put the theme description in the head section of our site, then you would use:

<meta name="description" content="{MetaDescription}" />

Also remember, there are other tags that need to be placed in the head section of our theme, which would be the following:

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

The first one will show the favicon, and the other will render the url for the rss feed of our theme. But what about our menu, at the moment all we have is these links:

<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>

We need to make some changes in order for these menus to be available:

<a href="/" class="menu_link">Home</a> | 
{block:HasPages}
{block:Pages}
<a href="{URL}" class="menu_link">{Label}</a> | {block:Pages}
{/block:HasPages}
<a href="{RSS}" class="menu_link">RSS</a> |
<a href="/archive" class="menu_link">Archive</a>

The static links are quite easy, and for the generated pages, we use the {block:HasPages} tag. This will render links for each one of our pages, inside these tags we need to place the code for each link.

With all this we will already be able to try our theme. Check the next point to learn about the necessary steps.

Using our theme

When we have everything in place, we would sign into our dashboard, and click on the customize link:

This will send us to a different page, where we will able to change the theme, just click on the theme menu:

Next step is to click on the Use custom HTML button:

After we click on that button, we will see a textarea where we will paste all the code we have been working on:

Finally, click on the save button:

And that's all, we can go to our front page and see our theme in action!

But, what about our assets?

This is an important part, if you remember, we had an image in our design, but it's not visible now. That's because we have not uploaded it, and thus it's not accessible, but how do we upload these assets?

Quite easy, if you look at the theme upload page:

http://www.tumblr.com/themes/new

You will see a link named static file uploader, click on it, we will be sent to a page where we will be able to upload all our necessary files. You could also go there using this link:

http://www.tumblr.com/themes/upload_static_file

Here we will be able to upload our necessary files, each file uploaded will be available in a link similar to this one:

http://static.tumblr.com/z2bybve/cs0kzqm7n/codeigniter_book.gif

So if in our template we have:

<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="codeigniter_book.gif" />

We would change that to:

<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://static.tumblr.com/z2bybve/cs0kzqm7n/codeigniter_book.gif" />

And our assets would be correctly linked, as we can see in the next image:

Quite easy, isn't it? We will be able to upload all the necessary assets this way. For example I've uploaded the arrow image that we will be using in our next example.

Adding a bit of jQuery

In this last section, we are going to add a bit of jQuery to our theme, just to see how easy it is, we are going to make a scroll to top button. As I was commenting before, I've uploaded an image of the little arrow image we have on the bottom right of the theme:

For this we are using this code:

<div id="right_footer">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://static.tumblr.com/z2bybve/atmkzt9t7/arrow.gif" />
</div>

Now, if we want to use jQuery, we have two options:

  • Upload the asset
  • Link it from google

We are going to link it from google, so we will use this code:

<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" 
type="text/javascript" charset="utf-8"></script>

Now, we are going to use a jQuery plugin for the scroll to top part, we can find this plugin in this page:

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

And after uploading it to Tumblr, we will have it on this url

http://static.tumblr.com/z2bybve/iHZkztajn/jquery.scrollto-min.js

so the full code for including this code will be:

<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://static.tumblr.com/z2bybve/iHZkztajn/jquery.scrollto-min.js" 
type="text/javascript" charset="utf-8"></script>

After including the plugin, we can use jQuery as always, placing the code inside script tags:

<script type="text/javascript">
jQuery(function( $ ){
$('.top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
})
</script>

Of course, we will need to change the image, for adding the class to it:

<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://static.tumblr.com/z2bybve/atmkzt9t7/arrow.gif" class="top-link" />

And that's all, we have our theme working and ready to be used.

Summary

Well in this small article, we have created a very basic Tumblr theme, with the very basic tags, but also we have learned how to upload assets and use them, even how to work with the jQuery library.

Hope you have find this useful!

If you have read this article you may be interested to view :

About the Author :


Jose Argudo Blanco

Jose Argudo Blanco is a web developer from Valencia, Spain. After finishing his studies he started working for a web design company. After working for six years for that company and some others, he decided to work as a freelance.

Now, after some years have passed, he thinks it's the best decision he has ever takena decision that let him work with the tools he likes, such as CodeIgniter, Joomla!, CakePHP, JQuery, and other well-known open source technologies.

For the past few months he has also reviewed some books for Packt Publishing, such as Magento 1.3 Theme Design, Magento: Beginner's Guide, Joomla! 1.5 SEO, Symfony 1.3 Web Application Development, and Joomla! with Flash. The one yet to be published is Magento Development with PHP.

Books From Packt

Wordpress and Flash 10x Cookbook
Wordpress and Flash 10x Cookbook

WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

WordPress 2.7 Complete
WordPress 2.7 Complete

WordPress MU 2.8: Beginner's Guide
WordPress MU 2.8: Beginner's Guide

Plone 3 Theming
Plone 3 Theming

Drupal 6 Attachment Views
Drupal 6 Attachment Views

Drupal 6 Performance Tips
Drupal 6 Performance Tips

Your rating: None Average: 3.5 (4 votes)
Great breakdown of Tumblr theme by
Thanks Jose I will use this and experiment I will post my findings in my Windows Tips Club Blogspot SpideRaY
Thanks! by
Thank you so much for this article. I was looking around for some time for some kind of tutorial to help me understand how to customize the tumblr themes and then I came upon this article and I totally understand everything now. Great!
div tag by
Great articles! I have seen to some custom html in other themes, they are not closing their 'div's how can it happen??

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
z
T
S
A
k
Y
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software