Tumblr Theme Tutorial

Tumblr has provided a tutorial for making your own Tumblr theme. Click on this link to proceed. But if you’re not comfortable with too much codes and lots of text, I’ll try my best to help you with that. You still need to familiarize yourself with some of the codes there though. :-)

Contrary to my previous tutorial, my codes will no longer be in image form. I’ll be sharing them with you in text form. You still need to know a bit of HTML and CSS before you continue with this tutorial.

Part 1: Make a draft

This is the first thing I do. I draw on paper what I have in mind and I start from there. We will be following this layout for this tutorial:

It doesn’t have to look really good, it’s just a draft. So here we have a sidebar and another part for our entries. I forgot to put the title so we’ll put it above the display image later.

Part 2: Choose your colors

My standard colors would be black, gray, and white. But we’ll look for a good color palette to use. COLOURlovers is the best place to look for palettes. For this tutorial, we will be using this color palette:

Part 3: Coding

After picking our colors, we can now start with our layout. But before proceeding to the actual positioning of contents and styling of body properties, you first need to learn the meta tag.

3.1 The Meta Tag

This tag is useful for custom colors, fonts, and images. It is placed inside the <head> tag.

<meta name="color:Background" content="#000000"/>
<meta name="image:Background" content=""/>
<meta name="font:Body" content="Helvetica"/>

This tag allows you to change your layout’s colors without having to mess with your code a lot of times.

We will be defining the following meta tags for this tutorial:

Background Color
Body Text Color
Body Text Font
Link Color
Link Hover Color
Header Color

<meta name="color:Background" content="#000000"/">
<meta name="color:Text" content="#000000"/>
<meta name="font:Text" content="Helvetica"/>
<meta name="color:Link" content="#EC008C"/>
<meta name="color:Link Hover" content="#00ADEF"/>
<meta name="color:Header" content="#FFF200"/>

Clicking on the appearance tab of your Customize page will show you this:

3.2 Layout Essentials

We first need to build the colors and text of our layout. Declare properties for the body font and colors, and also for the links.

body {
 font-family: {font:Text};
 font-size: 12px;
 color: {color:Text};
 background-color: {color:Backgroun d};
}

a {
 color: {color:Link};
 font-weight: bold;
 text-decoration: none;
}

a:hover {
 color: {color:Link Hover};
}

3.3 Positioning the divs

Referring to our draft, our layout has two parts: the sidebar and the content area. We will use CSS to position both divs on the page.

.sidebar {
 position: absolute;
 top: 10px;
 left: 10px;
 width: 200px;
 padding: 10px;
 background-color: #FFFFFF;
}

.content {
 position: absolute;
 top: 10px;
 left: 240px;
 width: 500px;
 padding: 10px;
 background-color: #FFFFFF;
}

To make both divs appear on the page we will then move to our HTML code.

<div class="sidebar">
{Description}
</div>

<div class="content">
{Description}
</div>

3.4 Adding Content

Let us now add the codes to make our posts appear in our content box.

 {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">
 <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 photoset">
 <center>{Photoset-500}</center>

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

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

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

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

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

 {block:Audio}
 <div class="post audio">
 {AudioPlayerBlack}

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

To make anything appear before the start of our posts, add the code after {block:Posts} and before { block:Text}. For this tutorial we are going to show the Date, Time, No. of Notes, and the Permalink for each post. I’m going to declare a few more properties in our stylesheet:

.postheader {
 border-top: 1px solid #000000;
 border-bottom: 1px solid #000000;
 display: block;
 font-weight: bold;
 font-size: 18px;
 margin-bottom: 5px;
 padding: 1px;
}

.date {
 color: #00ADEF;
 padding: 2px;
}

.time {
 color: #EC008C;
 padding: 2px;
}

.notes {
 color: #000000;
 padding: 2px;
}

.permalink a {
 background-color: #000000;
 color: #FFF200;
 float: right;
 padding-top: 0px;
 padding-bottom: 0px;
 padding-left: 5px;
 padding-right: 5px;
}

After declaring above properties, input the codes in your markup to make them appear on your page:

<div class="postheader">
 <span class="date">{ShortMonth} {MonthNumberWithZero} {Year}</span> <span class="time">{12HourWithZero}:{Minutes} {CapitalAmPm}</span> <span class="notes">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</span> <span class="permalink"><a href="{Permalink}">Permalink</a></span>
</div>

3.5 Styling posts

If you know how to “read” codes, you will notice that the divs for our posts start like this — “post text,” “post photo,” etc. Since they have been given their div names, we just need to adjust their properties in our stylesheet.

Add this code to your stylesheet so your posts will have a 10px allowance from the top and bottom.

.post {
 margin-top: 10px;
 margin-bottom: 10px;
}

Let’s begin with the quote post. We have “post quote” and “source” in our HTML. So we’re going to define those in our stylesheet and add properties.

.post.quote {
 font-size: 16px;
 font-weight: bold;
 letter-spacing: -1px;
}

.source {
 font-size: 12px;
 font-weight: normal;
 text-align: right;
}

Link posts. We have “post link,” “link,” and “description.”

.link a {
 background-color: #FFF200;
 color: black;
 padding: 5px;
 font-size: 16px;
}

.link a:hover {
 background-color: black;
 color: #FFF200;
}

And I also centered the link using HTML.

Chat posts only have two divs — “chat” (ul) and “label.” Our chat post looks like this before we apply changes to our stylesheet:

Let’s add a few codes in our stylesheet to make it look a lot better. We will get rid of the bullets and make the “odd” posts cyan, and the “even” posts magenta. We will also make the names appear in boldface.

ul.chat {
 list-style-type: none;
}

ul li.odd {
 color: #00ADEF;
}

ul li.even {
 color: #EC008C;
}

.label {
 font-weight: bold;
}

Lastly, let’s make our text post look a bit better by adjusting our title and code (or reblogged post). It looks like this for now:

h3 {
 font-size: 16px;
 text-transform: uppercase;
}

blockquote {
 margin: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 padding-right: 0px;
 padding-left: 20px;
 color: #666666;
 border-left: 3px solid #00ADEF;
 font-size: 11px;
}

3.6 The Sidebar

Not a lot of adjustments need to be arranged for the sidebar, we just need to add more content. Let’s add the header, our display image, and some links (RSS, archive, and navigations). We can also make it stay in place as we scroll through our content. Let’s first declare styles for our header and adjust a bit of the sidebar code.

h1 {
 color: #FFF200;
 text-shadow: 1px 1px 4px #000000;
 text-transform: uppercase;
 letter-spacing: -3px;
 font-size: 50px;
 margin: 0px;
}

.sidebar {
 position: fixed; /* We changed this part */
 top: 10px;
 left: 10px;
 width: 200px;
 padding: 10px;
 background-color: #FFFFFF;
}

And as you can see, we are now able to scroll through our page without moving our sidebar. Let’s add in the links and the profile picture.

<div class="sidebar">

<p align="center"><a href="{RSS}">RSS</a> | <a href="/archive">Archive</a> | <a href="/mobile">Mobile</a> | <a href="/random">Random</a>

<h1>{Title}</h1>

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

<p align="left">{Description}

<p align="center">{block:Pagination}{block:PreviousPag e}<a href="{PreviousPage}">PREV</a>{/block:PreviousPage} |  {block:NextPage}<a href="{NextPage}">NEXT</a>{/block:NextPage}{/block:Pagination}

</div>