Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Web Site Functionality _ Tumblr - How to add third column?

Posted by: jackgriffin16 Feb 6 2012, 05:39 AM

I currently have two columns and can't add a third column in? Can somebody edit the theme so it's 3 columns please

CODE
<html>
<head>



<Title>{Title}</Title>

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

<!-- APPEARANCE -->
<meta name="color:Background" content="#66FF99">
<meta name="color:Chat Color Line 1" content="#66FF99">
<meta name="color:Chat Color Line 2" content="#66FF99">
<meta name="color:Font" content="#666666">
<meta name="color:Line" content="#FFFFFF">
<meta name="color:Link" content="#666666">
<meta name="color:Link Hover" content="#FFFFFF">
<meta name="color:Links" content="#666666">
<meta name="color:Links hover" content="#FFFFFF">
<meta name="color:Links background" content="#66FF99">
<meta name="color:Links background hover" content="#66FF99">
<meta name="color:Notes link" content="#666666">
<meta name="color:Notes link hover" content="#FFFFFF">
<meta name="color:Quote" content="#666666">
<meta name="color:Tiny heart" content="#FFFFFF">
<meta name="color:Permalink" content="#666666">
<meta name="color:Post background" content="#66FF99">
<meta name="color:Posts" content="#666666">
<meta name="color:Post Info Font" content="#666666">

<meta name="image:Background" content="">

<meta name="font:Body" content="verdana">

<meta name="if:Background Image Fixed" content="1">
<meta name="if:Enable Image Opacity" content="1">

<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>


<style type="text/css">

body {
background-color:{color:Background};
background-image:url({image:http://i39.tinypic.com/1zf2hy.png});
background-repeat:repeat;
{block:IfBackgroundImageFixed}background-attachment:fixed;{/block:IfBackgroundImageFixed}
color:{color:Font};
font-size:10px;
font-family:{font:Body};
}

a, a:visited, a:active {
color:{color:Link};
text-decoration: none;
-webkit-transition-duration: 0.4s;
}

a:hover {
color:{color:link hover};
text-decoration:none;
}

p {
margin: 2px 2px 2px 2px;
line-height:10px;
padding: 0;
}

.notes img{width:10px; position:relative; top:1px;}

ol.notes, .notes li{list-style:none; margin:0px; padding:2px; text-align:left;}

blockquote{padding:0px; padding-left:5px; margin:5px; border-left:1px dotted {color:text};}
blockquote img{display:block;}
blockquote p{padding:0px; margin:0px;}
blockquote blockquote{position:relative; left:-5px; margin-top:0px; margin-right:0px; padding-right:0px;}
a img{border:none;}

.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 15pt;
font-style: normal;
text-transform:uppercase;
letter-spacing: 2px;
border-bottom: 1px {color:Line};
}

.post {
font-size:15pt;
font-family:Cambria;
color:{color:Posts};
text-transform:uppercase;
letter-spacing: -1px;
line-height:25px;
}

.link {
font-size:15pt;
font-family:Cambria;
color:{color:Posts};
letter-spacing: -1px;

text-transform:uppercase;
text-decoration:underline;
line-height:25px;
}

.quote {
font-size:18pt;
font-style:italic;
line-height:20px;
font-family:Cambria;
color:{color:Quote};
}

a.links {
margin-bottom: 4px;
margin-right: 0px;
margin-top: 2px;
font-size:10px;
font-style:bold;
text-transform:uppercase;
text-align:center;
line-height:auto;
font-family:arial;
color:{color:Links};
display: block;
width: auto;
background-color:{color:Links background};
}

a.links:hover {
color:{color:Links hover};
background-color:{color:Links background hover};
}

.odd {
background-color:{color:Chat Color Line 1};
padding: 1px;
}

.even {
background-color:{color:Chat Color Line 2};
padding: 1px;
}

hr {
border: none;
border-bottom: 1px {color:Line};
}

#postbox {
padding:5px;
width:500px;
font-family:Verdana;
margin-bottom:5px;
background-color:{Color:Post background};
-moz-border-radius:1px;
border-radius:1px;
}



div.navigate a{  
text-align: center;
padding:3px;
padding-right:5px;
padding-left:5px;
color: {color:text};
background-color: {color:Post background};
border:1px solid {color:line};
margin:1px;
margin-left:-1px;
position:relative;
width: 69px;
display: inline-block;
}

#postbody {
overflow:hidden;
text-align: center;
width:221px;
height:150px;
float:left;
margin: 0 0 0 0px;
background:{color:Post background};
padding:1px;
border-left:1px solid {color:Post background};
border-right:1px solid {color:Post background};
border-top:1px solid {color:Post background};
border-bottom:0px solid {color:Post background};
}

#content {
background: transparent;
padding: 0 0 0 0;
margin:0;
width:550px;
left:455px;
top:35px;
position:absolute;
}





