The VG Resource › Archive › July 2014 Archive › Other Stuff › Questions, Info, and Tutorials v
Does anyone know how to write HTML?


Users browsing this thread: 2 Guest(s)
Does anyone know how to write HTML?
Woppet* Offline
Can't stop this dog.
***
Posts: 1,545
Threads: 47
Joined: Jul 2008
DeviantArt Facebook Resource - Sprites Steam Tumblr Twitter

#1
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

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> &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{block:IfDisqusShortname} &nbsp;/&nbsp; <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>
                &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
                {block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
                {block:ContentSource}
                    &nbsp;/&nbsp;/{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>
                &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
                {block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
                {block:ContentSource}
                    &nbsp;/&nbsp;/{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>&ndash; {Source}</cite>{/block:Source}
            <p class="meta">
                <a href="{Permalink}">{TimeAgo}</a>
                &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
                {block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
                {block:ContentSource}
                    &nbsp;/&nbsp;/{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} &rarr;</a></h3>
            {block:Description}{Description}{/block:Description}
            <p class="meta">
                <a href="{Permalink}">{TimeAgo}</a>
                &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
                {block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
                {block:ContentSource}
                    &nbsp;/&nbsp;/{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>
                    &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
                    {block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
                    {block:ContentSource}
                        &nbsp;/&nbsp;/{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>
                &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
                {block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
                {block:ContentSource}
                    &nbsp;/&nbsp;/{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>
                &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
                {block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}
                {block:ContentSource}
                    &nbsp;/&nbsp; {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}">&larr; {lang:Older}</a>{/block:NextPage}
        {block:PreviousPage}<a class="button right" href="{PreviousPage}">{lang:Newer} &rarr;</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?
this is a sig


Website
Thanked by:
Nindo Offline
It's that bearded fellow!
**
Posts: 287
Threads: 4
Joined: Aug 2010
#2
10-11-2010, 09:46 AM (This post was last modified: 10-11-2010, 09:47 AM by Nindo.)
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.
好love好
ref=Comrade>/Bk/C2B/Gors,1,2/魚/Sploder/
ref=Nindo>/Apk/Bk/Green/魚/unno/
misc>/Diogalesu/
[Image: fFrame1Big.gif][Image: Frame1Big.gif]
[devart]
Thanked by:
Woppet* Offline
Can't stop this dog.
***
Posts: 1,545
Threads: 47
Joined: Jul 2008
DeviantArt Facebook Resource - Sprites Steam Tumblr Twitter

#3
10-11-2010, 10:04 AM
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
this is a sig


Website
Thanked by:
Nindo Offline
It's that bearded fellow!
**
Posts: 287
Threads: 4
Joined: Aug 2010
#4
10-11-2010, 10:16 AM
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
好love好
ref=Comrade>/Bk/C2B/Gors,1,2/魚/Sploder/
ref=Nindo>/Apk/Bk/Green/魚/unno/
misc>/Diogalesu/
[Image: fFrame1Big.gif][Image: Frame1Big.gif]
[devart]
Thanked by:
Woppet* Offline
Can't stop this dog.
***
Posts: 1,545
Threads: 47
Joined: Jul 2008
DeviantArt Facebook Resource - Sprites Steam Tumblr Twitter

#5
10-11-2010, 10:57 AM
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!
this is a sig


Website
Thanked by:
Nindo Offline
It's that bearded fellow!
**
Posts: 287
Threads: 4
Joined: Aug 2010
#6
10-11-2010, 01:47 PM
No problem, looks good.
好love好
ref=Comrade>/Bk/C2B/Gors,1,2/魚/Sploder/
ref=Nindo>/Apk/Bk/Green/魚/unno/
misc>/Diogalesu/
[Image: fFrame1Big.gif][Image: Frame1Big.gif]
[devart]
Thanked by: Woppet*
Woppet* Offline
Can't stop this dog.
***
Posts: 1,545
Threads: 47
Joined: Jul 2008
DeviantArt Facebook Resource - Sprites Steam Tumblr Twitter

#7
10-11-2010, 06:22 PM
Thankyou! Guess i can lock this now.
this is a sig


Website
Thanked by:


Forum Jump: