(semi-hiatus) ettudis/ browse/ history/ ask/ Contains theme-related question and answers, html and css tutorials, resources of all types.

Themes are located on the website (click the link labeled "content", it will drop down to link to "tumblr themes").

Theme-making Tip #1

The order of how I code everything

  • basic HTML body
  • general body CSS
  • infobar HTML + CSS
  • post (index page) HTML + CSS
  • permalink HTML + CSS
  • content source/tags HTML + CSS
  • notes HTML + CSS
  • meta tags

When I code the CSS, I actually just start with a colour theme right away and just insert the hex codes. Then, at the very end, when I’m done the entire theme, I change all colours into meta tags and add in any booleans for the theme. I found that this procedure works easiest and fastest.

Basics of Single-size Multi-Column Themes

This tutorial will cover how to make themes with more than one column in which the posts are nested (aka. Grid theme), in particular, themes in which the columns are in only one specified width. 

I have not yet made a theme in which the column sizes change thus I do not how to do it, but the script are the same, you probably just need to add extra features to the script so perhaps you can figure it out on your own. 

Anyways, let’s get started. 

The Concept

We are going to use one div layer to wrap ALL the content, and then another div layer to wrap each post. Then, we use the CSS element, float:left; so that each post is stacked next to each other. The Masonry script will be used so that the post becomes nested. So we’re going to seperate this tutorial into three main ideas:

  • The HTML: set-up
  • The CSS: making things stack into columns
  • The script: incorporating masonry to make it nester

The HTML

In my tutorial series, I mentioned there were two ways to set up the posts block, one with tables and another with div layers. However, in those lessons, I also mentioned to not put div layers around the post blocks (only inside) since it interrupts with the infinite scrolling script by cody sherman.

Well, scrap all that. It won’t matter since we’re not using the same infinite scrolling script. We’ll be working with div layers and you’ll need two. One will be outside the post block, to wrap around all posts, and the other, will be for each individual post (inside the post block). Similar to this…

<div id ="content">{block:Posts}
   
<div class="container">

{block:Text}
{block:Title}<h1>{Title}</h1>{/block:Title}       
{Body}
{/block:Text} ...

Please, please, PLEASE use your own wrapper (div layer) IDs.

The CSS

In the CSS, you want to make the content wrapper be big in accordance to the number of columns you want and the size of your columns. For example, you plan to have 400px wide posts (container wrapper), and want two columns, you would need at last 800px width for your content wrapper. Make sure you take into consideration, the margin and padding of your layers (ie. if you had 5px margins, your content wrapper should be about 820 or more,). Just trial and error until you get the right look! 

Next, you need to make sure your container wrapper is floated to the left:

.container{

float:left;

}

The Script

Next, you are going to incorporate the script so that it displays the way you want it to. 

First, you need to include to external script links (place codings anywhere between <head> and </head>. One link is to jquery and the other is to the masonry script. 

<script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
<script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>

Then, you need to include the basic script required for the masonry:

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry({
itemSelector : ".container",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>

The important parts are bolded, replace with the names of your wrappers/div layers. 

Ta-da! You’re basically done. This all you need for masonry to work. Simple, eh? Though I think most people are familiar with multi-columns in combination with infinite scrolling, but the above code DOES NOT include infinite scrolling, so you will need to add in pagination codes (explained here). 

There are many other options, code that customizes the masonry, you may include (add after itemSelector : ‘.container’,) as well as other methods, effects that you can add to masonry, such as infinite scrolling which I will explain here. 

Masonry with Infinite Scrolling

First, you need to add a link to a masonry-specific infinite scrolling script. 

<script src="http://static.tumblr.com/twte3d7/qNulm663d/infinite.js"></script>

And so, we have the basic script:

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry({
itemSelector : ".container",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>

So, you need to add additional codes to render infinite scrolling:

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry(),
$('.masonryWrap').infinitescroll({
itemSelector : ".container", 
navSelector : "div.navigation",
nextSelector : ".navigation a#next",
bufferPx : 10000,
extraScrollPx: 10000,
loadingImg : "",
loadingText : "",
},
function() { $('#content').masonry({ appendedContent: $(this) });
});
});</script>

For some reason not specified on the site, it is necessary to include all those options (buffer, loading text and images, next page selectors) for infinite scrolling to work. As well, additional HTML (for the next/previous pagination codes) is needed:

<div class="navigation">
{block:Pagination}
{block:NextPage}<p id="page_nav"><a style="float:right" href="{NextPage}" id="next">Older ?</a>{/block:NextPage}
{block:PreviousPage}<a style="float:left" href="{PreviousPage}">? Newer</a></p>{/block:PreviousPage}
{/block:Pagination}
</div>

But since we’re working with infinite scroll and do not want pages, we can just use CSS to hide the codes:

.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
#infscr-loading {display:none;}
.navigation {display:none!important;} 

Now, because everyone has different screen resolutions, people with bigger screens meet a problem. Sometimes, the content at first will not reach the bottom of the window on bigger screens, and since infinite scrolling relies on the whole scroll aspect, the next page content will not load (since no scrolling is in effect).

To prevent this, I add an extra div layer with no content inside the div layer…

<div id ="over"></div>

And specify a certain height in the CSS so that it will stretch the screen.

#over{
height:2000px!important;
position:absolute;
top:0px;
left:0px;
width: 100%;}

So in the end, you will have the following for your masonry with infinite scrolling codes:

  • infinite scrolling script
  • jquery script
  • masonry script
  • basic masonry initial codes (with infinite scrolling method and options)
  • navigation HTML
  • navigation CSS
  • stretcher div layer HTML

The End

I think I’ve covered all the basics. If you have any questions, feel free to ask, though I did not develop this script nor am I too familiar with it, so I can’t guarantee thorough answers. My advice is to TRIAL AND ERROR! Good luck, and happy coding!

How To Make Tumblr Themes: Part V

Introduction

What we did previously:

What we will cover in this tutorial

  • Pagination/Navigation
  • Infinite Scrolling
  • Hover-over permalinks
  • Tips & Tricks on Design Elements: colour customization, blockquotes, geometry and minimalism, style and consistency, rounded corners, and functionality. 
  • Quick Note: Setting up a Theme Blog 

Websites and documents we will consult (as always):

Side Note

Before we being, some of the design element tips and tricks were gathered and expanded on (in general terms) from my past critiques of other theme blogs. 

Pagination/Navigation

This is how visitors can go back and view previous entries/pages. The blocks for this are {block:Pagination} and {/block:Pagination}. There are three parts, one is the forward button, one is the backward button, and the other is what could be in between (whether it shows the page numbers, or “page/total page”). 

Here is the HTML coding for if you want to show current page/total page:

And the live preview:

Now, if you want to display page number up to, say, 5 pages, the HTML will look similar to this:

The blocks are self-explanatory. If you want to display 5 page numbers, you insert length=”5”. The stuff inside the JumpPage blocks are the page numbers in which if you click on it, it will take you to that number.

The live preview looks like:

Here, it only shows 2 pages because there are only two pages in this preview. If there were 5 pages or more, it would show all the 5 pages. 

My CSS looks like this:

Infinite Scrolling

The other option in terms of navigation through pages is infinite scrolling. Now, the developer of infinite scrolling on tumblr is Cody Sherman and he has posted an easy tutorial on his website. I’m not going to write down the instructions here since I’d just be repeating him practically in verbatim. 

But I do want to mention that his coding does not allow for any div layer to be wrapped around the layer of the infinite scrolling (<div class=”autopagerize_page_element”>. So, either work with tables or make the div layers position the entries inside the autopagerize layer, as explained in part ii of the tutorial series. 

Hover-over permalinks

What am I talking about? These are the blocks that transition/fade in when you hover over something, such as the description in my most current theme, Lionheart and the dates in my dance with death theme. What we’re going to utilize is the webkit transition, opacity effect and the pseudo-element, :hover, to achieve this effect. 

The idea is that you want to set a div layer (let’s term this layer A) at zero opacity, zero height and width so that it does not appear normally. Then, you add a pseudo-element, :hover, for the div layer that wraps around layer A and the content, so that layer A appears at 100% opacity and a set width and/or height. 

Here is a visual of my HTML mark-up:

The post div layer is going to be my all-content-wrapper while the date div layer is the one that I want to appear on hover. 

Here is a visual of my CSS mark-up:

Now, the single #date selector specifies that when there is no hover on the post, the opacity, is 0. The first four lines just specifies opacity for different browsers.

opacity – the highest value would be 1 which is equivalent to the image being 100% visible. As you decrease from 1 ~ 0, the image becomes less visible.
filter – this is specifically for IE. The highest value is 100 which makes the image 100% visible. As you decrease from 100~0, the image becomes less visible.
-moz-opacity – this is specifically for mozilla firefox and works the same way as “opacity”.
-khtml - this is for the KHTML layout engine (not really needed but I included it anyways)

Then, the web-kit transition (three lines for three browser-types) makes the fade-in smoother.

Those properties and values are written in shorthand because it’s much simpler and clean to look at. Taking the selector -moz-transition as an example…

-MOZ-TRANSITION: ALL 0.9 EASE;

The first part, “ALL”, is property. The second part, “0.9”, is the duration. The third part, “ease”, is the timing function.

  • transition-property – the values can be either none or all. “None” means there will be no transition and “all” means that there will be a transition.
  • transition-duration – the value (in seconds) will specify how long the transition will take. If you want a slow transition, use a larger value (ex: 1s) but if you want a quicker transition, use a smaller value (ex: 0.5s)
  • transition-timing-function – this property specifies how the animation will proceed over time. There are 6 values for this: linear, ease, ease-in, ease-out, ease-in-out and cubic-bezier(x1, y1, x2, y2).

We’re only going to look at the first 5 values because they’re the most basic, plus cubic-bezier is a bit difficult to explain.

  • linear – even speed throughout the transition
  • ease – starts out slow, speeds up, then slowly stops
  • ease-in – starts out slowest, then speeds up and stops
  • ease-out – starts out fast, then slows down and stops
  • ease-in-out – starts out slow, then speeds up and stops (slightly faster than “ease-in

The padding, background and margin are all positioning and formatting factors. The second selector, #post:hover #date, specifies that when there is a hover on the post layer, the #date selector will appear with 100% opacity.  

Now, the height and width are set at zero for the single #date selector so that when it is on hover, it will gradually unfold to be the specified width and height. If you do not specify a width or height, it will just fade-in (appear). 

For example, in my dance with death theme, the dates fade-in (no width or height is specified) whereas in my icarus theme, the dates unfold/unravel because a width  is specified. Note that the width and height DO NOT come in pairs. You can have one or the other, or both. 

Lastly, you can see that since the only content inside the date layer is in links, I just formatted the links through the #date a selector.

The stylization looks like the following:

That’s the basic idea, you just want two div layer and use the inner layer specify opacity whereas the outer layer, just uses the pseudo-element so that the opacity changes upon hover over the outer layer. 

Now, I won’t release a base code for this, but for the sake of convenience, I will provide a copy-and-paste code below for the opacity and webkit transition effects:

opacity: 1;
filter:alpha(opacity=100); 
-moz-opacity: 1; 
-khtml-opacity: 1;

-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease;

Design Elements: Functionality

It is super important that if you are going to include hover-over layers, they need to be practical and easy-to-use, because you have to consider the sometimes ignorant people on internet that are lazy to do their own exploring around (or, they might just be technologically-challenged or new to spiffy tumblr themes).

There’s also other design elements you should be careful with to ensure that your theme is accessible to everyone. But how do you make sure your theme is functional? Ask yourself the following questions:

  • Is your font size readible?
  • Did you include all the elements covered in this tutorial? (Always include permalinks!)
  • Do you include caption and tag options? 
  • Is the navigation/links easy to find?
  • Does any element “blend” (colour-wise) into another? (if it does, definitely rethink your colour scheme)
  • When you’re hovering over something, does it stay visible during the whole time you hover over it? Or does it blink/flicker/fold-up? (if it does, you might want to re-check your coding and fix that)
  • Does your hover-over cover important content? (such as an one-line link posts) 

Design Elements: Colour Customization Options

In previous lessons, I briefly mentioned on how important it is to limit meta tags carefully (control colour customization options), so that people who don’t have much experience with colour schemes but still want to customize their own theme can easily customize their theme to something nice and satisfying. 

Now, this is still something I struggle with today as well and it’s sometimes easier for me to just give all the colour options instead limiting them (and in that case, I try to make the defaults neutral but aesthetic). 

This concept ties in a lot with my tutorial on choosing the right colours for your theme, particularly about the part where you want to make splashes of colour with the “rare” colour. For example, the blockquote borders, links, permalink hover-overs  are all small blocks of colours so having them under one custom colour meta tag could potentially work. 

In my modern romance theme:

The colour option for the userpic border, the topbar menu links, navigation links and tags are the same colours (and formatting) so that there is a consistency in colour appearance. 

Even just a little bit of consistency is good. For example, in my destiny theme, the permalink hover-overs have the same background as the topbar background. 

Design Elements: Blockquotes

Now, I want to talk about blockquotes. The blockquotes are the “quotes” (paragraphs that are indented) you see in a text post, like so:

this is a blockquote

And well, the problem I’ve ran into them in the past is that some people reblog things with A LOT of captions and they end up overflowing a post box. What you can do is set the padding and margin to a smaller number (such as 25 or lower) to prevent large blockquotes and overflow. 

Design Elements: Geometry & Minimalism

When I say geometry, I’m referring to the visual shapes the layers and stylizations make. I could be talking about borders, background change between different div layers, padding, margins, rounded corners, side images etc etc. ANYTHING that could potentially create a shape in the design due to change in colour. 

For example, in my Nornir theme, there are a total of 6 major shapes (outlined in red):

Now, 6 major geometric blocks is already quite a lot. That is why for the titles and blockquotes, I decided to keep it simple and not have even more blocks and borders. While borders on titles and blockquotes may look pretty cool, it’s difficult to off many in one theme.

That’s why, I try to keep my themes uncluttered and somewhat minimalistic. Though personally, I think I went slightly overboard with my Icarus theme. I was going for a more fandom-based theme and it seems fandom themes prefer to have many side image options so I thought I’d give that a try, but I wasn’t too pleased with the result.

The reason why minimalism is good, is because themes are supposed to accentuate the blog content, not the other way around. So staying away from too many effects, borders and colour blocks is ideal and good aesthetics is easier to achieve.

Balance is also essential. Sometimes, asymmetry in layout of a theme may create contrast and is interesting. But for the most part, symmetry in smaller details is important, especially between text and objects (such as icons, permalinks etc). 

For example, in my Ascolta theme:

The sidebar and the hover-over permalinks (outlined in yellow) are symmetrical and brings a bit of balance to the theme, especially since the rounded corners of the sidebar is quite dramatic compared to the rest of the design. I also would never put permalink blocks between a sidebar and main column because then, there would be this imbalance of geometry which looks awkward. 

The key point is, minimalism can apply to everything, not even just geometry in design, but also effects and colours as well.  

Design Elements: Style & Consistency

We all agree that there is style in all artwork. A popular artist is one that has their own style and in art classes, we may discuss how that style is conveyed and through what technique. 

Same in themes. I’d like to think that themes are a type of artwork too (under the category, “design”) and each theme needs to portray a certain style. So when you’re making a theme, you need to keep that idea in mind… do you want a modern, sleek look? Or a vintage maybe hipster look? Or a cutesy look? And then you need to match the typography (see my article about typography in web design), geometry and colours to that look. 

For example, in my Lionheart theme

what I had in mind were photography (especially about home decor, forest/mountain landscapes, cabin-like ideas etc) so I wanted to go for a homey feel but with a touch of professionalism. I achieved the sleekness by the black and white colours, padding, shadowing and blocks. While the more earthy feel was shown through the typography (serif font which are more “archaic” than sans-serif). 

I must also accentuate consistency. If you decide that you want a bit of padding in the post box, try to carry that throughout. Meaning, you need to incorporate about the same amount of padding in your sidebar as well. And about the same width in the margin. Again, taking my Lionheart theme is an example, you can see that the padding and margin is approximately the same width. 

Same goes with style elements such as typography, it is all about sticking to a “theme” (subject-theme, such as “victorian” or “modern” etc etc) and stylizing according to your concept. 

Design Elements: Rounded Corners

Now, about rounded corners… wait, how do you even achieve that cross-browsers? Here’s a quick code for if you want ALL rounded corners (like a circle):

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Here’s a quick code for individual rounded corners:

-moz-border-radius: 50px 0px 50px 0px;
-webkit-border-radius: 50px 0px 50px 0px;
border-radius: 50px 0px 50px 0px;

The first value is for the top left, the second value is for the top right, the third value is for the bottom right, the fourth value is for the bottom left. 

Now, rounded corners are a fickle thing (IMO), sometimes, they look great but other times, it just ends up looking out of place or unnecessary. Think back about geometry and minimalism; an excessive amount of rounded corners can create too much geometry clash, and too many blocks in combination with rounded corners will be really clutter-y.

Yet you also need to consider having consistency in rounded corners, one large element with rounded corners can work great as a focus point, and having small elements with rounded corners and compliment that. Two large elements with rounded corners can make the third element the focal point and you can keep everything else not rounded so it’s not too excessive. Beyond that, you might be getting into the danger zone of complexity. 

Setting Up Your Theme Blog

The big thing I want to cover here is setting up public theme previews; going along with the idea of portraying a certain theme or style, reblogging images and/or photosets that support that is very important as well as setting a colour scheme for your preview. 

As I’ve previously said in my theme blog critiques, as a theme-maker, you’re providing the themes to your visitors so you’re not only acting as a designer, you’re also a businessman/woman. People want something that looks nice, plays into their interest and is efficient and includes all the features they want (such as tags  and captions hidden/shown options, infinite scrolling, additional links, pages, all colour, background customization options). So appealing to that, market your theme to it’s full potential. 

First, decide on your target audience and the type of blogs they have. Focus on that and style the theme that compliments those type of blogs. Once you’ve gotten down your base, you can explore other types of blogs and expand your audience. 

When it comes to having art/anime/manga blog types as your focus blog, I find that it’s generally better to have a more neutral preview rather than a subject-themed blog because while those may be popular to a certain amount of people, other people might be put off by the preview. So instead of focusing on one manga (ie: naruto-themed theme preview), having a combination of similar art styles might be more appealing, such as in my Nornir theme (monochrome manga-style line-art) and my Destiny theme (bright, colourful, childlike-manga-style art). 

As for the theme blog itself, I find that it’s easiest to have a separate theme blog from your main blog because it’s easier to organize things. One thing I wish I did was create my Ettudis theme blog under a different email so it’s a main blog not a sub-blog. That way, I could just exclusively follow resource sites on that blog and people could reply to my posts if need be. 

Making a simple exclusive theme for your theme blog is always ideal since it showcases your skills. Also, try to maintain a sense of professionalism when conversing with your visitors but also don’t be afraid to let a bit of yourself through because people like to know about the personality behind the themes too (it’s a bonus!). 

While the inclusion of resources are good, it’s not necessary. There are tons of theme blogs that don’t include much resources so don’t feel pressure to. But if you do, it’s always a good idea to start tagging them extensively from the beginning so that later, you can organize them and allow for easier browsing for your visitors. I made a note about what kind of resources and tutorials to include in my ultimate guide to theme-making (which isn’t really that ultimate).

I also find that having a terms of use agreement is a handy thing, just in case you run into theft problems, you can bring it up and it would just seem a lot more professional and legal.

The End

Basically, that’s the end of our “How To Make Tumblr Themes” Tutorial Series. I hope, that was helpful and informative, and can prevent future plagiarism because I’m sure this tutorial was basic and thorough enough for anybody to get a good idea of how tumblr themes work.

I wish you all, happy theme-making. If you have feedback, suggestions or questions, drop a line by the askbox

Hi there! I think that your tumblr theme tutorials are really helpful, but I'm wondering how you choose what doctype to use? And are they something super important to include when you make a theme? Thanks! — Anonymous

For people who are reading this and wondering what the hell we’re talking about, let me briefly list/describe the 3 doctypes (source). 

  1. strict
  2. transitional
  3. frameset

The doctype is not a HTML tag, it merely tells the web what version  of markup language the content HTML is written in. 

I use the transitional one because the strict doctype does not include some stuff I use (such as <center> and <u>). I don’t use the frameset one because, well, I don’t use framesets and the only difference between the frameset and transitional is that frameset includes framesets. 

I don’t think it matters too much whether you include the doctype or not, especially if your codings are very simple, but the doctype does instruct the web browser how to render the content properly. 

For a list of what HTML tags each doctype includes, here is a great article. 

Tutorial Series Disclaimer

I think I need to mention a couple things:

  1. The CSS stylizations are very simple seeing as I didn’t even include a:hovers. I assume you who are reading it already knows that though. I did it for brevity’s sake. 
  2. I use CSS shorthand, so instead of writing font-family, line-height, background-color, background-image and so forth, I squish it into one. Consult this article for what CSS shorthand is all about. 
  3. I forget things… so I might forget to mention something in a tutorial section so I will bring it up in the next tutorial section or something
  4. I usually write each tutorial in one go, so I get sick of my own writing by the end of it, meaning, I don’t usually proofread it very carefully, so I’m sorry for any typos, hopefully, they don’t impede my explanations
  5. The example theme is actually very ugly, omg, everyone please tolerate it. 

How To Make Tumblr Themes: Part IV

Introduction

What we did previously:

What we will cover in this tutorial:

  • The main column (2/2): the post information: captions, source, dates, tags and notes

Websites and documents we will consult (as always):

Continuing From Tutorial Part III

Everything covered here has still got to do with the post block (main column), meaning, all topics we discuss, the codes go inside the {block:post} and {/block:post} blocks.

The Captions

These are the text that accompanies photo, photoset, audio and video posts. You would want to put them inside the photo, photoset, audio and video post blocks. 

To change things up a bit, I used <span> tags to stylize the captions in the CSS:

Notice how I also added a img selector for the .caption <span>, I set the max-width to 400px so that if people included gifs or images in the caption, it will not overflow. 

Speaking of overflow, I forgot to add in the last lesson on the post div layer (#post). Adding an overflow:hidden; to the CSS for the div layer will make it so that all the images that are wider than the div layer will be cut off. 

In terms of design, the reason why I chose for the border to be the same colour as the sidebar background is so we have some continuity in colour appearance. Some bloggers may have awesome blogs but have no clue what to do when it comes to colours in customization. Having that in mind, restricting customization options and putting consistent colour tags in bits around the theme can be very useful (will be covered in later tutorials).

Live, the captions look like:

The Sources

I am referring to the text/links that usually state “reblogged from _____, originally from _____”. The blocks that render the source links are {block:RebloggedFrom} and {/block:RebloggedFrom}.

For “reblogged from _____”, you need to include a hyperlink with the source, {ReblogParentURL}, and the name, {ReblogParentName}. 

For the “originally from _____”, you need to include a hyperlink with the source  {ReblogRootURL}, and the name,{ReblogRootName}. 

You may also include the profile icons for the “root” or “parent”, all the variables are detailed in the reblog section of the tumblr theme doc. 

In the end, your code may look something like this:

The Tags

There are two blocks for this. One activates the tag codes if there are tags, {block:HasTags} and {/block:HasTags}. One is the block that renders for each tag, {block:Tags} and {/block:Tags}You also need to include a hyperlink with the source, {TagURL}, and the tag label, {Tag}.

You codes may look something like this:

Combining the Sources and Tags in My Example

Now, I decided to lump the stylization of the tags and sources together. I put it all in one div layer that is under the post div layer. The HTML looks like the following:

The CSS looks like the following:

Because the info div layer is outside of the post div layer, I had to make it similar to the post layer (particularly a left margin of 330px and width of 400px) to ensure that it is aligned with the posts. I also included new meta tags for customization. 

The live view looks like:

The Dates

The blocks for dates are… you guessed it… {block:Date} and {block:Date}. There are several variables for date display. As it tedious of me to list all of theme, please consult the dates section of the tumblr theme doc. 

The Number of Notes (Reblogs/Likes)

The blocks for the number of notes are {block:NoteCount} and {/block:NoteCount}. There are two variables for this, one is {NoteCount} and the other is {NoteCountWithLabel}, fairly self-explanatory.

Combining the Dates and Note Count in My Example

Now I decided to put the dates and note count into one div layer. Here is what the  HTML looks like:

And here is what the CSS looks like:

Just like the case with the source and tag div layer, I’ve also formatted it so that it has the same positioning as the post div layer and I’ve added new meta tags for the colours as well.

Live, it looks like:

The Notes

The last thing we’re missing for the main column is the notes itself (where it’s a list of all the people who liked/reblogged the post. Now, the notes go inside a permalink page block, {block:PermalinkPage} and {/block:PermalinkPage} because it should only be shown in the permalink page. The actual note blocks are {block:PostNotes} and {/block:PostNotes}, and the variable is {PostNotes}.

I used a div layer to position and stylize the notes in the CSS:

Because I wanted the formatting to be similar to the tags and sources, I added a #note a so that the link colours and style was similar to the tags and source links. 

Tumblr makes it so that the number of people who liked/reblogged a post is in list-form (ol, ul, li) and the list has a class of “notes”. Therefore, if you do not want the list to appear as a list, you can add the “ol.notes” with a list-style-type of none so that the numbers do not appear. 

With that stylizing, the live view will be:

Index Page vs. Permalink Page

So index page is where you can see ALL the posts, whereas in the permalink page, it is the individual post. There are blocks for the two types of pages so that you can show some content only on the index page or permalink page.

The blocks for the index page is {block:IndexPage} and {/block:IndexPage}. The blocks for the permalink page is {block:PermalinkPage} and {/block:PermalinkPage}

This can be applied to numerous things such as showing tags, captions, dates and note count on a specific page (whether permalink or index). It is also commonly used to show different styling. For example, I use these blocks so that on the permalink page of my themes, the post width will be 500px because it is the largest photoset and video width available, and everybody likes to view those in it’s full glory. While on the index page, the post width can range from 250 to 500. 

The End

Whew~ we have now covered all the basics of a posts. Remember that this is following the particular example I’ve constructed and in this example, I combined tags and sources into one div layer and dates and note count into another div layer.

You do not need to make those particular combinations in order for a theme to work. The important thing is learning what blocks do what and what variables are available. So play around with those variables and do your own stylizing! 

Hopefully, I’ve covered everything thoroughly. In the next lesson, we’ll be going over navigation, infinite scrolling and hover-over permalinks. Here is the base code for this tutorial. 

How To Make Tumblr Themes Tutorial Series Syllabus

Part I

  • HTML review (bare minimum you need to make a basic theme)
  • CSS review (bare minimum you need to make a basic theme)
  • Meta Tags
  • Other <Head> codes 

Part II

  • The body
  • The sidebar: title, description, links, images and profile icon

Part III

  • The main column (1/2): the posts types: photos, photosets, links, chats, text, quotes, answers, audio, videos

Part IV

  • The main column (2/2): the post information: captions, source, dates, tags and notes

Part V

  • Pagination/Navigation
  • Infinite Scrolling
  • Hover-over permalinks

Part VI

  • Multi-columns
  • Design elements: meta tag colours, practicality
  • Tips for theme blogs: setting up previews, terms of use

How To Make Tumblr Themes: Part III

Important Notes

This tutorial series does NOT teach you every single detail about tumblr themes. This tutorial only covers the basics and provides the general idea of constructing a tumblr theme. You can always add more CSS tricks, rearrange variables, add scripts etc etc. For more variables, please consult the tumblr theme document

Also, I changed the codes slightly from the last lesson. I just added a default background image and made the body background and the sidebar fixed in position (position:fixed;). 

Introduction

What we did previously:

What we will cover in this tutorial:

  • the posts: photos, photosets, links, chats, text, quotes, answers, audio, videos

Websites and documents we will consult (as always):

The Post Block

Before we get started with each post type, we need to include a post block and a div layer (wrapping the posts). As explained in the post section of the tumblr theme doc, the blocks {block:Post} and {/block:Post} renders for each post in reverse chronological order. So everything (codes) you want to be included in one post has to be inside this block.

In that case, we need a div layer to help us position and stylize the posts. Like so:

[click for larger view]

The width of the post div layer should correspond to the sizes of the photos (primarily), videos and photosets. Keeping the post sizes consistent is generally preferred but there are themes that want to have the photos in HighRes and they just set a max width so that it’s not ridiculously large. The three set widths that tumblr allows are 250px, 400px and 500px. In this case, I chose 400px. 

You can be fairly flexible in terms of coding this. In this example, I made it so that the post div layer was inside the post blocks, meaning it only wraps each individual post. You cannot apply a position to this because if you did, the posts would just cover each other (because they will be positioned in one spot). Instead, I made the left margin 330px so that the posts are aligned 330px from the left. 

The easiest method is to have one div layer wrapping the block posts (outside {block:posts} and {/block:posts}) and absolute position that one, however, this method interferes with infinite scrolling by codysherman

The more tedious method is to have tables wrapping the block posts and stylize that. This way, you can also center your content, by having two tables, one set with the width of the post put inside of another one set with 100% width which has a center horizontal align. (Shown below). 

Text Posts

There are only two variables and two blocks. The {block:Text} and {/block:Text} blocks renders so that the text post only shows up when it’s supposed to. The {block:Title} and {/block:Title} renders for the {Title} of the post, and {Body} gives for the content of the text post itself.

[click for larger view]

As highlighted in yellow, you can see the text block. I used headings (<h1>) to stylize the post title, but you can easily use <span> classes or ids to stylize them as well, nor do you have to use specifically <h1> since <h2>, <h3>, <h4> and so forth still does the job. 

Since I know that in text posts, there will be links, I’ve stylized the post links (in the CSS, #post a) to be a certain colour that corresponds to a meta tag which I have no shown in the visual. 

The following is what the codes look live:

Photo Posts

Similar to text posts (and all other post types), there is a block, {block:Photo} and {/block:Photo},  that renders so that the photo post only shows up when it’s supposed to. In addition, there are multiple variables that can be included in a photo post but the basics are the photo itself, and the click-throughs. 

The above is the bare minimum of codes needed to display the photo. The {Photo-URL-XXX} comes in 6 sizes (as explained in the photo section of the tumblr theme doc). The most common ones are 250, 400 and 500. 

There are two options for click-throughs. One click-through is so that whenever a visitor clicks the image, they will be redirected to the URL that the blogger has set. The other click-through is the permalink, so that whenever the visitor clicks the image, they will be directed to the blogger’s individual post of the photo post.

For the first option, the variables {LinkOpenTag} and {LinkCloseTag} kind-of act as blocks around the image so that the click-through will work:

{LinkOpenTag}<img src="{PhotoURL-400}" />{LinkCloseTag}

The second option, you need to add a hyperlink to the image, like so:

<a href="{Permalink}"><img src="{PhotoURL-500}" border="0" width="500px"/></a>

However, this overrides the first option completely so if the blogger set an original source URL, it will not click-through. I ran into this problem a few months ago and posted an brief tutorial on it here

Photoset Posts

There are 3 set widths, 250, 400 and 500. The code would look simply like this:

Quote Posts

The coding for quote post is fairly simple. Although I’ve added a div layer around the quote itself so that I can stylize the quote. You do not have to use a div layer, you could use a <span> or <font> tag just like how I used a <div> tag. I also centered the quote source:

In the CSS, I stylized it so the quote was in a different font and size. 

This is what it looks like live (including the photo post):

Link Posts

It follows similar pattern to all other posts. Again, you can use ANY WAY to stylize it (I highly encourage you to choose a different way to stylize than the way I’ve shown here). In my example, I’ve used a heading <h1> to stylize the link:

I’ve also added a link for the h1 CSS since there is a link inside the heading:

It looks like the following, live. Notice how the colour is different from the text post header given the fact that it is a link:

Chat Posts

This can get a bit complicated but to keep things simple, we’re only going to pay attention to the lines and label variables and blocks. 

Here, there is the title blocks rendered if there is a title. The {block:lines} and {/block:lines} block specifies for each line of the chat post and the {labe;}, {block:label} and {/block:label} renders for each name of the person/thing speaking in the chat post. I’ve simply used a <b> tag to make the label stand out from the lines.

Audio Posts

The basic code just includes the audio blocks and the player variable:

I’ve wrapped a div layer around the player so that the play would appear to fill up the entire post so you get #1 instead of #2 (the black block above “example post”) …

However, this is just my preference. 

There are other audio variables such as album art, artist, track, album title, play count etc that you can include as well, as long as they’re inside the {block:Audio} and {/block:Audio} blocks. To explore all options for audio, please consult the audio section of the tumblr theme doc.

Video Posts

Fairly straightforward, like the photosets, there are only three options for size: 250, 400 and 500. You can also include play count for videos as well. 

Answer Posts

For answer posts, you have the option of putting in an asker profile icon that comes in 8 sizes. You can use div layers, spans or any other kind of HTML/CSS styling to format the post. In this example, I’ve kept things simple by only having the asker name and question, then having the answer inside paragraph, <p> tags so that there’s a line break between the question and answer. 

The End

We’ve covered all the post types there are and the basic variables and blocks to display it. I cannot emphasize enough that you should use YOUR OWN way of stylizing everything; there are many HTML tags that can be used to stylize such as <span>, <font>, headings (not restricted to <h1>) and they come in classes and ids. So find your own way of coding things and that way, you can avoid any accusations of plagiarism. 

This tutorial is technically only part one of the two-part tutorial articles I will do about the main column. So don’t freak out, in the next lesson, I will be covering captions, tags, notes, dates and sources/reblog links for the main column.

Here are the base codes for today’s tutorial.

How To Make Tumblr Themes: Part II

Important Notes

Now that we’re actually going to construct the tumblr theme (put in the walls, framework, windows etc), I want you guys to know that in this particular tutorial, the base theme structure we’re going to cover is two columns; one column is the sidebar (blog description, links, images etc) and the other column is the main column (where the posts are). While I will be going through this tutorial using sidebar as an example, you can make the “sidebar” into a “topbar” using CSS.

I also really want to emphasize that you can ID or class your div layers in ANY NAME. Please do not use the same name as I use in case I later suspect you of using my themes as base codes or whatnot. 

Introduction

What we did previously:

What we will cover in this tutorial:

  • body
  • the sidebar

Websites and documents we will consult:

The Body

[click for larger view]

So we start with the body. This is the main background (colour and/or background image) and also, adding in zero for the margin and padding would be ideal so there aren’t any spaces between the body (entire window) and other div layers. 

The Div Layer

First, we need a div layer to wrap our sidebar and then we can use CSS to dictate the position, dimensions and appearance of the sidebar. We can also use meta tags to fill in for the colours, borders, images etc. 

Let’s go with a very basic template:

[click for larger view]

As can be seen here, the meta tags correspond to the sidebar CSS (highlighted in pink, blue and yellow). The positioning and dimensions of the sidebar is specified in the sidebar CSS as well (highlighted in green). 

Adding in content

Now, we can start adding in the content. We’re going to look at incorporating titles, description, links, profile icons and  images as a start. These are common elements in the sidebar theme so I’m going to cover them here. But use your imagination! Once you get familiar with making tumblr themes, you’ll soon realize, those elements aren’t restricted to just the sidebar.

The Title

As briefly explained in the first post, the {title} variable is the title of the blog. In this example, I’ve decided to include it in the sidebar and have it as a link to the index page.

[click for larger view]

Here you can see that I’ve specified for the colour and hover colour for the title link. I’ve also specified in the CSS that I wanted it to be uppercase, no underline (text-decoration:none;), have a bottom border, italicized and displayed as a block (instead of inline).

For the title to be a link, I’ve added an <a> tag with “/” as the URL. This directs it to the blog’s parent page (index page). 

In the live view, it will look like this:

The Description

The {description} variable is the description of the blog that the blogger enters in their customization page, and the blocks {block:description} and {/block:description} renders the variable if the blogger does write a description. 

Here is a basic code: 

I only added the description variable and blocks and wrapped that inside the description div layer. I did not specify any CSS for the div layer because I have already specified the fonts and colours in the sidebar div layer which applies to the description div layer as well (since it is inside the sidebar div layer).

Here is what the live looks like:

The links

So in this example, I decided to put the links inside the description div layer to make things easier. 

[click for larger view]

In the CSS, you can see how I formatted the links. For this example, I did not include the additional links just to keep things simple, but it is possible! (Please look at the custom text section of Part I)

It looks like the following live:

The Images & Profile Icons

Remember when I discussed about images in meta tags (Part I)? Well, this is when it’s put into use! So if I want to include a sidebar image, the coding will look similar to:

[click for larger preview]

In the CSS, I specified for all the images in the sidebar div layer to have a maximum width of 150px. So for the sidebar image, the height will auto-adjust to the 150px max width so that the image is proportionate. 

The live view will be like so:

Now, if you wanted to insert a profile icon instead, you do not need to use meta tags. Instead, you can just use the basic variables for a profile icon (theme doc). For tumblr, they only allow 8 different widths. For this example, I’m going to use the 30px width:

[click for larger view]

As highlighted, I’ve added the profile icon right before the description. I’ve also stylized it so that it is inline with the text (float:left;) and has a margin of 3px. Of course, you can put booleans in the meta tags so that the blogger has an option of whether or not to show the profile icon (not shown in example). 

The live view:

And with that, you’re pretty much set for the basic sidebar. You can also include pagination in the sidebar but it’s not necessary. I will talk more about this later when I talk about infinite scrolling. 

Key Points

So basically, what we’ve learned in this tutorial is how to combine meta tags, CSS, HTML and tumblr variables to specify the appearance of and construct the generic sidebar. Topics we’ve covered were blog title, description, links, images and profile icons. Of course, I did not cover all the variables, but I encourage you to take the initiative, be creative, look through the themes doc and I’m sure you can find out what else you can include and so forth (the document is rather thorough and clear). 

The End

Hopefully, I didn’t miss anything and everything makes sense. This took me a longer time than last tutorial. Mainly because making the image examples took up a lot of time and I kept forgetting to include things in the coding. Anyhow, here is the base code of what we’ve learned today.

If you are going to use the base code, I’d appreciate it if you left the credits in the codes, or at least, have a credits page on your blog and credit me (like a bibliography sort of thing, in that case, I don’t mind if you don’t specify that you took my base codes)

You SHOULD ALTER IT COMPLETELY; including the CSS names and so forth, you could even change the div layer ids to class, just remember that for class div layer links, you write div.sidebar a, instead of #sidebar a (for example). 

How To Make Tumblr Themes: Part I

Introduction

What we will cover in this tutorial:

  • HTML review (bare minimum you need to make a basic theme)
  • CSS review (bare minimum you need to make a basic theme)
  • Meta Tags
  • Other <Head> codes 

Documents and websites we will consult regularly in this tutorial (keep these open in a tab):

HTML Review

Before making a theme, you should know that HTML consists of tags (keywords surrounded by angular brackets like <html>) and that they come in pairs (opening and closing like <html> and </html>).

You should also already know basic HTML elements such as links, headings, paragraphs, lists, formatting and images. If not, please learn it at the website I provided. 

The most common way to group and position things in a website layout is to use div layers or tables. In this basic theme tutorial, I will cover div layers first since it is easiest to understand. 

Here is a coding for text that is NOT inside a div layer:

[click for larger view]

Here is a coding for text that is inside a div layer:


[click for larger view]

Also notice that I used CSS to dictate the width and background of the div layer. That is how CSS and HTMl is connected; you can use CSS to demand HTML elements to look and be positioned a certain way. So in order to make columns in tumblr themes, you use CSS to position and “decorate” the div layer which will wrap your columns (ie: posts, sidebar etc).

CSS Review

In relation to what we’ve discussed above, CSS commands HTML elements. So you need to be very familiar with CSS. CSS is the codes between the <style type=”text/css”> and </style> tags (as can be seen in the previous image). In this tutorial, I will use the following terminology:

Now, div layers can either be id-ed or class-ed. The id selector is generally used for a single unique element while the class selector is used for a group of elements.   While there is that difference, I discovered it doesn’t matter. You can use id selectors for multiple/repeated layers. 

[click for larger view]

In the above, the selector for id is preceded by a “#” (outlined in pink) and the selector for the class is preceded by a “.” (outline in blue). Now, you can use basic CSS properties to specify the position, dimension and style of the layer. 

You will need to know 90% of the properties described on this site; particularly background, color, fonts, links, text, margin, padding, z-index, position, display, dimensions and borders. Since it is too much for me to cover them all, please review/learn them before proceeding. 

Getting started

Now we’ve gone over the idea of how HTML and CSS will be needed, we can apply it to tumblr themes. So, we start with our basic HTML tags for any basic webpage:

<title></title> is where you specify the title of the blog which will show up on the browser tabs. Looking at the basic variables section of the custom tumblr theme document, you can see {Title} and {block:PostTitle}{PostTitle}{/block:PostTitle}.

{Title} is a “variable” which corresponds to the blog title (which you customize in the customization page). For example, my theme blog title is “ettudis”…

{block:PostTitle}{PostTitle}{/block:PostTitle} corresponds to the title of the post (of the individual posts). The “blocks”, {block:PostTitle} and {/block:PostTitle}, renders so that the post title shows up only when there is a post title (in other words, when you go to the individual post page. For example, the title of my “terms of use” post…

Generally, it is set up so the it’s the {title} followed by a dash, then {block:PostTitle}{PostTitle}{/block:PostTitle}. So, it will look something like this:

<title>{Title} - {block:PostTitle}{PostTitle}{/block:PostTitle}</title>

We also can add in favicons. To make the favicon the same as the blogger’s userpic/profile icon, we can just link to {Favicon}, like so:

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

Meta Tags

The meta tags in tumblr themes are what allows the bloggers to customize the themes colours, upload images, select options, add links etc, as described in the appearance options. Then, you can line up the meta tags to the HTML or CSS.

For colours, it will look something like this:

[click for larger view]

As you can see, the colours in the meta tags can correspond to the HTML or CSS. So the default colours (indicated in the meta tags, ie: #FFFFFF, #000000 etc) are what the colours are if the blogger reset to defaults. If the blogger decides to customize to his/her own colours, the colour he/she chooses will correspond and fill into the HTML or CSS in the live preview. 

For custom fonts, it will look similar to:

[click for larger view]

Similar to colours, the meta tags correspond to CSS (or HTML). However, tumblr only provides a few custom fonts (ex: arial, georgia, impact, courier new, helvetica, tahoma, trebuchet ms, times new roman etc) that are selected via a drop-down menu on the customization page.

Now booleans are rather important in tumblr themes. These meta tags allow the bloggers to select an option.

[click for larger view]

In this, the option is whether or not “if infinite scrolling” should be on the blog. The meta content is “1” if there is infinite scrolling as default. If infinite scrolling is not default, it meta content should be “0”.

Outlined in orange, {block:ifinfinitescrolling} and {/block:ifinfinitescrolling} wraps around the HTML (or CSS) that will be activated if the blogger decides to select the infinite scrolling option. If not, then the HTML (or CSS) in {block:ifnotinfinitescrolling} and {/block:ifnotinfinitescrolling} will be activated. 

Booleans can apply to anything, such as whether or not to show tags on index page, size of post, number of columns, show side image ~ whatever your imagination allows you!

On this note, this sort-of gives you the idea of how tumblr codes work. The “blocks” act as activators for a certain code that it contains. Remember they always come in pairs as well, an open and closed one.

In the above example, you can see that there are the blocks, {block:Pagination} and {/block:Pagination}. This means that the codes inside these blocks will only show if there are actual pages; so in an individual post page, the pages will not show up.

Another meta tags are text. You can allow bloggers to enter their custom text into a theme. You can do a lot with text, you can also use it as an input for CSS hex numbers, dimensions (they would enter pixels), labels etc etc. 

In this particular example, I’ve used custom text as a way for bloggers to enter links. The blocks (in pink), as I’ve explained previously, act as activators for when the bloggers do enter a URL in the “link 1” meta tag (outlined in blue). 

Tumblr also allows bloggers to upload images. So bloggers can upload their own background or other images they want (that you specify) into their theme. 

[click for larger view]

Shown here, you can see that the meta tag for the background image dictates the CSS body selector (outlined in orange).  In the content, you can insert an image (“http://static.tumblr.com/…”) as a default image. 

As for the sidebar image meta tag, it uploads the image into the HTML. Blocks (shown in pink) can also be used in case the blogger does not want to upload an image (or if an image is not uploaded, an alternate coding can be shown). 

Other <head> codes

You can also insert a {CustomCSS} block at the bottom of the theme’s CSS style block (before </style>) so that bloggers can insert their own CSS if they want to. 

There is also a meta tag that is involved in search engines. 

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

This allows the description of the blog to show up if the blog is searched on the a search engine (such as google). 

And that’s all I have to say about meta tags which is crucial if you plan to make themes for the public use. 

Key Points

To clarify and emphasize, the terms, “variable” and “blocks” are what makes up the tumblr theme. Variables are used to insert dynamic data. As we’ve seen in previous example, {Title} is a variable and so are {Image:Sidebar}, {Color:Background}, {Text:Link 1} and so forth. They come in singles, meaning, you do not need to close them. 

Blocks are used to render (activate) a block of HTML, CSS, or a set of data. As we’ve seen in previous examples, {block:Title} and {/block:Title} are blocks, and so are {block:ifinfinitescrolling} and {/block:ifinfinitescrolling}, {block:iflink1} and {/block:iflink1}, and {block:ifnotsidebarimage} and {/block:ifnotsidebarimage}. These come in pairs, meaning, you do need to close them similar as to you would close a HTML tag.

The meta tags allow users to customize the theme without editing the HTML/CSS themselves. They only have to customize via the Appearance section on the customization page. We’ve covered all the meta tags that tumblr has: colours, fonts, booleans, text and images. Every meta tag can correspond to a HTML/CSS component. So using HTML and CSS, you can specify the look of a certain variable and meta tags can give customization options for the HTML and CSS.

The End

I think I’ve covered all the basic ideas of what tumblr themes need in order to work. Though this tutorial was more of introduction on just the fundamental foundations of what we’re going to build, next tutorial will get into constructing the tumblr theme using variables, blocks, CSS and HTML.

I hope I was clear, concise and thorough in my explanations. If I missed anything or if something wasn’t clear, please let me know as all of this sort-of comes to me naturally now so I wouldn’t know if I was being abstruse or convoluted.