Tumblr theme design

tinanewtonart 0 Light Poster

16 Years Ago

Hello everyone, I am a semi-amateur web designer/programmer, however I am confused with the designing/coding of tumblr blogs, could someone help me code it.

I want a two column design, one side for content with a header, the width of the content/ header will be 500px

There will be a sidebar, that will display links and pages, (tumblr metadata)

I cannot figure out how to make the twitter messages appear,

I have too much BS code in here too, it looks very crappy.

I need the padding to be removed on most of the layout.

I also would like instead of next/prev to have java enabled autoscroll/autoload pages like my other blog http://tinanewtonart.tumblr.com

I would like to intergrate facebook/twitter/digg ect like buttons to individual posts, not the whole page..

the google images are placeholders for my add links like with the deviantart one.
This is my sample blog, to work with design coding.

I would like the right sidebar not to be fixed but scroll with the content.

<!--tinanewtonart@yahoo.com 2010 -->
<html>
<!--****************************** HEADER ****************************************************-->
<head>

<div class="head"><a href="http://tinaNEWTONART.TUMBLR.COM"_blank"><img src="
" width="500" height="240" border="0" alt="Photo of a big bunny rabbit!" /></a></div>  
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<!-- iPhone Meta Data -->
<meta name="viewport" content="width=500, user-scalable=yes" />
<link rel="apple-touch-icon" href="{PortraitURL-96}" />
<!-- Custom Tumblr Theme Data -->
<meta name="color:Background" content="#759FEB">
<meta name="color:Text" content="#000000">
<meta name="color:Links" content="#FFFFFF">
<meta name="font:Body" content="Futura, Georgia, Helvetica, Arial, serif"/>
<meta name="image:Background" content="#759FEB" />
<meta name="if:Display Twitter Updates" content="1"/>
<meta name="if:Display Following" content="1"/>
<meta name="if:Display Custom Links" content="0"/>
<meta name="text:Disqus Shortname" content="" />
<meta name="text:Flickr ID" content=""/>
<meta name="text:Twitter ID" content=""/>
<meta name="text:Link Title 1" content=""/>
<meta name="text:Link URL 1" content=""/>
<meta name="text:Link Title 2" content=""/>
<meta name="text:Link URL 2" content=""/>
<meta name="text:Link Title 3" content=""/>
<meta name="text:Link URL 3" content=""/>
<meta name="text:Link Title 4" content=""/>
<meta name="text:Link URL 4" content=""/>
<meta name="text:Link Title 5" content=""/>
<meta name="text:Link URL 5" content=""/>
<meta name="text:Link Title 6" content=""/>
<meta name="text:Link URL 6" content=""/>
<meta name="text:Link Title 7" content=""/>
<meta name="text:Link URL 7" content=""/>
<meta name="text:Link Title 8" content=""/>
<meta name="text:Link URL 8" content=""/>
<meta name="text:Link Title 9" content=""/>
<meta name="text:Link URL 9" content=""/>
<!-- *************************************************** Stylesheets ************************ -->
<style type="text/css">
	 /* <---- Overall Properties ----> */


body {
 font-family: {font:Text};
 font-size: 12px;
 color: {color:Text};
 background-color: {color:Background};
}

a {
 color: {color:Link};
 font-weight: bold;
 text-decoration: none;
}

a:hover {
 color: {color:Link Hover};
}



h1 {
 color: #FFFFFF;
 text-shadow: 1px 1px 4px #000000;
 text-transform: uppercase;
 letter-spacing: -1px;
 font-size: 20px;
 margin: 0px;
}

h2 {
 color: #FFFFFF;
 text-shadow: 1px 1px 4px #000000;
 letter-spacing: 1px;
 font-size: 15px;
 margin: 0px;
}

.menu{
 position: absolute;
 top: 0px;
 left: 250px;
 width:500px;
 height: 15px;
 padding: 0px;
 background-color: #759FEB;
}


.head{
 position: absolute;
 top: 35px;
 left: 250px;
 width:500px;
 height: 240px;
 padding: 15px;
 background-color: #759FEB;
}



.content {
 position: absolute;
 top: 265px;
 left: 250px;
 width: 500px;
 padding: 15px;
 background-color: #759FEB;
}

