Colorful Space Mobile Code
- Create a new page and call it /iphone-theme
- Choose page type Custom Layout
- Copy and paste the code below.
- All done :)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”/>
<title>{Title}{block:PostTitle} | {PostTitle}{/block:PostTitle}</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}”>
<meta name=”viewport” content=”width=320”/>
<link rel=”apple-touch-icon-precomposed” href=”http://29.media.tumblr.com/avatar_f5907e561156_128.png”/>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js” type=”text/javascript”></script>
<script src=”http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js” type=”text/javascript”></script>
<script src=”http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js”></script>
<style type=”text/css”>
body {
padding: 0px;
margin: 0px;
background: #000000 url(‘http://static.tumblr.com/52cqb6c/wxql1gydc/colorsbackground320.jpg’) top no-repeat;
font-family: Arial, sans-serif;
font-size: 13px;
color: #ffffff;
}
#header {
display: block;
background: -moz-linear-gradient(top, #3c3c3c, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#000000));
border-bottom: 1px solid #272727;
border-top: 1px solid #6d6d6d;
text-align: center;
font-weight: bold;
font-size: 18px;
color: #fff;
padding: 11px 65px;
text-shadow: 0 -1px 0 #000000;
white-space: nowrap;
overflow: hidden;
text-transform: uppercase;
letter-spacing: -1px;
}
h1, h2, h3, h4, h5, h6 {
color: #ffffff;
}
h2 {
font-family: arial, sans-serif;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 15px;
margin: 0px;
text-shadow: #000000 1px 2px 2px;
/* FOR IE */
filter: dropshadow(color = #000000, offX = 2, offY = 2);
}
h2 a, h2 {
text-decoration: none;
}
h2 a:hover {
text-decoration: underline;
}
p, h5 {
margin-bottom: 1em;
line-height: 18px;
}
a {
text-decoration: none;
color: #ffffff;
word-wrap: break-word;
}
ul li, ol li {
line-height: 14px;
}
#header a.avatar {
display: block;
position: absolute;
top: 6px;
right: 5px;
width: 28px;
height: 27px;
background: url(‘{PortraitURL-30}’) center no-repeat;
border: 1px solid #272727;
border-top: 1px solid #000000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#header a.menuButton {
display: block;
position: absolute;
top: 8px;
left: 5px;
width: 60px;
padding-top: 1px;
height: 24px;
background: -moz-linear-gradient(top, #3c3c3c, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#000000));
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px solid #272727;
border-top: 1px solid #000000;
border-radius: 5px;
font-size: 14px;
letter-spacing: -1px;
line-height: 23px;
}
#header a.menuButton.pressed, .previousPost:hover, .nextPost:hover {
background: -moz-linear-gradient(top, #595959, #1d1d1d);
background: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#1d1d1d));
}
#navPage {
display: block;
position: absolute;
top: 8px;
right: 5px;
width: 60px;
height: 25px;
background: -moz-linear-gradient(top, #3c3c3c, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#000000));
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px solid #272727;
border-top: 1px solid #000000;
border-radius: 5px;
font-size: 14px;
letter-spacing: -1px;
}
.previousPost {
width: 30px;
padding-top: 2px;
height: 23px;
border-right: 1px solid #272727;
position: absolute;
right: 35px;
top: 8px;
background: -moz-linear-gradient(top, #3c3c3c, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#000000));
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid #272727;
border-top: 1px solid #000000;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.nextPost {
width: 30px;
padding-top: 2px;
height: 23px;
border-left: 1px solid #272727;
position: absolute;
right: 5px;
top: 8px;
background: -moz-linear-gradient(top, #3c3c3c, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#000000));
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #272727;
border-top: 1px solid #000000;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
#container {
margin: 0 auto;
width: 320px;
padding-top: 3px;
padding-bottom: 10px;
overflow: hidden;
}
.link, .photo, .text, .video, .audio, .chat, .quote, .answer, .photoset {
overflow: hidden;
}
.post {
background: url(http://static.tumblr.com/52cqb6c/jbal1gzxb/mainback320.png) repeat-y;
width: 318px;
margin: 59px auto 16px auto;
position: relative;
}
.post .postTop {
background: url(http://static.tumblr.com/52cqb6c/xM8l1gzs8/maintop320.png) no-repeat;
width: 300px;
height: 59px;
top: -59px;
padding: 0px 9px 0px 9px;
position: absolute;
margin-top: 0px;
left: 0px;
}
.post .postContent {
position: relative;
top: -20px;
padding: 0px 29px 20px 29px;
}
.post .postBottom {
background: url(http://static.tumblr.com/52cqb6c/D3Pl1h0g6/mainbottom320.png) no-repeat;
width: 300px;
padding: 0px 9px 0px 9px;
height: 24px;
position: absolute;
bottom: -24x;
left:
0px;
}
/* TEXT STYLES */
.text blockquote {
font: italic 16px / 20px arial, sans-serif;
}
.readMore {
text-align: right;
font-weight: bold;
}
.text .postContent #textContent img {
color: black;
border: 5px solid #ffffff;
max-width: 250px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* PHOTO STYLES */
.photo .post {
text-align: center;
}
.photo .post ul {
text-align: left;
}
.photo .post p {
text-align: left;
}
.photo img#mainImage {
border: 5px solid #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
max-width: 250px;
}
/* VIDEO STYLES */
.video .post {
text-align: center;
}
.video .post p {
text-align: left;
}
.videoBack {
background: #ffffff;
width: 250px;
border: 5px solid #ffffff;
border-bottom: 3px solid #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
}
.video embed, .video object {
width: 250px;
height: auto;
}
/* PHOTOSET STYLES */
.photoset .photosetBack {
margin: 0 auto;
width: 260px;
text-align: center;
}
img.photoset_photo {
border: 5px solid #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
max-width: 250px;
}
.photoset .post p {
text-align: left;
}
/* QUOTE STYLE */
.quote blockquote {
font: italic 18px / 22px arial, sans-serif;
margin: 10px;
}
.quote .quoteMarks {
position: absolute;
right: 20px;
top: -40px;
}
cite:before {
content: “-“;
}
cite {
font: bold 13px / 30px arial, sans-serif;
text-transform: uppercase;
letter-spacing: -1px;
position: absolute;
right: 29px;
bottom: 5px;
}
/*CHAT STYLES */
.chat .post .chatLines {
padding-left: 0px;
border: 1px solid #272727;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.chat .post li {
list-style: none;
padding: 2px 5px 2px 5px;
}
.chat .label {
font-weight: 900;
font-size: 1.1em;
}
.chat .post li p {
display: inline;
}
.chat .even {
background: url(http://static.tumblr.com/52cqb6c/e6Il0k29e/10white.png);
}
.chat .odd {
background: url(http://static.tumblr.com/52cqb6c/cCGl1fge9/30black.png);
}
.chat .post .chatLines li:first-child {
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.chat .post .chatLines li:last-child {
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
/* AUDIO */
.albumArt {
max-width: 250px;
border: 5px solid #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
max-width: 250px;
margin-bottom: 10px;
}
.audioUrl {
font-weight: 900;
font-family: arial, sans-serif;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 18px;
text-shadow: #000000 1px 2px 2px;
}
.audio .play {
border: 1px solid #ffffff;
vertical-align: -6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-right: 5px;
}
/* LINK STYLES */
.link h2:after {
content: ” >”;
}
/* ANSWER POSTS */
.answer .postContent ul {
background : url(http://static.tumblr.com/52cqb6c/CCql0njkm/60black.png);
padding: 15px;
margin-top: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
list-style: none;
}
.answer .postContent ul li {
display: inline;
position: relative;
font-style: italic;
}
.answer .postContent ul img {
border: 2px solid #ffffff;
margin-right: 5px;
vertical-align: -5px;
}
.leftLink, .note_count {
position: absolute;
bottom: -10px;
font-weight: 900;
}
.leftLink {
left: 29px;
}
.note_count {
right: 29px;
}
/* NOTE STYLES */
ol.notes {
text-align: left;
list-style: none;
padding: 0px;
margin: 10px auto;
background: url(http://static.tumblr.com/52cqb6c/cCGl1fge9/30black.png);
border: 1px solid #272727;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.notes li.note {
padding: 2px 18px 2px 27px;
margin: 0px;
line-height: 22px;
border-top: 1px solid #272727;
}
.notes li.note:first-child {
border-top: none;
}
.note.like {
background: url(http://static.tumblr.com/52cqb6c/66wl1j11y/like.png) no-repeat 240px 3px;
}
.note img {
margin: 0px 5px 0px 0px;
border: 1px solid #ffffff;
vertical-align: -3px;
position: absolute;
left: 35px;
margin-top: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.note.reblog {
background: url(http://static.tumblr.com/52cqb6c/9TKl1j159/reblog.png) no-repeat 240px 3px;
}
/*.note .answer_content {
background: url(http://static.tumblr.com/52cqb6c/NBTl1j14b/answer.png) no-repeat 240px 3px;
}*/
.note.reblog blockquote {
margin: 0px 0px 5px 0px;
padding-left: 10px;
border-left: 2px solid #272727;
font-style: italic;
}
#loadMore {
background: url(http://static.tumblr.com/52cqb6c/DiOl1hdv3/loadback.png) no-repeat;
height: 74px;
text-align: center;
}
#loadMore p {
position: absolute;
text-transform: uppercase;
font-weight: 900;
font-size: 16px;
letter-spacing: -1px;
margin: 33px 10px 10px 115px;
text-shadow: #000000 1px 2px 2px;
}
#loadMore img {
padding-right: 5px;
vertical-align: -8px;
margin-top: 25px;
margin-bottom: 20px;
display: none;
}
/* MENU STYLES */
#menu {
display: none;
width: 280px;
min-height: 350px;
margin: 0px auto;
background: url(http://static.tumblr.com/52cqb6c/CCql0njkm/60black.png);
font-size: 14px;
padding: 10px 20px 10px 20px;
}
#menu h2 {
margin: 10px;
font-size: 18px;
}
#menu ul {
list-style: none;
text-transform: uppercase;
margin: 10px;
padding: 0px;
}
#menu ul li a {
border: 1px solid #272727;
display: block;
font-family: arial, sans-serif;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 15px;
margin: 0px;
text-shadow: #000000 1px 2px 2px;
font-weight: 900;
margin-bottom: -1px;
padding: 12px 10px;
}
#menu ul li:first-child a {
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
#menu ul li:last-child a {
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#menu ul li a:hover {
background: url(http://static.tumblr.com/52cqb6c/e6Il0k29e/10white.png);
}
fieldset.search {
margin: 0px auto;
padding: 0px;
width: 220px;
border: none;
}
.search input#searchField {
width: 175px;
border: 0px;
padding: 8px 5px 8px 5px;
margin: 0px 5px 0px 0px;
background: url(http://static.tumblr.com/52cqb6c/eGrl1freh/searchfield185.png) no-repeat;
opacity: 0.7;
float: left;
outline: none;
}
.search input#searchField:focus {
opacity: 1;
outline: none;
}
.search button.btn {
width: 30px;
height: 30px;
cursor: pointer;
text-indent: -9999px;
background: url(http://static.tumblr.com/52cqb6c/lwZl1fscc/searchsprite.png) no-repeat;
border: 0px;
margin: 0px;
padding: 0px;
}
.search button.btn:hover {
background: url(http://static.tumblr.com/52cqb6c/lwZl1fscc/searchsprite.png) no-repeat -30px;
}
.designBy {
margin-top: 20px;
text-align: center;
}
.search {
width: 280px;
margin: 10px;
padding: 1px 10px 1px 10px;
text-align: center;
background: url(http://static.tumblr.com/52cqb6c/cCGl1fge9/30black.png);
position: relative;
color: {color:Text};
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id=”header”>
<a href=”/”>{Title}</a>
<a href=”#” class=”menuButton”>MENU</a>
{block:IndexPage}
<a href=”/” class=”avatar”></a>
{/block:IndexPage}
{block:PermalinkPagination}
<div id=”navPage”></div>
{block:PreviousPost}
<a href=”{PreviousPost}” class=”previousPost”> < </a>
{/block:PreviousPost}
{block:NextPost}
<a href=”{NextPost}” class=”nextPost”> > </a>
{/block:NextPost}
{/block:PermalinkPagination}
</div> <!— end of header —>
<div id=”menu”>
<h2>Search</h2>
<form action=”/search” method=”get” id=”searchForm”>
<fieldset class=”search”>
<input type=”text” name=”q” id=”searchField” value=”{SearchQuery}” />
<button class=”btn” title=”Submit Search”>Search</button>
</fieldset>
</form>
{block:HasPages}
<h2>Pages</h2>
<ul class=”nav”>
<li><a href=”/”>Home</a></li>
{block:Pages}
<li><a href=”{URL}”>{Label}</a></li>
{/block:Pages}
<li><a href=”/archive”>Archives</a></li>
<li><a href=”/disable_mobile_interface”>View regular site</a></li>
</ul>
{/block:HasPages}
<p class=”designBy”>Theme by <a href=”http://deshiknaves.tumblr.com”>DeshiKnaves</a></p>
</div> <!— end of menu —>
<div id=”container”>
<div id=”postWrap”>
<!— posts-start —>
{block:SearchPage}
<div class=”search”>
<p>Your Search for ‘<strong><a href=”/search/{URLSafeSearchQuery}”>{SearchQuery}</a></strong>’ returned <strong>{SearchResultCount}</strong> results.
{block:NoSearchResults}
Sorry, no results were found for your search.
{/block:NoSearchResults}
</p>
</div> <!— end of post —>
{/block:SearchPage}
{block:Posts}
{block:Chat}
<div class=”chat”>
<div class=”post”>
<div class=”postTop”></div> <!— for top part of post rounded and shiny —>
<div class=”postContent” id=”post_{PostID}”>
{block:Title}<h2><a href=”{Permalink}”>{Title}</a></h2>
{/block:Title}
<ul class=”chatLines”>
{block:Lines}
<li class=”{Alt}”>
{block:Label}<span class=”label”>{Label}</span>
{/block:Label}
<p>
{Line}
</p>
</li>
{/block:Lines}
</ul>
{block:Date}
<a href=”{Permalink}” class=”leftLink”>{TimeAgo}</a>
{/block:Date}
{block:IndexPage}
{block:NoteCount}
<a class=”note_count” id=”show_notes_{PostID}” href=”{Permalink}”>Show {NoteCountWithLabel}</a>
<a class=”note_count” id=”hide_notes_{PostID}” href=”#” style=”display:none;”>Hide notes</a>
{/block:NoteCount}
{/block:IndexPage}
{block:PostNotes}
<!— start-notes —>
{PostNotes}
<!— end-notes —>
{/block:PostNotes}
</div> <!— end of postContent —>
<div class=”postBottom”></div>
</div> <!— end of post —>
</div> <!— end of chat —>
{/block:Chat}
{block:Text}
<div class=”text”>
<div class=”post”>
<div class=”postTop”></div> <!— for top part of post rounded and shiny —>
<div class=”postContent” id=”post_{PostID}”>
{block:Title}<h2><a href=”{Permalink}”>{Title}</a></h2>
{/block:Title}
<div id=”textContent”>
<!— body-start —>
{Body}
<!— body-end —>
{block:More}
<p class=”readMore”><a href=”{Permalink}”>Read More</a></p>
{/block:More}
</div>
{block:Date}
<a href=”{Permalink}” class=”leftLink”>{TimeAgo}</a>
{/block:Date}
{block:IndexPage}
{block:NoteCount}
<a class=”note_count” id=”show_notes_{PostID}” href=”{Permalink}”>Show {NoteCountWithLabel}</a>
<a class=”note_count” id=”hide_notes_{PostID}” href=”#” style=”display:none;”>Hide notes</a>
{/block:NoteCount}
{/block:IndexPage}
{block:PostNotes}
<!— start-notes —>
{PostNotes}
<!— end-notes —>
{/block:PostNotes}
</div> <!— end of postContent —>
<div class=”postBottom”></div>
</div> <!— end of post —>
</div> <!— end of text —>
{/block:Text}
{block:Photo}
<div class=”photo”>
<div class=”post”>
<div class=”postTop”></div> <!— for top part of post rounded and shiny —>
<div class=”postContent” id=”post_{PostID}”>
<img id=”mainImage” src=”{PhotoURL-250}” alt=”{PhotoAlt}” border=”0” />
{block:Caption}
<p>
<em>{Caption}</em>
</p>
{/block:Caption}
{block:Date}
<a href=”{Permalink}” class=”leftLink”>{TimeAgo}</a>
{/block:Date}
{block:IndexPage}
{block:NoteCount}
<a class=”note_count” id=”show_notes_{PostID}” href=”{Permalink}”>Show {NoteCountWithLabel}</a>
<a class=”note_count” id=”hide_notes_{PostID}” href=”#” style=”display:none;”>Hide notes</a>
{/block:NoteCount}
{/block:IndexPage}
{block:PostNotes}
<!— start-notes —>
{PostNotes}
<!— end-notes —>
{/block:PostNotes}
</div> <!— end of postContent —>
<div class=”postBottom”></div>
</div> <!— end of post —>
</div><!— end of photo —>
{/block:Photo}
{block:Video}
<div class=”video”>
<div class=”post”>
<div class=”postTop”></div> <!— for top part of post rounded and shiny —>
<div class=”postContent” id=”post_{PostID}”>
<div class=”videoBack”>{Video-250}</div>
{block:Caption}
<p>
{Caption}
</p>
{/block:Caption}
{block:Date}
<a href=”{Permalink}” class=”leftLink”>{TimeAgo}</a>
{/block:Date}
{block:IndexPage}
{block:NoteCount}
<a class=”note_count” id=”show_notes_{PostID}” href=”{Permalink}”>Show {NoteCountWithLabel}</a>
<a class=”note_count” id=”hide_notes_{PostID}” href=”#” style=”display:none;”>Hide notes</a>
{/block:NoteCount}
{/block:IndexPage}
{block:PostNotes}
<!— start-notes —>
{PostNotes}
<!— end-notes —>
{/block:PostNotes}
</div> <!— end of postContent —>
<div class=”postBottom”></div>
</div> <!— end of post —>
</div><!— end of video —>
{/block:Video}
{block:Photoset}
<div class=”photoset”>
<div class=”post”>
<div class=”postTop”></div> <!— for top part of post rounded and shiny —>
<div class=”postContent” id=”post_{PostID}”>
<div class=”photosetBack”>{Photoset-250}</div>
{block:Caption}
<p>
{Caption}
</p>
{/block:Caption}
{block:Date}
<a href=”{Permalink}” class=”leftLink”>{TimeAgo}</a>
{/block:Date}
{block:IndexPage}
{block:NoteCount}
<a class=”note_count” id=”show_notes_{PostID}” href=”{Permalink}”>Show {NoteCountWithLabel}</a>
<a class=”note_count” id=”hide_notes_{PostID}” href=”#” style=”display:none;”>Hide notes</a>
{/block:NoteCount}
{/block:IndexPage}
{block:PostNotes}
<!— start-notes —>
{PostNotes}
<!— end-notes —>
{/block:PostNotes}
</div> <!— end of postContent —>
<div class=”postBottom”></div>
</div> <!— end of post —>
</div><!— end of video —>
{/block:Photoset}
{block:Audio}
<div class=”audio”>
<div class=”post”>
<div class=”postTop”></div> <!— for top part of post rounded and shiny —>
<div class=”postContent” id=”post_{PostID}”>
{block:AlbumArt}
<img class=”albumArt” src=”{AlbumArtURL}” />
{/block:AlbumArt}
<a class=”audioUrl” href=”{RawAudioURL}”><img src=”http://static.tumblr.com/52cqb6c/ncKl1qrsf/play.png” class=”play”>Listen</a>
{block:Caption}
<div class=”caption”>
{Caption}
</div>
{/block:Caption}
{block:Date}
<a href=”{Permalink}” class=”leftLink”>{TimeAgo}</a>
{/block:Date}
{block:IndexPage}
{block:NoteCount}
<a class=”note_count” id=”show_notes_{PostID}” href=”{Permalink}”>Show {NoteCountWithLabel}</a>
<a class=”note_count” id=”hide_notes_{PostID}” href=”#” style=”display:none;”>Hide notes</a>
{/block:NoteCount}
{/block:IndexPage}
{block:PostNotes}
<!— start-notes —>
{PostNotes}
<!— end-notes —>
{/block:PostNotes}
</div> <!— end of postContent —>
<div class=”postBottom”></div>
</div> <!— end of post —>
</div> <!— end of audio —>
{/block:Audio}
{block:Quote}
<div class=”quote”>
<div class=”post”>
<div class=”postTop”></div> <!— for top part of post rounded and shiny —>
<img src=”http://static.tumblr.com/52cqb6c/LxVl1oqvv/quotemarks.png” class=”quoteMarks”/>
<div class=”postContent” id=”post_{PostID}”>
<blockquote>
<p>
{Quote}
</p>
{block:Source}
<cite>
{Source}
</cite>
{/block:Source}
</blockquote>
{block:Date}
<a href=”{Permalink}” class=”leftLink”>{TimeAgo}</a>
{/block:Date}
{block:IndexPage}
{block:NoteCount}
<a class=”note_count” id=”show_notes_{PostID}” href=”{Permalink}”>Show {NoteCountWithLabel}</a>
<a class=”note_count” id=”hide_notes_{PostID}” href=”#” style=”display:none;”>Hide notes</a>
{/block:NoteCount}
{/block:IndexPage}
{block:PostNotes}
<!— start-notes —>
{PostNotes}
<!— end-notes —>
{/block:PostNotes}
</div> <!— end of postContent —>
<div class=”postBottom”></div>
</div> <!— end of post —>
</div> <!— end of quote —>
{/block:Quote}
{block:Link}
<div class=”link”>
<div class=”post”>
<div class=”postTop”></div> <!— for top part of post rounded and shiny —>
<div class=”postContent” id=”post_{PostID}”>
<h2><a href=”{URL}”>{Name}</a></h2>
{block:Description}
<p>
{Description}
</p>
{/block:Description}
{block:Date}
<a href=”{Permalink}” class=”leftLink”>{TimeAgo}</a>
{/block:Date}
{block:IndexPage}
{block:NoteCount}
<a class=”note_count” id=”show_notes_{PostID}” href=”{Permalink}”>Show {NoteCountWithLabel}</a>
<a class=”note_count” id=”hide_notes_{PostID}” href=”#” style=”display:none;”>Hide notes</a>
{/block:NoteCount}
{/block:IndexPage}
{block:PostNotes}
<!— start-notes —>
{PostNotes}
<!— end-notes —>
{/block:PostNotes}
</div> <!— end of postContent —>
<div class=”postBottom”></div>
<div class=”linkSide”><a href=”{URL}”><div class=”linkInner”></div></a></div>
</div> <!— end of post —>
</div> <!— end of link —>
{/block:Link}
{block:Answer}
<div class=”answer”>
<div class=”post”>
<div class=”postTop”></div> <!— for top part of post rounded and shiny —>
<div class=”postContent” id=”post_{PostID}”>
<h2><a href=”{Permalink}”>{Question}</a></h2>
<p>
{Answer}
</p>
<ul>
<li><img src=”{AskerPortraitURL-16}” /></li>
<li>{Asker}</li>
</ul>
{block:Date}
<a href=”{Permalink}” class=”leftLink”>{TimeAgo}</a>
{/block:Date}
{block:IndexPage}
{block:NoteCount}
<a class=”note_count” id=”show_notes_{PostID}” href=”{Permalink}”>Show {NoteCountWithLabel}</a>
<a class=”note_count” id=”hide_notes_{PostID}” href=”#” style=”display:none;”>Hide notes</a>
{/block:NoteCount}
{/block:IndexPage}
{block:PostNotes}
<!— start-notes —>
{PostNotes}
<!— end-notes —>
{/block:PostNotes}
</div> <!— end of postContent —>
<div class=”postBottom”></div>
</div> <!— end of post —>
</div> <!— end of answer —>
{/block:Answer}
{/block:Posts}
<!— posts-end —>
</div> <!— end of postWrap —>
{block:Pagination}
<div id=”loadMore”>
<img src=”http://static.tumblr.com/52cqb6c/GKnl101vq/ajax-loader.gif”><p>Load More</p>
</div>
{/block:Pagination}
</div> <!— end of content —>
<script type=”text/javascript”>
$(document).ready(function(){
/* Load more posts to current page */
var nextPage = {CurrentPage} + 1,
totalPage = {TotalPages},
newPosts = “”,
loadingNext = false;
$(‘#loadMore’).click(function() {loadMore();});
function loadMore() {
if ((nextPage <=totalPage) && (! loadingNext)) {
loadingNext = true;
$(‘#loadMore img’).show();
$(‘#loadMore p’).hide();
$.get(“/page/”+nextPage + “?cb=” + Math.random(), function(data){
newPosts = data.split(‘<!— posts-start —>’)[1].split(‘<!— posts-end —>’)[0];
$(‘#postWrap’).append(newPosts);
$(‘#loadMore img’).hide();
$(‘#loadMore p’).show();
nextPage++;
loadingNext = false;
if (nextPage > totalPage) {
$(‘#loadMore’).hide();
}
});
}
};
$(‘.note_count’).live(‘click’,function(e){
e.preventDefault();
var postId = $(this).attr(‘id’).slice(11),
notesUrl = $(this).attr(‘href’),
tempText = $(this).html(),
newNotes = “”;
if ($(this).attr(‘id’) == (‘show_notes_’ + postId)) {
if ($(‘ol.notes’, $(‘#post_’ + postId)).is(‘:hidden’)) {
$(‘ol.notes’, $(‘#post_’ + postId)).show();
var h = $(‘ol.notes’, $(‘#post_’ + postId)).outerHeight();
$(‘#hide_notes_’ + postId).css(‘bottom’, h+40);
$(‘ol.notes’, $(‘#post_’ + postId)).css(‘margin-top’,’40px’);
$(‘#show_notes_’ + postId).hide();
$(‘#hide_notes_’ + postId).show();
}
else{
$(‘#show_notes_’ + postId).html(‘Loading…’);
$.get(notesUrl, function(data){
newNotes = data.split(‘<!— start-notes —>’)[1].split(‘<!— end-notes —>’)[0];
$(‘#post_’ + postId).append(newNotes);
var h = $(‘ol.notes’, $(‘#post_’ + postId)).outerHeight();
$(‘ol.notes’, $(‘#post_’ + postId)).css(‘margin-top’,’40px’);
$(‘#show_notes_’ + postId).html(tempText).hide();
$(‘#hide_notes_’ + postId).show();
$(‘#hide_notes_’ + postId).css(‘bottom’, h+40);
});
}
}
else
{
$(‘ol.notes’, $(‘#post_’ + postId)).hide();
$(‘#show_notes_’ + postId).css(‘bottom’, -10);
$(‘#hide_notes_’ + postId).hide();
$(‘#show_notes_’ + postId).show();
}
});
$(‘.menuButton’).toggle(
function() {
$(‘#menu’).show();
$(‘#container’).hide();
$(this).addClass(‘pressed’);
},
function() {
$(‘#menu’).hide();
$(‘#container’).show();
$(this).removeClass(‘pressed’);
}
);
$(‘.readMore a’).live(‘click’, function(e) {
e.preventDefault();
var loadUrl = $(this).attr(‘href’),
loadPost = “”,
loadTo = $(this).parent().parent(),
readLink = $(this);
$(this).html(‘Loading…’);
$.get(loadUrl, function(data){
loadPost = data.split(‘<!— body-start —>’)[1].split(‘<!— body-end —>’)[0];
$(loadTo).html(loadPost);
$(readLink).remove();
});
});
});
</script>
</body>
</html>
