The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Turning a three columned theme into two columns, I could use some help here
classijosh
post Mar 23 2012, 08:55 PM
Post #1





Group: Members
Posts: 1
Joined: 23-March 12
Member No.: 16,772



I only know absolute basics when it comes to web coding, and I've tried a few methods and reviewed the code but it just doesn't click for me. I'm attempting to turn my three columned tumblr into two, while increasing the width of the two columns to make up for space.
I have searched and searched believe me. So now I post here.
Here's the link to my tumblr for preview:
this-september.tumblr.com

Code:
CODE
<!DOCTYPE html PUBLIC>

<!-----

Itziar Damborenea Theme V.2 by Itziar Damborenea, 2011. ExcellencƎ.
Please respect the credit of the Theme.

------>


<title>{Title}</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:100&v1' rel='stylesheet' type='text/css'>
<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:Text" content="#000000"/>
<meta name="color:Links" content="#000000"/>
<meta name="color:Hover" content="#dddddd"/>
<meta name="color:Background" content="#ffffff"/>
<meta name="if:show captions" content="0"/>
<meta name="text:blogtitle size" content="25" />
<meta name="text:post font size" content="9" />
<meta name="font:body" content="Baskerville" />
<meta name="font:title" content="Baskerville" />
<meta name="font:links" content="Baskerville" />
<meta name="if:Faded Images" content="0"/>
<meta name="if:Inverted Fade" content="0"/>
<meta name="if:Show Recent Tweets" content="0"/>
<meta name="text:Twitter Username" content="enterrob"/>
<meta name="if:Show Photo" content="0"/>
<meta name="image:Background" content="http://static.tumblr.com/cmfgg6m/4Tmlv7wk6/wood.jpg"/>
<meta name="image:Sidebar" content=""/>
<meta name="text:Online User Counter Code" content="" />
<meta name="if:Online counter" content="0" />

<meta name="if:Show Home Link" content="1">
<meta name="if:Show Message Link" content="1">
<meta name="if:Show Submit" content="1"/>
<meta name="if:Show Archive Link" content="1">
<meta name="if:Lobster Font" content="1" />

<meta name="text:Link One" content="" />
<meta name="text:Link One Title" content="" />
<meta name="text:Link Two" content="" />
<meta name="text:Link Two Title" content="" />
<meta name="text:Link Three" content="" />
<meta name="text:Link Three Title" content="" />
<meta name="text:Link Four" content="" />
<meta name="text:link Four Title" content="" />
<meta name="text:link Five" content="" />
<meta name="text:link Five Title" content="" />
<meta name="text:link Six" content="" />
<meta name="text:link Six Title" content="" />

<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">


<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
$(".postnotes").hide();
$(".viewnotes").click(function(){
$('.postnotes').slideToggle("fast");
return true;
});
});
</script>

<style type="text/css">

iframe#tumblr_controls {
top: 0% !important;
right:0% !important;
position: fixed !important;}

body {margin:auto; width:800px; text-align:left; font-family:{font:body}; font-size:9px; color:{color:text}; background-color:{color:background};
background-image:url({image:Background});
background-attachment: fixed;
background-repeat: repeat;
line-height:9px;}


.content {margin:auto; width:800px; float:left;margin-bottom:100px;}
a {color: {color:Links};text-decoration: none;}

a:hover {color: {color:Hover};-webkit-transition-duration: .3s;}
.caption {margin-top:5px; margin-bottom:10px;}

.links {font-family:{font:links}; font-size:10px;line-height:10px;padding-left:5px;}

.post{
{block:indexpage}width:250px;
margin:5px;
{/block:indexpage}{block:permalinkpage}{/block:permalinkpage} float:left; position:relative; margin:8px;font-size:{text:post font size}px;}

.post img {{block:indexpage} width:250px; {/block:indexpage}}

.permalink {margin:0px; text-align:right; padding:0px; opacity:0;-moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.permalink a:hover{
color:{color:Hover}
}
.entry {width:300px;}
.post:hover .permalink {opacity: 1;}

.information { padding-left:80px;font-size:9px; font-family:{font:body};line-height:9px;padding-top:0px;width:105px;
}

.postnotes{ margin:auto; width:500px;}
.viewnotes{height:15px;}

ol.notes {padding-left:5px; list-style-type:none;}
ol.notes li.note {padding:2px;}

.side {position:fixed;
margin-left:-250px;
padding-top:300px;height:100%;
width:250px;
{block:ifthreecolumns} margin-left:815px;{/block:ifthreecolumns}}


.audio {background-color:#000000; width:250px;}


.ptitle {font-size:11px;text-transform:uppercase;}
.blogtitle {text-align:center;padding-top:25px;font-size:{text:blogtitle size}px;line-height:9px;padding-left:5px;
cursor:auto;font-family:{font:title};{block:IfLobsterFont}font-family: 'Lobster'; font-size:25px; margin-bottom: 10px;{/block:IfLobsterFont}}


{block:ifFadedImages}img{-webkit-transition: opacity 0.8s linear; opacity: 0.75;}img:hover{-webkit-transition: opacity 0.8s linear; opacity: 1;}
{/block:ifFadedImages}

{block:ifInvertedFade}img{-webkit-transition: opacity 0.7s linear; opacity: 50;}img:hover{-webkit-transition: opacity 0.2s linear; opacity: .60;}
{/block:ifInvertedFade}


.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
#infscr-loading {display:none;}
.navigation{display:none;}

#le-excellencethemes{
position:fixed !important;
width:auto;
height:auto;  
right:3px;
top:26px;
}

#twitter{
height:200px;
width:200px;
position:fixed;
bottom:0px;
padding:4px;
font-style:none;
margin-left:-240px;
background-color:#eee;
-webkit-box-shadow:0px 0px 6px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
outline:1px solid rgba(0, 0, 0, .1);
border:2px solid rgba(0, 0, 0, .05);
}

#counters a{
color:#353434!important;
}
#counters{
position:fixed !important;
width:auto;
height:auto;
background-color: #fff;
opacity: 1;
padding: 3px;
right:5px;
bottom:5px;
padding: 4px;
}

{CustomCSS}
</style>


<script type='text/javascript' src='http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js'></script>

{block:IndexPage}
<script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
<script src="http://static.tumblr.com/twte3d7/0pellzh2t/infinitescroll.js"></script>

<script type="text/javascript">
$(window).load(function () {
$('.content').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : ".navigation a#next",
// selector for the NEXT link (to page 2)
itemSelector : ".post",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 10000,
loadingImg : "http://static.tumblr.com/ry7nsix/S4Klhms7s/load.gif",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.content').masonry({ appendedContent: $(this) }); }
);
});
</script>
{/block:IndexPage}

<script type="text/javascript" src="http://static.tumblr.com/twte3d7/BH7lio0yf/jquery.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/RhUlio0y7/lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
$j(function() {
if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
$j("img").lazyload({
placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
effect: "fadeIn",
});
});
</script>
</head>
<body>

<div id="le-excellencethemes">
<a href="http://le-excellencethemes.tumblr.com/"><img src="http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png"></a>
</div>


<div align="left">
<div class="side"><div class="links">

{block:ifShowPhoto}
<div align="center" style="padding-bottom:3px;>
<a href="/">
<img style="" src="{image:sidebar}"width=200" /></a></div>
{/block:ifShowPhoto}

<div class="blogtitle"><a href="/">{Title}</a></div>

<center>{block:ifshowhomelink}<a href="/">home</a>&nbsp;&nbsp;{/block:ifshowhomelink}

{block:ifshowmessagelink}<a href="/ask">message</a>&nbsp;&nbsp;{/block:ifshowmessagelink}

{block:IfShowSubmit}<a href="/submit">submit</a>&nbsp;&nbsp;{/block:IfShowSubmit}

{block:ifshowarchivelink}<a href="/Archive">archive</a>&nbsp;&nbsp;{/block:ifshowarchivelink}

{block:ifLinkOneTitle}
<a href="{text:Link One}" class="link">{text:Link One Title}</a>&nbsp;&nbsp;
{/block:ifLinkOneTitle}

{block:ifLinkTwoTitle}
<a href="{text:Link Two}" class="link">{text:Link Two Title}</a>&nbsp;&nbsp;
{/block:ifLinkTwoTitle}

