HTML coding help

NaeturVindur · Feb 8, 2011

I realize this is a silly-ish topic, but I'd really like to get this working. I've been working a lot on customizing my tublr blog layout, trying to make it my own, while basing it on someone else's work. A project I have with it now (and absolutely my most complicated to date, seeing as how I don't actually know how to code HTML :m083:

) is I want to have older post automatically load when a user scrolls to the bottom, as it does on the dashboard. The source code for my blog is here: view-source:http://nvindur.tumblr.com/ and the source code for the dashboard is here: view-source:http://www.tumblr.com/dashboard (I don;t know how well this one will link, if its attached to an account or not... if it fails, I can copypasta the important stuff here [or everything that I know isn't unimportant]).
Any ideas?

ETA: Also, the documentation Tumblr provides: http://www.tumblr.com/docs/en/custom_themes#pages

NaeturVindur · Feb 8, 2011

oh, that did fail, mostly... here it all is
my blog:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>{Title}{block:PostTitle} &mdash; {PostTitle}{/block:PostTitle}</title>


                                              <!-- DEFAULT COLORS -->

        <meta name="color:Background" content="#75C045"/>
        <meta name="color:Link" content="#FAF330"/>
        <meta name="color:Link Hover" content="#F02D64"/>
        <meta name="color:Quote" content="#F02D64"/>
        <meta name="color:Caption" content="#FFFFFF"/>
        <meta name="color:Post Link" content="#FFFFFF"/>
        
        <meta name="text:Disqus Shortname" content=""/>
        <meta name="text:Twitter Username" content=""/>


                                              <!-- END DEFAULT COLORS -->

  <link rel="shortcut icon" href="{Favicon}"/>
  <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  



   <style type="text/css">


                                              /* MAIN */

html { 
  font-size: 100%; 
}

a, a:active, a:visited {
  color: {color:Link};
  outline: none;
  text-decoration: none;
}

a:hover {
  color: {color:Link Hover};
}

a img {
  border: 0;
}

pre {
  background-color: #ebebeb;
}

                                              /* BACKGROUND BY NVindur */

/* IF YOU DON'T LIKE THE BACKGROUND AND PREFER THE ORIGINAL SOLID COLOR, SIMPLY REMOVE THE URL BETWEEN THE PARENTHESES AND SAVE. IT START WITH HTTP://... */

body {
  background: {color:Background} url('http://static.tumblr.com/aqt9daw/2qElfpp1n/tmlrbg3.jpg') center top no-repeat fixed;
  color: #fff;
  font: normal 1em/1.5 "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
  text-align: center;
}

                                              /* HEADERS & BLOCKQUOTES */

h1 {
  font: 30px Cambria, Helvetica, Times New Roman;
  color: #FFF;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}


#description {
  font: 13px "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
  line-height: 18px;
  margin-bottom: 10px;
  text-indent: 15px;
}

#description:first-letter {
  font: 20px Rockwell, Georgia, Bookman Old Style Serif;
  padding-right: 2px;
}

blockquote {
  margin: 5px 20px 0px 10px;
  padding-left: 10px;
  border-left: solid 1px {color:Caption}
}


                                              /* LAYOUT */

#contain {
  margin: 0 auto;
  padding-top: 0;
  text-align: left;
  width: 900px;
}

.title {
  color: {color:Link};
  margin: 30px 0px -40px 80px;
  max-width: 600px;
  font: 40px rockwell, archer medium, georgia, palatino serif;
}

#header {
  margin: 0px 0px -7px 0px;
  padding: 0px 0px 0px 0px;
}

#content {
  float: left;
  width: 526px;
  padding: 10px 30px 0px 30px;
  margin: 0px 0px 20px 70px;
  background: rgba(0, 0, 0, .30);
  background: url('http://static.tumblr.com/l6bra0l/IdYkm9q5x/trantheme_30_percent.png');
  border-radius: 15px 0px 15px 15px;
  -moz-border-radius: 15px 0px 15px 15px; 
  -webkit-border-top-left-radius: 15px;
}


                                              /* DATE */


