Tumblr Theme Tutorial: 2-column theme(UPDATED!)

Posted by adrengski on Saturday, June 16th, 2012
Tagged as: easy tutorials themes theme making

Ok, so since that last Theme Making Tutorial I made is kinda old and out-dated, I’ve decided to make a new one. This would, again, be a tutorial to make a two column theme but I’ll be discussing stuff here more than the last one so you’ll understand what these stuff do to those stuff.

You don’t need that much knowledge in web coding to do this tutorial so if you’re up to some tedious instruction-following and code-staring and hair-pulling today, this is for you

So yeah, requirement for this tutorial?

Lots of Patience
A keen eye for mistakes
and another pack of patience

That’s it! So if you’ve got all of that readied, let’s get on with the tutorial.

Planning

So the first part of this tutorial, like the old one, would be planning. Believe me, it’s as important as the development stuff. You wouldn’t want to get stuck halfway the development just because you don’t know where or what to put what where.

Anyway, just grab a pencil or a ballpen and a paper and then start drawing some layouts for your blog. Well this Tutorial’s for a two column theme so maybe you can make it two-column for now. It doesn’t have to be grand either. Just as long as you know what’s going where, you’re good to go.

Here’s what we’re working on in this tutorial:

Just to explain, the green part would be the theme’s header. The blue parts are the post, the violet part would be the side bar and the pink one inside it would be the photo, and the dark blue parts would be the next and previous link. That’s about it. We have two sidebar boxes by the way, the other one would be an extra one where you can put whatever you like.

Choosing the colors

Well this is relatively easy. You can just go to ColourLovers.com to pick a nice pallet if you still don’t have one. If you’d prefer choosing your own, I’d suggest to avoid colors that are too bright or painful to the eyes. Just saying.

Anyway, once you have your palette, what you’ll need are the hex values of the colors. It’s that six letter/number codes that starts with a hash(#ff0000). For this tutorial, this are the colors I’m using for the theme:

The Skeleton

Ok so we start the development from here. Proceed to your blog’s Customize page. Now click on that Edit HTML Button and the sidebar of the customize page should slide and reveal the theme’s codes. Delete all of that. Just click anywhere within the code, press CTRL+A(Select all), and then delete. That should do it.

After that, you should have a blank slate(obviously). Copy/Paste these codes in there:

<html>

<head>
<style type="text/css">

</style>
</head>

<body>
</body>

</html>

This is a page’s skeleton. The first line <html> is the entirety of your theme/blog. Everything goes in between those and the last line </html>. The <head></head> tag contains stuff like your blog’s title, the scripts, the styles, etc. The <style type=”text/css”></style> contains your blog’s style or CSS codes. Lastly, the <body></body> is where the things in your blog goes.

After that, insert these codes in between the <body></body> part:

<div id="main" class="clearfix">
    <div id="header">
    </div>
    
    <div id="content">
    </div>
    
    <div id="sidebar">
    </div>
</div>

Those are your theme’s divs. Anyway, before explaining some other stuff, an ID is a div’s(or any other element’s, actually) “name”. That’s a simple way to put it. We will be styling these divs by assigning CSS styles to these ids later. On the other hand a Class is a group of div/elements that share a certain value. While the IDs are the names, think of Classes as a div’s “surname”. Any divs or elements that shares a class will get the same style. We will be using classes later on once we get to putting the posts in. But for now, that’s it.

To explain the codes above, the first line, the one with the ID of “main”, is your main div. Its main purpose actually is centering the theme so all the other divs goes in between/inside it. The next div, the one with the id of “header” is obviously the header. The others, the “content” and the “sidebar” are what their IDs say. They’re where the contents and the sidebar stuff will be put in. BTW, every div is closed by a closing div tag </div> so be sure to not forget one or your theme might go amuck. The last line is the closing tag of “main”. That means anything in between them is inside that div(“main” div).

Styling the boxes

Ok now time to put styles for those divs above. Now to style a div, we’ll be using CSS. At the same time, we’ll be putting in the styles for the body as well.

So first, put these in just after the <style type=”text/css”> part:

body{
    background: #f5f5f5;
    text-align: left;
    font-family: Arial, san-serif;
    font-size: 11px;
    color: #585858;
    margin: 0px 0px;
    }

That would be the style of your whole page. The background will be #f5f5f5, all text will be aligned to the left(text-align:left), the font family will be Arial, the font size at 11px, and the font-color(color) will be #585858. The margin:0px 0px; part is there to ensure that the body touches the sides of the window; meaning, there will be no margins for the body of your page.

Now add these, just after the one above:

a, a:active, a:visited{
    color: #2daae2;
    text-decoration: none;
    }
    
a:hover{
    color: #e84642;
    }

These are the styles for all your links. a is what you would call a link in HTML. a:active is state of the link once it’s clicked and a:visited is the state of a link you’ve already visited. I set the same color(#2daae2) for them as you can see and set the text-decoration to none to remove the default underline on links.

a:hover on the other hand is the link you’re hovering. I set a different color(#e84642) for it so visotrs on you blog can recognize the difference once they hover on your links.

After that, we’ll be styling the divs. Add these to your CSS styles, just after the one you added above:

#main{
    width: 805px;
    height:auto;
    margin: 0px auto;
    padding: 5px 0px 20px;
    }
    
#header{
    position: relative;
    background: transparent;
    height: 100px;
    width: 795px;
    margin: 5px;
    float:left;
    }

#content{
    position: relative;
    background: transparent;
    width: 500px;
    margin: 5px;
    padding: 10px;
    float:left;
    }
    
#sidebar{
    position: relative;
    background: transparent;
    width: 245px;
    margin: 5px;
    padding: 10px;
    float:left;
    }
    
.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

To explain it quickly, all IDs are styled by adding a hash(#) before the ID value. So for example, if a div has an ID of “main”, you’ll be able to style it by applying it to #main. Classes, on the other hand, are prefixed with a period(.). So if a div has a class of clearfix, you can style that in .clearfix. Also, all styles are put inside a set of curly brackets({}) after the ID/Class, i.e. #main{all styles go here}. All of this things should and should be put inside the <style type=”text/css”></style> part so for all the CSS in this tutorial, make sure to put them in there.

Now for the codes above, this is what they are for:

For the first id, #main, it was given a width of 805px and a height set to auto. Setting a height of width to auto means that the div will be expanding with its content. The margin: 0px auto; part on the other hand is there to center the div. The first value(0px) sets the margin for the top and bottom while the latter(auto) sets the margin for the left and right. Setting a margin auto will center it.

#header, was set on a relative position, a transparent background, a height of 100px, a width of 795px, a margin all over of 5px, and was floated to the left. The float attribute makes positioning elements/divs easier as it automatically aligns them accordingly. Of course, you can adjust the values as you desire.

For #content and #sidebar, they pretty much goes the same as above so no need to enumerate them. The only notable thing here is the padding. Just so you know, the difference between a margin and a padding is that the former is the space around the div box, while a padding is the space inside the box. They’re transparent by the way so you won’t be able to see anything yet once you clicked update preview button.

The .clearfix:after on the other hand is a slightly more complicated style thrown in to fix a #main since it collapses since it isn’t floated while its contents are. That’s it for now.

Filling the Header

Now next is making the header. To be honest, this is quite easy. All you’ll have to do is either put in some text or put in an image. As for this tutorial, we’re going to use texts to fill it in.

First, insert this line in between the header div(<div id=”header”></div>):

<h1>{Title}</h1>

This is the Title of your blog. It’s the text you put in above your blog description. So Whatever you put in there will automatically be your blog’s header text. Of course you can hardcode it instead by replacing the {Title} part with whatever you want.

Now to style it, add these to you CSS(In between <style type=”text/css”> and </style>):

h1{
    font-size: 50px;
    margin: 50px 15px 0px;
    text-shadow: 1px 1px #ffffff;
    }

So yeah. That styles the h1 up. It gives it a font-size of 50px, a margin of 50px for the top, 15px for the left and the right, and 0px for the bottom. It also gives it a white text-shadow with an offset value of 1px horizontally(to the right) and 1px vertically(downwards).

Putting in contents

Now to get the posts in to the theme, you add these codes in between the content div(<div id=”content”></div>):

{block:Posts}

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

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

{block:Photoset}
<div class="post">
<center>{Photoset-500}</center>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photoset}

{block:Quote}
<div class="post">
<div class="quote">"{Quote}"</div>
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}

{block:Link}
<div class="post">
<center><h3><a href="{URL}" class="link" {Target}>{Name}</a></h3></center>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</div>
{/block:Link}

{block:Chat}
<div class="post">
{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">
<center>{Video-500}</center>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}

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

{/block:Posts}

So as you would notice, this is a relatively long strip of codes. But fret not as I would be trying to explain every bit of them. But before that, you would notice that there are 8 underlined parts in the code. Those are the divs of the 8 types of post of your theme. The first one, the text post, is wrapped inside the {block:Text}{/block:Text} tags so that anything inside them would only appear on Text posts. Likewise, anything that is in between {block:Photo}{/block:Photo} will only appear in Photoposts.The same functionality goes for the other types of post. So before going in-depth with the post types, let’s add a style to the post div first. Add these codes to your CSS(if you haven’t following this tutorial or if I have been vague about it, you can add these codes just above </style>):

.post{
    background: #ffffff;
    border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 15px;
    margin: 10px;
    border: 1px solid #989898;
    }
    
.post img{
    max-width: 440px;
    }

Those will put a white backgroud color for the posts, a rounded border, a padding of 15px, margin around it of 10px and a gray border. The .post img styles the images inside .post divs to not exceed 440px. If it’s not there, the photo post picture would over flow the post div. You can try deleting it to see what I mean.

If you have been following this tutorial right, you should get something like this:

Here’s the current codes as of this part. You can check it to campare what you might have missed.

Explaining the post types

You can skip this part if you don’t want to read boring explanations. But it’s a good idea to read this if you want to understand what’s in there.

Text Post

1. {block:Text}

2. <div class=”post”>

3. {block:Title}

4. <h3><a href=”{Permalink}”>{Title}</a></h3>

5. {/block:Title}

6. {Body}

7. </div>

8.{/block:Text}

Ok so the first line, as explained in a previous explanation above, is a tag used for text posts. Anything in between the foirst line and the 8th line will and will only appear on text posts.

The second line is the opening tag for the post div. It’s closing tag is located at line 7 and all the other posts are pit in a similar div.

The 3rd line is used with the 5th line to enclose the post’s Title. If the post doesn’t have a title, anything in between this 3rd and 5th line won’t appear. In other words, anything in between these would only appear if a post has a Title.

The 4th line is the post’s title. The <h3></h3> makes any text in between them bigger. It’s the tag for heading. There are also other heading tags like <h1></h1>, <h2></h2> and so on up to <h6></h6>. Inside the heading tag, there’s the title of the post, wrapped inside a link tag. The {Permalink} is the unique link of your post. On your blog, it’s rendered as a link so be sure to put it in a a link.

The 5th line is the 3rd line’s closing tag.

The 6th line is the body of the text post. It’s the text stuff you type in when posting.

The 7th and 8th lines are the closing tags for line 2 and line 1, respectively.

Photo Post

1. {block:Photo}

2. <div class=”post”>

3. <center>

4.{LinkOpenTag}<img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>{LinkCloseTag}

5. </center>

6. {block:Caption}

7. <div class=”caption”>{Caption}</div>

8. {/block:Caption}

9. </div>

10. {/block:Photo}

The first line is the Photo post’s unique opening tag that means anything in between the 1st line and the 10th line would only appear on Photo posts.

The second line is the opening div tag for the post. It’s closing tag is at the 9th line

The 3rd line and the 5th line centers anything in between them. yes, as in center, just like in Microsoft word.

The 4th line is the image uploaded as a Photo post. In <img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>, {PhotoURL-500}^* is the url of the image you posted while {PhotoAlt} is the alternative text that appears when that image isn’t loaded. The {LinkOpenTag}{LinkCloseTag} generates a link once you set a click-through link while creating the photopost. On your blog, it would render as a link tag.

The 6th line is the opening tag for captions on your photo post. Along with Line 8, anything inside these tags would only appear when there’s a caption for the photo post.

The 7th line is your photo post’s caption. You’ll notice that the {Caption} tag is inside another div tag with a class of caption. This will be used for styling captions later on in the tutorial.

The 9th and 10th div are closing tags for line 2 and 1, respectively.

Photoset post

1. {block:Photoset}

2. <div class=”post”>

3. <center>

4. {Photoset-500}

5. </center>

6. {block:Caption}

7. <div class=”caption”>{Caption}</div>

8. {/block:Caption}

9. </div>

10. {/block:Photoset}

Well, technically, it’s pretty much just the same as Photo posts. The only difference is the 4th line. {Photoset-500} renders the Photoset, of course.

Quote Post

1. {block:Quote}

2. <div class=”post”>

3. <div class=”quote”>”{Quote}”</div>

4. {block:Source}

5. <div class=”source”>{Source}</div>

6. {/block:Source}

7. </div>

8. {/block:Quote}

Just like the previous two, the 1st and the 8th line is the unique tag for quote posts. Anything in between them will only appear on Quote posts.

The second line is the opening tag for the post div which is then closed on the 7th line.

The 3rd line is the whole quote you posted. It’s in between a div with a class of quote, which will be styled later on in the tutorial.

The 4th and the 6th line are tags for the source. Anything in between them will only appear if you have specified the source of the quote you posted.

The 5th line is the source of the quote you posted, wrapped in a div with a class of source which, again, will be styled later.

Link Post

1. {block:Link}

2. <div class=”post”>

3. <center><h3><a href=”{URL}” class=”link” {Target}>{Name}</a></h3></center>

4. {block:Description}

5. <div class=”description”>{Description}</div>

6. {/block:Description}

7. </div>

8. {/block:Link}

The 1st and the 8th line is the tags for Link posts. Anything in between them will only appear on Link posts.

The 2nd and the 7th line are the tags for the post’s div.

In Line 3, {Name} is the name of the link you have specified while making the post. <a href=”{URL}” class=”link” {Target}> </a> is the link itself; {URL} is obviously the URL and {Target} is there to add a “target=”_blank”” to the link when you activated the Open in new tab option in Advance menu. All links will be opened either in a new tab or a new window when that is activated. The link was also given a class, link, for styling purposes later.

4th, 5th, and the 6th line renders the description put in along with the link posted. In the 5th line, {Description} is inside a div with a class of description, again, for styling purposes later.

Chat Posts

1. {block:Chat}

2. <div class=”post”>

3. {block:Title}

4. <h3><a href=”{Permalink}”>{Title}</a></h3>

5. {/block:Title}

6. <ul class=”chat”>

7. {block:Lines}

8. <li class=”{Alt} user_{UserNumber}”>

9. {block:Label}

10. <span class=”label”>{Label}</span>

11. {/block:Label}

12. {Line}

13. </li>

14. {/block:Lines}

15. </ul>

16. </div>

17. {/block:Chat}

The first and the 17th lines are tags for Chat posts. Anything in between them would only appear on chat posts. The second line and the 16th lines are the post div for chat posts.

The 3rd post and the 5th post are there to hide the 4th line({Title}) when there isn’t a title specified in the post. The 4th line is the Chat post’s title as specified while writing the post.

The 6th line, along with the 15th line makes a ul or an unordered list. This is what you do if you want to enumerate stuff in no particular order. Inside an unordered list, as seen in line 8 and 13, <li></li> are put to contain a single item to be enumerated. The ul on Line 6 has a class of chat for styling purpose.

Line 7 and 14 are the unique tags for lines. It’s there to specify a line of the chat. In Line 8, the opening <li> cones in and is closed on Line 13(</li>). As said in the previous paragraph, <li>’s are the items inside a list, but in here, you don’t have to make one <li> for each line. Tumblr does that for you so just one is alright. In the same line, {Alt} means either odd or even, meaning that the first line, and all the odd ones in the chat will have a class of odd or even for the even ones. user_{UserNumber} is just another class that can be used for further styling.

Line 9 is the opening tag for Labels(the name you enter in a chatpost) which is closed on line 11. Line 10 is the Label of that line. It’s classed as label for styling later.

Line 12 is the Line, or the dialog/whatever you call that of the Label. The rest of the lines, 13, 14, 15, 16, 17 are closing tags for 8, 7, 6, 2 and 1 respectively.

Video Posts

1. {block:Video}

2. <div class=”post”>

3. <center>{Video-500}</center>

4. {block:Caption}

5. <div class=”caption”>{Caption}</div>

6. {/block:Caption}

7. </div>

8. {/block:Video}

The video post codes are pretty much the same as the Photo Post’s. The first and the 8th line are tags for Video posts and the 2nd and the 7th line are the post div tags for the Video post.

The 3rd line is the Video({Video-500}^*) with a width of 500px. It’s wrapped with center tags(<center></center>) to center it, obviously.

The 4th to the 6th line is the Video’s caption as specified while making the post.

Audio Posts

1. {block:Audio}

2. <div class=”post”>

3. {AudioPlayerBlack}

4. {block:Caption}

5. <div class=”caption”>{Caption}</div>