.footer {
 position: float;
 bottom: 20px;
 left: 250px;
 width: 500px;
 padding: 15px;
 background-color: #759FEB;
}

.sidebar {
 position: fixed; 
 top: 35px;
 left: 10px;
 width: 200px;
 padding: 15px;
 background-color: #759FEB;
}

.rightsidebar {
 position: fixed; 
 top: 35px;
 left: 790px;
 width: 200px;
 padding: 0px;

}

.postheader {
 border-top: 1px solid #000000;
 border-bottom: 1px solid #000000;
 display: block;
 font-weight: bold;
 font-size: 18px;
 margin-bottom: 5px;
 padding: 1px;
}

.date {
 color: #343CEB;
 padding: 2px;
}

.time {
 color: #248BEB;
 padding: 2px;
}

.notes {
 color: #FFFFFF;
 padding: 2px;
}

.permalink a {
 background-color: #759FEB;
 color: #000000;
 float: right;
 padding-top: 0px;
 padding-bottom: 0px;
 padding-left: 5px;
 padding-right: 5px;
}




<!--POST MARGINS-->
.post {
 margin-top: 10px;
 margin-bottom: 10px;
}



<!--QUOTE STYLE-->
.post.quote {
 font-size: 16px;
 font-weight: bold;
 letter-spacing: -1px;
}

.source {
 font-size: 12px;
 font-weight: normal;
 text-align: right;
}

<!-- “post link,” “link,” and “description.”-->
.link a {
 background-color: #FFF200;
 color: black;
 padding: 5px;
 font-size: 16px;
}

.link a:hover {
 background-color: black;
 color: #FFF200;
}



<!-- ALTERNATING COLORS -->
ul.chat {
 list-style-type: none;
}

ul li.odd {
 color: #343CEB;
}

ul li.even {
 color: #5D29EB;
}

.label {
 font-weight: bold;
}

<!--REBLOGGED POSTS-->
h3 {
 font-size: 16px;
 text-transform: uppercase;
}

blockquote {
 margin: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 padding-right: 0px;
 padding-left: 20px;
 color: #5D29EB;
 border-left: 3px solid #00ADEF;
 font-size: 11px;
}

 /* <---- Flickr Badge Properties ---->*/
        #flickr {
        	padding: 5px 0 0 0;
        	background: no-repeat 0 5px;
        	text-indent: 25px;
        	text-transform: none;
        	min-height: 15px;
        	}
        #flickr #photos {
        	border: none;
        	}
        #largeImage {
        	position: absolute;
        	border: 3px solid {color:Links};
        	}
        #photos {
        	margin-left: 16px;
        	}	
        #photos img {
        	float: left;
        	padding: 0px 0px 5px 10px;
        	width: 38px;
        	height: 38px;
        	} 
        /* <---- Twitter Badge Properties ----> */
        #twitter_div {
        	background: no-repeat 0 6px;
        	clear: left;
        	min-height: 27px;
        	}
        #twitter_div a {
        	color: {color:Links};
        	}
        #twitter_div a:hover {
        	text-decoration: underline;
        	}
        #tweets {
        	list-style-type: none;
        	font-size: 13px;
        	padding: 5px 0px;
        	margin: 0 0 0 25px;
        	text-transform: none;
        	}
 
       /* <---- Custom Links Properties ----> */
        .links {
        	padding: 2px 0px 0px 0px;
        	}
        .links ol, .links ul {
        	list-style-position: inside;
        	clear: left;
        	}
        .links ol {
        	list-style-type: decimal-leading-zero;
        	}
        .links ul {
        	list-style-type: circle;
        	}
        .links li {

        	margin: 0px 5px 2px 0px;
        	}



        	}
        /* <---- Main Nav & Extra Links Properties ----> */
        .nav {
        	padding: 2px 0px 0px 0px;
                }
        .nav ol, nav ul {
        	list-style-position: inside;
        	clear: left;
        	}
        .nav ol {
        	list-style-type: decimal-leading-zero;
        	}
        .nav ul {
        	list-style-type: circle;
        	}
        .nav li {
        	margin: 0px 5px 2px 0px;
        	}



		/* Twitter Icon (16x16) */
		#twitter_div { background-image: url(http://static.tumblr.com/h3aw40n/giskhqyi3/twitter.png); }
		
		/* Flickr Icon (16x16) */
		#flickr { background-image: url(http://static.tumblr.com/h3aw40n/BRMkhqyh4/flickr.png); }
		
		.tag:before, .search_query:before { content:'“'; }
		.tag:after, .search_query:after { content:'”'; }








		
		{CustomCSS}
	</style>
