The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to add a sidebar to my current tumblr theme, HTML HELP
ninalovegood
post May 11 2012, 11:29 PM
Post #1





Group: Members
Posts: 1
Joined: 11-May 12
Member No.: 17,100



Hi everyone! I just created an account smile.gif

I've been wanting to put a sidebar to my current tumblr theme (right side) . Ive been trying to figure it out for moths but i couldn't sad.gif
It would really be a big help if someone can tell me how! smile.gif

here's my code

CODE

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




<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

{block:IfDisableRightClick}<script type="text/javascript" src="http://static.tumblr.com/1cmk6kw/HlSla0dfm/darlieecious-dot-tumblr-dot-com.js"></script>{/block:IfDisableRightClick}
{block:IfEndlessScrolling}<script type="text/javascript" src="http://static.tumblr.com/1cmk6kw/DFlle575s/darlieecious_endlessscrolling.js"></script>{/block:IfEndlessScrolling}
{block:ifEnableStreampad}<script type="text/javascript" src="http://o.aolcdn.com/art/merge?f=/_media/sp/sp-player.js&amp;f=/_media/sp/sp-player-tumblr.js&amp;expsec=86400&amp;ver=11&amp;bgcolor={color:Streampad Background}&amp;clicktext=Play%20All%20Audio%20Posts&amp;clickimg=true&amp;showpop=false"></script>{/block:ifEnableStreampad}

    <!-- DEFAULT VARIABLES -->
<meta name="if:Disable right click" content="1"/>
<meta name="color:Background" content="#FFFFFF" />
<meta name="color:Box" content="#E6E6E6" />
<meta name="color:Text" content="#000000" />
<meta name="color:Links" content="#857B77" />
<meta name="color:Links Hover" content="#000000" />
<meta name="color:Chat" content="#E6BCBC" />
<meta name="color:Asker Background" content="#E6BCBC" />

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

<meta name="font:Body" content="Georgia" />
<meta name="font:Links" content="Georgia" />
<meta name="font:Title" content="Georgia" />

<meta name="image:100pxPortrait" content=""/>

<meta name="if:Description" content="1"/>
<meta name="if:Links Background Hover Color" content="1"/>


<meta name="if:Notes" content="1"/>
<meta name="text:Title Text transform" content="uppercase" />
<meta name="color:Permalink background" content="#ffffff">

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/2eWl5b9xv/nav.js"></script>        
<link href='http://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>{Title}{block:SearchPage}, Search results for: {SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
    {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}" />
    <style type="text/css">
body{
color:{color:text};
background-color:{color:background};
background-image:url('{image:background}');
background-position: center;
background-attachment:fixed;
background-repeat: repeat;
font-family:{font:body};
font-size: 12px;
line-height:{text:line height};
text-align:justify;
padding-top:5px;

}



a:link, a:active, a:visited{
color: {color:Links};
font-family: {font:Links};
text-decoration:none;
font-size: 10px;
}
a:hover{
color: {color:Links Hover};
text-decoration: none;
{block:ifLinksBackgroundHoverColor} title-color: {color:Links Background Hover};{/block:ifLinksBackgroundHoverColor}

}

.linkbox {margin-top:5px;font-size:10px;text-transform: uppercase;}
.linkbox a {margin-top:5px;font-size:10px;text-transform: uppercase;}

.navlinks a {color: {color:Links}; font-family: {font:Links}; text-transform: lowercase; text-decoration: none; font-size: 10px;background-color:{color:box};text-align:right;display:block;padding:1px;-moz-border-radius:6px; border-radius:6px;}
.navlinks a:hover {color: {color:Text};background-color:{color:chat};display:block;-moz-border-radius:6px; border-radius:6px;}



#main { margin: 20px auto; overflow: auto; width:650px;padding:5px;}

.left {

background-color: {color:Box};
float: left;
width: 210px;
overflow:hidden;
text-align:justify;
text-transform:{text:Text transform};
padding: 5px;
border-right : 0px dashed {color:Text};
}