6. {/block:Caption}

7. </div>

8. {/block:Audio}

Again, this is much like the Photo Post, the Photoset post, and the video post. The only difference is the 3rd line({AudioPlayerBlack}^*), which renders a black, normal audio player.

That’s it with the type posts!
* - stuff with this sign means that there are other variations of the code marked in the Theme Docs. Like for example, {PhotoURL-500} has another variation, {PhotoURL-400} which renders a URL of the same photo but with a width of 400px instead of 500px. The same goes for the other marked codes. Just check the Theme docs if you want to see them all.

Stlying parts of the post

Well as explained on the previous part, some stuff in the post codes were put inside divs for styling purposes. This is where we finally put them in. First stop is styling the Text post. In here, we need to put styles in h3(for titles), blockquotes, and unordered lists. To do that, add these codes to your CSS(Right before </style>):

blockquote{
    background-color: #feef7d;
    border-left: 4px solid #fec31b;
    padding: 3px;
    margin: 5px;
    }
    
blockquote blockquote{
    max-width: 95%;
    }

blockquote img{
    max-width: 95%;
    }

h3{
 font-size: 18px;
 font-weight: 700;
    }

Ok so the first block of styles, the one with blockquote, is obviously for blockquotes. It’s that thing that makes parts of your posts look different-ish. It’s that quotation mark button on your text editor. Well, we put in the lighter yellow(#feef7d) as it’s background and gave it a nice border on the left side with a color of the darker yellow in our palette(#fec31b). We also gave it a 3px padding on all sides and since blockquotes are by default, margined, we reduce that margin to 5px.

blockquote blockquote on the other hand are the blockquotes inside blockquotes. It’s common in Tumblr to have things like this, multiple blockquotes in side blockquotes, so it’s better to be prepared for them. Usually, they would over flow each other out until it overflows your post div and give a really nasty look on it. So for here, we gave it a max-width of 95%, meaning it would only and always be 95% of it’s contaner. It will never overflow it’s container blockquote.

The same goes for blockquote img. The same thing happens when a large image is inside a blocquote so this style will reduce the image’s width(if it’s bigger) to 95% of the container blockquote.

Now h3 is your text post’s title and we made it larger by giving it a font-size of 18px and making it bold by setting its font-weight to 700.

Once you click on the Update Preview Button, your text post, the one on the bottom most part, should look like this:

Next is Quote post. Remember that we have two things to style there, the div with a class of quote, and the one with the class of source. Now just add these codes right after the styles for the text posts, or just above the </style> again:

.quote{
    font-size: 25px;
    font-weight: 700;
    font-style: italic;
    color: #2daae2;
    }

.source{
    text-align: right;
    }

So yeah, the text inside the quote div will have 25px font-size, a font-weight of 700, which is equivalent to bold, is italicized, and its color is #2daae2(It’s that blue color in our palette).

The source on the other hand, will use the default size and colors for the theme so we won’t need to specify that much styles on it. But it’s aligned to the right. It should look like this once you Update your preview:

Next then is the chat post. Add these codes to your CSS, just before </style>, again:

ul.chat {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    }
.chat li {
    list-style-type: none;
    margin-left: 0px;
    padding: 3px;
    }
.chat li.odd {
    background-color: #2daae2;
    }
.chat li.even {
    background-color: #feef7d;
    border-left: 5px solid #2daae2;
    }
.label {
    font-weight: 700;
    }

Ok, so to make clear, ul.chat means an unordered list or ul that has a class of chat. It’s different from ul .chat(note the space) which means any element/div with a class of chat inside an unordered list/ul. Just clearing it out incase it’s confusing. Now ul’s has, by default, preset margins and paddings. But by putting in margin: 0 0 0 0; and padding: 0 0 0 0;, we elimenate these.

.chat li are the list items inside the element with a class of chat, which in this case is the ul. This is the styles for styles inside .chat in general. We set list-style-type to none to remove the bullets before every item. They have that by default. In connection to that, there are other valus for this other than none. You can put circle, square, upper-roman, etc. You can find all of the values available here.

.chat li.odd has specific styles for list items inside .chat that has a class of odd. If you would remember in the explanation part, we added a tag {Alt} as a class of the <li>, which either generates odd or even, depending on the <li>’s number. So for those <li>’s that has a .odd class, we put in #2daae2 as a background.

For .chat li.even on the other hand, we gave it #feef7d as the background and added solid 5px border that has the color of #2daae2, similar to .odd’s background color, to give it some weird effect that it’s connected to the line above it. BTW, you can change the solid part to either dashed, dotted etc. You can see the other possible values here.

This is how it should look like after you press the Update Preview button:

Next, the Link posts. Add these codes to your CSS again, yes, just before the </style>:

.link{
    font-style: italic;
    }
    
.link:after{
    content: "→";
    }
    
.description{
    border-top: 1px solid #989898;
    padding-top: 5px;
    }

We set the texts inside the link div to italic to make it look different. After that, in .link:after, we added an arrow to the right(alt+26) to signify that it’s a link that goes somewhere else or something like that.

The .description then has a border on the top which is 1px thick, is solid and is dark gray(#989898).

Lastly, we’ll be styling the caption div, but since it’s the same for the Photopost, the Video post, and the Audio post, we won’t be tackling them one by one. That would be useless. Instead, just add this last piece of stlye for the posts on your CSS(…just above the </style>):

.caption{
    font-style: italic;
    }

Yep, that’s it! We just set it to italic. Of course you can add other styles as well if you want to. That goes for the other styles as well.

Dates, Notes and Tags

OK, now it’s time to put in some the dates. Now I’ll be discussing two ways to do this: First is putting it outside the div post, meaning outside the box, and the other is putting them inside the box. The latter is more troublesome as it would involve copy pasting it on every post type. But I’ll discuss it anyway.

So if you want to add the Dates, notes, and tags outside the box, just copy these just before the {/block:Posts} part of your codes:

<div class="info">
<div class="date">
{block:Date}
Posted @ 
<a href="{Permalink}">{ShortMonth}. {DayOfMonth},{Year}</a> | 
{/block:Date}
{block:NoteCount}{NoteCount} <font color="#e84642">&hearts;</font> | {/block:NoteCount}
{block:Tags}<a href="{TagURL}" class="tag">{Tag}</a> |{/block:Tags} 
</div>
</div>

But if you want to add it inside the box, you’ll have to copy paste that to all of the post types. You’ll have to copy it 8 times. Here’s where you’ll have to copy/paste them and be sure to copy them above it. Above it means above the </div> parts since that would mean they’re inside the post div.

For Text post: find

</div>
{/block:Text}

And paste the codes above it.

For Photo post: find

</div>
{/block:Photo}

And paste the codes above it.

For Photoset post: find

</div>
{/block:Photoset}

And paste the codes above it.

For Quote post: find

</div>
{/block:Quote}

And paste the codes above it.

For Link post: find

</div>
{/block:Link}

And paste the codes above it.

For Chat post: find

</div>
{/block:Chat}

And paste the codes above it.

For Video post: find

</div>
{/block:Video}

And paste the codes above it.

For Audio post: find

</div>
{/block:Audio}

And paste the codes above it.

Ok now, we’ll style them, if you put it outside the box, paste these codes to your CSS, just before </style>:

.info {
 padding: 0px 3px 0px 20px;
 margin-bottom: 1px;
 text-align: left;
}

.tag {
 font-weight: normal;
 margin-right: 2px;
 font-style: italic;
 text-transform: lowercase;
}

.date {
font-size: 10px;
color: #666;
text-transform: uppercase;
font-weight: bold;
}

And if you decided to put it inside the box, use this instead:

.info {
 margin-bottom: 1px;
 text-align: left;
 border-top: 1px solid #989898;
}

.tag {
 font-weight: normal;
 margin-right: 2px;
 font-style: italic;
 text-transform: lowercase;
}

.date {
font-size: 10px;
color: #666;
text-transform: uppercase;
font-weight: bold;
}

So there’s not much different between those two set of styles other than the former has a padding on its left to push it a little towards the right and the latter has a border on the top to separate it from the rest of the post.

Aside from those, all those inside the .info div are aligned to the right and has a 1px margin on the bottom.

.tag div on the other hand has a normal font-weight, 2px margin on the right, is italicized and is transformed to lowercase. The .date div which contains the dates has a 10px font-size, is bold, transformed to uppercase and colored as #666666.

That’s it for the dates, notes and tags. If you put those outside the box, you should have something like this by now:

and if you decided to put it inside, it should look like this:

In this tutorial, I decided to put it inside the box, btw.

Putting Post notes

Now it’s time to put in the notes— I mean those reblog, Like and replied stuff that usually appears on the post pages. Post pages are btw called Permalink pages. Each post has a unique permalink page, and that’s where we’re going to put those post notes. So first, add these after {/block:Posts}:

{block:PostNotes}
<div class="post notes">
<h3>Posted on {block:Posts}{block:Date}{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} {/block:Date}{/block:Posts}</h3>
{PostNotes} 
</div>
{/block:PostNotes}

Being inside the tags {block:PostNotes}{/block:PostNotes} means it will only appear if the post has notes. You don’t have to worry about it appearing on the Index page either since it only appears on Permalink pages by default. Now the second line is just an indication that the post was posted at a certain time. You can change those into any of the variables available on the Theme Docs.

<div class=”post notes”> , as you can see has two classes separated by a space. This means that this div will get the characteristics of both the post div, and the notes div which will be styled next. {PostNotes} are the notes of your post, which is rendered as a set of an ordered list. We’ll be styling them later.

Now to style the post notes, add these to the rest of your CSS, right before </style>:

.notes img {
 vertical-align: middle;
}
.notes ol {
 margin: 0;
 padding: 0;
}
.notes li {
 list-style-type: none;
 border-bottom: 1px dotted #2DAAE2;
 padding: 3px;
 font-size: 10px;
 margin-left: 0px;
 }
 
.notes li:last-child {
 border-bottom: none;
}
.notes li a {
 font-weight: normal;
}

The first style, .notes img styles all the images that appears on the notes div. It’s usually the avatars of those who liked, reblogged, or replied to your post. They’re 16px by default and it needs more effort to make that bigger so I’ll save that for another tutorial.

.notes ol is technivally there to remove all the margins and paddings to the ordered list, since they have an annoying one by default.

.notes li, on the other hand styles every line of notes you have. It’s list type is set to none to remove the bullets, has a 1px, dotted border at the bottom, a 3px padding, and a font-size of 10px. .notes li:last-child removes the border of the last line of note by setting the border-bottom to none.

.notes li a sets all the links, usually the links to the blogs who noted you, to normal font-size.

If you did it right, your notes on your permalink pages should look like this:

Adding Paginations

Now this would be the last part for the content section of the theme. And it’s actually very easy. All you’ll have to do is add these set of codes just after {/block:PostNotes}:

<div class="pagination">
<center>
{block:Pagination}

 
  {block:PreviousPage}
  <a href="{PreviousPage}">« Previous</a>
  {/block:PreviousPage}
 

  {block:JumpPagination length="5"}
  {block:CurrentPage}

  <span class="current_page">{PageNumber}</span>
  {/block:CurrentPage}
  {block:JumpPage}

  <a class="jump_page" href="{URL}">{PageNumber}</a>

  {/block:JumpPage}
  {/block:JumpPagination}

 
  {block:NextPage}
  <a href="{NextPage}">Next »</a>
  {/block:NextPage}

  {/block:Pagination} 
  </center>
</div>

That’s it! One thing you need to note in this code is the underlined number(5). That’s the number of pages that would appear as Jump Pagination links in your blog. 5 means the first 5 pages of your blog will have a link in your page.

That’s it! We’re now done with the content part! If you did these steps right and decided to put the Dates and stuff inside the box, this is how your theme codes should look like: Preview Codes.

Sidebar

Now it’s time for the sidebar! What we’ll be putting in the sidebar would be your avatar, your description, some links and an extra box for anything you would like to add.

Now first, add this codes to your sidebar div, in between <div id=”sidebar”> and the next </div> to it:

<div class="sidebox">
        
    </div>
<div class="sidebox">
        
    </div>

As you can see, there are two divs with the class of sidebox. The first one is where we’ll be putting in your Avatar, description and links while the other sidebox will be for you to fill in. You can also add as many sidebox as you want.

But before adding stuff in it, let’s style it first. Add these styles to your CSS, just before </style>:

.sidebox{
    background: #ffffff;
    border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 15px;
    margin: 10px;
    border: 1px solid #989898;
    }

Basically, it’s pretty much the same as the post div. You can alter the styles if you like and if you’ve finally understood the basics of CSS in this tutorial. That’s it! We now proceed to the contents of the sidebar.

For the portrait/avatar, add this inside the first sidebox, meaning inside the first <div class=”sidebox”> </div>:

<center><img src="{PortraitURL-128}"></center>

That’s your portrait/avatar which is 128 by 128 px in size. There are other sizes in the theme docs if you want to use them instead.

Now to add your description. just add this right after the </center> you just added above:

<br>
{Description}

<br> is a line break so it would put a space between your Avatar and your Description. {Description} is your description you put in the Description area.

Now to add the links, specifically a link to your index page, archive, rss, and ask page. Of course you can add as much link as you want but for this tutorial, this is the only stuff we’ll be putting in. Add these right before the {Description}. That would make it appear before the Description abviously. Consequently, if you want to put it after the description, wou’ll have to put it after the {Description}. Or if you want to put it Before your Avatar, put it before the <center><img src=”{PortraitURL-128}”>:

<center>
<a href="/">Home</a> |
<a href="/archive">Archive</a> |
<a href="{RSS}">RSS</a> |
{block:AskEnabled}
<a href="/ask">Ask</a>
{/block:AskEnabled}<br> 
</center>

So thefirst and the last lin obviously centers the whole links within the box. As for the second line, it’s the link for your homepage; the third, the link to your archive; the 4th, the link to your RSS; and the 6th, the link to your ask page. The 5th and 7th line are there to hide the ask link if it isn’t enabled.

That’s it for the First sidebox.

The second sidebox ca contain anything you like. More links, random GIFs you like, disclaimers, etc. For this tutorial, we’ll just be putting a disclaimer. I put these inside the second sidebox div:

<h3>Disclaimer</h3>

This blog is a preview for a Theme Making Tutorial Tutorial Posted on Tutobx.com. Anything posted in this blog is not owned by the aker of the tutorial unless otherwise stated.<br>

Please, just like most of the stuff reblogged here, refrain for reblogging stuff and heartleslty removing its source/credits. That’s evil.

As you can see, they’re random stuff I just thought of. Likewise, you an put anything you want in it.

Final touches

Ok, so for the final touches, we’ll be adding a few more lines of codes to your theme codes.

Blog Title

Add this line of code just after the <head> part of your codes to add your blog’s title at the Title bar:

<title>{Title}</title>

This will appear usually on the tab you’re using if you’re on Gchrome.

Favicon

Favicons are those tiny icons that appear on the tabs of your browser. It’s like your blog’s tiny logo, like Tumblr’s letter “t” or Facebook’s letter “f” or twitter’s small bird. Add these codes to right after the <title>{Title}</title>:

<link rel="shortcut icon" href="{Favicon}">

It defaults as your avatar, btw. If you don’t want that, you can change it to any image you like. Just make sure that it’s just small as not to add up to load time.

Other <head> stuff

Not much to explain here. Just add these codes right after the previous codes:

<link rel="alternate" type="application/rss+xml" href="{RSS}">
 {block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

The first line is for your RSS. The 2nd and the 4th line is there to hide the 3rd line if you haven’t specified a Description for your blog. The 3rd line on the other hand will be what Google will show people when your blog shows up on a search.

Ok That’s it! The wrap ups this Theme Making Tutorial! Here’s a screenshot of what this tutorial produced:

If you want to see the preview of the codes this tutorial has worked up on, check this link. And lastly, here’s the Final codes for the theme: Code Preview.

Now if there’s anything you didn’t get about this tutorial or anything I’ve been very vague about, forgive me, and the ask box is always open for inquiries. Also, if you’ve found any mistake or error in this tutorial, please don’t hesitate to give me a note since that would really save a lot of people, maybe even the world from destruction.

If in any case this tutorial has helped you, note that you don’t really have to credit me or anything. But I’d be very grateful if you do so. And who know, maybe if I liked what you did, you can be in this blog’s Fortnight blogs.

Another thing, donations would be very much appreciated. Lol. That’s all! Hope you made it and just send me an ask if you don’t get anything. No seriously, I’ll be glad to help.

91 notes | Comments

Planning

Choosing the colors

The Skeleton

Styling the boxes

Filling the Header

Putting in contents

Explaining the post types

Stlying parts of the post

Dates, Notes and Tags

Putting Post notes

Adding Paginations

Sidebar

Final touches

Tumblr Theme Tutorial: 2-column theme(UPDATED!)

Planning

Choosing the colors

The Skeleton

Styling the boxes

Filling the Header

Putting in contents

Explaining the post types

Stlying parts of the post

Dates, Notes and Tags

Putting Post notes

Adding Paginations

Sidebar

Final touches

Comment

Notes

Questions! Questions!