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

Send to a Friend

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

Using Fluther

Using Email

Already a member?

Join for Free!

Send to a Friend

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

Using Fluther

Using Email

Already a member?

Join for Free!

Login

Not a member?