It looks like there is an information void on the internet when it comes to customizing your Tumblr. So from now on I will dedicate a few posts to help Tumblrs customize parts of their themes. If you have a suggestion for a Tumblr Help Post please leave it in the comments. I will be more than glad to write about it.
Now back to the subject in hand. I will now let you know what steps you need to take in order to change the regular letter title of your blog and change it into a custom image. For this tutorial I will use the most used and popular Tumblr theme Litewire.

Step 1.
Click on the
button. Click on the “Theme” button and in the window that opens on the “Use Custom HTML”.
Step 2. (Very Important!)
Before doing anything else copy the HTML code that appears in the “Use Custom HTML” window and paste it in either Note Pad (Windows), Text Edit (Mac) or your favorite Source Code Editor.
Step 3.
Find a free place where to host your image if you don’t already have a place. I suggest you use Imageshack.us
Step 4.
Find the first Tumblr tag for title {title}
1 2 3 4 5 | <body> <h1> <a href="/">{title}</a> <a href="/rss"><img src="/themes/5/rss.gif" id="rss" alt="RSS"/></a> </h1> |
Step 5.
Replace the Tumblr {title} tag with the following code:
1 | <img src="http://IMAGEURL" alt="Name of your Tumblr here" /> |
Note: Use the address of the image instead of IMAGEURL (ie. http://img217.imageshack.us/img217/6029/18561222.gif)
Step 6.
We now have to make a few changes to the CSS. This part will be different in each theme. I will try to explain what to look for so that regardless of what theme you are working on, you will be able to make the changes.
Your theme’s CSS is the code that shows between the tags:
1 2 | <style type="text/css"> </style> |
If the {title} tag is wrapped in <h1> tags as is the case in this example you will have to look for any h1 mentions in the CSS code. In this example using the Litewire theme we have:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | h1 { width: 600px; padding: 0px 100px 20px 100px; margin: 50px auto 40px auto; border-bottom: solid 1px #ccc; text-align: center; font: Bold 55px 'Trebuchet MS', Helvetica, sans-serif; letter-spacing: -2px; line-height: 50px; position: relative; } h1 a { color: {color:Title}; text-decoration: none; } h1 img { border-width: 0px; position: absolute; right: 0px; bottom: 10px; width: 43px; height: 23px; } |
In this case we don’t need a fixed width and height. If our image is bigger than the current declared width and height it will not show correctly. So delete the width and height.
Now we have to fix the height of the space where the image goes. The image I am using is of 120 pixels in height. When declaring all 4 margins in one line the order is top, right, bottom and left (clockwise order). So we need to change the top margin of the h1 margin from 50px to 120px. This will give us the height we need for the new image. (Check the code below so you can compare to the original posted above).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | h1 { width: 600px; padding: 0px 100px 20px 100px; margin: 120px auto 40px auto; border-bottom: solid 1px #ccc; text-align: center; font: Bold 55px 'Trebuchet MS', Helvetica, sans-serif; letter-spacing: -2px; line-height: 50px; position: relative; } h1 a { color: {color:Title}; text-decoration: none; } h1 img { border-width: 0px; position: absolute; right: 0px; bottom: 10px; } |
And that is the end of this tutorial. If you have any questions or your Tumblr theme is much different to the one I am using in this example drop me a comment below. I will me more than glad to help. Make sure you let me know the address of your Tumblr and the Theme you are using so I can reply to your comment with a useful answer.



