The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Adding a column to tumblr theme?
sebapendulum
post Aug 6 2012, 06:47 AM
Post #1





Group: Members
Posts: 2
Joined: 17-July 12
Member No.: 17,457
Hi smile.gif
So basically, I have been looking for a tumblr theme that would suit me for a long time and I have found it.
I have modified the code a bit, I have added a custom cursor, shaking posts and stuff.
I'm down to the last thing in order to make it perfect. I want to change it into a two column instead of a single column theme.
I was hoping some of you guys can help me with this, or at least give me an advice on what should i do... smile.gif

here's the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- --------------------------
Theme by inwavez
http://inwavez.tumblr.com/
------------------------------>

<html lang="en">
<head>

<script type="text/javascript">
function tb8_makeArray(n){
this.length = n;
return this.length;
}
tb8_messages = new tb8_makeArray(3);
tb8_messages[0] = "let love bleed red";
tb8_messages[1] = "let love bleed red";
tb8_messages[2] = "let love bleed red";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 100;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>

<style>
.shakeimage{position:relative}
</style>
<script language="JavaScript1.2">
//configure shake degree (where larger # equals greater shake)
var rector=3
///////DONE EDITTING///////////
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){shake.style.top=parseInt(shake.style.top)+rector+"px"}
else if (a==2){shake.style.left=parseInt(shake.style.left)+rector+"px"}
else if (a==3){shake.style.top=parseInt(shake.style.top)-rector+"px"}
else{shake.style.left=parseInt(shake.style.left)-rector+"px"}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0}
</script>


<meta name="color:Background" content="#fff"/>
<meta name="color:Text" content="#000"/>
<meta name="color:Title" content="#000"/>
<meta name="color:Box" content="#fff"/>
<meta name="color:Link" content="#961818"/>
<meta name="color:Hover" content="#00ADFF"/>
<meta name="color:Gradient" content="#e0e0e0"/>
<meta name="image:Background" content=""/>
<meta name="image:Sidebar" content=""/>
<meta name="if:Show Title" content="1"/>
<meta name="if:Show Photo" content="0"/>
<meta name="if:Gradient" content="1"/>
<meta name="if:Faded Images" content="1"/>
<meta name="if:Endless Scroll" content="0"/>
<meta name="font:Title" content="verdana"/>
<meta name="font:Body" content="verdana"/>
<meta name="text:Title font size" content="16px"/>
<meta name="text:Custom Link One" content="" />
<meta name="text:Custom Link One Title" content="" />
<meta name="text:Custom Link Two" content="" />
<meta name="text:Custom Link Two Title" content="" />
<meta name="text:Custom Link Three" content="" />
<meta name="text:Custom Link Three Title" content="" />
<meta name="text:Custom Link Four" content="" />
<meta name="text:Custom Link Four Title" content="" />
<meta name="text:Custom Link Five" content="" />
<meta name="text:Custom Link Five Title" content="" />
<meta name="text:Custom Link Six" content="" />
<meta name="text:Custom Link Six Title" content="" />
<meta name="text:Custom Link Seven" content="" />
<meta name="text:Custom Link Seven Title" content="" />
<meta name="text:Custom Link Eight" content="" />
<meta name="text:Custom Link Eight Title" content="" />
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<style type="text/css">



iframe#tumblr_controls {
right:3px !important;
position: fixed !important;
-webkit-transition: opacity 0.2s linear;
opacity: 0.6;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;}

iframe#tumblr_controls:hover{
right:3px !important;
position: fixed !important;
-webkit-transition: opacity 2s linear;
opacity: 1;
-webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
transition: all 2s ease-out;}

{block:ifFadedImages}
img{
-webkit-transition: opacity 0.8s linear;
opacity: 0.87;}
img:hover{
-webkit-transition: opacity 0.8s linear;
opacity: 1;}
{/block:ifFadedImages}
a.a1{
color:#000 !important;
background-color: #fff;
padding-right:1px;
padding-left:1px;
}

body{
margin:0px;
background-color: {color:Background};
background-image:url({image:Background});
background-attachment: fixed;
background-repeat: repeat;
font-family:{font:Body};
font-size: 10px;
line-height:10px;
color:{color:Text};
{block:IfGradient}
background-image:
-webkit-gradient(
linear,
left top,
right top,
color-stop(1, {color:Gradient}),
color-stop(0.93, {color:Background}),
color-stop(0.07, {color:Background}),
color-stop(0, {color:Gradient})
);
background-image: -moz-linear-gradient(
left center,
{color:Gradient} 100%,
{color:Background} 93%,
{color:Background} 7%,
{color:Gradient} 0%
);{/block:Ifgradient}}