img {

{block:IfEnableImageOpacity}
opacity: 0.8; filter:alpha(opacity=85);
{/block:IfEnableImageOpacity}
-webkit-transition-duration: 0.8s;
}

img:hover {
{block:IfEnableImageOpacity}
opacity:1; filter:alpha(opacity=99);
{/block:IfEnableImageOpacity}
}

img, a img {
max-width:500px !important;
border: 0px !important;
}

{CustomCSS}

</style>

</head>

<body>

<div align="left">
<div id="sidebar">
<center><div class="foreverk"><center><div class="circle" align="center"></div></center></div></center>

<center>{block:IfShowTitle}<a href=/">{Title}</a>{/block:IfShowTitle}
{block:Description}{Description}{/block:Description}</center>
<BR>
<center><div class="navigate"><br>

{block:HasPages}
{block:Pages}
<a href="{URL}">{Label}</a>
{/block:Pages}
{/block:HasPages}<br><br></div></center>

<div id="sidebar-footer"><center>
                     <p>
                    
             </div>

</div>

<div id="content">

<div class="autopagerize_page_element">
{block:Posts}


{block:Text}
{block:IndexPage}
<div id="postbody">
<a href="{Permalink}" class=""></a>
{block:Title}<div class="post">{Title}</div>{/block:Title}
<p>{Body}</p>
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div id="postbox">
{block:Title}<div class="post">{Title}</div>{/block:Title}
<p>{Body}</p>
</div>
{/block:PermalinkPage}
{/block:Text}

{block:Photo}
{block:IndexPage}
<div id="postbody">
<a href="{Permalink}" class=""></a>
<center><a href="{Permalink}"><img src="{PhotoURL-250}" alt="{PhotoAlt}" width="250px"></a></center>
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div id="postbox">
<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500px">{LinkCloseTag}</center>
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
{block:IndexPage}
<div id="postbody">
<a href="{Permalink}" class=""></a>
<center>{Photoset-250}</center>
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div id="postbox">
<center>{Photoset-500}</center>
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:PermalinkPage}
{/block:Photoset}

{block:Quote}
{block:IndexPage}
<div id="postbody">
<a href="{Permalink}" class=""></a>
<div class="quote">"{Quote}"</div>
{block:Source}— {Source}{/block:Source}
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div id="postbox">
<div class="quote">"{Quote}"</div>
{block:Source}— {Source}{/block:Source}
</div>
{/block:PermalinkPage}
{/block:Quote}

{block:Link}
{block:IndexPage}
<div id="postbody">
<a href="{Permalink}" class="">
</a>
<div class="link"><a href="{URL}" target="blank">{Name} &rarr;</a></div>
{Description}
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div id="postbox">
<div class="link"><a href="{URL}" target="blank">{Name} &rarr;</a></div>
{Description}
</div>
{/block:PermalinkPage}
{/block:Link}

{block:Chat}
{block:IndexPage}
<div id="postbody">
<a href="{Permalink}" class=""></a>
{block:Title}<div class="post">{Title}</div>{/block:Title}
{block:Lines}<div class="{Alt}">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br></div>{/block:Lines}
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div id="postbox">
{block:Title}<div class="post">{Title}</div>{/block:Title}
{block:Lines}<div class="{Alt}">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br></div>{/block:Lines}
</div>
{/block:PermalinkPage}
{/block:Chat}

{block:Audio}
{block:IndexPage}
<div id="postbody">
<a href="{Permalink}" class=""></a>
<div style="width:100%; background:#e3e3e3;">{AudioPlayerGrey}</div>
{PlayCountWithLabel}<br>
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div id="postbox">
{block:AlbumArt}<img src="{AlbumArtURL}" width="55px" height="55px" align="left">{/block:AlbumArt}
{AudioPlayerGrey}
{PlayCountWithLabel}<br>
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:PermalinkPage}
{/block:Audio}

{block:Video}
{block:IndexPage}
<div id="postbody">
<a href="{Permalink}" class=""></a>
<center>{Video-250}</center>
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div id="postbox">
<center>{Video-500}</center>
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:PermalinkPage}
{/block:Video}

{block:Answer}
{block:IndexPage}
<div id="postbody">
<a href="{Permalink}" class=""></a>
<b>{Asker}</b>: {Question}<hr>
{Answer}
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div id="postbox">
<b>{Asker}</b>: {Question}<hr>
{Answer}
</div>
{/block:PermalinkPage}
{/block:Answer}

{block:PostNotes}
<div id="postbox">
{PostNotes}
</div>
{/block:PostNotes}


{/block:Posts}
</div>

</div>

</div>
</body>

</html>

Posted by: Frederiek Feb 6 2012, 09:17 AM

Look around at Tumblr, as most here are not familiar with that and its coding.
http://www.tumblr.com/tagged/3-column or google for "tumblr 3 column themes".

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)