{block:ifLinkThreeTitle}
<a href="{text:Link Three}" class="link">{text:Link Three Title}</a>&nbsp;&nbsp;
{/block:ifLinkThreeTitle}

{block:ifLinkFourTitle}
<a href="{text:Link Four}" class="link">{text:Link Four Title}</a>&nbsp;&nbsp;
{/block:ifLinkFourTitle}

{block:ifLinkFiveTitle}
<a href="{text:Link Five}" class="link">{text:Link Five Title}&nbsp;&nbsp;</a>
{/block:ifLinkFiveTitle}

{block:ifLinkSixTitle}
<a href="{text:Link Six}" class="link">{text:Link Six Title}&nbsp;&nbsp;</a>
{/block:ifLinkSixTitle}

<center><br></div><div class="information">{description}</div><br></div></div></div></div></div>
</center>


{block:ifShowRecentTweets}{block:indexpage}
<div id="twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 13,
interval: 6000,
width: 200,
height: 160,
theme: {
shell: {
background: '#fff',
color: '#000'
},
tweets: {
background: 'transparent',
color: '#000',
links: '#004fff'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('{text:Twitter Username}').start();
</script></div>{/block:indexpage}
{/block:ifShowRecentTweets}

{block:IfOnlineCounter}
<div id="counters">
<a href="/">{text:Online User Counter Code}</a>
</a>
</font></div>
{block:IfOnlineCounter}


{block:indexpage}<div class="navigation">{block:Pagination}{block:NextPage}<p id="page_nav"><a style="float:right" href="{NextPage}" id="next">Older</a>{/block:NextPage}{block:PreviousPage}<a style="float:left" href="{PreviousPage}">Newer</a></p>{/block:PreviousPage}{/block:Pagination}</div>{/block:indexpage}</div>

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


{block:Text}
<div class="post"><div class="text">{block:Title}<div class="ptitle">{Title}</div>{/block:Title}{Body}{block:IndexPage}<div class="permalink"><a href="{Permalink}">PERMALINK</a></div></div></div>{/block:IndexPage}{/block:Text}

{block:Photo}<div class="post">{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}<img src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}" {block:indexpage}width="250px"{block:indexpage} {block:PermalinkPage}width="525px"/>{/block:PermalinkPage}{block:IndexPage}</a>{/block:IndexPage}{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}{block:ifshowcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}</div>{/block:Photo}



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


{block:Quote}
<div class="post">"{Quote}" {block:Source}<a href="{Permalink}">by {Source}</a>{/block:Source}</div>
{/block:Quote}

{block:Link}
<div class="post">
<div class="ptitle"><a href="{URL}">{Name}</a></div>{block:Description}{Description}{/block:Description}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">PERMALINK</a></div>{/block:IndexPage}
</div>
{/block:Link}

{block:Chat}
<div class="post">{block:Title}<b>{Title}</b>{/block:Title}
{block:Lines}{block:Label}<b>{Label}</b> {Line}<br>{/block:Label}{/block:Lines}{block:IndexPage}<div class="permalink"><a href="{Permalink}">PERMALINK</a></div>{/block:IndexPage}
</div>
{/block:Chat}

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

{block:Audio}
<div class="post">
<div class="audio">
{AudioPlayerBlack}</div>{Caption}
{block:PermalinkPage}{/block:PermalinkPage}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">PERMALINK</a></div>{/block:IndexPage}
</div>
{/block:Audio}

{block:Answer}
<div class="post">
{Question}&nbsp;asked by <b>{Asker}</b><br><i>{Answer}</i>
{block:PermalinkPage}{/block:PermalinkPage}{block:IndexPage}<div class="permalink"><a href="{Permalink}">PERMALINK</a></div>{/block:IndexPage}</div>
{/block:Answer}


{block:PermalinkPage}
<div class="caption">{Caption}</div>
{block:Date}Posted {TimeAgo} with {NoteCountWithLabel}{/block:Date}{block:HasTags}<br>Tagged as:&nbsp;{block:Tags}<a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}
{/block:HasTags}
{block:PostNotes}<br><div class="viewnotes"></div>{/block:PostNotes}
<div class="postnotes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>{/block:PermalinkPage}

{/block:Posts}

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


Thanks for advice in advance
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 22nd November 2014 - 05:16 AM