How to add a sidebar to my current tumblr theme, HTML HELP |
How to add a sidebar to my current tumblr theme, HTML HELP |
ninalovegood |
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
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 It would really be a big help if someone can tell me how! 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&f=/_media/sp/sp-player-tumblr.js&expsec=86400&ver=11&bgcolor={color:Streampad Background}&clicktext=Play%20All%20Audio%20Posts&clickimg=true&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} <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 |
Lo-Fi Version | Time is now: 28th March 2024 - 03:58 PM |