Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Web Site Functionality _ [Tumblr] HTML Help

Posted by: Klutzington Jul 29 2012, 10:19 AM

Hey all. I've been hard coding my Tumblr, but I can't figure out how to separate my posts. . . like individually. They all just stay in the same block, and it's rather annoying. It's still not finished, but could someone help me? Thanks.
P.S. Could you guys also tell me how to pull my header out of the .container tag? I want it above the posts, not included in them.

CODE

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

<html>

<head>

        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}
            <meta name="description" content="{MetaDescription}" />
        {/block:Description}


<meta name="color:Background" content ="#dddddd"/>
<meta name="image:Background" content=""/>
<meta name="image:Header" content=""/>
<meta name="font:Text" content="Adobe Caslon Pro"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Link Hover" content="#000000"/>
<meta name="color:Header" content="#0182ac"/>
<meta name="color:Border" content="#131313"/>
<meta name="color:Content" content="#ffffff"/>



<style type="text/css">

body {
background-color: {color:Background};
background-image: {image:Background};
font-family: {font:Text};
font-size: 12px;
color: {color:Text};
}

a {
color: {color:Link};
font-weight: none;
text-decoration: underline;
}

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

a img {
border: 0px;
}

.container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 650px;
top: 200px;
}

.content {
position: absolute;
top: -20px;
left: 50%;
margin-left: -267px;
width: 535px;
padding: 10px;
background-color: {color:Content};
border: 3px solid {color:Border};
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.post img {
display: block;
margin: 0 auto;
}

.notesandtags {
padding: 5px;
border-top: 1px solid #777777;
margin-bottom: 30px;
margin-top: 5px;
}

.tags {
font-size: 10px;
float: right;
text-transform: lowercase;
}

.tag {
font-weight: normal;
margin-right: 2px;
font-style: italic;
font-size: 13px;
font-family: Palatino;
color: #000000;
}

.time {
font-size: 10px;
color: #666;
text-transform: lowercase;
font-weight: bold;
}

h1 {
    font-size: 18px;
    margin: 0px;
    text-align: center;
    font-style: italic;
    font: {font:Text};
}

h3 {
font-size: 20px;
margin: 0px;
}

blockquote {
font-size: 11px;
background-color: #EEEEEE;
padding: 5px;
border-left: 5px solid #000000;
margin: 5px;
}

.quote {
font-family: Georgia;
font-size: 18px;
font-style: italic;
color: #777777;
}

.source {
margin-left: 25px;
}

.link {
background-color: #dddddd;
color: white;
padding: 5px;
font-size: 16px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
font-weight: normal;
font-style: italic;
}

.link:hover {
background-color: #dddddd;
color: #e25700;
}

ul.chat {
margin: 0;
padding: 0;
}

.chat li {
list-style-type: none;
margin-left: 0px;
padding: 3px;
}

.chat li.odd {
background-color: #CCCCCC;
margin-bottom: 1px;
color: #222222;
}

.chat li.even {
background-color: #222222;
margin-bottom: 1px;
color: #CCCCCC;
}

.label {
font-weight: bold;
}

.title {
margin-left: 10px;
margin-bottom: 10px;
font-size: 20px;
font-family: Georgia;
letter-spacing: -2px;
color: #dddddd;
}

.header {
margin-top: 10px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 2px solid #777777;
}

.sidebar ul {
position: absolute;
top: -225px;
margin-left: 0px;
list-style-type: square;
font-size: 14px;
}

{CustomCSS}
</style>

</head>

<body>



<div class="container">
<div class="content">



{block:IfHeaderImage}<a href="/"><img class="header" src="{image:Header}"/></a>{/block:IfHeaderImage}
        {block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}




{block:Posts}

{block:Text}
<div class="post">
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
{Body}
</div>
{/block:Text}

{block:Photo}
<div class="post">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}

{block:Photoset}
<div class="post">
<center>{Photoset-500}</center>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photoset}

{block:Quote}
<div class="post">
<span class="quote">"{Quote}"</span>
{block:Source}
<div class="source">– {Source}</div>
{/block:Source}
</div>
{/block:Quote}

{block:Link}
<div class="post">
<center><a href="{URL}" class="link" {Target}>{Name} →</a></center>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</div>
{/block:Link}

{block:Chat}
<div class="post">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Chat}

{block:Video}
<div class="post">
<center>{Video-500}</center>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}

{block:Audio}
<div class="post">
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}

<div class="notesandtags">
<div class="time"> {block:Date}Posted <a href="{Permalink}">{TimeAgo}</a>{/block:Date}
<div class="tags">{block:Tags}<a href="{TagURL}" class="tag">{Tag}</a>, {/block:Tags} {block:NoteCount}{NoteCount}{/block:NoteCount}</div>
</div>
</div>

{/block:Posts}



<center>
        {block:Pagination}
        <hr>
            {block:PreviousPage}
                <a href="{PreviousPage}">< Previous</a>
            {/block:PreviousPage}

            {block:JumpPagination length="5"}
                {block:CurrentPage}
                    <span class="current_page">{PageNumber}</span>
                {/block:CurrentPage}

                {block:JumpPage}
                    <a class="jump_page" href="{URL}">{PageNumber}</a>
                {/block:JumpPage}
            {/block:JumpPagination}

            {block:NextPage}
                <a href="{NextPage}">Next ></a>
            {/block:NextPage}
        {/block:Pagination}

</center>

</div>



<div class="sidebar">



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

<center><img src="{PortraitURL-128}"></center>



<ul>
<li>{block:AskEnabled}<a href="/ask">{AskLabel}</a> {/block:AskEnabled} </li>
<li><a href="TWITTERLINK">Twitter</a> </li>
<li><a href="{RSS}">RSS</a> </li>
<li><a href="/archive">Archive</a> </li>
</ul>



<center>
{block:Description}<p>{Description}{/block:Description}



        {block:Pagination}
        <hr>
            {block:PreviousPage}
                <a href="{PreviousPage}">< Previous</a>
            {/block:PreviousPage}

            {block:JumpPagination length="5"}
                {block:CurrentPage}
                    <span class="current_page">{PageNumber}</span>
                {/block:CurrentPage}

                {block:JumpPage}
                    <a class="jump_page" href="{URL}">{PageNumber}</a>
                {/block:JumpPage}
            {/block:JumpPagination}

            {block:NextPage}
                <a href="{NextPage}">Next ></a>
            {/block:NextPage}
        {/block:Pagination}

</center>


</div>
</div>
</body>
</html>

Here's a link to my page: http://byteandbaste.tumblr.com/

Thanks again