Replacing the Text Header for an Image Header on Tumblr


Another Tumblr Tip that according to the theme, it could be just easier or difficult to tweak.  If you want your Text Header (meaning your Tumblr name or main Title) to be replaced for an Image, keeping the image clickable, follow these steps:

Replacing The Text Header for an Image Header on Tumblr.


  1. First of all, you need to put an image that fits the size of you current Text Header, if you want to make the space bigger, you will have to download and edit the .css file of your tumblr theme.  I suppose you don’t want to go through all that now, so just choose an image of the right size and if your theme goes crazy, choose something smaller until it works.
  2. Go to Customize >>> Theme >>> Use Custom HTML
  3. Using control+F in your browser look for the following code to find your text header title
  4. <div id=”title”><a href=”/”>{Title}</a></div>

  5. Upload your image here , it’s important to upload your logo header here and nowhere else since you guarantee that is not going to be disappear overnight.
  6. Replace <a href=”/”>{Title}</a> with the following code <a href=””><img src=”your_image_url” /></a> .  Now paste and replace the image path url that you got from the uploader in your_image_url.
  7. Preview your theme clicking on preview in the edition window, if the image fits right, click on save and you are done.

Additional Tumblr Tips for your Image Header.


  • Most of the well coded themes have a conditional variable that allows you to leave the image url path in the inlice css code try to find it looking for the following code in your html:

<meta name=”image:Logo” content=””/>

Now place the image url path within the content tag, between the “”. Example > content=”http://static.tumblr.com/image_header.png”

  • Most of the well coded themes now have an option to upload the image header through a form.  You can find it going to Customize >>> Appereance >>> Logo Image.

13 Responses to "Replacing the Text Header for an Image Header on Tumblr"

Add Comment
  1. Zabrina

    January 17, 2012 at 5:39 am

    I tried to replace my text title with an image title on tumblr but i couldn’t even find where the original link is in the html, the one you have to replace, ugh.. HELP PLEASE !!!!!!

    [Reply]

  2. geoff

    March 11, 2012 at 2:08 pm

    I have done this, and now my header no longer works as a click-thru link back to my main page, any tips on how to fix this?

    thanks,

    geoff

    [Reply]

  3. tidepools

    May 6, 2012 at 10:01 am

    please make it boho style and bubble writing

    [Reply]

  4. Stevie

    May 7, 2012 at 1:54 am

    Hi there!

    Thank you so much for sharing but I’m having trouble. Am trying to create a clickable page header but I seem to be having some trouble.

    It’s the last thing I’m trying to achieve and it’s been bugging me for the past 14 hours…please help.

    With regards,
    Stevie

    [Reply]

  5. Maia hubert

    June 22, 2012 at 1:19 pm

    I’d like to create a header for my tumblr page.

    [Reply]

  6. andrea Paz

    October 3, 2012 at 1:54 am

    What do you mean by the following code ?

    [Reply]

  7. isabella moon

    November 7, 2012 at 4:34 am

    My title doesnt go in the center :(

    [Reply]

  8. Kristen

    January 4, 2013 at 4:08 am

    I have not been able to figure out how to 1) change my background to an image and 2) change my header to an image using the Sleepover template. i was easily able to do it using your instructions with other template but have been unsuccessful with this one.

    Any suggestions would be greatly appreciated.

    Thanks.
    Kristen

    [Reply]

  9. sasha

    March 26, 2013 at 3:26 am

    how can i resize my header because literally its so big it knocked out my nav thing and its bugging me

    [Reply]

  10. Jayilee

    March 29, 2013 at 1:00 pm

    i have the max davis urban 3 theme and i still can’t word out how to put the image as my title as it doesn’t find the {Title} code. Any help would be majorly appreciated

    [Reply]

  11. Natalie

    May 2, 2013 at 9:24 pm

    my tumblr theme doesn’t seem to have “{Title}” just “{block:ifshowblogtitle}{Title}{/block:ifshowblogtitle}” I don’t know what to do.
    I need help please.

    [Reply]

  12. Fábio

    June 20, 2013 at 10:33 pm

    Hi, i did this exactly, and it worked, the problem is that some os the fonts changed after it, and i could find a way to change it back. : /

    [Reply]

  13. Fábio

    June 20, 2013 at 10:34 pm

    I mean, couldn’t find a way…

    [Reply]

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>