The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Adding a Sidebar to Tumblr Theme
RhiannaHayden
post Mar 15 2012, 09:37 PM
Post #1





Group: Members
Posts: 1
Joined: 15-March 12
Member No.: 16,718
How do switch my header for a scrolling/fixed sidebar in my tumblr theme? as well as preventing the need to scroll to the side in order to see the entire blig.

This is my blog: actorsdiesoloud.com

The HTML code for my theme is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{Title}{block:SearchPage} | {SearchQuery}{/block:SearchPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</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}

<meta name="image:Background" content="" />
<meta name="image:Header" content="" />
<meta name="color:Background" content="#FFFFFF" />
<meta name="text:Blog title size" content="75px" />
<meta name="if:Infinite scroll" content="1" />
<meta name="color:Body text" content="#444444" />
<meta name="color:Blog title" content="#000000" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/jw8fmba/648luowoo/theme.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script>

<style type="text/css">
@import url(http://static.tumblr.com/jw8fmba/pXhlt5pzb/bebasneue.css);
html,body {
margin: 0;
font-size: 12px;
line-height: 160%;
height: 100%;
}
* {
font-family: Calibri, Helvetica, Arial, sans-serif;
color: {color:Body text};
}
a img {
border: none;
}
a {
color: inherit;
font-size: inherit;
}
em,em a,a em {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
blockquote {
margin: 0;
padding: 0 0 0 9px;
border-left: 1px #CCC dotted;
}
.header {
position: relative;
width: 1040px;
margin: 50px auto 25px auto;
text-align: center;
}
.header a {
text-decoration: none;
}
.header img {
max-width: 100%;
}
.header .title h1 {
margin: 0;
line-height: 100%;
font-family: 'BebasNeueRegular', Arial, sans-serif;
text-transform: uppercase;
font-weight: normal;
font-size: {text:Blog title size};
color: {color:Blog title};
}
.header p {
margin: 0;
}
.header .menu_item {
margin: 0 5px;
}
.posts {
position: relative;
margin: 25px auto;
{block:IndexPage}
width: 1040px;
{/block:IndexPage}
{block:PermalinkPage}
width: 510px;
{/block:PermalinkPage}
height: 105%;
}
.post {
float: left;
position: relative;
margin: 5px;
}
.post h2 {
margin: 0;
font-size: 16px;
line-height: 18px;
letter-spacing: 1px;
font-weight: normal;
}
.post h2.quote {
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: 0;
font-style: italic;
}
.post p,.post li {
line-height: 175%;
}
.post p {
margin: 10px 0 5px 0;
}
.post ol,.post ul {
margin: 3px 0;
padding: 0;
}
.post li {
margin: 2px 35px;
}
.post .info_bar {
width: 100%;
padding: 1px 0;
text-align: center;
position: absolute;
top: 90%;
left: 0;
font-size: 11px;
opacity: 0;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
background: {color:Body text};
color: {color:Background};
{block:PermalinkPage}
display: none;
{/block:PermalinkPage}
}
.post:hover .info_bar {
opacity: .9;
}
.post .info_bar a {
color: {color:Background};
text-decoration: none;
margin: 0 5px;
}
.post .photo {
position: relative;
padding: 0;
line-height: 0 !important;
{block:IndexPage}
background: rgba(255,255,255,1);
{/block:IndexPage}
}
.post .photo .photo_info {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50px;
margin: -25px 0 0 0;
text-align: center;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
{block:PermalinkPage}
display: none;
{/block:PermalinkPage}
}
.post:hover .photo .photo_info {
opacity: 1;
}
.post .photo .photo_info a {
color: #FFF;
text-decoration: none;
}
.post .photo .photo_info h2 a {
margin: 0;
line-height: 100%;
font-family: 'BebasNeueRegular', Arial, sans-serif;
text-transform: uppercase;
font-size: 50px;
color: #FFF;
}
.post img.main_photo {
width: 100%;
}
.post img {
max-width: 100%;
height: auto;
}
.post .photo img {
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin: 0;
line-height: 0;
}
.post:hover .photo img {
{block:IndexPage}
opacity: 0.5;
{/block:IndexPage}
}
.post .player {
padding: 2px 10px;
background: #FFF;
margin: 0;
}
.post .lines {
margin: 0 0 5px 0;
}
.post .lines .line {
padding: 10px;
}
.post .lines .odd {
}
.post .lines .even {
background: {color:Body text};
color: {color:Background};
}
.post .lines .even * {
color: {color:Background};
}
.post ol.notes {
padding: 0;
list-style-type: none;
}
.post ol.notes li.note {
border-bottom: solid 1px #F6F6F6;
padding: 6px 0;
margin: 0 !important;
}
.post ol.notes li.note img.avatar {
vertical-align: -4px;
margin-right: 10px;
width: 16px;
height: 16px;
}
.post ol.notes li.note span.action {
}
.post ol.notes li.note .answer_content {
font-weight: normal;
}
.post ol.notes li.note blockquote {
border-color: #F6F6F6;
padding: 4px 10px;
margin: 10px 0px 0px 25px;
}
.post ol.notes li.note blockquote a {
text-decoration: none;
}
.pagination {
display: none;
}
body{background:url({image:Background}) {color:Background} fixed center 0}.post{width:{block:IndexPage}250{/block:IndexPage}{block:PermalinkPage}500{/block:PermalinkPage}px}
{CustomCSS}
</style>

</head>

<body class="{Name}">

{block:Pagination}<ul class="pagination">
<li>{block:NextPage}<a href="{NextPage}" class="pagination_nextlink">Next</a>{/block:NextPage}</li>
</ul>{/block:Pagination}

<div class="header">

<a class="title" href="/">{block:IfHeaderImage}<img src="{image:Header}" />{/block:IfHeaderImage}{block:IfNotHeaderImage}<h1>{Title}</h1>{block:IfNotHeaderImage}</a>
<p>{block:AskEnabled}<a class="menu_item" href="/ask">{AskLabel}</a>{/block:AskEnabled}{block:SubmitEnabled}<a class="menu_item" href="/submit">{SubmitLabel}</a>{/block:SubmitEnabled}{block:HasPages}{block:Pages}<a class="menu_item" href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}{block:Pagination}{block:PreviousPage}<a {block:IfInfiniteScroll}style="display:none"{/block:IfInfiniteScroll} href="{PreviousPage}">{lang:Previous page}</a>{/block:PreviousPage}{block:NextPage}<a {block:IfInfiniteScroll}style="display:none"{/block:IfInfiniteScroll} href="{NextPage}">{lang:Next page}</a>{/block:NextPage}{/block:Pagination}<a class="menu_item" href="/archive">{lang:Archive}</a></p>

</div>

<div class="posts">
{block:Posts}
<div class="post {block:IfInfiniteScroll}load{/block:IfInfiniteScroll}" id="post_{PostID}">{block:Text}{block:Title}<h2>{Title}</h2>{/block:Title}{Body}{block:More}<h3><a href="{Permalink}">{lang:Read more}</a></h3>{/block:More}{/block:Text}{block:Answer}<p><strong>{lang:Asker asked}: {Question}</strong></p><p>{Answer}</p>{/block:Answer}{block:Chat}{block:Title}<h2>{Title}</h2>{/block:Title}<div class="lines">{block:Lines}<div class="line {Alt}">{block:Label}{Label}{/block:Label} <em>{Line}</em></div>{/block:Lines}</div>{/block:Chat}{block:Quote}<h2>"{Quote}"</h2>{block:Source}<p>- {Source}</p>{/block:Source}{/block:Quote}{block:Link}<h2><a href="{URL}" {Target}>{Name}</a></h2>{block:Description}{Description}{/block:Description}{/block:Link}{block:Photo}<div class="photo"><div class="photo_info"><h2><a href="{Permalink}">{NoteCount}</a></h2></div>{LinkOpenTag}<img src="{block:IndexPage}{PhotoURL-250}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-500}{/block:PermalinkPage}" alt="{PhotoAlt}" class="main_photo" />{LinkCloseTag}</div>{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:Photo}{block:Photoset}{block:IndexPage}{Photoset-250}{/block:IndexPage}{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}{block:Video}{block:IndexPage}{Video-250}{/block:IndexPage}{block:PermalinkPage}{Video-500}{/block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:Video}{block:Audio}{block:AlbumArt}<a href="{Permalink}"><img src="{AlbumArtURL}" class="main_photo" /></a>{/block:AlbumArt}<div class="player">{AudioPlayerWhite}</div>{block:Caption}{Caption}{/block:Caption}{/block:Audio}

{block:Date}<div class="info_bar" {block:Photo}style="display: none"{/block:Photo}>{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a> | {/block:NoteCount}<a href="{Permalink}">{TimeAgo}</a></div>{/block:Date}
</div>


{block:PostNotes}<div class="post">
{block:NoteCount}<h2>{NoteCountWithLabel}</h2>{/block:NoteCount}
{PostNotes}
</div>{/block:PostNotes}


{/block:Posts}

</div>
{block:IndexPage}
<script type="text/javascript">
$(function(){var $container = $('.posts');$container.imagesLoaded(function(){$container.masonry({itemSelector:'.post',columnWidth: 260});});$container.infinitescroll({navSelector:'.pagination',nextSelector:'.pagination li a.pagination_nextlink',itemSelector: '.load',loading: {img:'http://static.tumblr.com/glziqhp/eRkls6pz6/white-90perc-opacity.png',donetext:''}},function( newElements ) { var $newElems = $( newElements ).css({ opacity: 0 });$newElems.imagesLoaded(function(){$newElems.animate({ opacity: 1 });$container.masonry( 'appended', $newElems, true );});});});
</script>
{/block:IndexPage}
</body>
</html>


HELP PLEASE!!!!!!!
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: 16th April 2024 - 02:03 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC