Hey everyone!
I need help adding a simple fixed sidebar on the left side in Tumblr. I can't say I have much HTML experience; I worked with it in high school for a few months so I can read some parts, but I can't locate everything or create anything from scratch.
For someone who knows how to do this, i'm sure it's very easy. I just want a sidebar on the left side.
Thank you for your time and help,
fortibus
From what it looks like there is not sidebar already included.
If you want to add a sidebar that will constantly sit on the left hand side you'll want to add something in your CSS that looks something like:
.sidebar {
position: relative;
left: 0px;
top: 0px;
}
You'll style this however you want. That code should at the very least get it to sit on the left hand side.
Then, in your HTML you will want to add this div in this part of the code:
I'm having similar issues. I used this guide as well as the sticky sidebar guide http://www.marcofolio.net/webdesign/create_a_sticky_sidebar_or_box.html to add a sidebar to my own Tumblr -- very helpful and I finally got it to work! Except for one thing: My links don't seem to function. The email link will work in the 'customize' mode, but isn't clickable in the regular view, and none of the links to other sites are clickable in either mode. I wrote it in plain ol HTML and when I view the page sources on other Tumblrs with sidebars, they look the same as what I wrote. I don't get what I'm doing wrong here.
Here is the URL of my Tumblr: http://whenitpours.tumblr.com/
The full HTML code seems to be too long to post in full here, so here is the first portion including the sidebar I added:
I don't know anything about Tumblr, but it seems to me that the #sidebar is covered by #main. Try putting #sidebar AFTER #main.
You're welcome.
i'm having the same problem, i can't seem to get the header to be a sidebar instead..
my tumblr url is daystocomeuk.tumblr.com
sorry i'm an idiot and couldnt see how to post it in a code box...
<!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" />
<title>{Title}{block:PostSummary} | {PostSummary}{/block:PostSummary}{block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}</title>
<meta name="description" content="{MetaDescription}" />
<meta name="if:Show description" content="1" />
<meta name="if:Show search" content="1" />
<meta name="text:Twitter name" content="" />
<meta name="text:Disqus Shortname" content="" />
<meta name="text:Google Analytics ID" content="" />
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />
<!-- Styles -->
<link rel="stylesheet" href="http://static.tumblr.com/f1whv92/Mp9l6ewcg/reset.css" />
<style type="text/css">
/*----- GENERAL -----*/
header, footer, section, article, nav, aside {
display: block;
}
body {
background: #ffffff;
color: #222;
font: 12px/20px Georgia, "Times New Roman", Times, serif;
padding-top: 25px;
text-align: center;
width:500px;
margin: 0 auto;
}
h1, h2, h3, hQ {
font-family: Cufon;
}
h1 {
font-size: 50px;
line-height: 50px;
}
h2 {
font-size: 31px;
line-height: 37px;
}
h3 {
font-size: 21px;
line-height: 27px;
}
a:link, a:visited {
color: #222222;
font-weight: bold;
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
hr{
border:0 #ccc solid;
border-top-width:1px;
clear:both;
height:0;
}
ol{list-style:decimal}
ul{list-style:disc}
li{margin-left:30px}
p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:15px}
#main {
padding: 0px;
}
/*----- MASTHEAD -----*/
.noMeta > div {
padding: 0px;
}
#masthead {
margin-bottom: 0px;
}
#masthead h1 {
margin-bottom: 0;
}
#masthead h1 a:link, #masthead h1 a:visited {
text-transform: Uppercase;
color: #222;
text-decoration: none;
}
#masthead h1 a:active {
outline: 0;
}
#masthead p {
font-family: Georgia, serif;
font-size: 10px;
color: #fff;
margin-bottom: 0;
}
#masthead a:link, #masthead a:visited {
color: #fff;
}
#siteDescription{
font-size: 13px;
color: #222;
text-transform: Uppercase;
border-top: 1px solid #222;
margin-top: 20px;
margin-bottom: -5px;
padding: 15px 0 0 0;
font-family: Cufon;
}
/*----- SEARCH FORM -----*/
#frmSearch {
padding-top: 20px;
display: none;
}
#txtSearch {
background: url(http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg) left no-repeat;
width: 225px;
padding: 2px 0 0 20px;
font: 12px/12px Georgia, "Times New Roman", Times, serif;
color: #222;
border: 0px;
}
/*----- MAIN HEADER NAV STRIP -----*/
#mainNav {
border-top: 1px solid #222;
border-bottom: 2px solid #222;
margin-top: 20px;
padding: 15px;
font-family: Cufon;
}
#mainNav ul {
list-style: none;
margin: 0;
padding: 0;
}
#mainNav li {
margin: 5px;
display: inline;
padding: 0;
}
#mainNav a:link, #mainNav a:visited {
padding: 0;
font-size: 14px;
line-height: 14px;
margin: 0 2px;
text-decoration: none;
color: #222;
text-transform: Uppercase;
}
#mainNav a:hover, #mainNav a:active {
outline: none;
text-decoration: none;
border-bottom: 1px solid #222;
}
#mainNav a.active {
text-decoration: none;
border-bottom: 1px solid #222;
}
/*----- ARTICLE META INFO -----*/
#designline {
margin-top: 50px;
}
h5{
position: relative;
top: -35px;
margin-bottom: 0px;
font-family: Georgia, serif;
font-size: 10px;
color: #bca474;
text-decoration: none;
text-transform: Uppercase;
font-weight: bold;
border-bottom: 1px solid #bca474;
background: #fff;
}
h5 a:link, .line a:visited{
font-family: Georgia, serif;
font-size: 10px;
color: #bca474;
text-decoration: none;
text-transform: Uppercase;
font-weight: bold;
}
h5 a:hover{
text-decoration: underline;
}
h5 abbr{
display: inline-block;
position: relative;
margin: 0 auto;
padding: 0 8px;
background: #fff;
top: 10px;
}
h5.postDate a{
color: #bca474;
}
/*----- ARTICLE -----*/
article {
background: #fff;
margin-bottom: 20px;
text-align: left;
position: relative;
}
article img {
border: none;
margin-bottom: 15px;
max-width: 500px;
}
article p img {
margin: 0;
}
article > div {
padding: 0px;
overflow: hidden;
}
article .searchPage {
margin: 35px 0 0 0;
}
.searchPageText {
margin: 0 0 30px 0;
}
article .meta a:link, article .meta a:visited {
text-decoration: none;
}
article .meta a:hover, article .meta a:active {
text-decoration: underline;
}
article h2 {
text-align: center;
color: #222222;
}
article h2 a:link, article h2 a:visited {
text-transform: Uppercase;
color: #222;
text-decoration: none;
}
article h2 a:hover, article h2 a:active {
text-decoration: none;
border-bottom: 1px solid #222;
}
blockquote {
border-left: 2px solid #bca474;
margin-left: 0;
padding-left: 1em;
}
#quoteSource{
margin: 0 auto;
text-align: left;
}
#quoteText h2 {
text-align: left;
color: #222222;
}
article .chat {
list-style: none;
padding: 0;
margin: 0;
}
article .chat li {
margin: 0 0 2px;
padding: 2px 0 2px 0;
}
.photoCaption {
text-align: center;
}
/*----- AUDIO PLAYER -----*/
.audio {
height: 28px;
width: 26px;
overflow: hidden;
margin: auto;
padding-top: 7px;
}
.audioc {
background-image:url('http://static.tumblr.com/f1whv92/9iCl6bfgp/audiocircle.png');
background-repeat: no-repeat;
height: 41px;
width: 41px;
}
.audioCaption {
margin-top: 1px;
}
.audioleft {
width: 41px;
float: left;
}
.audioright {
width: 444px;
float: right;
}
.audioContainer {
margin-top: 5px;
}
.audioClear {
clear:both;
}
/*----- ARTICLE NOTES -----*/
.notes {
border-top: 1px solid #bca474;
list-style: none;
padding: 20px 0 5px 0;
margin: 30px 0 0 0;
}
.notes li {
margin: 0;
}
.notes .avatar {
margin: 0 5px 0 0;
position: relative;
top: 5px;
}
.notes blockquote {
margin: 10px 0 0 35px;
padding-left: 10px;
border-left: 2px solid #222222;
}
.media {
width: 500px;
margin-bottom: 20px;
}
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="OoohChristy">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
/*----- PAGE NAVIGATION -----*/
#pageNav {
margin-top: 20px;
border-top: 1px solid #222;
}
#pageNav ul {
list-style: none;
padding: 10px 15px;
margin: 10px 0;
}
#pageNav li {
margin: 0;
display: inline;
}
#pageNav a:link, #pageNav a:visited {
font: 11px Georgia, "Times New Roman", Times, serif;
padding: 0;
margin: 0 2px;
background: #34hdf5;
color: #222;
text-decoration: none;
}
#pageNav a:hover, #pageNav a:active, #pageNav a.active:link, #pageNav a.active:visited {
text-decoration: underline;
}
#pageNavOlder:after {
content: " ";
font-size: 10px;
}
#pageNavNewer:before {
content: " ";
}
/*----- FOOTER META -----*/
#sitemeta {
border-top: 2px solid #222;
color: #222;
padding: 20px 0 32px 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
}
#sitemeta p {
margin: 0;
}
#sitemeta a:link, #sitemeta a:visited {
color: #222;
font-weight: bold;
}
{CustomCSS}
</style>
<!-- Scripts -->
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/q9z1v7k/dgEkijh8r/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/f1whv92/fgIl65bo1/cufon_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{ fontFamily: "Cufon" });
Cufon.replace('h2',{ fontFamily: "Cufon" });
Cufon.replace('h3',{ fontFamily: "Cufon" });
Cufon.replace('#mainNav',{ fontFamily: "Cufon" });
Cufon.replace('#siteDescription',{ fontFamily: "Cufon" });
</script>
<script>
$(function() {
var search = $("#txtSearch").val();
var placeholder = "Search...";
var fadeToOpacity = 0.4;
$("#txtSearch").fadeTo("normal", fadeToOpacity);
if (search == "") {
$("#txtSearch").val(placeholder);
}
$("#txtSearch").blur(function() {
search = $("#txtSearch").val();
if (!(search != "" && search != placeholder)) {
$("#txtSearch").val(placeholder);
}
$("#txtSearch").fadeTo("normal", fadeToOpacity);
});
$("#txtSearch").focus(function() {
search = $("#txtSearch").val();
if (search == placeholder) {
$("#txtSearch").val("");
}
$("#txtSearch").fadeTo("normal", 1);
});
$("#btnSearch").click(function() {
$("#frmSearch").slideToggle("normal");
$(this).toggleClass("active");
// $("#txtSearch").focus();
});
});
</script>
</head>
<body>
<header id="masthead" class="clearfix">
<div id="thehead">
<h1 class="cufon"><a href="/">{Title}</a></h1>
<form action="/search" method="get" id="frmSearch">
<input type="text" id="txtSearch" name="q" value="{SearchQuery}" />
</form>
{block:Description}
<div id="siteDescription">{Description}</div>
{block:Description}
<nav id="mainNav">
{block:HasPages}
{block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
{/block:HasPages}
{block:AskEnabled}<li><a href="/ask">Ask</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">Submit</a></li>{/block:SubmissionsEnabled}
<li><a href="/archive">Archive</a></li>
<li><a href="/random">Random</a></li>
<li><a href="{RSS}">RSS</a></li>
<li><a href="java script:;" id="btnSearch">Search</a></li>
{block:IfTwitterName}
<li><a href="http://twitter.com/{text:Twitter name}">Twitter</a></li>
{/block:IfTwitterName}
</nav>
</div>
</header>
<section id="main" class="clearfix">
<div class="layout">
{block:SearchPage}
<article>
<div>
<div class="searchPage">
<h2>Search results for <a href="{URLSafeSearchQuery}">{SearchQuery}</a></h2>
</div>
{block:NoSearchResults}
<div class="searchPageText">
<p>I’m sorry, but we couldn't find anything matching "<b>{SearchQuery}</b>". Suggestions:</p>
<ul>
<li>Make sure all words are spelled correctly.</li>
<li>Try different keywords.</li>
<li>Try more general keywords.</li>
</ul>
</div>
{/block:NoSearchResults}
</div>
</article>
{/block:SearchPage}
{block:TagPage}
<article>
<div>
<div class="searchPage">
<h2>Posts tagged <a href="{TagURL}">{Tag}</a></h2>
</div>
</div>
</article>
{/block:TagPage}
{block:Posts}
<div id="designline">
<h5 class="postDate">
<abbr>{block:Date}<a href="{Permalink}">{DayOfMOnth}{DayOfMonthSuffix} {ShortMonth} {Year}</a>{/block:Date}{block:NoteCount} | <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}
</abbr>
</h5>
</div>
<article>
<div>
{block:Text}
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{Body}
{/block:Text}
{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="photoCaption">{Caption}</div>{/block:Caption}
{/block:Photo}
{block:Photoset}
<div class="media">{Photoset-500}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}
{block:Quote}
<div id="quoteText"><h2>{Quote}</h2></div>
{block:Source}<div id="quoteSource"><p>—{Source}</p></div>{/block:Source}
{/block:Quote}
{block:Link}
<h2><a href="{URL}" {Target}>{Name}</a></h2>
{block:Description}
<div>{Description}</div>
{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">
{block:Lines}
<li>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li>
{/block:Lines}
</ul>
{/block:Chat}
{block:Audio}
<div class="audioleft">
<div class="audioc">
<div class="audio">{AudioPlayerBlack}</div>
</div>
</div>
<div class="audioright">
<div class="audioCaption">{block:Artist}<b>{Artist}</b>{/block:Artist}
<p>—{block:TrackName}{TrackName}{/block:TrackName}</p>
</div>
</div>
<div class="audioClear"></div>
<div class="audioContainer">
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Audio}
{block:Video}
<div class="media">{Video-500}</div>
{block:Caption}<div>{Caption}</div>{/block:Caption}
{/block:Video}
{block:Answer}
<h3>{Asker} asked: {Question}</h3>
{Answer}
{/block:Answer}
{block:Date}
{block:IfDisqusShortname}
<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="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
{block:Date}
</div>
</article>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="OoohChristy">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
{/block:Posts}
{block:PermalinkPagination}
<nav id="pageNav">
<ul class="clearfix">
{block:PreviousPost}<li><a href="{PreviousPost}" id="pageNavNewer">Previous</a></li>{/block:PreviousPost}
{block:NextPost}<li><a href="{NextPost}" id="pageNavOlder">Next</a></li>{/block:NextPost}
</ul>
</nav>
{/block:PermalinkPagination}
{block:Pagination}
<nav id="pageNav">
<ul class="clearfix">
{block:PreviousPage}<li><a href="{PreviousPage}" id="pageNavNewer">Newer</a></li>{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}<li><a href="{URL}" class="active">{PageNumber}</a></li>{/block:CurrentPage}
{block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}<li><a href="{NextPage}" id="pageNavOlder">Older</a></li>{/block:NextPage}
</ul>
</nav>
{/block:Pagination}
{block:DayPagination}
<nav id="pageNav">
<ul class="clearfix">
{block:PreviousDayPage}<li><a href="{PreviousDayPage}">« {DayOfMonth} {ShortMonth}</a></li>{/block:PreviousDayPage}{block:NextDayPage}|<li><a href="{NextDayPage}">{DayOfMonth} {ShortMonth} »</a></li>{block:NextDayPage}
</ul>
</nav>
{/block:DayPagination}
</div><!-- END layout -->
</section>
<footer id="sitemeta">
<div class="clearfix">
<div class="thefooter">
<p><a href="http://www.tumblr.com/theme/12051">The Minimalist Theme</a> designed by <a href="http://minimalist.co">The Minimalist</a> | Powered by <a href="http://tumblr.com">Tumblr</a></p>
</div>
</div>
</footer>
{block:IfGoogleAnalyticsID}
<script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker=_gat._getTracker("{text:Google Analytics ID}");pageTracker._trackPageview()}catch(err){}</script>
{block:IfGoogleAnalyticsID}
</body>
</html>
Hi, on the off chance you can help me, I saw this thread and have been trying to follow the instructions. I am also putting a sidebar in a Tumblr, an iframe that's 800 pixels high or so. Long story short, I added the sidebar custom CSS and it addd the iframe I wanted, but the main body gets pushed down 800 pixels, so that the sidebar is along the left, then the content begins 800 pixels down, when the sidebar iframe is finished. Can you give me suggestions for how to tackle this? I don't have the knowledge of CSS that I'd like, though Tumblr is pretty darned flexible.
The tumblr in question is http://peterpayne.tumblr.com, I have turned off the side code to keep things from messing up. Let me know if you can give any suggestions -- thanks!
Im having a problem. im following directions it just doesnt seem to work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<meta name="if:Show portrait" content="1"/>
<meta name="if:Show title" content="1"/>
<meta name="if:Show search" content="1"/>
<meta name="if:Show date" content="1"/>
<meta name="if:Show tags" content="0"/>
<meta name="if:Show notes count" content="0"/>
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
/* --------------------------------------------------------------------------
$BODY-ELEMENTS
/--------------------------------------------------------------------------*/
body
{
margin:0;
padding:20px 0;
background-color:#eeeeee;
background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/ 2wCEAAkGBxQTEhQUExQWFhUXGBgaFRgYFxgYHRwcGBcYFxwdGB8aHCggHCAlHBcYITEhJSkrLi4uFx8z
ODMsNygtLisBCgoKDg0OGhAQGywkHyQsLCw0LCw0LCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCws
LCwsLCwsLCwsLCwsLP/AABEIAN4A4wMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAFAAMEBgcBAgj/ xABAEAACAQIEBAQDBgYBAwMFAQABAhEAAwQSITEFIkFRBhNhcTKBkQcjQqGxwRRSctHh8GIVM4JTkqIk
Q7Kz8Qj/xAAZAQADAQEBAAAAAAAAAAAAAAAAAQIDBAX/xAAkEQACAgICAgICAwAAAAAAAAAAAQIRAyESMUFRImEEMhMjcf/aAAwDAQACEQMRAD8A2KlSrtZlipUqVACpvFX1toz3GCooLMxMAACSTTorOft44i1rhoRTHnXVRv6QGc/XKBTS2DA/E/txtrcixhjctgxnd8hI7gBTHz/ Krv4P8c4biAi2Sl2JNt4mO6xoRXy2qE7GnsFjrllw9tyrrqrKdRWzgqM+TPsY1ys7+zr7TLWMCWL5yYi
NzAV+mh2zelaLWLVFp2cilFdrlIZyKVdrkUAKuV2u0AcpUq7QBylFdpUAKu0q6KAORVe8ZeLbHD7We6Z
dp8u2N2I/Qetd8a+LbPDrBuXdWMi2g3Y/sO5r5q47xu9jbxvXWl26E6KJ2UdBWkIWTKvb script:likelink('{PostID}','{Permalink}','');" class="icon like">like</a>
</li>
<li>
<a href="#" class="icon reblog">reblog</a>
</li>
<li>
<a href="#" class="notes">{NoteCount}</a>
</li>
</ul>
<!--/ .media-icons -->
</div>
{block:Title}
<!-- .title -->
<h2 class="title">
<a href="{Permalink}">{Title}</a>
</h2>
<!--/ .title -->
{/block:Title}
{Body}
</div>
<!--/ .post-body -->
<!-- .post-meta.meta -->
<div class="post-meta meta">
{block:IfShowDate}
Posted <a href="{Permalink}" class="subtle">{TimeAgo}</a>{/block:IfShowDate}{block:IfShowTags}{block:HasTags}{block:IfShowDate}, under {/block:IfShowDate}
<ul class="tags">
{block:Tags}
<li><a href="{TagURL}">{Tag}</a>
{/block:Tags}
</ul>
{/block:HasTags}
{/block:IfShowTags}
{block:IfShowNotesCount}
{block:IfShowDate} with {/block:IfShowDate}
{block:IfNotShowDate}{block:IfShowTags} with {/block:IfShowTags}{/block:IfNotShowDate}
<a href="{Permalink}" class="subtle">{NoteCountWithLabel}</a>
{/block:IfShowNotesCount}
</div>
<!--/ .post-meta.meta -->
</div>
<!--/ .post-container -->
</li>
<!--/ .post.text -->
{/block:Text}
{block:Answer}
<!-- .post.text -->
<li class="post text masonry-item">
<!-- .post-container -->
<div class="post-container">
<!-- .post-body -->
<div class="post-body">
<div class="post-veil ">
<!-- .media-icons -->
<ul class="media-icons style2">
<li>
<a href="java script:likelink('{PostID}','{Permalink}','');" class="icon like">like</a>
</li>
<li>
<a href="#" class="icon reblog">reblog</a>
</li>
<li>
<a href="#" class="notes">{NoteCount}</a>
</li>
</ul>
<!--/ .media-icons -->
</div>
<!-- .title -->
<h2 class="title">
<a href="{Permalink}">{Question}</a>
</h2>
<!--/ .title -->
{Answer}
</div>
<!--/ .post-body -->
<!-- .post-meta.meta -->
<div class="post-meta meta">
{block:IfShowDate}
Posted <a href="{Permalink}" class="subtle">{TimeAgo}</a>{/block:IfShowDate}{block:IfShowTags}{block:HasTags}{block:IfShowDate}, under {/block:IfShowDate}
<ul class="tags">
{block:Tags}
<li><a href="{TagURL}">{Tag}</a>
{/block:Tags}
</ul>
{/block:HasTags}
{/block:IfShowTags}
{block:IfShowNotesCount}
{block:IfShowDate} with {/block:IfShowDate}
{block:IfNotShowDate}{block:IfShowTags} with {/block:IfShowTags}{/block:IfNotShowDate}
<a href="{Permalink}" class="subtle">{NoteCountWithLabel}</a>
{/block:IfShowNotesCount}
</div>
<!--/ .post-meta.meta -->
</div>
<!--/ .post-container -->
</li>
<!--/ .post.text -->
{/block:Answer}
{block:Photo}
<!-- .post.photo -->
<li class="post photo masonry-item">
<!-- .post-container -->
<div class="post-container">
<!-- .post-body -->
<div class="post-body">
<div class="post-veil ">
<!-- .media-icons -->
<ul class="media-icons style2">
<li>
<a href="java script:likelink('{PostID}','{Permalink}','');" class="icon like">like</a>
</li>
<li>
<a href="#" class="icon reblog">reblog</a>
</li>
<li>
<a href="#" class="notes">{NoteCount}</a>
</li>
</ul>
<!--/ .media-icons -->
</div>
<img src="{PhotoURL-500}" alt="">
<!-- .caption -->
<div class="caption">
<span>{Caption}</span>
</div>
<!--/ .caption -->
</div>
<!--/ .post-body -->
</div>
<!--/ .post-container -->
</li>
<!--/ .post.photo -->
{/block:Photo}
{block:Photoset}
<!-- .post.photoset -->
<li class="post photoset masonry-item">
<!-- .post-container -->
<div class="post-container">
<!-- .post-body -->
<div class="post-body">
<div class="post-veil ">
<!-- .media-icons -->
<ul class="media-icons style2">
<li>
<a href="java script:likelink('{PostID}','{Permalink}','');" class="icon like">like</a>
</li>
<li>
<a href="#" class="icon reblog">reblog</a>
</li>
<li>
<a href="#" class="notes">{NoteCount}</a>
</li>
</ul>
<!--/ .media-icons -->
</div>
<ul class="photos">
{block:Photos}
<li><img src="{PhotoURL-500}" alt=""></a>
{/block:Photos}
</ul>
<!-- .caption -->
<div class="caption">
<span>{Caption}</span>
</div>
<!--/ .caption -->
</div>
<!--/ .post-body -->
<!-- .post-meta.meta -->
<div class="post-meta meta">
{block:IfShowDate}
Posted <a href="{Permalink}" class="subtle">{TimeAgo}</a>{/block:IfShowDate}{block:IfShowTags}{block:HasTags}{block:IfShowDate}, under {/block:IfShowDate}
<ul class="tags">
{block:Tags}
<li><a href="{TagURL}">{Tag}</a>
{/block:Tags}
</ul>
{/block:HasTags}
{/block:IfShowTags}
{block:IfShowNotesCount}
{block:IfShowDate} with {/block:IfShowDate}
{block:IfNotShowDate}{block:IfShowTags} with {/block:IfShowTags}{/block:IfNotShowDate}
<a href="{Permalink}" class="subtle">{NoteCountWithLabel}</a>
{/block:IfShowNotesCount}
</div>
<!--/ .post-meta.meta -->
</div>
<!--/ .post-container -->
</li>
<!--/ .post.photoset -->
{/block:Photoset}
{block:Quote}
<!-- .post.quote -->
<li class="post quote masonry-item">
<!-- .post-container -->
<div class="post-container">
<!-- .post-body -->
<div class="post-body">
<div class="post-veil ">
<!-- .media-icons -->
<ul class="media-icons style2">
<li>
<a href="java script:likelink('{PostID}','{Permalink}','');" class="icon like">like</a>
</li>
<li>
<a href="#" class="icon reblog">reblog</a>
</li>
<li>
<a href="#" class="notes">{NoteCount}</a>
</li>
</ul>
<!--/ .media-icons -->
</div>
<blockquote>
<p>
"{Quote}"
</p>
</blockquote>
{block:Source}
<cite>{Source}</cite>
{/block:Source}
</div>
<!--/ .post-body -->
<!-- .post-meta.meta -->
<div class="post-meta meta">
{block:IfShowDate}
Posted <a href="{Permalink}" class="subtle">{TimeAgo}</a>{/block:IfShowDate}{block:IfShowTags}{block:HasTags}{block:IfShowDate}, under {/block:IfShowDate}
<ul class="tags">
{block:Tags}
<li><a href="{TagURL}">{Tag}</a>
{/block:Tags}
</ul>
{/block:HasTags}
{/block:IfShowTags}
{block:IfShowNotesCount}
{block:IfShowDate} with {/block:IfShowDate}
{block:IfNotShowDate}{block:IfShowTags} with {/block:IfShowTags}{/block:IfNotShowDate}
<a href="{Permalink}" class="subtle">{NoteCountWithLabel}</a>
{/block:IfShowNotesCount}
</div>
<!--/ .post-meta.meta -->
</div>
<!--/ .post-container -->
</li>
<!--/ .post.quote -->
{/block:Quote}
{block:Link}
<!-- .post.link -->
<li class="post link masonry-item">
<!-- .post-container -->
<div class="post-container">
<!-- .post-body -->
<div class="post-body">
<div class="post-veil ">
<!-- .media-icons -->
<ul class="media-icons style2">
<li>
<a href="java script:likelink('{PostID}','{Permalink}','');" class="icon like">like</a>
</li>
<li>
<a href="#" class="icon reblog">reblog</a>
</li>
<li>
<a href="#" class="notes">{NoteCount}</a>
</li>
</ul>
<!--/ .media-icons -->
</div>
<!-- .title -->
<h2 class="title">
<a href="{URL}" {Target}>{Name} <span class="pull-right">→</span></a>
</h2>
<!--/ .title -->
{block:Description}
<p>
{Description}
</p>
{/block:Description}
</div>
<!--/ .post-body -->
<!-- .post-meta.meta -->
<div class="post-meta meta">
{block:IfShowDate}
Posted <a href="{Permalink}" class="subtle">{TimeAgo}</a>{/block:IfShowDate}{block:IfShowTags}{block:HasTags}{block:IfShowDate}, under {/block:IfShowDate}
<ul class="tags">
{block:Tags}
<li><a href="{TagURL}">{Tag}</a>
{/block:Tags}
</ul>
{/block:HasTags}
{/block:IfShowTags}
{block:IfShowNotesCount}
{block:IfShowDate} with {/block:IfShowDate}
{block:IfNotShowDate}{block:IfShowTags} with {/block:IfShowTags}{/block:IfNotShowDate}
<a href="{Permalink}" class="subtle">{NoteCountWithLabel}</a>
{/block:IfShowNotesCount}
</div>
<!--/ .post-meta.meta -->
</div>
<!--/ .post-container -->
</li>
<!--/ .post.link -->
{/block:Link}
{block:Chat}
<!-- .post.chat -->
<li class="post chat masonry-item">
<!-- .post-container -->
<div class="post-container">
<!-- .post-body -->
<div class="post-body">
<div class="post-veil ">
<!-- .media-icons -->
<ul class="media-icons style2">
<li>
<a href="java script:likelink('{PostID}','{Permalink}','');" class="icon like">like</a>
</li>
<li>
<a href="#" class="icon reblog">reblog</a>
</li>
<li>
<a href="#" class="notes">{NoteCount}</a>
</li>
</ul>
<!--/ .media-icons -->
</div>
{block:Title}
<!-- .title -->
<h2 class="title">
<a href="{Permalink}">{Title}</a>
</h2>
<!--/ .title -->
{/block:Title}
<!-- .conversation -->
<ul class="conversation">
{block:Lines}
<li class="line_{Alt}">
{block:Label}<strong>{Label}</strong> {block:Label}
{Line}
</li>
{/block:Lines}
</ul>
<!--/ .conversation -->
</div>
<!--/ .post-body -->
<!-- .post-meta.meta -->
<div class="post-meta meta">
{block:IfShowDate}
Posted <a href="{Permalink}" class="subtle">{TimeAgo}</a>{/block:IfShowDate}{block:IfShowTags}{block:HasTags}{block:IfShowDate}, under {/block:IfShowDate}
<ul class="tags">
{block:Tags}
<li><a href="{TagURL}">{Tag}</a>
{/block:Tags}
</ul>
{/block:HasTags}
{/block:IfShowTags}
{block:IfShowNotesCount}
{block:IfShowDate} with {/block:IfShowDate}
{block:IfNotShowDate}{block:IfShowTags} with {/block:IfShowTags}{/block:IfNotShowDate}
<a href="{Permalink}" class="subtle">{NoteCountWithLabel}</a>
{/block:IfShowNotesCount}
</div>
<!--/ .post-meta.meta -->
</div>
<!--/ .post-container -->
</li>
<!--/ .post.chat -->
{/block:Chat}
{block:Video}
<!-- .post.video -->
<li class="post video masonry-item">
<!-- .post-container -->
<div class="post-container">
<!-- .post-body -->
<div class="post-body">
<div class="post-veil ">
<!-- .media-icons -->
<ul class="media-icons style2">
<li>
<a href="java script:likelink('{PostID}','{Permalink}','');" class="icon like">like</a>
</li>
<li>
<a href="#" class="icon reblog">reblog</a>
</li>
<li>
<a href="#" class="notes">{NoteCount}</a>
</li>
</ul>
<!--/ .media-icons -->
</div>
{VideoEmbed-700}
{block:AudioEmbed}
{AudioEmbed}
{/block:AudioEmbed}
<!-- .media-icons -->
<ul class="media-icons style2">
<li>
<a href="java script:likelink('{PostID}','{Permalink}','');" class="icon like">Like</a>
</li>
<li>
<a href="{ReblogURL}" class="icon reblog">Reblog</a>
</li>
<li>
<a href="#" class="notes">{NoteCount}</a>
</li>
</ul>
<!--/ .media-icons -->
</div>
<!--/ .post-body -->
<!-- .post-meta.meta -->
<div class="post-meta meta">
{block:IfShowDate}
Posted <a href="{Permalink}" class="subtle">{TimeAgo}</a>{/block:IfShowDate}{block:IfShowTags}{block:HasTags}{block:IfShowDate}, under {/block:IfShowDate}
<ul class="tags">
{block:Tags}
<li><a href="{TagURL}">{Tag}</a>
{/block:Tags}
</ul>
{/block:HasTags}
{/block:IfShowTags}
{block:IfShowNotesCount}
{block:IfShowDate} with {/block:IfShowDate}
{block:IfNotShowDate}{block:IfShowTags} with {/block:IfShowTags}{/block:IfNotShowDate}
<a href="{Permalink}" class="subtle">{NoteCountWithLabel}</a>
{/block:IfShowNotesCount}
</div>
<!--/ .post-meta.meta -->
</div>
<!--/ .post-container -->
</li>
<!--/ .post.video -->
{/block:Video}
{block:Audio}
<!-- .post.audio -->
<li class="post audio masonry-item">
<!-- .post-container -->
<div class="post-container">
<!-- .post-body -->
<div class="post-body">
<div class="post-veil ">
<!-- .media-icons -->
<ul class="media-icons style2">
<li>
<a href="java script:likelink('{PostID}','{Permalink}','');" class="icon like">like</a>
</li>
<li>
<a href="#" class="icon reblog">reblog</a>
</li>
<li>
<a href="#" class="notes">{NoteCount}</a>
</li>
</ul>
<!--/ .media-icons -->
</div>
<!-- .title -->
<h2 class="title">
<a href="{Permalink}">{block:TrackName}{TrackName}{/block:TrackName} {block:Artist}- {Artist}{/block:Artist} {block:Album}{Album}{/block:Album}</a>
</h2>
<!--/ .title -->
{block:AudioPlayer}
<br>
{AudioPlayer}
{/block:AudioPlayer}
{block:AudioEmbed}
<br>
{AudioEmbed}
{/block:AudioEmbed}
{block:Caption}
{Caption}
{/block:Caption}
</div>
<!--/ .post-body -->
<!-- .post-meta.meta -->
<div class="post-meta meta">
{block:IfShowDate}
Posted <a href="{Permalink}" class="subtle">{TimeAgo}</a>{/block:IfShowDate}{block:IfShowTags}{block:HasTags}{block:IfShowDate}, under {/block:IfShowDate}
<ul class="tags">
{block:Tags}
<li><a href="{TagURL}">{Tag}</a>
{/block:Tags}
</ul>
{/block:HasTags}
{/block:IfShowTags}
{block:IfShowNotesCount}
{block:IfShowDate} with {/block:IfShowDate}
{block:IfNotShowDate}{block:IfShowTags} with {/block:IfShowTags}{/block:IfNotShowDate}
<a href="{Permalink}" class="subtle">{NoteCountWithLabel}</a>
{/block:IfShowNotesCount}
</div>
<!--/ .post-meta.meta -->
<!--/ .post-container -->
</div>
</li>
<!--/ .post.audio -->
{/block:Audio}
{/block:Posts}
</ol>
<!--/ ol.posts -->
<div class="clearfix"></div>
<br><br>
{block:Pagination}
<!-- .pagination.older-newer -->
<ol class="pagination older-newer ">
{block:PreviousPage}
<li class="previous"><a href="{PreviousPage}">← Newer</a></li>
{/block:PreviousPage}
{block:NextPage}
<li class="next"><a href="{NextPage}">→ Older</a></li>
{/block:NextPage}
</ol>
<!--/ .pagination.older-newer --> {/block:Pagination}
</div>
<!--/ .inner -->
</div>
<!--/ .content -->
</div>
<!--/ .wrapper -->
<iframe id="likeiframe" style="width: 0px; height: 0px;"></iframe>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/uiqhh9x/UYAm6i0bc/like.js"></script>
<script src="https://raw.github.com/paulirish/infinite-scroll/master/jquery.infinitescroll.js"></script>
<script>
$(document).ready(function() {
$('#ask_form').parent().parent().children('.post-veil').remove();
// remove the veil from ask form post
});
</script>
</body> <!--Hypster Music Player-->
<script type="text/javascript" src="http://scm.hypster.com/script.php" ><!--//--></script>
<script type="text/javascript">
<!--
SCMMusicPlayer.init("{'skin':'skins/black/skin.css','playback':{'autostart':'false','shuffle':'false','volume':'100'},'playlist':'6894078','placement':'bottom','showplaylist':'false'}");
//-->
</script>
<!--Hypster Music Player-->
</html>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)