< >

In this tutorial, we’ll be learning how to create a multi-coloured top bar (well, that’s what I call it anyway) that have become very popular lately in web-design. This is what we’ll be creating:

image

Prerequisites: It’s recommended you have some knowledge of HTML/CSS, but it’s not necessary.

Continue to tutorial  →

Fix it [[#03]] - Overflowing images

Ever replied to an ask with a hilarious gif or added an image to your text post only to go onto your blog and see that the image has gone out of the post’s box?

In this tutorial: you’ll learn how to fix the overflowing images problem

Read More

Fix it [[#02]] - Broken Links

Ever find yourself on someone’s blog or your own blog and you click a link and it leads you to a Tumblr “Not Found” page or a redirect page? This is because that person has changed their URL and didn’t change the links. For example, a user has changed their url from http://unicorn234.tumblr.com to http://pony567.tumblr.com but their “about” page is still linked as http://unicorn234.tumblr.com/about

In this tutorial: you’ll learn how to type links in a way that will work with any URL!

Read More

I don’t know if this is just me, but sometimes when I make a theme and preview the theme live, some of the photos on the blog have this random 3px of padding underneath them and it really bugs the OCD in me. 

I have however, discovered a fix for this! Just add the css tag display:block to the code. For example, you could add it to the whole page like this:

img {
display:block;
}

Or add it to a specific element, like so:

.post img {
display:block;
}

In this tutorial, we’ll be covering how to make stylised answer posts that have a portrait on the side (as requested by Anonymous). Here’s what our final result will look like (or something simmilar).

What you’ll need to know before this tutorial: It’s recommended that you have some knowledge of HTML/CSS, but it’s not essential.

We’ll be formatting our answer post using tables. For the sake of this tutorial, all the styling will go directly into the table instead of going into the CSS. Search for {block:answer} and delete that and everything below that until you reach {/block:answer}. Replace that code with the markup below.

{block:Answer}
<table style="border-bottom:1px solid #a0a0a0;padding-bottom:5px;margin-bottom:5px;">
<tr>
<td style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-64}"></td>
<td style="vertical-align:top;"><strong>{Asker} asked:</strong> {Question}</td>
</tr>
</table>
{Answer}
{/block:Answer}

Basically, we’re making a table with 2 columns. One column will have the portrait of the asker, and the other will have the question in it. Below the table will be the answer. Here is a diagram below if you’re having troubles understanding this (of course, the table/grey lines will be invisible):

For the explanation of the Tumblr variables, see the Tumblr theme docs (but they’re pretty straight forward). You can of course, change the styling if you’re confident with HTML/CSS.

This brings us to the end of another tutorial! I hope you enjoyed it. Please like/reblog if you found this tutorial useful!

In this tutorial, we’ll be learning how to create jump pagnition for your theme. For those who don’t know what jump pagnition it, an here is an example (taken from my blog):

What you’ll need to know first: basic knowledge of HTML and CSS.

Read More

How To: Sharpen an image in Photoshop

In this tutorial, we will learn how to sharpen an image in photoshop to get a result somewhat like the image below. Please note that we are not going to be using the sharpen filter.

Read More

How to Install a Theme →

This tutorial gives you easy-to-follow step-by-step instructions on how to install a custom Tumblr theme. It even comes with images!