.newdate, .samedate {
  position: relative;
  font: 13px rockwell, georgia, palatino serif;
  float: left;
  margin: 0 0 0 -130px;
  background: rgba(0, 0, 0, .30);
  background: url('http://static.tumblr.com/l6bra0l/IdYkm9q5x/trantheme_30_percent.png');
  padding: 6px;
  border-radius: 5px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;  
}

.newdate:hover, .samedate:hover {
  background: rgba(0, 0, 0, .50);
  background: url('http://static.tumblr.com/l6bra0l/PxIkm9qaj/trantheme_50_percent.png');
}


                                              /* POST LOOPS */


.post {
  margin: 10px 0 50px 0;
  padding-top:10px;
}

.postcont {
  margin: 0px 0px 0px 0px;   
  width:480px;
  padding: 0px 0px 0px 0px; 
}

.post h3 {
  margin: 0px 0px 10px 0px;
  color: {color:Caption};
  font: 25px archer medium, rockwell, georgia, palatino serif;
}

.post .caption {
  margin-bottom: 1.5em;
}

                                              /* TEXT POST */

.text_body {
  color: {color:Caption};
  font: 14px Cambria, "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
  line-height: 18px;
}

.text_body:first-letter {
  font-size: 30px;
}

.text_body p img {
  padding-top: 5px;
}

.text_body a {
  color: {color:Link};
  text-decoration: none;
}

.text_body a:hover {
  color: {color:Link Hover};
}


                                              /* LINK POST */

.link_header {
  text-align: center;
  background: rgba(0, 0, 0, .30);
  background: url('http://static.tumblr.com/l6bra0l/IdYkm9q5x/trantheme_30_percent.png');
  margin: 0px 0px 10px 0px;
  padding: 2px;
  font: 25px rockwell, georgia, palatino serif;
  border-radius: 10px; 
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px;
}

.link_header a {
  color:{color:Post Link};
}

.link_header a:hover {
 color: {color:Link Hover};
}


                                              /* QUOTE POST */

.thequote {
  font-size: 22px;
  font-style: italic;
  color: {color:Quote};
  font-family: Cambria;
}

.quote_source {
 color: {color:Caption};
 font-size: 15px;
 text-align: right;
 font-family: cambria;
}

.quote_source a {
 color: {color:Link};
}

.quote_source a:hover {
 color: {color:Link Hover};
}


                                              /* AUDIO POST */

.audio {
  margin: 0px 0px 0px 0px; 
  padding: 0px 0px 0px 0px;
}

.audiobox {
  margin: 0px 0px 0px 0px; 
  padding: 30px 0px 0px 130px;
  width: 360px;
  height: 83px;
  background: transparent url('http://static.tumblr.com/l6bra0l/js4km9qf6/trantheme_audio_player.png');
  background-repeat: no-repeat;
}

.audio_caption {
  margin: -20px 0px -20px 0px;
  font: 13px Cambria, "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
  color: {color:Caption};
  text-align: left;
}

.audio_caption a {
  color: {color:Link};
  text-decoration: none;
}

.audio_caption a:hover{
  color: {color:Link Hover};
}

.play_count {
  font: 10px Cambria, "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
  color: {color:Caption};
  text-align: right;
}

                                              /* PHOTO POST */

.photograph {
  padding: 13px 10px 10px 10px;
  background: rgba(0, 0, 0, .30);
  background: url('http://static.tumblr.com/l6bra0l/IdYkm9q5x/trantheme_30_percent.png');
  text-align: center;
  border-radius: 5px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;  
}

.caption_photo {
  margin: 5px 0px 0px 0px;
  font: 13px Cambria, "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
  color: {color:Caption};
  line-height: 18px;
}

.caption_photo a{
  color: {color:Link};
  text-decoration: none;
 
}

.caption_photo a:hover {
  color: {color:Link Hover};
}



                                              /* VIDEO POST */

.television_top {
  margin: 0px 0px 0px -12px;
  padding: 0px 0px 0px 0px; 
  width: 551px;
  height: 30px;
  background: transparent url('http://static.tumblr.com/aqt9daw/qWQlflm1s/tmblrscreen-top.png');
  background-repeat: no-repeat;
}

