+- The VG Resource (https://www.vg-resource.com)
+-- Forum: Archive (https://www.vg-resource.com/forum-65.html)
+--- Forum: July 2014 Archive (https://www.vg-resource.com/forum-139.html)
+---- Forum: Other Stuff (https://www.vg-resource.com/forum-6.html)
+----- Forum: Questions, Info, and Tutorials (https://www.vg-resource.com/forum-89.html)
+----- Thread: Does anyone know how to write HTML? (/thread-15534.html)
Does anyone know how to write HTML? - Woppet* - 10-11-2010
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
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?
RE: Does anyone know how to write HTML? - Nindo - 10-11-2010
I'm assuming you want the header image left aligned? If you want it center or right aligned, the code will be a tiny bit different.
It's been awhile, but if I'm not mistaken all you need to do is put this line of code (I used the image in your sig as an example) just below the <body> tag:
<img src="http://i55.tinypic.com/s45ljp.jpg">
I'm not familiar with how tumblr does its layouts so that might not put the image precisely where you want. It might take a couple of tries fiddling with it, but it shouldn't be too much of a problem.
RE: Does anyone know how to write HTML? - Woppet* - 10-11-2010
Oh cool that's working, but it's too far to the left. Know how to center it?
Thankyou
I'd like to lower it a little too if that's possible?
So it isn't touching the top of the page
RE: Does anyone know how to write HTML? - Nindo - 10-11-2010
replace
<img src="http://i55.tinypic.com/s45ljp.jpg">
with
<p align="center">
</br>
<img src="http://i55.tinypic.com/s45ljp.jpg">
</p>
not sure how that will look since I myself can't test it, but that should
1. center it
2. drop it down a bit
RE: Does anyone know how to write HTML? - Woppet* - 10-11-2010
Thankyou. I fiddled with it for a while and i think i got what i wanted.
Turned out like: http://woppet.tumblr.com/
Thanks a lot bro!
RE: Does anyone know how to write HTML? - Nindo - 10-11-2010
No problem, looks good.
RE: Does anyone know how to write HTML? - Woppet* - 10-11-2010
Thankyou! Guess i can lock this now.