Monique Tendencia - Updated Theme Tutorial

Updated Theme Tutorial

First off, you need to have basic knowledge with CSS and HTML before moving on with this tutorial. I will dedicate one portion of this tutorial for a brief explanation of both in case you have no time or you really just want to make a theme of your own.

Tumblr has an official page for its theme documents. It basically highlights most of the codes I will be talking about. Better go and read it if you want to understand this tutorial properly.

Sketching your Idea

See, it doesn’t have to be clean. We have two parts in this layout – the entries section and the sidebar.

Choosing a color palette

Most of my layouts just have a simple black, white, and gray motif. But for tutorial purposes, let us look for a nice palette from COLOURlovers.

Coding

Difference between HTML and CSS

We are going to deal with two different types of codes in this tutorial – HTML and CSS.

This is how a CSS code looks like:

body {
background-color: black;
color: white;
}

All CSS codes go inside this HTML tag:

<style type=”text/css”>

*insert CSS code here*

</style>

Anything with pointy brackets is considered HTML. Take for example, this code:

<center><img src=”urlhere”></center>

All HTML codes I will be discussing in this tutorial are supposed to go inside the body HTML tag:

<body>

Everything goes here

</body>

A note

Don’t forget to click “Use Custom HTML” from the Theme tab of your Customize page.

The Meta Tag

This tag is used so you can easily change the content of your theme without having to mess around with your codes too much. It’s like setting presets for colors, fonts, and images of your theme. Anytime you want to change them, you can just click on the appearance tab. This tag is placed inside <head>…</head>

Let us define a few properties for our theme:

Background Color
Background Image
Text Color
Text Font
Link Color
Link Hover Color
Header Color

<meta name=”color:Background” content =”#222222”/>
<meta name=”image:Background” content=”“/>
<meta name=”font:Text” content=”Helvetica”/>
<meta name=”color:Text” content=”#333333”/>
<meta name=”color:Link” content=”#2EB3FE”/>
<meta name=”color:Link Hover” content=”#FF038A”/>
<meta name=”color:Header” content=”#CDFF46”/>

It should look like this when you click on the Appearance tab:

Basic CSS Codes

We need to define the properties for the basic parts of our layout. That would be the background and the text.

body {
background-color: {color:Background};
background-image: {image:Background};
font-family: {font: Text};
font-size: 12px;
color: {color: Text};
}

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

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

a img {
border: 0px;
}

Positioning the divs

To position the divs or “boxes” of our page, we will use a few CSS codes.

.content {
position: absolute;
top: 10px;
left: 10px;
width: 550px;
padding: 10px;
background-color: white;
}

.sidebar {
position: absolute;
top: 10px;
left: 590px;
width: 185px;
padding: 10px;
background-color: white;
}

And some HTML codes to make them appear on the page (remember that HTML codes are placed inside the body tag).

<div class=”content”>
…
</div>

<div class=”sidebar”>
…
</div>

If you’re following this tutorial properly, you should end up with something that looks like this:

Here’s an image breakdown of how your code should look at this point of the tutorial:

Displaying Posts

Since we all know where certain stuff are supposed to be in, we can start adding content to our page. Here’s the code to show all the posts in your page, the ask posts display by default.