</head><!--***************************************TOP MENU**************************************-->
<div class="menu">
  <p align="center"><a href="{RSS}">RSS</a>|<a href="/archive">Archive</a>|<a href="/mobile">Mobile</a>|<a href="/random">Random</a>
</div>
<!--******************************************* BODY ************************************-->
<body>
<!--SIDEBAR-->
<!--*******************************************SIDEBAR PLACED HERE -->
<div class="sidebar">

  <center>
    <img src="{PortraitURL-128}">
  </center>
  <br/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>{Title}</title>
  <h1>
    <center>
      {Title}
    </center>
  </h1>
  


  <p align="center"> {block:Pagination}{PreviousPage} <a href="{PreviousPage}">PREV</a>{/block:PreviousPage} 
    |  
    {block:NextPage}<a href="{NextPage}">NEXT</a>{/block:NextPage}{/block:Pagination}
    <!---navigation-->
  <div class="nav"> {block:HasPages}
    <ol style="border-top: 1px dashed #000">
      {block:Pages}
      <li><a href="{URL}">{Label}</a></li>
      {/block:Pages}
    </ol>
    {/block:HasPages} </div>


<p align="left", style=" border-top: 1px dashed #000">
  {block:IfDisplayCustomLinks}
  <div class="links">
    <ol>
      {block:IfLinkURL1}
      <li><a href="{text:Link URL 1}">{text:Link Title 1}</a></li>
      {/block:IfLinkURL1}
      {block:IfLinkURL2}
      <li><a href="{text:Link URL 2}">{text:Link Title 2}</a></li>
      {/block:IfLinkURL2}
      {block:IfLinkURL3}
      <li><a href="{text:Link URL 3}">{text:Link Title 3}</a></li>
      {/block:IfLinkURL3}
      {block:IfLinkURL4}
      <li><a href="{text:Link URL 4}">{text:Link Title 4}</a></li>
      {/block:IfLinkURL4}
      {block:IfLinkURL5}
      <li><a href="{text:Link URL 5}">{text:Link Title 5}</a></li>
      {/block:IfLinkURL5}
      {block:IfLinkURL6}
      <li><a href="{text:Link URL 6}">{text:Link Title 6}</a></li>
      {/block:IfLinkURL6}
      {block:IfLinkURL7}
      <li><a href="{text:Link URL 7}">{text:Link Title 7}</a></li>
      {/block:IfLinkURL7}
      {block:IfLinkURL8}
      <li><a href="{text:Link URL 8}">{text:Link Title 8}</a></li>
      {/block:IfLinkURL8}
      {block:IfLinkURL9}
      <li><a href="{text:Link URL 9}">{text:Link Title 9}</a></li>
      {/block:IfLinkURL9}
    </ol>
  </div>
  {/block:IfDisplayCustomLinks}
  <!--Put your Twitter/Flickr badges and extra links below here-->
  {block:IfDisplayTwitterUpdates}{block:Twitter}
  <div id="twitter_div">
    <ul id="tweets">
      <noscript>
      Sorry, but you can't see my twitter updates because you have disabled javascript. Try visiting my twitter profile <a href="">here</a>.
      </noscript>
    </ul>
  </div>
  {/block:Twitter}{/block:IfDisplayTwitterUpdates}
  
  {block:IfFlickrID}
  <div id="flickr">
    <noscript>
    Sorry, but you can't see my Flickr photos because you have disabled javascript.
    </noscript>
  </div>
  {/block:IfFlickrID}
  <!--Put your Twitter/Flickr badges and extra links above here-->
</div>
<!--*******************************************CONTENT PLACED HERE -->
<div class="content"> <h2>{Description}</h2>
  <!--header markup-->
  {block:Posts}
  <div class="postheader"> <span class="date">{ShortMonth} {MonthNumberWithZero} {Year}</span> <span class="time">{12HourWithZero}:{Minutes} {CapitalAmPm}</span> <span class="notes">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</span> <span class="permalink"><a href="{Permalink}">Permalink</a></span> </div>
  <!--posting-->
  {block:Text}

  <div class="post text"> {block:Title}
    <h3><a href="{Permalink}">{Title}</a></h3>}
    {/block:Title}
    {Body} </div>
  {/block:Text}
  
  {block:Photo}
  <div class="post photo">
    <center>
      {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
    </center>
    {block:Caption}
    <div class="caption">{Caption}</div>
    {/block:Caption} </div>
  {/block:Photo}
  
  {block:Photoset}
  <div class="post photoset">
    <center>
      {Photoset-500}
    </center>
    {block:Caption}
    <div class="caption">{Caption}</div>
    {/block:Caption} </div>
  {/block:Photoset}
  
  {block:Quote}
  <div class="post quote"> "{Quote}"
    
    {block:Source}
    <div class="source">{Source}</div>
    {/block:Source} </div>
  {/block:Quote}
  
  {block:Link}
  <div class="post link">
    <center>
      <a href="{URL}" class="link" {Target}>{Name}</a>
    </center>
    {block:Description}
    <div class="description">{Description}</div>
    {/block:Description} </div>
  {/block:Link}
  
  {block:Chat}
  <div class="post chat"> {block:Title}
    <h3><a href="{Permalink}">{Title}</a></h3>
    {/block:Title}
    <ul class="chat">
      {block:Lines}
      <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label}
        {Line} </li>
      {/block:Lines}
    </ul>
  </div>
  {/block:Chat}
  
  {block:Video}
  <div class="post video">
    <center>
      {Video-500}
    </center>
    {block:Caption}
    <div class="caption">{Caption}</div>
    {/block:Caption} </div>
  {/block:Video}
  
  {block:Audio}
  <div class="post audio"> {AudioPlayerBlack}
    
    {block:Caption}
    <div class="caption">{Caption}</div>
    {/block:Caption} </div>
  {/block:Audio}
  {/block:Posts}



	<div id="footer"><!--BEGIN footer-->
	
				
		<div id="credits">
			<p><a href="http://tinanewtonart.tumblr.com/">tinanewtonart Theme</a>. Designed by <a href="http://tinanewtonart.tumblr.com/">TINANEWTONART</a>. {lang:Powered by Tumblr 2}.</p>
		</div>
		
	</div><!--END footer-->






  <!--******************************        right sidebar   * **********************************-->
  <div class="rightsidebar">
    <!-- photo links 200 x  50 only-->
    <table border="0" bordercolor="#759FEB" style="background-color:#759FEB" width="200" cellpadding="10" cellspacing="0">
      <tr>
        <td><a href="http://tinaNEWTONART.TUMBLR.COM"_blank"> <img src="
" width="200" height="50" border="0" alt="Photo of a big bunny rabbit!" /> </a></td>
      </tr>
      <tr>
        <td><a href="http://tinaNEWTONART.TUMBLR.COM"_blank"> <img src="
" width="200" height="50" border="0" alt="Photo of a big bunny rabbit!" /> </a></td>
      </tr>
      <tr>
        <td><a href="http://tinaNEWTONART.TUMBLR.COM"_blank"> <img src="
" width="200" height="50" border="0" alt="Photo of a big bunny rabbit!" /> </a></td>
      </tr>
      <tr>
        <td><a href="http://tinaNEWTONART.TUMBLR.COM"_blank"> <img src="
" width="200" height="50" border="0" alt="Photo of a big bunny rabbit!" /> </a></td>
      </tr>
      <tr>
        <td><a href="http://tinaNEWTONART.TUMBLR.COM"_blank"> <img src="
" width="200" height="50" border="0" alt="Photo of a big bunny rabbit!" /> </a></td>
      </tr>
      <tr>
        <td><a href="http://tinanewtonart.deviantart.com"_blank"> <img src="
" width="200" height="50" border="0" alt="Photo of a big bunny rabbit!" /> </a></td>
      </tr>
     
      <tr>
        <td><!--codehere--></td>
      </tr>
    </table>
  </div>
  <!--END OF RIGHTSIDEBAR-->
