10-11-2010, 05:14 AM
I've been trying, to add a 780x150 header image to my blog on Tumblr.
But i literally have no clue how to do it.
I can edit the pages the html code, but it's all gibberish to me
This is the code for the theme
And here's a link to what it looks like:
http://woppet.tumblr.com/
I want the image right at the top of the page.
Can anyone tell me how i go about doing this?
But i literally have no clue how to do it.
I can edit the pages the html code, but it's all gibberish to me
This is the code for the theme
Code:
<!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"/>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<meta name="text:Twitter Username" content=""/>
<meta name="text:Flickr Username" content=""/>
<meta name="text:Disqus Shortname" content=""/>
<meta name="color:Asterisk" content="#17f0ff"/>
<title>{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<link href="http://static.tumblr.com/xz44nnc/qVpkyo84x/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://static.tumblr.com/xz44nnc/o5lkyivqw/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/xz44nnc/k24kyivst/poop.js"></script>
<style type="text/css">
ol#nav li.home a { color: {color:Asterisk}; }
/* Source logos */
#content .meta a img {
border: none;
background: none;
padding: 0;
margin: 0;
vertical-align: text-top;
-moz-opacity: 0.1;
opacity: 0.1;
}
#content .meta a:hover img {
-moz-opacity: 0.15;
opacity: 0.15;
}
{CustomCSS}
</style>
</head>
<body>
<ol id="nav">
<li class="home"><a href="/" title="{Title}">*</a></li>
<li><a href="/">{lang:Home}</a></li>
{block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
{block:IfFlickrUsername}<li><a href="http://flickr.com/photos/{text:Flickr Username}">Flickr</a></li>{/block:IfFlickrUsername}
{block:IfTwitterUsername}<li><a href="http://twitter.com/{text:Twitter Username}">Twitter</a></li>{/block:IfTwitterUsername}
<li><a href="/archive">{lang:Archive}</a></li>
<li><a href="{RSS}">{lang:RSS}</a></li>
</ol>
<div id="content">
<ol>
{block:Posts}
{block:Text}
<li class="regular">
{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
{Body}
<p class="meta"><a href="{Permalink}">{TimeAgo}</a> / <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{block:IfDisqusShortname} / <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}</p>
</li>
{/block:Text}
{block:Photo}
<li class="photo">
<p class="noborder">{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}</p>
{block:Caption}{Caption}{/block:Caption}
<p class="meta">
<a href="{Permalink}">{TimeAgo}</a>
/ <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
{block:IfDisqusShortname} / <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
{block:ContentSource}
/ /{lang:Source}: <a href="{SourceURL}">{block:SourceLogo}<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a></p>
{/block:ContentSource}
</p>
</li>
{/block:Photo}
{block:Photoset}
<li class="photoset">
<p class="noborder">{Photoset-500}</p>
{block:Caption}{Caption}{/block:Caption}
<p class="meta">
<a href="{Permalink}">{TimeAgo}</a>
/ <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
{block:IfDisqusShortname} / <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
{block:ContentSource}
/ /{lang:Source}: <a href="{SourceURL}">{block:SourceLogo}<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a></p>
{/block:ContentSource}
</p>
</li>
{/block:Photoset}
{block:Quote}
<li class="quote">
<blockquote>{Quote}</blockquote>
{block:Source}<cite>– {Source}</cite>{/block:Source}
<p class="meta">
<a href="{Permalink}">{TimeAgo}</a>
/ <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
{block:IfDisqusShortname} / <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
{block:ContentSource}
/ /{lang:Source}: <a href="{SourceURL}">{block:SourceLogo}<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a></p>
{/block:ContentSource}
</p>
</li>
{/block:Quote}
{block:Link}
<li class="link">
<h3><a href="{URL}" class="link" {Target}>{Name} →</a></h3>
{block:Description}{Description}{/block:Description}
<p class="meta">
<a href="{Permalink}">{TimeAgo}</a>
/ <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
{block:IfDisqusShortname} / <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
{block:ContentSource}
/ /{lang:Source}: <a href="{SourceURL}">{block:SourceLogo}<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a></p>
{/block:ContentSource}
</p>
</li>
{/block:Link}
{block:Video}
<li class="video">
{Video-500}
{block:Caption}{Caption}{/block:Caption}
<p class="meta">
<a href="{Permalink}">{TimeAgo}</a>
/ <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
{block:IfDisqusShortname} / <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
{block:ContentSource}
/ /{lang:Source}: <a href="{SourceURL}">{block:SourceLogo}<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a></p>
{/block:ContentSource}
</p>
</li>
{/block:Video}
{block:Chat}
<li class="chat">
{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
{block:Lines}<p>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</p>{/block:Lines}
<p class="meta">
<a href="{Permalink}">{TimeAgo}</a>
/ <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
{block:IfDisqusShortname} / <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
{block:ContentSource}
/ /{lang:Source}: <a href="{SourceURL}">{block:SourceLogo}<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a></p>
{/block:ContentSource}
</p>
</li>
{/block:Chat}
{block:Audio}
<li class="audio">
{AudioPlayerBlack}
{block:Caption}{Caption}{/block:Caption}
<p class="meta">
<a href="{Permalink}">{TimeAgo}</a>
/ <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
{block:IfDisqusShortname} / <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
{block:ContentSource}
/ {lang:Source}: <a href="{SourceURL}">{block:SourceLogo}<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a></p>
{/block:ContentSource}
</p>
</li>
{/block:Audio}
{block:PostNotes}
<li id="notes">
{PostNotes}
</li>
{/block:PostNotes}
{/block:Posts}
{block:IfDisqusShortname}<li><script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>{block:Permalink}<div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=jessakalani">comments powered by Disqus.</a></noscript><a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>{/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></li>
{/block:IfDisqusShortname}
</ol>
<div id="pagination">
{block:NextPage}<a class="button next" id="next_page" href="{NextPage}">← {lang:Older}</a>{/block:NextPage}
{block:PreviousPage}<a class="button right" href="{PreviousPage}">{lang:Newer} →</a>{/block:PreviousPage}
</div>
</div>
</body>
</html>And here's a link to what it looks like:
http://woppet.tumblr.com/
I want the image right at the top of the page.
Can anyone tell me how i go about doing this?