{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”>{LinkOpenTag}<img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>{LinkCloseTag}
{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”>
“{Quote}”
{block:Source}
<div class=”source”>{Source}</div>
{/block:Source}
</div>
{/block:Quote}

{block:Link}
<div class=”post”>
<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”>
{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}

Unlike the old tutorial, I will be tackling the post types one-by-one. That way, you’ll be able to understand the codes more, and you can edit it to your liking too. You can skip this part if you’re all for defaults though.

Text Posts

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

<h3> - This stands for Header 3.
{Permalink} - This is a link to the post index page. Or in simpler terms, it links you to the post’s own page where you can see the notes and the reblog button can be seen on the upper right corner.
{Title} - Pretty much self-explanatory. If you don’t want to display the titles of your text posts, you can remove it. I don’t see why you would though.
{Body} - Let’s not explain this one anymore. You can add any tag around it if you wish. I’m sticking to the default.

Photo and Photoset Posts

{block:Photo}
<div class=”post”>
{LinkOpenTag}<img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>{LinkCloseTag}
{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}

{LinkOpenTag} and {LinkCloseTag} - When posting photos, Tumblr gives you the option to link the photo somewhere or credit its source. This tag does the job of linking that photo from your page to its source. Click-through(s) are what they’re usually called.
{PhotoURL-500} - You can change the value to 400, 200, 100, and 75sq. It determines how big the photo output would be in your blog.
{PhotoAlt} - In cases where your photo post won’t load, this gives your photo an alternative text, giving people an idea of what the photo is about. It’s usually the caption of your photo.
{Caption} - If you like writing long captions or descriptions for your photos, you shouldn’t leave this one out.
{Photoset-500} - Value can be changed to either 400 or 250.

Quote Posts

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

{Quote} - Non-HTML formatted text of your quote post. You can add anything around it. I choose to add quotation marks so they can be differentiated from text posts.
{Source} - Also non-formatted text. You can choose to add an em-dash or an arrow before it to indicate that your quote is from somewhere else. Otherwise, it’s just going to look like regular text.

Link Posts

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

{URL} - The link you specified when you posted the link update
class=”link” - You need to define the .link property in your CSS if you find the need to style this post. You can change the font size, font color, or even add a shadow
{Target} - This outputs as target=”blank” It indicates whether clicking on the link opens it on a new page, or on the same window
{Name} - Any name/title you assigned to the link

Chat Posts

{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:Lines} - Renders every line of the chat post
{Alt} - Odd or even for each line
{UserNumber} - An integer assigned for the line
{Label} - The name assigned for the current line of the post
{Line} - The current line of the chat post

Video Posts

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

{Video-500} - Can be changed to either 400 or 250

Audio Posts

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

{AudioPlayerBlack} - This can be changed to Grey or White. Yes, the grey should be spelled that way.

Date and Time, Notes, and Tags

Everything that we wish to appear before posts should be placed after {block:Posts} and before {block:Text}. Everything after the posts should be placed after {/block:Audio} but before {/block:Posts}

In the example I am going to show you, I will be using {TimeAgo} instead of the usual date and time. I will also be showing how to display tags and notes. Everything will be at the bottom part.

We need to define a few CSS properties before we place them on the HTML part.

.notesandtags {
padding: 5px;
border-top: 1px dotted #CCCCCC;
margin-bottom: 5px;
margin-top: 5px;
}

.tags {
font-size: 10px;
float: right;
text-transform: lowercase;
}

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

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

The classes and properties are pretty easy to understand. Let’s move on to the HTML part. Remember that we need to put it before {/block:Posts} and after {/block:Audio}.

{/block:Audio}

<div class=”notesandtags”>
<div class=”time”>{block:Date}Posted <a href=”{Permalink}”>{TimeAgo}</a>{/block:Date}
<div class=”tags”>{block:Tags}/<a href=”{TagURL}” class=”tag”>{Tag}</a>/ {/block:Tags} {block:NoteCount}{NoteCount} <font color=”#FF038A”>&hearts;</font>{/block:NoteCount}</div>
</div>
</div>

{/block:Posts}

If you want to customize how the dates, notes, and tags are displayed, click this link. It’s easy to understand if you actually read it and not treat it as random text. ;) Oh, before I forget. Here’s a screenshot of how it’s supposed to look if you got the codes right.

Styling Posts

As a short recap, we have managed to position our divs and set boxes for where the other content should go. We have managed to display the notes, tags, and dates. And of course, our posts are already visible. For the next part, we will discuss how to style these posts. They look plain right now, we’re going to fix that with a few CSS codes. I won’t be explaining so much though. Just a few lines of code and screenshots.

Text Posts

Text posts look like this without styling:

h3 {
font-size: 20px;
margin: 0px;
}

blockquote {
font-size: 11px;
background-color: #EEEEEE;
padding: 5px;
border-left: 5px solid #CDFF46;
margin: 5px;
}

Quote Posts

.quote {
font-family: Georgia;
font-size: 18px;
font-style: italic;
color: #FF038A;
}

.source {
margin-left: 25px;
}

Link Posts

.link {
background-color: #FF038A;
color: white;
padding: 5px;
font-size: 16px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-weight: normal;
font-style: italic;
}

.link:hover {
background-color: #CDFF46;
color: #222222;
}

Chat Posts

ul.chat {
margin: 0;
padding: 0;
}

.chat li {
list-style-type: none;
margin-left: 0px;
padding: 3px;
}

.chat li.odd {
background-color: #CCCCCC;
margin-bottom: 1px;
color: #222222;
}

.chat li.even {
background-color: #222222;
margin-bottom: 1px;
color: #CCCCCC;
}

.label {
font-weight: bold;
}

Sidebar

Now that we’re done with everything for posts, we can move on to the sidebar. I’ll be putting in the blog title, thumbnail, description, and the navigation.

.title {
font-size: 30px;
font-family: Georgia;
letter-spacing: -2px;
color: #FF038A;
}

<div class=”title”>{Title}</div>

<p align=”center”><img src=”{PortraitURL-128}”>

<p align=”center”>

{block:AskEnabled}<a href=”/ask”>{AskLabel}</a> // {/block:AskEnabled} {block:SubmissionsEnabled}<a href=”/submit”>{SubmitLabel}</a> // {/block:SubmissionsEnabled} <a href=”{RSS}”>RSS</a> // <a href=”/mobile”>Mobile</a> // <a href=”/archive”>Archive</a>

{block:Description}<p>{Description}{/block:Description}

<p align=”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}

Done!

That rounds up this new tutorial. It’s more extensive compared to the previous one and this has more images. AND I’m posting the final code so you can study it. Download here. Remember to credit and please don’t copy this tutorial and claim it as yours. Send me an e-mail if you have other questions.

Comments

Updated Theme Tutorial

Sketching your Idea

Choosing a color palette

Coding

Difference between HTML and CSS

A note

The Meta Tag

Basic CSS Codes

Positioning the divs

Displaying Posts

Text Posts

Photo and Photoset Posts

Quote Posts

Link Posts

Chat Posts

Video Posts

Audio Posts

Date and Time, Notes, and Tags

Styling Posts

Text Posts

Quote Posts

Link Posts

Chat Posts

Sidebar

Done!

About

Tutorials