TUMBLR HELP: convert title/header to image?

Asked by haleighp (3

) January 15th, 2011

I’ve been at this for over an hour with no luck. Please help!

Here is the HTML for my 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”>

<!—
Simply Complex theme by http://phrenesis.tumblr.com/themes
—>

<title>{Title}</title>
<link rel=“shortcut icon” href=”{Favicon}”>
<link rel=“alternate” type=“application/rss+xml” href=”{RSS}”>
{block:Description}<meta name=“description” content=”{MetaDescription}” />{/block:Description}

a:link, a:active, a:visited{
color:{color:link};
text-decoration:none;
-webkit-transition-duration: 0.4s;
}
a:hover{
color:#000000;
}
h1, big{
color:{color:title};
font-family:georgia;
font-weight:bold;
{block:IfChooseFonts}font-family:{font:body};{/block:IfChooseFonts}
font-size:12px;
-webkit-text-stroke: 1px transparent;
line-height:8px;
letter-spacing:1px;
font-weight:normal;
text-transform:;
margin:0px;
padding:0px;
text-align:;
}
.blogtitle{
color:{color:title};
font-family:courier new;
{block:IfChooseFonts}font-family:{font:body};{/block:IfChooseFonts}
{block:IfNotSmallerPhotos}font-size:45px;
line-height:46px;{/block:IfNotSmallerPhotos}
{block:IfSmallerPhotos}font-size:35px;
line-height:36px;{/block:IfSmallerPhotos}
letter-spacing:1px;
font-weight:normal;
-webkit-text-stroke: 1px transparent;
text-transform:uppercase;
margin:0px;
}

.description {
letter-spacing:1px;
font-size:10px;
margin-top:-5px;
padding-bottom:10px;
line-height:11px;
float:left !important;
}

.navigation {
font-size:10px;
font-family:courier new;
text-transform:uppercase;
letter-spacing:1px;
float:right;
}

.title, h3{
color:{color:title};
font-style:italic;
font-size:1.3em;
line-height:12px;
font-weight:normal;
letter-spacing:1px;
}