.right { background-color: {color:Box};  margin: 0 0 5px 0; padding: 5px; text-align: left;
width: 402px;text-transform:{text:Text transform};float:right;}



.title, .title a { font-Title: {font:Title}; font-size: 17px; text-transform: uppercase;  letter-spacing:-1px; {font:Links}; text-transform: {text:Title text transform};display:block;}




.blogname a {color: {color:Links}; font-family: {font:Links}; text-transform: lowercase; text-decoration: none; font-size: 25px;background-color:{color:box};text-align:left;display:block;margin-bottom:5px;padding:1px;}
.blogname a:hover {background-color:{color:chat};display:block;}


.sub, .sub a { font-family: {font:Title}; }
.sub img { vertical-align: text-bottom; }
.odd { background-color: {color:Chat}; padding: 1px; }
.even { padding: 1px; }
.audioplayer { padding-left: 12px;background-color:#000; }
.playcount {float: right;clear: both;padding-top: 7px;padding-right: 20px;color: white;text-shadow: none;font-size:10px;text-transform:uppercase;}

.left img {max-width:100%;}
.right img {max-width:400px;}
  *:active,*:focus { outline: 0px; }



.asked {margin-top:4px;background-color:{color:Asker Background}; padding:5px;  -moz-border-radius:5px; border-radius:5px;
font-family: {font:Title}; font-size: 16px; line-height: 16px; text-transform: uppercase; letter-spacing:-1px;}
.asked a {font-family: {font:Title}; font-size: 16px; line-height: 16px; text-transform: uppercase; letter-spacing:-1px;}
.asked a:hover {{block:ifLinksBackgroundHoverColor} background-color: {color:Links Background Hover};{/block:ifLinksBackgroundHoverColor}}
.said {font-family: {font:Title}; font-size: 14px; line-height: 14px; text-transform: uppercase; letter-spacing:-1px;margin-top:6px;}
.said a {font-family: {font:Title}; font-size: 14px; line-height: 14px; text-transform: uppercase; letter-spacing:-1px;margin-top:6px;}



#footer input {margin-top: 0px;width:100%;border: 0px solid;font-family:{font:Links};font-size:10px;}
#footer { text-align:;}
#footer input:hover {background-color: {color:Links Background Hover};}


.title1{font:normal 45pt 'Homemade apple'; color:#333333; text-align:center>; letter-spacing:-1px; line-height:100%;}



.sidebartext{clear: both; text-align: justify; background-color: #F6F6F6; opacity: 0.8; filter:alpha (opacity=80); margin: 10px 5px 0px 5px; padding: 5px; -moz-border-radius: 6px; border-radius: 6px }

.sidebartext a{font-size:12px}
.sidebartext a:hover{font-size:12px}

.userpic{float: left; margin: 0px 4px 2px 0; width:48px; height:auto}

.llinks{width: 200px;  margin: 5px auto 5px auto;padding: 0 0 0px 0; font-size: 10px; text-transform: uppercase}

.llinks a{
display: block;
text-decoration: none;
color:#FFFFFF;
background-color:#E6BCBC;
padding: 3px 0px 3px 0px;
margin: 0 0 1px 0
}

.llinks a:hover{
background-color:#857B77;
color:#BAABA6
}

.pages {margin: 5px 0 5px 0; text-align: center; line-height: 20px}
.pages a {text-decoration: none; background-color:#E6BCBC;
padding: 2px 4px 2px 4px; color:{color:text}}

div.permaa{font-size:80%; width:400px; text-align:center; text-transform: uppercase; background:{color:permalink background}; margin-top:8px; margin-bottom:3px; font-family: Iskoola Pota; letter-spacing:1px; -moz-border-radius: 2px; -webkit-border-radius: 2px;}


#left {line-height: 10px;height:auto;padding: 5px; -moz-border-radius: 4px;

  -webkit-border-radius: 4px; background-Color:#E3E3E3;Display:block;}


blockquote {
background-color: {color:box};
padding:0px;
padding-left:5px;
margin:5px;
border-left:1px solid {color:background};
border-bottom:0px solid {color:background};
}
b, strong{color:{color:title};}
i, em {color:{color:link};}
p{margin-top:3px; margin-bottom:3px;}
blockquote img{ display:block; width:100%;}
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;display: block;}
.user_1 .label, .user_4 .label, .user_7 .label {color:{color:title};}
.user_2 .label, .user_5 .label, .user_8 .label {color:{color:link};}
.user_3 .label, .user_6 .label, .user_9 .label {color:{color:text}; opacity:.75;}
ul.chat, .chat ol, .chat li {list-style:none; margin:0px; padding:0px;}
.notes img{width:10px; position:relative; top:1px;}
ol.notes, .notes li{list-style:none; margin:0px; padding:0px;}
iframe input, iframe submit, iframe textarea, iframe div, iframe table {background-color:transparent!important;}
        </style>
    <style type="text/css">    
    #sidebar {
float:right;
width:250px;
height:100%;
}
</head>
<body>



</div>{CustomCSS}</style>




<center><span class="title1">{Title}</span></center>
<div id="main">

<div class="left">




{block:If100pxPortraitImage} <img class="roundedtop portrait" src="{image:100pxPortrait}" /> {/block:If100pxPortraitImage}

<div class="sidebartext">{Description}

</div>

<div class="llinks">
<center><a href="/">MY BIG FAT STORY</a>
<a href="/ask">OWLERY</a>
<a href="/submit">ACCIO WORKS</a>
<a href="/archive">PENSIEVE</a>


</div>

<div class="pages">  {block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}">FUTURE</a>{/block:PreviousPage}
{block:JumpPagination length="10"}{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}">PAST</a>{/block:NextPage}{/block:Pagination}
</div>  

</div>






{block:Posts}
<div class="right">
{block:Text}{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}{Body}{/block:Text}
{block:Photo}
{block:IndexPage} <a href="{Permalink}"> {/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
{block:Caption}{Caption}{/block:Caption}  
{/block:Photo}
{block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
{block:Quote}<div class="title"><a href="{Permalink}">{Quote}</a></div> {block:Source}— {Source}{/block:Source}<BR>{/block:Quote}
{block:Link}<div class="title"><a href="{URL}"> {Target}{Name} ←</a></div> {block:Description}{Description}{/block:Description}{/block:Link}
{block:Chat}{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title} {block:Lines}<div class="{Alt}">{block:Label}{Label}{/block:Label} {Line}</div>{/block:Lines}{/block:Chat}
{block:Audio}<div class="playcount">{PlayCount} plays</div><div class="audioplayer">{AudioPlayerBlack}</div>{block:Caption}{Caption}{/block:Caption}{/block:Audio}
{block:Video}{Video-400}{block:Caption}<a href="{Permalink}">{Caption}</a>{/block:Caption}{/block:Video}
{block:Answer} <div class="asked"> {Asker} said: {Question}</div>
<i>{Answer}</i>{/block:Answer}


{block:ExternalAudio}&nbsp; <a href="{ExternalAudioURL}">download</a>{/block:ExternalAudio}
<div class="linkbox">

<div class="permaa"><a href="{Permalink}"> <center> posted on {Month} {Dayofmonth},{Year}  </div>

{block:PermalinkPage}<BR> {block:HasTags}{block:Tags}  <a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags} {/block:PermalinkPage}
</div>
</div>

{block:PostNotes}
<div class="right">
<div class="title">{block:NoteCount} {NoteCountWithLabel}{/block:NoteCount} </div>
{PostNotes}
</div>
{/block:PostNotes}
{/block:Posts}






</div>
</div>

</div>

<script type="text/javascript">

.onunload = unloadPage;

function unloadPage()

{

alert("Thanks for visiting my blog! :) Lots of Love, Nina xx");

}

</script>



</body>

<div id="sidebar">


    
</div>
</html>

</div>

<div class="pages">  {block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}">FUTURE</a>{/block:PreviousPage}
{block:JumpPagination length="10"}{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}">PAST</a>{/block:NextPage}{/block:Pagination}
</div>  



Thanks a lot! xx
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: 28th March 2024 - 03:58 PM