a:link, a:active, a:visited{ color: {color:Link};
text-decoration: none;
-webkit-transition: color 0.1s ease-out; -moz-transition: color 0.1s ease-out; transition: color 0.1s ease-out;
}

a:hover {
color:{color:Hover};
text-shadow: 0px 0px 20px black;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}

#center{
margin:auto; width:500px}

#posts{
float:left;
margin-left:30px;
width:500px;
padding-top:1px;
padding-left:1px;
padding-right:1px;
{block:IfNotGradient}
background-color:{color:box};
{/block:IfNotGradient}
{block:ifBorderRight}border-right: 1px solid #000000;
{/block:ifBorderRight}}

#spacer{margin-bottom:0px;}

#side{
position:fixed !important;
width:175px;
height:100%;
{block:IfNotGradient}
background-color:{color:box};
{/block:IfNotGradient}
margin: 0px 0px 0px -170px;
padding-top:210px;
padding-left:3px;
padding-right:3px;}

{block:ifrightsidebar}
#side{position:fixed !important;
width:175px;
height:100%;
{block:IfNotGradient}
background-color:{color:box};
{/block:IfNotGradient}
margin: 0px 0px 0px 500px;
padding-top:210px;
padding-left:3px;
padding-right:3px;}
{/block:ifrightsidebar}

#pages{font-size: 11px;}

#permapage{
font-family: Helvetica;
font-size: 9px;
text-align: center;
margin-bottom: 8px;}

.title{
font-family: {font:Title};
font-size: {text:Title font size};
line-height: 14px;
color: {color:Title};
font-weight: normal;}


.blogtitle{
font-family: {font:Title};
font-size: 19px;
line-height: 30px;
color: {color:Title};
font-weight: normal;}

.permalink{
display: block;
font-size: 9px;
font-family: helvetica;
text-align: center;
text-transform: none;}

blockquote{
padding:0px 0px 2px 3px;
margin:0px 0px 2px 1px;
border-left: 1px dashed {color:Text};}

ul, ol, li{list-style:none; margin:0px; padding:0px;}
.user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
.user_7 .label, .user_8 .label, .user_9 .label {color:{color:Title};}


a.links {
background-color:{color:label background};
font-family: Arial;
font-size: 10px;
line-height: 8px;
text-transform: normal;
letter-spacing:0px;
display:block;
padding: 0px;
margin-bottom: -1px;
-moz-border-radius:0px; border-radius:0px;}

a.links:hover {
font-style: bold;
text-decoration: underline;}


{block:ifEndlessScroll}
#toTop {

display:none;

text-decoration:none;

position:fixed;

bottom:20px;

right:20px;

overflow:hidden;

width:30px;

height:40px;

border:none;

text-indent:-999px;

background:url(http://static.tumblr.com/hi8vwsz/Q0ull6xz3/totop.png) no-repeat left top;

z-index:3000;

}



#toTopHover {

background:url(http://static.tumblr.com/hi8vwsz/Q0ull6xz3/totop.png) no-repeat left -40px;

width:30px;

height:40px;

display:block;

overflow:hidden;

float:left;

opacity: 0;

-moz-opacity: 0;

filter:alpha(opacity=0);

}



#toTop:active, #toTop:focus {

outline:none;

}


#toTop:active, #toTop:focus {

outline:none;

}{/block:ifEndlessScroll}



ul#drawers {width: 100px; list-style: none; margin: 0 auto; padding: 0px; border-top: 0px; color: #000;}

ul#drawers a {text-decoration: none; color: #000;}

ul#drawers li h4 {margin: 0; padding: 1px; text-transform: Camelcase; font-size: 10px; text-align: center; background-color: #363835; background: rgba(255, 255, 255, 0.0); -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out;
transition: background-color 0.5s ease-out;}

h4.small {display: table-cell; width: 100px; margin: 0px; height: 100%;}