.linkies{
color:{color:title};
-webkit-transition-duration: 0.3s;
font-family:{font:Body};
font-size:9px;
line-height:11px;
letter-spacing:0px;
font-weight:normal;
text-transform:;
margin:0px;
padding:0px;
margin-bottom:-0px;
text-align:;
text-transform:lowercase;
}
.quotes{
color:{color:quotes};
font-family:consolas;
{block:IfChooseFonts}font-family:{font:quotes};{/block:IfChooseFonts}
font-size:11px;
line-height:10px;
letter-spacing:0px;
font-weight:normal;
}
.header{
position: fixed;
background-color:{color:background};
margin-top: -39px;
margin-bottom: 11px;
line-height: 8px;
padding: 4px;
opacity:1;
font-family:consolas;
{block:IfChooseFonts}font-family:{font:body};{/block:IfChooseFonts}
font-size: 10px;
text-transform:;
text-align:;
z-index: 2;
width: 642px;
}
.audio {width: {block:IfNotSmallerPhotos}850px{/block:IfNotSmallerPhotos} {block:IfSmallerPhotos}650px{/block:IfSmallerPhotos}; background:#000000;}

.contentcolumn{width: {block:IfNotSmallerPhotos}850px{/block:IfNotSmallerPhotos} {block:IfSmallerPhotos}650px{/block:IfSmallerPhotos}; margin:auto;}

div.header:hover{
position: fixed;
background-color:{color:background};
margin-top: -39px;
margin-bottom: 11px;
line-height: 8px;
padding: 4px;
opacity:1;
font-family:consolas;
{block:IfChooseFonts}font-family:{font:body};{/block:IfChooseFonts}
font-size: 10px;
text-transform:;
text-align:;
z-index: 2;
width: 642px;
}

div.video embed,
div.post div.video object {
width:{block:IfNotSmallerPhotos}850px{/block:IfNotSmallerPhotos}{block:IfSmallerPhotos}650px{/block:IfSmallerPhotos} !important;
height:{block:IfNotSmallerPhotos}650px{/block:IfNotSmallerPhotos}{block:IfSmallerPhotos}450px{/block:IfSmallerPhotos} !important;
}
#center{
{block:Ifalignleft}float:left;{/block:Ifalignleft}
margin:auto;
margin-top:15px;
width:{block:IfNotSmallerPhotos}850px{/block:IfNotSmallerPhotos}{block:IfSmallerPhotos}650px{/block:IfSmallerPhotos};
padding-top:8px;
}
#entry{
margin-bottom:10px;
{block:ifMoreSpaceBetweenPosts}
margin-bottom:30px;
{/block:ifMoreSpaceBetweenPosts}
width:{block:IfNotSmallerPhotos}850px{/block:IfNotSmallerPhotos}{block:IfSmallerPhotos}650px{/block:IfSmallerPhotos};
}
#entry:hover .perma{
display:block;
}
#ask{
display:block;
float: left;
width:50px;
overflow:hidden;
word-wrap:break-word;
margin-right:3px;
}
#postdate{
font-family:consolas;
{block:IfChooseFonts}font-family:{font:body};{/block:IfChooseFonts}
background:;
padding:2px;
font-size:{text:font size};
text-transform:none;
}
#entry img{
width:{block:IfNotSmallerPhotos}850px{/block:IfNotSmallerPhotos}{block:IfSmallerPhotos}650px{/block:IfSmallerPhotos};
-moz-box-shadow: 0px 0px 0px #000000;
-webkit-box-shadow: 0px 0px 0px #000000;
}
.perma {
color:#000000;
float:right;
{block:IfNotSmallerPhotos}margin-left:845px;{/block:IfNotSmallerPhotos}
{block:IfSmallerPhotos}margin-left:645px;{/block:IfSmallerPhotos}
position: absolute;
text-align:left;
width:150px;
height:150px;
font-family:Georgia;
{block:IfChooseFonts}font-family:{font:body};{/block:IfChooseFonts}
letter-spacing: 1px;
line-height:9px;
display: none;
position:absolute;
{block:Ifalignleft}left:59%;{/block:Ifalignleft}
}
#entry:hover .perma {display: block;
}
blockquote{
background-color: {color:box};
padding: 7px;
padding-left:8px;
border-left:1px solid {color:background};
border-right:1px solid {color:background};
b, strong{color:{color:title};}
i, em {color:{color:text};}
p{margin-top:3px; margin-bottom:3px;}
blockquote img{display:block; width:100%;}
border-left: 2px solid #000000;
padding: 0 0 0 15px;
margin-left: 0px;
blockquote {position:relative; left:-5px; margin-top:0px; margin-right:0px; padding-right:0px;}
a img{border:none;}
a img{border;none;}
img{border:none; -webkit-transition: opacity 0.5s linear; opacity: 0.85;}
img:hover{-webkit-transition: opacity 0.5s linear; opacity: 1;}

.user_1 .label, .user_4 .label, .user_7 .label {color:{color:title};}
.user_2 .label, .user_5 .label, .user_8 .label {color:{color:link};}
.user_3 .label, .user_6 .label, .user_9 .label {color:{color:text}; opacity:.75;}
ul.chat, .chat ol, .chat li {list-style:none; margin:0px; padding:0px;}
.notes img{width:10px; position:relative; top:1px;}
ol.notes, .notes li{list-style:none; margin:0px; padding:0px;}
iframe input, iframe submit, iframe textarea, iframe div, iframe table {background-color:transparent!important;}
</style>

{block:IfEndlessScroll}
<script type=“text/javascript” src=“http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js”></script>{/block:IfEndlessScroll}

<body>

<!—IMPORTANT—>

<div id=“center”>
{block:NoContentSource}
<a href=”{SourceURL}”>
{lang:Source}:
{block:SourceLogo}
<img src=”{BlackLogoURL}” width=”{LogoWidth}”
height=”{LogoHeight}” alt=”{SourceTitle}” />
{/block:SourceLogo}
{block:NoSourceLogo}
{SourceTitle}
{/block:NoSourceLogo}
</a>
{/block:NoContentSource}

<a href=”/”><div class=“blogtitle”>{Title}</div></a>
{block:Description}<div class=“description”>{Description}</div>{/block:Description}

<div class=“navigation”><a href=”/archive”>Archive</a>
<a href=”{Rss}”>RSS</a>
{block:AskEnabled}<a href=”/ask”>Ask</a>{/block:AskEnabled}
{block:HasPages}{block:Pages}<a href=”{URL}”>{Label}</a>{/block:Pages}{/block:HasPages}
<a href=“http://darlingskill.tumblr.com/about”>About</a></div>

{block:IfEndlessScroll}<div class = “autopagerize_page_element”>{/block:IfEndlessScroll}

{block:Posts}

{block:Text}
<div id=“entry”>
<div class=“perma”><a href=”{Permalink}”> ({24HourWithZero}:{Minutes})</a></div>
{block:Title}<div class=“title”>{Title}</div>{/block:Title}
<div style=“margin-top:-5px;”>{Body}</div>
</div>
{/block:Text}

{block:Photoset}<div id=“entry”><div class=“perma”><a href=”{Permalink}”> ({24HourWithZero}:{Minutes})</a></div><center>{Photoset-500}</center>{block:Caption}{/block:Caption}</div>{/block:Photoset}

{block:Link}<div id=“entry”><div class=“perma”><a href=”{Permalink}”> ({24HourWithZero}:{Minutes})</a></div><a href=”{URL}” class=“link” {Target}><h3>{Name} </h3></a>{block:Description}<P>{Description}</p>{/block:Description}</div>{/block:Link}

{block:Chat}<div id=“entry”><div class=“perma”><a href=”{Permalink}”> ({24HourWithZero}:{Minutes})</a></div><ul class=“chat”>{block:Lines}<li class=“user_{UserNumber}”>{block:Label}<span class=“label”>{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul></div>{/block:Chat}

{block:Audio}
<div id=“entry”>
<div class=“perma”><a href=”{Permalink}”> ({24HourWithZero}:{Minutes})</a></div>
<div class=“audio”>{AudioPlayerBlack}</div>
{block:Caption}<div style=“text-transform:uppercase; font-size:11px; margin-top:-5px;”>{Caption}</div>{/block:Caption}
</div>
{/block:Audio}

<div class=“video”>
{block:Video}
<div id=“entry”><div class=“perma”><a href=”{Permalink}”> ({24HourWithZero}:{Minutes})</a></div>{Video-500}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}</div>{/block:Video}
</div>

{block:Answer}<div id=“entry”><div class=“perma”><a href=”{Permalink}”> ({24HourWithZero}:{Minutes})</a></div> <div style=“margin-bottom:-22px;”>
<span style=“font-family:Georgia; font-weight:bold; font-style:italic;
text-transform:uppercase;”><a href=”{Permalink}”>{Asker} —</span></a><b> {Question}</b></div>
<br>{Answer}</div>
{/block:Answer}

{block:Quote}
<div id=“entry”>
<div class=“perma”><a href=”{Permalink}”> ({24HourWithZero}:{Minutes})</a></div>
”{Quote}”<br>
<div style=“padding-left:30px;”>{block:Source}— <b>{Source}</b>{/block:Source}</div>
</div>
{/block:Quote}

{block:Photo}
<div id=“entry”>
<div class=“perma”><a href=”{Permalink}”> ({24HourWithZero}:{Minutes})</a></div>
<a href=”{LinkURL}”><img src=”{PhotoURL-HighRes}” alt=”{PhotoAlt}” width=”{text:Width}”/></a>
{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
</div>
{/block:Photo}

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

{/block:Posts}

</div>

{block:IfNotEndlessScroll}{block:Pagination}<div style=“margin-top:10px; margin-bottom:15px; margin-bottom:5px; font-family:Times; letter-spacing:1px; font-size:16px; line-height:15px”><div style=“float:left”>{block:PreviousPage}<a href=”{PreviousPage}”>←</a>{/block:PreviousPage}</div> <div style=“float:right;”>{block:NextPage}<a href=”{NextPage}”>→</a>{/block:NextPage}</div></div>{/block:Pagination}{/block:IfNotEndlessScroll}

</div>

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

And here is the image I would like to replace my title/header: http://i53.tinypic.com/o0uru9.jpg.

Thanks! I’m so hopeless at this stuff.

Observing members: 0

Composing members: 0

6 Answers

it may be around this line though i cant be sure as im not all that familiar with tumblr html.

is there currently a header in place? cant you just specify one in the admin tool?

963chris (1029

)“Great Answer” (0

) Flag as…

I tried inserting the image url where it says “BlackLogoURL,” (was that right?) but it didn’t work. :/
There’s no header in place and I WISH I could specify one from the appearance options, but it isn’t offered with this theme. Arrggh.

haleighp (3

)“Great Answer” (0

) Flag as…

Find this line:
<a href=”/”><div class=“blogtitle”>{Title}</div></a>

Change it to:
http://pastebin.com/5reVzfte <—Code posted in that link.
Just change the URL of the image. There is a good chance you will need to play with the image size. The width of the image should be about 850px wide and whatever height you want.

The description will be a little under the header. If you don’t want the description delete {block:Description}<div class=“description”>{Description}</div>{/block:Description}

It could be fixed but I’m sure you are already using a different theme so I won’t bother.

omph (815

)“Great Answer” (1

) Flag as…

FIXED! Thanks for the help you two :)

haleighp (3

)“Great Answer” (0

) Flag as…

Since you are going to use this I will help with the description thing.
.description {
letter-spacing:1px;
font-size:10px;
margin-top:-5px;
padding-bottom:10px;
line-height:11px;
float:left !important;
}

Change margin-top:-5px; to margin-top:1px;

omph (815

)“Great Answer” (1

) Flag as…

Damn you’re good! Thanks again!

haleighp (3

)“Great Answer” (0

) Flag as…