Send to a Friend

stressed's avatar

Change header from text to image on tumblr?

Asked by stressed (6points) 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}”>

<meta name=“font:Body” content=“Courier New”/>
<meta name=“color:Link” content=”#000000”/>
<meta name=“if:Show Archive Link” content=“1”/>
<meta name=“if:Show RSS Link” content=“1”/>
<meta name=“if:Show Random Link” content=“0”/>
<meta name=“if:Show Likes Link” content=“0”/>
<meta name=“if:Show Mobile Link” content=“0”/>

<style type=“text/css”>
img { border:0px; }
body { background: #fff; color:#424242; font-family:{font:Body}; font-size: 10px; margin:0px; padding:0px; text-transform:uppercase;}

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”>

<div class=“header”>

{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}

<div class=“post”>

{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}

<br />
<br />
<br />
<br />
<br />

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>

Using Fluther

or

Using Email

Separate multiple emails with commas.
We’ll only use these emails for this message.