.television_bottom {
  margin: 0px 0px 0px -12px;
  padding: 0px 0px 0px 0px; 
  width: 550px;
  height: 50px;
  background: transparent url('http://static.tumblr.com/aqt9daw/3sQlflm0f/tmblrscreen-bttm.png');
  background-repeat: no-repeat;
}

.television {
  margin: 0px 0px 0px -10px;
  padding: 0px 0px 0px 0px;
  width: 547px;
  background: rgba(0, 0, 0, .50);
  background: url('http://static.tumblr.com/l6bra0l/PxIkm9qaj/trantheme_50_percent.png');
}

.video_caption {
  margin: 10px 0px 0px 0px;
  font: 13px Cambria, "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
  text-align: left;
  color: {color:Caption};
}




                                              /* CONVERSATION POST */


.chat .conversation {
  list-style: none;
  padding: 0;
  font: 14px Cambria, "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
}

.chat .conversation .line {
  border-bottom: 1px solid {color:Caption};
  padding: 0.4em;
  width: 500px;
}

.chat .conversation .person {
  font-weight: normal;
  color: {color:Caption};
}

.chat .conversation li.odd {
  background: none;
}

.chat .conversation li.even {
  background: rgba(0, 0, 0, .30);
  background: url('http://static.tumblr.com/l6bra0l/IdYkm9q5x/trantheme_30_percent.png');
}
  
  
                                              /* PAGE & POST NAVIGATION */

.previous-next {
  margin-bottom: 30px;
  padding: 20px 0px 15px 0px;
  font: 18px rockwell, georgia, palatino serif;
  line-height: 10px;
}

.previous-next .previous {
  margin-left: 430px;
}

.previous-next .next {
  margin-right: 0px;
}

                                              /* SIDEBAR */

#sidebar {
  font-size: 14px;
  float: left;
  width: 205px;
  margin: 0px 0px 0px 0px;
  padding: 20px 15px 15px 15px;
  background: rgba(0, 0, 0, .30);
  border-radius: 0px 0px 15px 0px;
  -moz-border-radius: 0px 0px 15px 0px; 
  -webkit-border-bottom-right-radius: 15px;
  background: url('http://static.tumblr.com/l6bra0l/IdYkm9q5x/trantheme_30_percent.png');
}

#sidebar h4 {
  font: 18px Rockwell,  Serif;
  margin: 0 0 15px 0;
  text-transform: capitalize;
  letter-spacing: 0px;
  border-bottom: 2px solid #FFFFFF;  
}

#sidebar p.credit {
  margin: 10px 0px 0px 0px;
  padding: 5px 0px 0px 0px;
  font-size: 9px;
  line-height: 12px;
}

                                              /* FOLLOWING */


.following{
  margin-top: 15px;
  margin-bottom: 5px;

}
.following a img{
  border: 1px solid {color:Caption};
  padding: 2px;
  margin: 1px;
}

.following a img:hover{
  border: 1px solid {color:link hover};
  padding: 2px;
  margin: 1px;
} 


                                              /* REBLOGGING & TAGS */



.post-footer p.reblogged {
  font: 12px Cambria, "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
  color: {color:Caption};
  padding:5px 0;
}

.post-footer p.reblogged a {
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: center left;
  padding: 2px 0 2px 18px;
}

#tags {
  text-transform: capitalize;
  text-align: right;
  color: {color:Caption};
  font: 12px Cambria, "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
  margin: -20px 0px 30px 0px
}



                                              /* TWITTER */



#twitter {
  color: #FFFFFF;
  font: 11px Cambria, "Lucida Grande", Helvetica, Arial, sans-serif;
  text-align: left;
  max-width: 500px;
  margin: 10px 0px 0px 0px;
  padding: 20px 0px 1px 45px;
  background: url('http://static.tumblr.com/l6bra0l/2RXkm9qec/trantheme_twitter_bird.png') no-repeat;
}

.tweet {
  margin: -15px 10px 0px -20px;
}

