The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> [Tumblr] HTML Help
Klutzington
post Jul 29 2012, 10:19 AM
Post #1





Group: Members
Posts: 1
Joined: 29-July 12
Member No.: 17,511
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"/>



<!-- CSS Styles -->

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

<!-- Start HTML -->

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

<!-- Header Image -->

{block:IfHeaderImage}<a href="/"><img class="header" src="{image:Header}"/></a>{/block:IfHeaderImage}
        {block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}
        
        
<!-- Different Types of Posts/Main Content -->

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

<!-- Navigation -->

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



<!-- Start Sidebar -->


<div class="sidebar">


<!-- Title -->

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

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


<!-- Pages -->

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


<!-- Description -->

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


<!-- Navigation -->

        {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 biggrin.gif

This post has been edited by Klutzington: Jul 29 2012, 10:23 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 12:58 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC