HTML coding help | INFJ Forum

HTML coding help

Discussion in 'Computer Science' started by NaeturVindur, Feb 8, 2011.

Share This Page

Watchers:
This thread is being watched by 1 user.
More threads by NaeturVindur
  1. NaeturVindur

    NaeturVindur Cuddlemaster
    Retired Staff

    Joined:
    Nov 17, 2008
    Threads:
    86
    Messages:
    3,686
    Likes Received:
    265
    Trophy Points:
    641
    MBTI:
    iNfj
    Enneagram:
    9w1
    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
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  2. OP
    NaeturVindur

    NaeturVindur Cuddlemaster
    Retired Staff

    Joined:
    Nov 17, 2008
    Threads:
    86
    Messages:
    3,686
    Likes Received:
    265
    Trophy Points:
    641
    MBTI:
    iNfj
    Enneagram:
    9w1
    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">
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  3. Deathjam

    Deathjam ooooh
    Staff Member Tech Admin

    Joined:
    Aug 28, 2008
    Threads:
    410
    Messages:
    4,556
    Featured Threads:
    6
    Likes Received:
    1,688
    Trophy Points:
    856
    Gender:
    Male
    Location:
    Yorkshire, UK
    MBTI:
    ENTP
  4. OP
    NaeturVindur

    NaeturVindur Cuddlemaster
    Retired Staff

    Joined:
    Nov 17, 2008
    Threads:
    86
    Messages:
    3,686
    Likes Received:
    265
    Trophy Points:
    641
    MBTI:
    iNfj
    Enneagram:
    9w1
    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.
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
Loading...

Share This Page