#twitter_background {
  background: url('http://static.tumblr.com/l6bra0l/IdYkm9q5x/trantheme_30_percent.png');
  max-width: 500px;
  margin-top: -15px;
  border-radius: 10px;
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px;
}

#twitter ul {
  list-style-type:none;
}

#twitter a {
  color: {color:Link};
}

#twitter a:hover {
  color: {color:Link Hover};
}


                                              /* COMMENTS */

#comment {
  font-size: 10px;
  text-align: left;
  line-height: 18px;
  margin: 0px 0px 0px 0px;
}

#comment a {
  text-decoration: none;
  color: {color:Caption};
}

#comment a:hover {
  text-decoration: none;
  color: {color:Link Hover};
}

#dsq-content {
  background: rgba(0, 0, 0, .30);
  background: url('http://static.tumblr.com/l6bra0l/IdYkm9q5x/trantheme_30_percent.png');
  padding: 5px 20px 20px 20px;
  margin-top: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;
}


                                              /* NOTES */

.notes {
  font: 10px cambria, arial, helvetica, serif;
}

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: 5px;
}

ol.notes li.note img.avatar {
  vertical-align: -4px;
  margin-right: 10px;
  width: 16px;
  height: 16px;
}

ol.notes li.note span.action {
  font-weight: normal;
  font-size: 11px;
}

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;
}

  </style>
{CustomCSS}
                                           <!-- PASTE STREAMPAD SCRIPT BELOW (OPTIONAL) -->









</head>
<body>


                                           <!-- TWITTER -->

	{block:IfTwitterUsername}
  <div id="twitter_background">
    <div id="twitter">
      <div class="tweet">
        <ul id="twitter_update_list"></ul>
      </div>
    </div>
  </div>
	{/block:IfTwitterUsername}


                                           <!-- CONTAIN -->

  <div id="contain">


                                           <!-- TITLE -->

   <div class="title">{Title}</div>
 

                                           <!-- META TABS -->

                       <div id="header">



<map name="meta">
               <area shape="rect" coords="566, 0, 620, 40" href="/" title="Home">
               <area shape="rect" coords="621, 0, 667, 40" href="/ask" title="Ask Me Anything">
               <area shape="rect" coords="668, 0, 737, 40" href="/archive" title="Archive">
               <area shape="rect" coords="738, 0, 818, 40" href="{RSS}" title="RSS">
               <area shape="rect" coords="819, 0, 890, 40" href="/random" title="Random">
</map>

<img src="http://static.tumblr.com/aqt9daw/uGRlco6od/tmblrasktabs.png" usemap="#meta" border="0">

                        </div>


    <div id="content">


                                           <!-- POST LOOPS & DATE -->


    {block:Posts}

      <div class="post {TagsAsClasses}">
        <div class="post-header">


          {block:NewDayDate}
             <h4 class="newdate">
<span class="date"><a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a></span>
<div id="comment"><a href="{Permalink}#disqus_thread">Comments</a></div>
<div>{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}</div>
             </h4>
          {/block:NewDayDate}


          {block:SameDayDate} 
             <h4 class="newdate">
<span class="date"><a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a></span>
<div id="comment"><a href="{Permalink}#disqus_thread">Comments</a></div>
<div>{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}</div>
              </h4>
           {/block:SameDayDate}



        
                                           <!-- TEXT POST -->

        {block:Text}        
        </div> 

      

        <div class="text">
          {block:Title}<h3>{Title}</h3>{/block:Title}

            <div class="text_body">
                 {Body}
            </div>
        </div>
        {/block:Text}
    

                                           <!-- QUOTE POST -->

        {block:Quote}
          
        </div> 
        
        <div class="thequote">

Deathjam · Feb 9, 2011

maybe

http://tumblring.net/making-your-tumblr-an-endless-scrolling-page/

NaeturVindur · Feb 9, 2011

I like it. It does some stuff I don't want it to, but to change that, I would probably have to learn some java too, so I'll leave it for now. Thanks.

Search

Search

HTML coding help

NaeturVindur

Cuddlemaster

NaeturVindur

Cuddlemaster

Deathjam

Busy poking things

NaeturVindur

Cuddlemaster