</div>
<!END OF cONTENT-->
</body>
</html>

This is the other blog, I would also like the media bar in the above code, but when I add it is messes with the layout, this code also contains the script for autoscroll that I talked about.

<!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>


	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
	
	<meta name="text:Twitter Username" content=""/>
	<meta name="text:Flickr Username" content=""/>
	<meta name="text:Disqus Shortname" content=""/>
	<meta name="color:Asterisk" content="#17f0ff"/>
	
	<title>{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
	<link rel="shortcut icon" href="{Favicon}" />
	<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
	<link href="http://static.tumblr.com/xz44nnc/qVpkyo84x/style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="http://static.tumblr.com/xz44nnc/o5lkyivqw/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="http://static.tumblr.com/xz44nnc/k24kyivst/poop.js"></script>
	<style type="text/css">
		ol#nav li.home a { color: {color:Asterisk}; }
		{CustomCSS}
	</style>

<script type="text/javascript" src=""></script>
</head>    
<body>



<ol id="nav">
	<li class="home"><a href="/" title="{Title}">*</a></li>
	<li><a href="/"><b>Sketchbook</b></a></li>
	{block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
	{block:AskEnabled}<li><a href="/ask">Ask Me</a></li>{/block:AskEnabled}
	{block:SubmissionsEnabled}<li><a href="/submit">Ask</a></li>{/block:SubmissionsEnabled}
	{block:IfFlickrUsername}<li><a href="http://flickr.com/photos/{text:Flickr Username}">Flickr</a></li>{/block:IfFlickrUsername}
	{block:IfTwitterUsername}<li><a href="http://twitter.com/{text:Twitter Username}">Twitter</a></li>{/block:IfTwitterUsername}
	<li><a href="/archive">Archive</a></li>
	<li><a href="{RSS}">RSS</a></li>
</ol>

<div id="content">

		<div id="page">
			
			<div id="center">
			
				<h1>Tina Newton's<br><strong>Sketchbook</strong></h1><br><h2><br> Chronological Digital Sketch Diary of <br>
<a href="mailto:tinanewtonart@yahoo.com">Christina Backlund Newton</a><br><br> Just keep scrolling down to see my older works.

<br><br>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftinanewtonart.tumblr.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>


</h2><br><br> </div></div>
	<ol>
	{block:Posts}		
		{block:Text}
		<li class="regular">
			{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
			{Body}
			<p class="meta"><a href="{Permalink}">{TimeAgo}</a> &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a>{/block:IfDisqusShortname}</p>
		</li>
		{/block:Text}
		
		{block:Photo}
		<li class="photo">
			<p class="noborder">{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}</p>
			{block:Caption}{Caption}{/block:Caption}
			<p class="meta"><a href="{Permalink}">{TimeAgo}</a> &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a>{/block:IfDisqusShortname}</p>
		</li>
		{/block:Photo}
		
		{block:Photoset}
		<li class="photoset">
			<p class="noborder">{Photoset-500}</p>
			{block:Caption}{Caption}{/block:Caption}
			<p class="meta"><a href="{Permalink}">{TimeAgo}</a> &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a>{/block:IfDisqusShortname}</p>
		</li>
		{/block:Photoset}
		
		{block:Quote}
		<li class="quote">
			<blockquote>{Quote}</blockquote>
			{block:Source}<cite>&ndash; {Source}</cite>{/block:Source}
			<p class="meta"><a href="{Permalink}">{TimeAgo}</a> &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a>{/block:IfDisqusShortname}</p>
		</li>
		{/block:Quote}
		
		{block:Link}
		<li class="link">
			<h3><a href="{URL}" class="link" {Target}>{Name} &rarr;</a></h3>
			{block:Description}{Description}{/block:Description}
			<p class="meta"><a href="{Permalink}">{TimeAgo}</a> &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a>{/block:IfDisqusShortname}</p>
		</li>
		{/block:Link}
		
		{block:Video}
			<li class="video">
				{Video-500}
				{block:Caption}{Caption}{/block:Caption}
				<p class="meta"><a href="{Permalink}">{TimeAgo}</a> &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a>{/block:IfDisqusShortname}</p>
			</li>
		{/block:Video}
		
		{block:Chat}
		<li class="chat">
			{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
			{block:Lines}<p>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</p>{/block:Lines}
			<p class="meta"><a href="{Permalink}">{TimeAgo}</a> &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a>{/block:IfDisqusShortname}</p>
		</li>
		{/block:Chat}

		{block:Audio}
		<li class="audio">
			{AudioPlayerBlack}
			{block:Caption}{Caption}{/block:Caption}
			<p class="meta"><a href="{Permalink}">{TimeAgo}</a> &nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a>{/block:IfDisqusShortname}</p>
		</li>
		{/block:Audio}
		
		{block:PostNotes}
		<li id="notes">
			{PostNotes}
		</li>
		{/block:PostNotes}
	{/block:Posts}
	
	{block:IfDisqusShortname}<li><script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>{block:Permalink}<div id="disqus_thread"></div><script type="text/javascript" src=" Shortname}/embed.js"></script><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=jessakalani">comments powered by Disqus.</a></noscript><a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>{/block:Permalink}<script type="text/javascript">
	//<![CDATA[
	(function() {
		var links = document.getElementsByTagName('a');
		var query = '?';
		for(var i = 0; i < links.length; i++) {
		if(links[i].href.indexOf('#disqus_thread') >= 0) {
			query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
		}
		}
		document.write('<script charset="utf-8" type="text/javascript" src=" Shortname}/get_num_replies.js' + query + '"></' + 'script>');
	})();
	//]]>
	</script></li>
	{/block:IfDisqusShortname}
	</ol>
	<div id="pagination">
		{block:NextPage}<a class="button next" id="next_page" href="{NextPage}">&larr; Older</a>{/block:NextPage}
		{block:PreviousPage}<a class="button right" href="{PreviousPage}">Newer &rarr;</a>{/block:PreviousPage}
	</div>
</div>



</body>
</html>

Edited 16 Years Ago by tinanewtonart because: n/a

1 Contributor
0 Replies
127 Views

Dani AI

Generated 9 Months Ago

Quick diagnosis for : the template mixes structure into the wrong places and relies on absolute/fixed positioning, which makes the layout brittle. Move any visible HTML (header, sidebars, media bar) out of the <head> into the <body>, remove invalid CSS rules (for example position: float; is not valid), and reset browser defaults (html, body { margin:0; padding:0; }). Replace absolute/fixed placement with a flow-based layout (floats or flexbox) so sidebars scroll with content and the 500px main column stays stable.

Suggested fixes and minimal examples

Reset and box-sizing (so padding won't grow elements unexpectedly):

html, body { margin: 0; padding: 0; }
*, *:before, *:after { box-sizing: border-box; }
p,h1,h2,h3,ul,ol { margin: 0; padding: 0; }

Two-column layout that keeps header + content at 500px and both sidebars outside it:

.wrapper { width: 950px; margin: 0 auto; overflow: hidden; }
.sidebar { float: left; width: 200px; }
.main { float: left; width: 500px; padding: 15px; }
.rightsidebar { float: right; width: 200px; }
.header { width: 500px; margin-bottom: 10px; } /* put header inside .main */

Twitter, per-post share buttons, and autoload notes

For Twitter, use the official embedded timeline in the sidebar (add your username in theme options). Load the widgets script once per page; if it still does not show, check the browser console for blocked mixed content or an empty username.
Add per-post share links by using theme variables in the share URL (for example use the post permalink variable when building the Facebook/Twitter share anchors so each post shares its own URL).
For infinite autoloading (AJAX “load more” on scroll), detect near-bottom, fetch the NextPage URL, append the returned posts, then update or remove the next-page link. Remember to guard against double requests and re-initialize any embedded widgets (Disqus, players) after appending new HTML.

Troubleshooting checklist

Fix structural HTML (no visible elements in <head>).
Replace position: fixed/absolute with floats/flexbox unless you actually want elements pinned to the viewport.
Use a .clearfix or overflow:auto on wrappers to contain floats.
Test incrementally: get the two-column layout working first, then add Twitter, then infinite scroll.
Applying these changes to your sample blogs will make the layout predictable and let the right sidebar scroll with content while preserving a 500px content column.

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.