li.drawer h4.open {background-color: #121213; border-top: 0px;}

li.drawer div {padding: 2px; margin: 0px; line-height: 12px; background-color: #363835; background: rgba(255, 255, 255, 0.0);}

li.drawer div li {list-style-type: disc;}

li.drawer div ul {-webkit-padding-start: 12px;}

#fade { /*--Transparent background layer--*/

display: none; /*--hidden by default--*/

background: #000;

position: fixed; left: 0; top: 0;

width: 100%; height: 100%;

opacity: .8;

z-index: 9999;
}

.popup_block{
display: none; /*--hidden by default--*/

background: #fff;

padding: 20px;

border: none;

float: left;

font-size: 1.2em;

color:#000;

position: fixed;

top: 50%; left: 50%;

z-index: 99999;

/*--CSS3 Box Shadows & Rounded--*/

-webkit-box-shadow: 0px 0px 5px #000;

-moz-box-shadow: 0px 0px 5px #000;

box-shadow: 0px 0px 5px #000;

-moz-border-radius: 7px;

-webkit-border-radius: 7px;
}

img.btn_close {
float: right;

margin: -25px -25px 0 0;
}

/*--Making IE6 Understand Fixed Positioning--*/

*html #fade { position: absolute;}
*html .popup_block { position: absolute;}

::-webkit-scrollbar {

height:10px;

width:10px;

background-color:#FFF;

background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, #858585),
color-stop(0.50, #FFFFFF)
);

background-image: -moz-linear-gradient(
left center,
#858585 0%,
#FFFFFF 50%
);}

::-webkit-scrollbar-thumb:vertical {

background-color:#333;

height:80px;

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius: 100px;}

::-webkit-scrollbar-thumb:horizontal {

background-color:#333;

height:10px !important;}
</style>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<meta name="viewport" content="width=820" />

{block:ifEndlessScroll}
<script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script>

<script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script>

<script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script>

<script type="text/javascript">
$(document).ready(function() {

$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>{/block:ifEndlessScroll}

<script type="text/javascript" src="http://static.tumblr.com/vaqsgdj/01Nloof75/popup.js"></script>

</head>
<body>

<div id="center">
<div id="side">
{block:ifCenter}<center>{/block:ifCenter}
<p>
{block:ifShowTitle}<Center><div class="blogtitle"><a href="/">{Title}</a></div></center>{/block:ifShowTitle}
<p>
{block:ifShowPhoto}<a title="" href="/"><img src="{image:sidebar}" width=153px></a><br>{/block:ifShowPhoto}
<p>
{Description}<br>
<p>
{block:ifShowAskLink}<a class="links" title="ask" href="/ask" rel="ask" id="pop light">Ask</a>{/block:ifShowAskLink}
<p>

{block:ifCustomLinkOneTitle}<a href="{text:Custom Link One}" class="links">{text:Custom Link One Title}</a>{/block:ifCustomLinkOneTitle}
<p>
{block:ifCustomLinkTwoTitle}<a href="{text:Custom Link Two}" class="links">{text:Custom Link Two Title}</a>{/block:ifCustomLinkTwoTitle}
<p>
{block:ifCustomLinkThreeTitle}<a href="{text:Custom Link Three}" class="links">{text:Custom Link Three Title}</a>{/block:ifCustomLinkThreeTitle}
<p>
{block:ifCustomLinkFourTitle}<a href="{text:Custom Link Four}" class="links">{text:Custom Link Four Title}</a>{/block:ifCustomLinkFourTitle}
<p>
{block:ifCustomLinkFiveTitle}<a href="{text:Custom Link Five}" class="links">{text:Custom Link Five Title}</a>{/block:ifCustomLinkFiveTitle}
<p>
{block:ifCustomLinkSixTitle}<a href="{text:Custom Link Six}" class="links">{text:Custom Link Six Title}</a>{/block:ifCustomLinkSixTitle}
<p>
{block:ifCustomLinkSevenTitle}<a href="{text:Custom Link Seven}" class="links">{text:Custom Link Seven Title}</a>{/block:ifCustomLinkSevenTitle}
<p>
{block:ifCustomLinkEightTitle}<a href="{text:Custom Link Eight}" class="links">{text:Custom Link Eight Title}</a>{/block:ifCustomLinkEightTitle}
<p>{block:Pages}
<a href="{URL}" title="{Label}">{Label}</a><p>
{/block:Pages}
<a href="http://inwavez.tumblr.com/"></a>

<div id="pages">

<div style="bottom:2px; right:2px; position:fixed; opacity:0.8; text-style:italic;"><a href="http://inwavez.tumblr.com">Theme</a></div>

<div align="center">{block:ifEndlessScroll}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:ifEndlessScroll}

{block:ifnotEndlessscroll}
{block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
{block:PreviousPage} <a href="{PreviousPage}">back </a>{/block:PreviousPage}
{block:PermalinkPagination}


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

{block:NextPost}<a href="{NextPost}">next</a>{/block:NextPost}
{block:PreviousPost}<a href="{PreviousPost}">back </a>{/block:PreviousPost}{/block:PermalinkPagination}{/block:ifnotEndlessscroll}
</div></div></div>

{block:ifpopoutask}
<div id="ask" class="popup_block">
Ask me anything. <p> <iframe frameborder="0" scrolling="no" height="150" width="500px"
src="http://www.tumblr.com/ask_form/{Name}.tumblr.com"
style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe>
</p>
</div>
{/block:ifpopoutask}


<div id="posts">
{block:Posts}
<div id="spacer">


{block:Text}
{block:Title}<span class="title">{Title}</span>{/block:Title}
<span class="entrytext">{Body}</span>
<span class="permalink"><a href="{Permalink}">-{block:ifShowDate}{block:Date} ? {ShortMonth} {DayofMonth}{DayofMonthSuffix} {Year}{/block:Date}{/block:ifShowDate}</a></span>
{/block:Text}

{block:Link}
<a href="{URL}" class="title">{Name}</a>
{block:Description}{Description}{/block:Description}
{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions}
<span class="permalink">{block:PermalinkPage}{LinkCloseTag}{block:NoteCount}{notecountwithlabel}{/block:NoteCount}
{/block:PermalinkPage}<a href="{Permalink}">-{block:ifShowDate}{block:Date} ? {ShortMonth} {DayofMonth}{DayofMonthSuffix} {Year}{/block:Date}{/block:ifShowDate}</a></span>
{block:Link}

{block:Photo}
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"
alt="{PhotoAlt}" width="400px"/>
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}<center>{LinkOpenTag}{LinkCloseTag}{block:NoteCount}{notecountwithlabel}{/block:NoteCount}
{/block:PermalinkPage}
{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions}
{/block:Photo}

{block:Quote}
<span class="title">{Quote}</span>
{block:Source}{Source}{/block:Source}
{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions}
<span class="permalink">{block:PermalinkPage}{LinkCloseTag}{block:NoteCount}{notecountwithlabel}{/block:NoteCount}
{/block:PermalinkPage}<a href="{Permalink}">-{block:ifShowDate}{block:Date} ? {ShortMonth} {DayofMonth}{DayofMonthSuffix} {Year}{/block:Date}{/block:ifShowDate}</a></span>
{/block:Quote}

{block:Chat}
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>
{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions}
<span class="permalink">{block:PermalinkPage}{LinkCloseTag}{block:NoteCount}{notecountwithlabel}{/block:NoteCount}
{/block:PermalinkPage}<a href="{Permalink}">-{block:ifShowDate}{block:Date} ? {ShortMonth} {DayofMonth}{DayofMonthSuffix} {Year}{/block:Date}{/block:ifShowDate}</a></span>
{/block:Chat}

{block:Audio}
<div style="width:500px; height:20px;"><div style="float:left">{AudioPlayerGrey}</div><div style="margin-top:8px; float:right;"><small>
{FormattedPlayCount} plays {block:ExternalAudio} // <a href="{ExternalAudioURL}">Download?</a>{/block:ExternalAudio}</small></div></div><BR>
{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions}
<span class="permalink">{block:PermalinkPage}{LinkCloseTag}{block:NoteCount}{notecountwithlabel}{/block:NoteCount}
{/block:PermalinkPage}<a href="{Permalink}">-{block:ifShowDate}{block:Date} ? {ShortMonth} {DayofMonth}{DayofMonthSuffix} {Year}{/block:Date}{/block:ifShowDate}</a></span>
{/block:Audio}

{block:Video}
{Video-500}
{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions}
<span class="permalink">{block:PermalinkPage}{LinkCloseTag}{block:NoteCount}{notecountwithlabel}{/block:NoteCount}
{/block:PermalinkPage}<a href="{Permalink}">-{block:ifShowDate}{block:Date} ? {ShortMonth} {DayofMonth}{DayofMonthSuffix} {Year}{/block:Date}{/block:ifShowDate}</a></span>
{block:Video}

{block:PermalinkPage}
<div id="permapage">{block:ifNotShowDate}{block:Date}{ShortMonth} {DayofMonth}{DayofMonthSuffix} {Year}{/block:Date}{/block:ifNotShowDate}{block:HasTags} ? Tags: {block:Tags}<a href="{TagURL}">#{Tag} </a>{/block:Tags}{/block:HasTags}</div>
{/block:PermalinkPage}
<div align="left">

{block:PostNotes}{PostNotes}
{/block:PostNotes}</div>
{/block:Posts}
</div>

{/block:PostNotes}
{block:NoteCount}
<a href="{Permalink}#notes">
{NoteCountWithLabel}</a>
{/block:NoteCount}
{PostNotes}{/block:Posts}

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

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym57.cur), progress !important;}</style><a href="http://www.cursors-4u.com/" target="_blank" title="Rock On"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Rock On" style="position:absolute; top: 0px; right: 0px;" /></a>


+my blog : http://memor1al.tumblr.com/

Thanks!
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
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

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

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

- Lo-Fi Version Time is now: 19th May 2013 - 02:44 PM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC