Change header from text to image on tumblr?

Asked by stressed (6

) April 27th, 2010

I’ve been fiddling around with the code but i can’t seem to get it to work with this theme on my tumblr.

can someone help me find out how i can change the title header text into an image? the image i want to have as my header is w: 800px by h:350 px.

Here is the html from the theme.

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /><html>
<title>{Title}</title>
<META NAME=“Title” CONTENT=”{Title}”>
{block:Description}
<META NAME=“Description” CONTENT=”{MetaDescription}”>
{/block:Description}
<link rel=“shortcut icon” href=”{Favicon}”>
<link rel=“alternate” type=“application/rss+xml” href=”{RSS}”>

a:link, a:active, a:visited { color: {color:Link}; text-decoration:none; font-style:normal; font-family:{font:Body}; font-size:10px; border-bottom:1px dotted #fff; }
a:hover { color: #424242; text-decoration:none; border-bottom:1px dotted #d8d8d8; font-style:normal; text-transform:uppercase; }
a:focus { outline: none; }

div.header { width:500px; margin-bottom:125px; }
a.blogtitle { font-size:25px; border-bottom:0px; }
div.header div.description { position:absolute; width:1px; z-index:10; display:none; padding:0px; }
div.header:hover div.description { display:block; }
div.header div.description a { border-bottom:0px; }
div.header div.description div.left { width:250px; border-right:1px dotted rgba(0, 0, 0, 0.30); padding:5px; position:relative; left:-267px; }

div.posts { margin:10px 0 0 0px; width:500px; text-align:left; }
div.posts div.post { position:relative; margin-bottom:250px; }
div.posts div.post div.text img { max-width:500px !important; }
div.posts div.post div.text { background:#f8f8f8; padding:10px 20px; }

div.posts div.post div.photo div.permalink { position:absolute; height:150px; width:500px; z-index:10; background: rgba(255, 255, 255, 0.80); padding:6px; {block:IndexPage}display:none;{/block:IndexPage} }
div.posts div.post:hover div.photo div.permalink { display:block; }
div.posts div.post div.photo div.permalink a { border-bottom:0px; }
div.posts div.post div.photo div.permalink div.left { width:150px; height:140px;border-right:1px dotted rgba(0, 0, 0, 0.30); float:left; padding:5px; }
div.posts div.post div.photo div.permalink div.right { width:322px; float:left; padding:5px;max-height:228px; overflow:auto; }

div.posts div.post div.text div.permalink { position:absolute; height:150px; z-index:10; background: rgba(255, 255, 255, 0.70); {block:IndexPage}display:none;{/block:IndexPage} padding:6px; top:-5px; left:-173px; }
div.posts div.post:hover div.text div.permalink { display:block; }
div.posts div.post div.text div.permalink a { border-bottom:0px; }
div.posts div.post div.text div.permalink div.left { width:150px; height:140px; border-right:1px dotted rgba(0, 0, 0, 0.30); padding:5px; }

a.linkpost { border-bottom:1px dotted #d8d8d8; font-weight:bold; }

div.chat ul { list-style:none; margin:0px; padding:0px; }
div.chat li { padding:3px 0; }
div.chat span.label { font-weight:bold; width:100px; display:block; float:left; }
div.chat div.line { width:250px; float:left; }

{CustomCSS}
</style>
</head>
<body>
<div align=“center”>

{block:Description}
<div class=“description”>
<div class=“left”>
{Description}
</div>
</div>
{/block:Description}

<a href=”/” class=“blogtitle”>{Title}</a>

<br>

{block:IfShowRSSLink}
<a href=”{RSS}”>RSS</a>
{/block:IfShowRSSLink}
{block:IfShowArchiveLink}
<a href=”/archive”>Archive</a>
{/block:IfShowArchiveLink}
{block:IfShowRandomLink}
<a href=”/random”>Random</a>
{/block:IfShowRandomLink}
{block:IfShowLikesLink}
<a href=“http://www.tumblr.com/liked/by/{Name}”>Likes</a>
{/block:IfShowLikesLink}
{block:IfShowMobileLink}
<a href=”/mobile”>Mobile</a>
{/block:IfShowMobileLink}
{block:SubmissionsEnabled}
<a href=”/submit”>Submit</a>
{/block:SubmissionsEnabled}
{block:AskEnabled}
<a href=”/ask”>{AskLabel}</a>
{/block:AskEnabled}

{block:HasPages}<br />
{block:Pages}
<a href=”{URL}”>{Label}</a>
{/block:Pages}
{/block:HasPages}

</div>

<div class=“posts”>
{block:Posts}

{block:Text}
<div class=“text”>
<div class=“permalink”>
<div class=“left”>
{block:Date}<a href=”{Permalink}”>{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}</a>{/block:Date}
{block:NoteCount}<br>{NoteCountWithLabel}{/block:NoteCount}
{block:HasTags}<br><br>
Tags:
{block:Tags}
<a href=”{TagURL}” class=“tag”>{Tag}</a>
{/block:Tags}
{/block:HasTags}
</div>
</div>

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

{block:Photo}
<div class=“photo”>
<div align=“center”>
{LinkOpenTag}<img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>{LinkCloseTag}
</div>

<div class=“permalink”>
<div class=“left”>
{block:Date}<a href=”{Permalink}”>{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}</a>{/block:Date}
{block:NoteCount}<br>{NoteCountWithLabel}{/block:NoteCount}
{block:HasTags}<br><br>
Tags:
{block:Tags}
<a href=”{TagURL}” class=“tag”>{Tag}</a>
{/block:Tags}
{/block:HasTags}
</div><div class=“right”>
{block:Caption}{Caption}{/block:Caption}
</div>
</div>
</div>
{/block:Photo}

{block:Photoset}
<div class=“photo”>
<div class=“permalink”>
<div class=“left”>
{block:Date}<a href=”{Permalink}”>{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}</a>{/block:Date}
{block:NoteCount}<br>{NoteCountWithLabel}{/block:NoteCount}
{block:HasTags}<br><br>
Tags:
{block:Tags}
<a href=”{TagURL}” class=“tag”>{Tag}</a>
{/block:Tags}
{/block:HasTags}
</div><div class=“right”>
{block:Caption}{Caption}{/block:Caption}
</div>
</div>

{PhotoSet-500}
</div>
{/block:Photoset}

{block:Quote}
<div class=“text”>
<div class=“permalink”>
<div class=“left”>
{block:Date}<a href=”{Permalink}”>{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}</a>{/block:Date}
{block:NoteCount}<br>{NoteCountWithLabel}{/block:NoteCount}
{block:HasTags}<br><br>
Tags:
{block:Tags}
<a href=”{TagURL}” class=“tag”>{Tag}</a>
{/block:Tags}
{/block:HasTags}
</div>
</div>

<span style=“font-size:20px; float:left; font-family:georgia; padding-right:5px;”>“</span>
{Quote}
{block:Source}<br /><span style=“padding-left:0px;”>— {Source}</span>{/block:Source}
</div>
{/block:Quote}

{block:Link}
<div class=“text”>
<div class=“permalink”>
<div class=“left”>
{block:Date}<a href=”{Permalink}”>{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}</a>{/block:Date}
{block:NoteCount}<br>{NoteCountWithLabel}{/block:NoteCount}
{block:HasTags}<br><br>
Tags:
{block:Tags}
<a href=”{TagURL}” class=“tag”>{Tag}</a>
{/block:Tags}
{/block:HasTags}
</div>
</div>

» <a href=”{URL}” class=“linkpost” {Target}>{Name}</a>
{block:Description}
{Description}
{/block:Description}
</div>
{/block:Link}

{block:Chat}
<div class=“text”>
<div class=“permalink”>
<div class=“left”>
{block:Date}<a href=”{Permalink}”>{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}</a>{/block:Date}
{block:NoteCount}<br>{NoteCountWithLabel}{/block:NoteCount}
{block:HasTags}<br><br>
Tags:
{block:Tags}
<a href=”{TagURL}” class=“tag”>{Tag}</a>
{/block:Tags}
{/block:HasTags}
</div>
</div>

<div class=“chat”>
{block:Title}<a href=”{Permalink}”>{Title}</a>{/block:Title}
<ul>
{block:Lines}
<li class=”{Alt}”>
{block:Label}<span class=“label”>{Label}</span>{/block:Label}
<div class=“line”>{Line}</div>
<br style=“clear:both;” />
</li>
{/block:Lines}
</ul>
</div>
</div>
{/block:Chat}

{block:Audio}
<div class=“text”>
<div class=“permalink”>
<div class=“left”>
{block:Date}<a href=”{Permalink}”>{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}</a>{/block:Date}
{block:NoteCount}<br>{NoteCountWithLabel}{/block:NoteCount}
{block:HasTags}<br><br>
Tags:
{block:Tags}
<a href=”{TagURL}” class=“tag”>{Tag}</a>
{/block:Tags}
{/block:HasTags}
</div>
</div>

{AudioPlayerGrey}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Audio}

{block:Video}
<div class=“photo”>
<div class=“permalink”>
<div class=“left”>
{block:Date}<a href=”{Permalink}”>{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}</a>{/block:Date}
{block:NoteCount}<br>{NoteCountWithLabel}{/block:NoteCount}
{block:HasTags}<br><br>
Tags:
{block:Tags}
<a href=”{TagURL}” class=“tag”>{Tag}</a>
{/block:Tags}
{/block:HasTags}
</div><div class=“right”>
{block:Caption}{Caption}{/block:Caption}
</div>
</div>

{Video-500}
</div>
{/block:Video}

{block:Answer}
<div class=“text”>
<div class=“permalink”>
<div class=“left”>
{block:Date}<a href=”{Permalink}”>{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}</a>{/block:Date}
{block:NoteCount}<br>{NoteCountWithLabel}{/block:NoteCount}
{block:HasTags}<br><br>
Tags:
{block:Tags}
<a href=”{TagURL}” class=“tag”>{Tag}</a>
{/block:Tags}
{/block:HasTags}
</div>
</div>

<a href=”{Permalink}” class=“caption”>{Asker} asked: {Question}</a>
{Answer}
</div>
{/block:Answer}

</div>

{/block:Posts}

<div style=“text-align:center;”>
{block:Pagination}
{block:PreviousPage}
<a href=”{PreviousPage}”>« Previous</a>
{/block:PreviousPage}
{block:PreviousPage}{block:NextPage} · {/block:NextPage}{/block:PreviousPage}
{block:NextPage}
<a href=”{NextPage}”>Next »</a>
{/block:NextPage}
{/block:Pagination}

clear theme by <a href=“http://parti.tumblr.com/tagged/themes”>parti</a>
<br />
powered by <a href=“http://www.tumblr.com/”>tumblr</a>
</div>

</div>
</div>
</body>
</html>

Observing members: 0

Composing members: 0

7 Answers

Can you post a link to your site? It is a bit easier to do this if I can drop into firebug on the actual page. I’m a little concerned about the width of the image since the page seems to have a fixed width of 500px.

jrpowell (40562

)“Great Answer” (1

) Flag as…

yeah for sure, thanks for the quick response by the way!!

http://thisismycool.tumblr.com/

stressed (6

)“Great Answer” (0

) Flag as…

It will break the theme really badly if you try to use a image that is 850px wide. I tried. But if you can re-size the image down to 500px wide it is pretty easy to do.

Change this line:

<a href=”/” class=“blogtitle”>{Title}</a>

to this:

You will of course need to use the URL for your image. And note that Fluther replaced my nice quotes with curly ones. So if you copy and paste make sure you make them straight again.

Here is a pic.

jrpowell (40562

)“Great Answer” (0

) Flag as…

hey thanks so much. The image still doesn’t show up though. Did I edit this correctly? I’ve resized the image to w:500px by h:350px now too.

a.linkpost { border-bottom:1px dotted #d8d8d8; font-weight:bold; }

{CustomCSS}
</style>
</head>
<body>
<div align=“center”>

{block:Description}
<div class=“description”>
<div class=“left”>
{Description}
</div>
</div>
{/block:Description}

<br>

{block:HasPages}<br />
{block:Pages}
<a href=”{URL}”>{Label}</a>
{/block:Pages}
{/block:HasPages}

</div>

<div class=“posts”>
{block:Posts}

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

{block:Photo}
<div class=“photo”>
<div align=“center”>
{LinkOpenTag}<img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>{LinkCloseTag}
</div>

{PhotoSet-500}
</div>
{/block:Photoset}

» <a href=”{URL}” class=“linkpost” {Target}>{Name}</a>
{block:Description}
{Description}
{/block:Description}
</div>
{/block:Link}

{AudioPlayerGrey}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Audio}

{Video-500}
</div>
{/block:Video}

<a href=”{Permalink}” class=“caption”>{Asker} asked: {Question}</a>
{Answer}
</div>
{/block:Answer}

</div>

{/block:Posts}

clear theme by <a href=“http://parti.tumblr.com/tagged/themes”>parti</a>
<br />
powered by <a href=“http://www.tumblr.com/”>tumblr</a>
</div>

</div>
</div>
</body>
</html>

stressed (6

)“Great Answer” (0

) Flag as…

The url for the image is giving me a 404 error. Try uploading the image to http://imgur.com/ instead.

jrpowell (40562

)“Great Answer” (0

) Flag as…

It works now!!! Thanks so much!! Something so simple has been giving me hours of trouble. Thanks again for the speedy response, much appreciated!

stressed (6

)“Great Answer” (1

) Flag as…

You didn’t put the image inside the header division. Try this.

{block:Description}
<div class=“description”>
<div class=“left”>
{Description}

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

anartist (14813

)“Great Answer” (0

) Flag as…

Answer this question

Login

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Older »

Has it been proved (and if so, how?) that ...

« Newer

What is Rihanna Rude Boy about?

Have a question? Ask Fluther!

What do you know more about?

2/3

What do you know more about?

3/3

What do you know more about?

Wow! You've got 847 knowledge matches!

Want to see them? Join Fluther!

Knowledge Networking @ Fluther

General Question

Change header from text to image on tumblr?

7 Answers

Answer this question

Login

Join

Live Preview

Already a member?

Join for Free!

Related

General Question

Change header from text to image on tumblr?

7 Answers

Answer this question

Login

Join

Live Preview

Already a member?

Join for Free!

Login

Not a member?

Related