How do i set an image as a title header on my tumblr account?

Asked by nayn (2

) May 24th, 2010

**here’s the code of my theme** where will i put the html code of the image??? **

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

<!—END DEFAULT COLORS—>

<title>{block:SearchPage}Search results for ”{SearchQuery}” – {/block:SearchPage}{block:PostSummary}{PostSummary} – {/block:PostSummary}{Title}</title>
<link rel=“shortcut icon” href=”{Favicon}” />
<link rel=“alternate” type=“application/rss+xml” href=”{RSS}” />

body {
background: {color:Background} url(’{image:Background}’);
margin: 30px 0px 0px 340px;
font: Normal 13px {font:Body};
color: #666;
}

#container {
width: 520px;
height: 100%;
margin: 15px 0px 15px 0px;
padding: 10px;
background-color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#header h1 {
font: 50px {font:Title};
margin: 0px 0px -5px -230px;
}

#header h1 a {
color: {color:Title};
text-decoration: none;
}

#header h1 a:hover {
color: {color:Title Hover};
}

#right {
position: absolute;
left: 895px;
font: 12px {font:Body};
line-height: 15px;
width: 212px;
background-color: #fff;
padding: 10px;
color: {color:Description};
margin: 15px 0px 0px 0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#left {
position: absolute;
left: 105px;
font: 12px {font:Body};
line-height: 15px;
width: 200px;
background-color: #fff;
padding: 10px;
color: {color:Description};
margin: 15px 0px 0px 0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

h1 {
color: {color:Title};
margin: 0px 0px 10px 0px;
font-weight: normal;
font-size: 40px;
letter-spacing: -1px;
}

h1 a {
color: {color:Title};
text-decoration: none;
}

#about me {
color: {color:Description};
font-size: 9px;
line-height: 18px;
padding-right: 70px;
margin-bottom: 5px;
}

.date {
margin: 10px 0px 10px 0px;
padding: 5px 5px 5px 10px;
font: 12px {font:Date};
text-align: left;
letter-spacing: -1px;
text-transform: uppercase;
background: {color:Date Background};
}

.date a {
color: {color:Date};
text-decoration: none;
}

.date a:hover {
color: {color:Date Hover};
text-decoration: none;
}

.sideheader {
margin: 20px 0px 15px 0px;
color: {color:Sidebar Header};
font-size: 12px;
text-align: left;
letter-spacing: 0px;
text-transform: uppercase;
border-bottom: solid 1px #444;
}

a {
text-decoration: none;
color: {color:Links};
}

a:hover {
color: {color:Links Hover};
text-decoration: none;
}

.post-footer p.reblogged {
font-size:10px;
color: {color:Text Color};
padding:5px 0;
}

.post-footer p.reblogged a {
text-decoration: none;
background-repeat: no-repeat;
background-position: center left;
padding: 2px 0 2px 18px;
}

div.post {
margin: 0px 10px 40px 10px;
position: relative;
}

div.post img.permalink {
border-width: 0px;
width: 23px;
height: 9px;
position: absolute;
top: 5px;
right: 5px;
display: none;
}

div.post:hover img.permalink {
display: block;
}

div.post h2 {
font: 18px {font:Body};
text-transform: uppercase;
letter-spacing: -1px;
margin: 0px 0px 10px 0px;
}

div.post h2 a {
color: {color:Text Color};
text-decoration: none;
}

div.post h2 a:hover {
color: {color:Links Hover};
text-decoration: none;
}

/* Regular Post */

.post .regular {
font-size: 12px;
color: {color:Text Color};
line-height: 17px;
text-align: justify;
}

.post .regular img {
max-width: 100%;
}

.post .regular blockquote {
font-style: italic;
}

/* Photo Post */

div.post div.photo img {
border-width: 0px;
}

div.post div.photo div.caption {
font-size: 12px;
text-align: justify;
margin: 10px 0px 0px 0px;
color: {color:Text Color};
}

div.post div.photo div.caption a {
color: {color:Links};
}

div.post div.photo div.caption a:hover {
color: {color:Links Hover};
text-decoration: none;
}

/* Quote Post */

div.post div.quote {
padding: 0px 15px 0px 15px;

}

div.post div.quote span.quote {
font-size: 20px;
color: {color:Text Color};
line-height: 22px;
}

div.post div.quote div.source {
font-size: 13px;
text-align: right;
color: {color:Text Color};
}

div.post div.quote div.source a {
color: {color:Links};
}

div.post div.quote div.source a:hover {
color: {color:Links Hover};
}

/* Link Post */

div.post div.link {
color: #222;
margin-top: 15px;
font-size: 18px;
letter-spacing: -1px;
}

div.post div.link a.link {
margin-top: 10px;
color: {color:Post Link};
padding: 5px;
background: {color:Post Link Background};
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

div.post div.link a:hover.link {
color: {color:Post Link Hover};
}

div.post div.link div.description {
margin-top: 20px;
font-size: 12px;
letter-spacing: 0px;
line-height: 17px;
text-align: justify;
color: {color:Text Color};
}

.post .link span.description blockquote {
font-style: italic;
}

/* Conversation Post */

div.post div.conversation ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 1px;
}

div.post div.conversation ul li {
font-size: 12px;
padding: 4px 0px 4px 8px;
color: #fff;
margin-bottom: 1px;
}

div.post div.conversation ul li span.label {
font-weight: bold;
}
div.post div.conversation ul li.odd {
background-color: {color:Conversation Background 1};
}

div.post div.conversation ul li.even {
background-color: {color:Conversation Background 2};
}

/* Audio Post */

div.post div.audio div.caption {
margin: -60px 0px 0px 0px;
color: #222222;
font-size: 12px;
text-align: justify;
}

div.post div.audio div.caption a {
color: #6DA856;
}

div.post div.audio div.caption a:hover {
color: #F7C852;
}

#radio {
margin: auto;
padding: 86px 0px 0px 87px;
width: 310px;
height: 189px;
background: transparent url(http://static.tumblr.com/dbcxhwx/HhBke90up/3173070506_79130bdc2d_o.png) no-repeat;
}

/* Video Post */

div.post div.video div.caption {
margin: 10px 0px 0px 0px;
color: #222;
font-size: 12px;
text-align: justify;
}

div.post div.video div.caption a {
color: {color:Links};
}

div.post div.video div.caption a:hover {
color: {color:Links Hover};
}

#navigation {
font-size: 14px;
text-transform: uppercase;
color: {color:Text Color};
}

#navigation a {
color: {color:Links};
text-decoration: none;
}

#navigation a:hover {
color: {color:Links Hover};
text-decoration: none;
}

#credits {
margin-top: 11px;
font-size: 8px;
text-align: left;
letter-spacing: 1px;
color: {color:Text Color};
}

#credits a {
color: {color:Links};
}

#credits a:hover {
color: {color:Links Hover};
text-decoration: none;
}

#comment {
display: inline;
letter-spacing: normal;
font-size: 11px;
text-align: right;
margin: 0px 0px 0px 10px;
}

#comment a {
text-decoration: none;
color: {color:Comment};
}

#comment a:hover {
text-decoration: none;
color: {color:Comment Hover};
}

.following {
margin-top: 5px;
margin-bottom: 5px;

}

.following a img {
border: 1px solid {color:Flickr};
padding: 1px;
margin: 1px;
}

.following a img:hover {
border: 1px solid {color:Flickr Hover};
padding: 1px;
margin: 1px;
}

#twitter {
color: {color:Text Color};
font-family: ‘Lucida Grande’, Gill Sans MT, sans-serif;
font-size: 10px;
text-align: left;
width: 225px;
margin: 0px 0px 0px -35px;
padding: 0px 0px 0px 0px;
}

#twitter ul {
list-style-type:none;
}

#twitter li {
margin-bottom: 5px;
border-bottom: 1px dotted;
padding-bottom: 5px;
}

#twitter a {
color: {color:Links};
}

#flickr {
width:220px;
height:154px;
padding: 0px 0px 0px 0px;
margin: 10px 10px -40px 15px;
}

#flickr img {
float: left;
margin:0 5px 5px 0px;
background: white;
padding: 3px;
width: 50px;
height: 50px;
border: 1px solid {color:Flickr};
}

#flickr a img:hover {
border: 1px solid {color:Flickr Hover};
}

#tags {
float: right;
text-align: right;
color: {color:Text Color};
font-size: 10px;
margin: -25px 0px 30px 0px
}

ol.notes {
padding: 0px;
margin: 25px 0px;
list-style-type: none;
border-bottom: solid 1px #ccc;
}

ol.notes li.note {
border-top: solid 1px #ccc;
padding: 10px;
}

ol.notes li.note img.avatar {
vertical-align: -4px;
margin-right: 10px;
width: 16px;
height: 16px;
}

ol.notes li.note span.action {
font-weight: bold;
}

ol.notes li.note .answer_content {
font-weight: normal;
}

ol.notes li.note blockquote {
border-color: #eee;
padding: 4px 10px;
margin: 10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
text-decoration: none;
}

{CustomCSS}

</style>
{block:Description}<meta name=“description” content=”{MetaDescription}” />{/block:Description}
</head>

<body>

<div id=“header”>
<h1><a href=”/”>{Title}</a></h1>
</div>

<!—Left Sidebar—>

<center>
<strong>
<a href=”{RSS}”>RSS</a> | <a href=”/archive”>Archive</a> | <a href=”/random”>Random</a>
</strong>
</center>

<!—Description—>

<p class=“sideheader”><strong>About</strong></p>

{block:Description}
{Description}
{/block:Description}

<!—Following—>

{block:IfShowFollowers}

<p class=“sideheader”><strong>Following</strong></p>
<p>
<div class=“following”>
{block:Following}
{block:Followed}
<a href=”{FollowedURL}”><img src=”{FollowedPortraitURL-24}” border=“0”/></a> {/block:Followed}
{/block:Following}
</div>
</p>

{/block:IfShowFollowers}

</div>

<!—Permalink Dates—>

{block:Posts}

{block:NewDayDate}
<div class=“blogtitletwo”>

</div>
<div class=“date”>
<a href=”{Permalink}”>{DayOfMonth} {Month} {ShortYear}</a>
<div id=“comment”>

<a href=”{Permalink}#disqus_thread”>Comments</a>
{block:NoteCount} | <a href=”{Permalink}”>{NoteCountWithLabel}</a>{/block:NoteCount}
</div>
</div>
{/block:NewDayDate}

{block:SameDayDate}
<div class=“blogtitletwo”>

</div>
<div class=“date”>
<a href=”{Permalink}”>Posted: {12Hour}:{Minutes} {CapitalAmPm}</a>
<div id=“comment”>

<a href=”{Permalink}#disqus_thread”>Comments</a>
{block:NoteCount} | <a href=”{Permalink}”>{NoteCountWithLabel}</a>{/block:NoteCount}
</div>
</div>
{/block:SameDayDate}

<!—Begin Tumblr Posts—>

<!—Text Posts—>

{block:Regular}
<div class=“regular”>
{block:Title}<h2><a href=”{Permalink}”>{Title}</a></h2>{/block:Title}
{Body}
</div>
{/block:Regular}

<!—Photo Posts—>

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

</center>
{block:Caption}
<div class=“caption”>{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}

<!—Quote Posts—>

{block:Quote}
<div class=“quote”>
<span class=“quote”>
<strong>“</strong> {Quote}
</span>
{block:Source}<div class=“source”>— {Source}</div>{/block:Source}
</div>
{/block:Quote}

<!—Link Posts—>

{block:Link}
<div class=“link”>
<center><a href=”{URL}” class=“link” {Target}>{Name}</a></center>
{block:Description}
<div class=“description”>{Description}</div>
{/block:Description}
</div>
{/block:Link}

<!—Chat Posts—>

{block:Conversation}
<div class=“conversation”>
{block:Title}<h2><a href=”{Permalink}”>{Title}</a></h2>{/block:Title}
<ul>
{block:Lines}
<li class=”{Alt}”>
{block:Label}<span class=“label”>{Label}</span>{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Conversation}

<!—Audio Posts—>

{block:Audio}
<div class=“audio”>
<div id=“radio”>
{AudioPlayerBlack}
</div>
{block:Caption}
<div class=“caption”>{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}

<!—Video Posts—>

{block:Video}
<div class=“video”>
{Video-500}
{block:Caption}
<div class=“caption”>{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
</div>

<!—Reblogging Information—>

{block:RebloggedFrom}

<p class=“reblogged”>
Reblogged: <a href=”{ReblogParentURL}” style=“background-image: url({ReblogParentPortraitURL-16});”>{ReblogParentName}</a></p>

{/block:RebloggedFrom}

<!—Tagging Information—>

{block:HasTags}
<div id=“tags”>
Tags:
{block:Tags} <a href=”{TagURL}”>{Tag}</a> {/block:Tags}
</div>
{/block:HasTags}

</div>

{block:PostNotes}
{PostNotes}
{/block:PostNotes}

{/block:Posts}

{block:IfDisqusShortname}
{block:Permalink}
<div id=“disqus”>
<div id=“disqus_thread”></div><script type=“text/javascript” src=“http://disqus.com/forums/{text:Disqus Shortname}/embed.js”></script><noscript><a href=“http://{text:Disqus Shortname}.disqus.com/?url=ref”>View the discussion thread.</a></noscript>
</div>
{/block:Permalink}
<script type=“text/javascript”>
//<![CDATA[
(function() {
var links = document.getElementsByTagName(‘a’);
var query = ’?’;
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf(’#disqus_thread’) >= 0) {
query += ‘url’ + i + ’=’ + encodeURIComponent(links[i].href) + ’&’;
}
}
document.write(’<script charset=“utf-8” type=“text/javascript” src=“http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js’ + query + ’”></’ + ‘script>’);
})();
//]]>
</script>
{/block:IfDisqusShortname}

<!—Page Navigation—>

<div id=“navigation”>
<p align=“center”>
{block:PreviousPage}
<a href=”{PreviousPage}”>← Previous</a>
{/block:PreviousPage}
•
{block:NextPage}
<a href=”{NextPage}”>Next →</a>
{/block:NextPage}
</p>

</div>

<!—Credits—>

<div id=“credits”>
Themed by <a href=“http://hunsonisgroovy.tumblr.com”>Hunson</a>. Originally by <a href=“http://joshjenkins.tumblr.com”>Josh</a>
</div>

</div>

{block:IfTwitterUsername}
<script type=“text/javascript” src=“http://twitter.com/javascripts/blogger.js”></script>
<script type=“text/javascript” src=“http://twitter.com/statuses/user_timeline/{text:Twitter Username}.json?callback=twitterCallback2&count=3”></script>
{/block:IfTwitterUsername}

</body>

theme
Tumblr

Observing members: 0

Composing members: 0

1 Answer

Find this:

<div id=“header”>
<h1><a href=”/”>{Title}</a></h1>
</div>

Change it to this:

You will obviously need to change the URL to whatever image you want to use. And fluther changes the straight quotes to curly ones so if you copy and paste you will need to change them back to straight.

jrpowell (40562

)“Great Answer” (2

) Flag as…