myrtillenne | Marbles ver. 2 (Reply)

FEATURES

250 - 500px wide posts
popup menu containing avatar, description, links and search
page links and 8 extra links
show/hide captions and tags on index page
like and reblog links on index page
pagination or infinite scroll (with optional manual load)
font size and google fonts of your choice
optional sidebar image
optional subtitle
custom photoset lightbox

CODE

<!DOCTYPE html>
<html>
<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:ifMainGoogleFont}<link href="https://fonts.googleapis.com/css?family={text:Main Google Font}" rel="stylesheet" type="text/css">{/block:ifMainGoogleFont}
{block:ifSecondaryGoogleFont}<link href="https://fonts.googleapis.com/css?family={text:Secondary Google Font}" rel="stylesheet" type="text/css">{/block:ifSecondaryGoogleFont}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="https://static.tumblr.com/vywm3oc/SKaog4f6h/style.css" rel="stylesheet" type="text/css">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta name="image:Sidebar Image" content="https://static.tumblr.com/c42c7a3ea24d0a983d5c40d7506c7004/vywm3oc/7vlofrhmd/tumblr_static_8frli08qjuccog8ww808ooc80.jpg"/>
<meta name="image:Sidebar Background" content="https://static.tumblr.com/59ad6dddc427f03991588236ae579178/vywm3oc/q5Bofrhme/tumblr_static_9m0ya22wsoco4000coco4kggw.jpg"/>
<meta name="color:Background" content="#fcfbf7"/>
<meta name="color:Text" content="#806152"/>
<meta name="color:Link" content="#e38044"/>
<meta name="color:Link Hover" content="#e87362"/>
<meta name="color:Title" content="#806152"/>
<meta name="color:Subtitle" content="#806152"/>
<meta name="color:Sidebar Background" content="#fcfbf7"/>
<meta name="color:Sidebar Border" content="#bf7f63"/>
<meta name="color:Sidebar Link" content="#fcfbf7"/>
<meta name="color:Sidebar Link Hover" content="#fff"/>
<meta name="color:Sidebar Link Background" content="#e49463"/>
<meta name="color:Sidebar Link Background Hover" content="#ea8971"/>
<meta name="color:Post Border" content="#e3c6b9"/>
<meta name="color:Post Footer Link" content="#fcfbf7"/>
<meta name="color:Post Footer Link Hover" content="#fff"/>
<meta name="color:Post Footer Background" content="#f8c09e"/>
<meta name="color:Post Footer Background Hover" content="#f9b5a6"/>
<meta name="color:Navigation Border" content="#e3c6b9"/>
<meta name="color:Navigation Link" content="#fcfbf7"/>
<meta name="color:Navigation Link Hover" content="#fff"/>
<meta name="color:Navigation Background" content="#f8c09e"/>
<meta name="color:Navigation Background Hover" content="#f9b5a6"/>
<meta name="color:Photoset Background" content="#fff"/>
<meta name="color:Photoset Controls" content="#fff"/>
<meta name="color:Tooltip Background" content="#fff"/>
<meta name="color:Tooltip Text" content="#806152"/>
<meta name="text:Subtitle" content=""/>
<meta name="text:Sidebar Width" content="36vw"/>
<meta name="text:Body Font Size" content="12"/>
<meta name="text:Title Font Size" content="28"/>
<meta name="text:Subtitle Font Size" content="14"/>
<meta name="text:Post Title Font Size" content="20"/>
<meta name="text:Post Spacing" content="30"/>
<meta name="text:Photoset Spacing" content="2">
<meta name="text:Main Google Font" content=""/>
<meta name="text:Secondary Google Font" content="Playball"/>
<meta name="text:Link 1 Title" content=""/>
<meta name="text:Link 1 URL" content="http://"/>
<meta name="text:Link 2 Title" content=""/>
<meta name="text:Link 2 URL" content="http://"/>
<meta name="text:Link 3 Title" content=""/>
<meta name="text:Link 3 URL" content="http://"/>
<meta name="text:Link 4 Title" content=""/>
<meta name="text:Link 4 URL" content="http://"/>
<meta name="text:Link 5 Title" content=""/>
<meta name="text:Link 5 URL" content="http://"/>
<meta name="text:Link 6 Title" content=""/>
<meta name="text:Link 6 URL" content="http://"/>
<meta name="text:Link 7 Title" content=""/>
<meta name="text:Link 7 URL" content="http://"/>
<meta name="text:Link 8 Title" content=""/>
<meta name="text:Link 8 URL" content="http://"/>
<meta name="text:Website URL" content="http://"/>
<meta name="text:Email Address" content="mailto:"/>
<meta name="text:Facebook URL" content="http://www.facebook.com/"/>
<meta name="text:Twitter URL" content="http://twitter.com/"/>
<meta name="text:Instagram URL" content="http://www.instagram.com/"/>
<meta name="select:Main Font" content="arial, sans-serif" title="Arial"/>
<meta name="select:Main Font" content="georgia, serif" title="Georgia"/>
<meta name="select:Main Font" content="Palatino, 'Palatino Linotype', serif" title="Palatino"/>
<meta name="select:Main Font" content="Times, 'Times New Roman', serif" title="Times New Roman"/>
<meta name="select:Main Font" content="courier, monospace" title="Courier"/>
<meta name="select:Main Font" content="lucida console, monospace" title="Lucida Console"/>
<meta name="select:Main Font" content="verdana, sans-serif" title="Verdana"/>
<meta name="select:Sidebar Background Size" content="cover" title="cover">
<meta name="select:Sidebar Background Size" content="auto" title="default">
<meta name="select:Post Size" content="500" title="500px">
<meta name="select:Post Size" content="450" title="450px">
<meta name="select:Post Size" content="400" title="400px">
<meta name="select:Post Size" content="350" title="350px">
<meta name="select:Post Size" content="300" title="300px">
<meta name="select:Post Size" content="250" title="250px">
<meta name="select:Text Align" content="left" title="left">
<meta name="select:Text Align" content="justify" title="justify">
<meta name="if:Sidebar Image" content="1">
<meta name="if:Always Show Caption" content="1">
<meta name="if:Always Show Tags" content="0">
<meta name="if:Infinite Scroll" content="0">
<meta name="if:Manual Load" content="0">
<style>
body{
    line-height:1.5;
    font-size:{text:Body Font Size}px;
    font-family:{block:ifMainGoogleFont}{text:Main Google Font}, {/block:ifMainGoogleFont}{select:Main Font};
    background:{color:Background};
    color:{color:Text};
    margin:0;
    overflow-y:scroll;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-thumb {
  background: {color:Sidebar Border};
  border: 0;
}

::-webkit-scrollbar-track {
  background: {color:Background};
  border: 0;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

a{
    color:{color:Link};
    text-decoration:none;
    transition:color 0.4s, background 0.4s;
}

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

a img{
     border:0;
}

blockquote:not(.instagram-media){
    border-left:1px solid {color:Post Border};
    padding-left:1em;
    margin-left:0;
    margin-right:0;
}

pre{
    white-space:pre-wrap;
}

#sidebar{
    position:fixed;
    left:0;
    top:0;
    background-image:url({image:Sidebar Background});
    background-color:{color:Sidebar Background};
    background-size:{select:Sidebar Background Size};
    background-position:center center;
    width:{text:Sidebar Width};
    min-width:350px;
    height:100%;
    display:table;
    padding:40px 4%;
    border-right:7px solid {color:Sidebar Border};
    box-sizing:border-box;
}

#sidebar .inner{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    position:relative;
}

#navigation{
    margin:0;
    padding:0;
    width:100%;
    height:40px;
    position:absolute;
    top:0;
    z-index:1;
    display:flex;
    justify-content:center;
}

#navigation li{
    list-style:none;
}

#navigation li a{
    display:block;
    color:{color:Sidebar Link};
    font-size:14px;
    width:40px;
    height:40px;
    line-height:0;
    border-radius:40px;
    background:{color:Sidebar Link Background};
    position:relative;
    margin:0 5px;
}

#navigation li a:hover{
    color:{color:Sidebar Link Hover};
    background:{color:Sidebar Link Background Hover};
}

#navigation li a i{
    line-height:40px;
}

#navigation li  a.hide-menu{
    display:none;
}

.line{
    display:block;
    width:14px;
    height:1px;
    background:{color:Sidebar Border};
}

#navigation .line{
    margin-top:20px;
}

.line2{
    flex:1;
}

#sidebar-image{
    position:relative;
}

#sidebar-image img{
    width:200px;
    height:auto;
    border-radius:50%;
    border:7px solid {color:Sidebar Border};
}

#line3{
    width:calc(50% - 117px);
    height:1px;
    background:{color:Sidebar Border};
    position:absolute;
    top:50%;
    left:0;
}

#line4{
    width:calc(50% - 117px);
    height:1px;
    background:{color:Sidebar Border};
    position:absolute;
    top:50%;
    right:0;
}

h1#title{
    font-size:{text:Title Font Size}px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    line-height:1;
    margin:0.5em 0 0.25em;
    color:{color:Title};
}

h2#subtitle{
    font-size:{text:Subtitle Font Size}px;
    line-height:1;
    margin:0;
    color:{color:Subtitle};
}

#top{
    width:100%;
    height:30px;
    position:absolute;
    bottom:0;
    display:flex;
    justify-content:center;
}

#top .line{
    margin-top:15px;
}

#top a{
    display:block;
    color:{color:Sidebar Link};
    font-size:14px;
    width:30px;
    height:30px;
    line-height:0;
    border-radius:30px;
    background:{color:Sidebar Link Background};
    margin:0 5px;
    float:left;
}

#top a:hover{
    color:{color:Sidebar Link Hover};
    background:{color:Sidebar Link Background Hover};
}

#top a i{
    line-height:30px;
}

#content{
    margin-left:{text:Sidebar Width};
    background:{color:Background};
    position:relative;
    z-index:2;
}

#content .inner{
    margin:0 auto;
    width:calc({select:Post Size}px + 42px);
    padding:0 20px;
    background:{color:Background};
}

#menu{
    display:none;
}

#menu .contents{
    display:table;
    height:100vh;
}

#menu .outer{
    display:table-cell;
    vertical-align:middle;
    padding:40px 0;
}

#menu .box{
    border:1px solid {color:Post Border};
    margin:48px 0 15px;
}

#poster-avatar{
    display:block;
    width:96px;
    height:96px;
    margin:-48px auto 0;
    padding:0 10px;
    background:{color:Background};
}

#poster-avatar img{
    border-radius:96px;
}

#description{
    width:{select:Post Size}px;
    margin:20px;
    text-align:{select:Text Align};
}

#menu h4{
    margin:0;
}

#links{
    width:{select:Post Size}px;
    margin:20px;
}

#links ul{
    margin:0;
    padding:0;
    overflow:hidden;
}

#links li{
    float:left;
    list-style:none;
    width:50%;
    line-height:1.5;
}

#links li a{
    display:block;
    padding:0.5em;
    border-bottom:1px solid {color:Post Border};
}

#links li:nth-child(odd) a{
    margin-right:7px;
}
 
#links li:nth-child(even) a{
    margin-left:7px;
}

#credit{
    clear:left;
}

#credit a{
    margin-right:7px;
    margin-left:0!important;
}

#search input{
    width:100%;
    height:1.5em;
    overflow:visible;
    border:0;
    background:transparent;
    padding:0.5em;
    margin-left:7px;
    color:{color:Text};
    border-bottom:1px solid {color:Post Border};
    font-size:1em;
    font-family:{block:ifMainGoogleFont}{text:Main Google Font}, {/block:ifMainGoogleFont}{select:Main Font};
}

#search input:focus{
    outline: none;
}

#social{
    height:30px;
    text-align:center;
    margin-bottom:-15px;
}

#social ul{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    justify-content:center;
}

#social li{
    padding:0 5px;
    margin:0 4px;
    background:{color:Background};
}

#social li a{
    display:block;
    font-size:14px;
    width:30px;
    height:30px;
    line-height:0;
    border-radius:30px;
    color:{color:Post Footer Link};
    background:{color:Post Footer Background};
}

#social li a:hover{
    color:{color:Post Footer Link Hover};
    background:{color:Post Footer Background Hover};
}

#social li a i{
    line-height:30px;
}

#posts-wrapper{
    padding:40px 0;
}

.post-spacing{
    height:{text:Post Spacing}px;
}

.posts:first-child .post-spacing{
    display:none;
}

.posts .box{
    border:1px solid {color:Post Border};
    margin:{block:IndexPage}20px{/block:IndexPage}{block:PermalinkPage}24px{/block:PermalinkPage} 0 15px;
}

.post img, .post iframe{
    display:block;
}

.posts img{
    max-width:100%;
    height:auto;
}

.header{
    {block:IndexPage}height:40px;
    margin-top:-20px;{/block:IndexPage}
    {block:PermalinkPage}height:48px;
    margin-top:-24px;{/block:PermalinkPage}
}

.header ul{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    justify-content:center;
}

.header li{
    background:{color:Background};
    padding:0 5px;
    margin:0 7px;
}

.header img{
    border-radius:50%;
    display:block;
}

.post{
    width:{select:Post Size}px;
    margin:20px;
    text-align:{select:Text Align};
}

.post h3.title{
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Post Title Font Size}px;
    line-height:1.2;
}

.post ol, .caption ol, .post ul, .caption ul{
    padding-left:1em;
    list-style-position:inside;
}

.read-more{
    border-top:1px solid {color:Post Border};
    padding:0.5em 0.5em 0;
}

.post.photo img{
    margin:0 auto;
}

.post.photoset img{
    cursor:pointer;
}

.photo-slideshow .count-2 {
    width: calc((100% - {text:Photoset Spacing}px) / 2);
}
 
.photo-slideshow .count-2:first-child{
     margin-right:{text:Photoset Spacing}px;
}
 
.photo-slideshow .count-3 {
    width: calc(33.333333% - {text:Photoset Spacing}px * 2 / 3);
    margin-right:{text:Photoset Spacing}px;
}
 
.photo-slideshow .count-3:last-child{
    margin-right:0;
}
 
.photo-slideshow .row{
    margin-bottom:{text:Photoset Spacing}px!important;
}
 
.photo-slideshow .row:last-child{
    margin-bottom:0!important;
}

.quote-text{
    font-size:1.5em;
    font-style:italic;
    line-height:1.2;
    border:1px solid {color:Post Border};
    padding:20px;
}

.post-type{
    width:24px;
    height:24px;
    padding: 0 5px;
    text-align:center;
    color:{color:Post Footer Link};
    background:{color:Background};
    margin:-12px auto 12px;
    position:relative;
    line-height:0;
}

.post-type i{
    width:24px;
    height:24px;
    line-height:24px;
    border-radius:24px;
    font-size:12px;
    background:{color:Post Footer Background};
}

.source{
    text-align:center;
}

.question, .answer{
    border:1px solid {color:Post Border};
    padding:20px 20px 25px;
    margin-bottom:30px;
    position:relative;
}

.asker-avatar, .answerer-avatar{
    position:absolute;
    left:50%;
    bottom:-15px;
    width:30px;
    height:30px;
    background:{color:Background};
    padding: 0 5px;
    margin-left:-20px;
}

.asker-avatar img, .answerer-avatar img{
    display:block;
    border-radius:30px;
}

.ask-name{
    font-weight:bold;
}

.answer p{
    margin-bottom:0;
}

.answer p:first-of-type{
    display:inline;
}

.chat-line{
    margin-top:0.5em;
    padding:0 0.5em 0.5em;
    border-bottom:1px solid {color:Post Border};
}

.chat .chat-line:last-child{
    padding-bottom:0;
    border:0;
}

.chat span{
    font-weight:bold;
}

.audio-container{
    display:flex;
    align-items:center;
    border:1px solid {color:Post Border};
}

.audio-wrapper{
    position:relative;
    min-width:100px;
    height:100px;
    margin-left:1em;
}

.audio-player{
    position:absolute;
    top:0;
    left:0;
}
 
.player{
    width:100px;
    height:28px;
    overflow:hidden;
    padding:36px 0;
}

.album-art{
    width:100px;
    height:100px;
    position:absolute;
    visibility:visible;
    opacity:1;
    transition: visibility 0.4s step-start, opacity 0.4s linear;
    top:0;
    left:0;
}
 
.album-art img{
    width:100%;
    height:100%;
}
 
.post.audio:hover .album-art{
    visibility:hidden;
    opacity:0;
    transition:visibility 0.4s step-end, opacity 0.4s linear;
}

.audio-caption{
    flex:1;
    padding:20px;
}

.song{
    font-size:1.2em;
    font-weight:bold;
}

.artist, .album{
    display:inline;
}

.audio .post-type i{
    font-size:14px;
}

.link-container{
    border:1px solid {color:Post Border};
    padding:20px;
}

.link-container h4{
    margin:0;
    font-size:1.2em;
    line-height:1.2;
}

.link .post-type i{
	font-size:14px;
}

.caption{
    width:{select:Post Size}px;
    margin: 0 20px;
    {block:IndexPage}{block:ifNotAlwaysShowCaption}display:none;{/block:ifNotAlwaysShowCaption}{/block:IndexPage}
}

.caption > p:first-child{
    margin-top:0;
}

.tags.index{
    width:{select:Post Size}px;
    margin: 0 20px 1em;
    {block:ifNotAlwaysShowTags}display:none;{/block:ifNotAlwaysShowTags}
}

.tags.index a{
    margin-right:0.25em;
}

.footer{
    {block:IndexPage}
    height:30px;
    margin-bottom:-15px;{/block:IndexPage}
    {block:PermalinkPage}margin:20px;{/block:PermalinkPage}
}

.footer ul{
    margin:0;
    padding:0;
    list-style:none;
}

.footer.index ul{
    display:flex;
    justify-content:center;
}

.footer.index li{
    padding:0 5px;
    margin:0 4px;
    text-align:center;
    background:{color:Background};
}

.footer.index li a{
    display:block;
    font-size:14px;
    width:30px;
    height:30px;
    line-height:0;
    border-radius:30px;
    color:{color:Post Footer Link};
    background:{color:Post Footer Background};
}

.footer.index li a:hover{
    color:{color:Post Footer Link Hover};
    background:{color:Post Footer Background Hover};
}

.footer.index li a i{
    line-height:30px;
}

.show-caption{
    {block:ifAlwaysShowCaption}display:none;{/block:ifAlwaysShowCaption}
}

.show-tags{
    {block:ifAlwaysShowTags}display:none;{/block:ifAlwaysShowTags}
}

.footer.entry > ul > li{
    margin-top:1em;
    line-height:20px;
    padding-right:30px;
    position:relative;
}

.footer.entry > ul > li:after{
    font-family: FontAwesome;
    position:absolute;
    top:0;
    right:0;
    font-size:10px;
    width:20px;
    height:20px;
    text-align:center;
    line-height:20px;
    color:{color:Post Footer Link};
    background:{color:Post Footer Background};
    border-radius:16px;
}

li.tags:after{
    content:"\f02c";
}

li.date:after{
    content:"\f017";
}

li.reblog:after{
    content:"\f021";
}

li.note-count:after{
    content:"\f005";
}

.footer.entry .tags ul{
    margin:0;
    padding:0;
    display:inline;
}

.footer.entry .tags li{
    display:inline;
}

.footer.entry .tags li:after{
    content:", ";
}

.footer.entry .tags li:nth-last-child(2):after{
    content:" and ";
}

.footer.entry .tags li:last-child:after{
    content:"";
}

.custom-like-button{
    position:relative;
    width:30px;
    height:30px;
}

.like_button{
    position:absolute;
    top: 0;
    left:5px;
    width:30px;
    height:30px;
    opacity:0;
    z-index:10;
}

.like_button iframe{
    width:100%!important;
    height:100%!important;
}

.like-button-heart{
    position:absolute;
    top:0;
    left:5px;
    z-index:1;
}

.like_button:hover + .like-button-heart{
    color: red;
    background:{color:Post Footer Background Hover};
}

.like_button.liked + .like-button-heart{
    color: red;
}

#notes{
    display:none;
}

#notes ol{
    list-style:none;
    margin:0;
    padding:0;
}

#notes li{
    margin:1em 0;
    line-height:20px;
    position:relative;
}

li.note.like, li.note.reblog{
    padding-right:30px;
}

#notes .avatar{
    display:inline-block;
    vertical-align:middle;
    margin-right:0.5em;
    border-radius:16px;
}

#notes li.more_notes_link_container{
    margin:0;
}

li.note:after{
    font-family: FontAwesome;
    position:absolute;
    top:0;
    right:0;
    font-size:10px;
    width:20px;
    height:20px;
    text-align:center;
    line-height:20px;
    color:{color:Post Footer Link};
    background:{color:Post Footer Background};
    border-radius:16px;
}

li.note.like:after{
    content:"\f004";
}

li.note.reblog:after{
    content:"\f021";
}

li.note.original_post:after{
    content:"\f040";
}

.more_notes_link, .notes_loading{
    display:block;
    width:30px;
    height:30px;
    line-height:30px;
    font-size:0;
    margin:0 auto -35px;
    padding:0 5px;
    background:{color:Background};
}

.more_notes_link:before, .notes_loading:before{
    display:block;
    font-size:14px;
    font-family: FontAwesome;
    color:{color:Post Footer Link};
    background:{color:Post Footer Background};
    border-radius:30px;
    transition:color 0.4s, background 0.4s;
}

.more_notes_link:hover:before{
    color:{color:Post Footer Link Hover};
    background:{color:Post Footer Background Hover};
}

.more_notes_link:before{
    content: "\f067";
}

.notes_loading:before{
    content: "\f254";
}

#notes blockquote{
    margin:1em 0;
    line-height:1.5;
}

#footer{
    text-align:center;
    {block:IndexPage}{block:ifInfiniteScroll}{block:ifNotManualLoad}display:none;{/block:ifNotManualLoad}{/block:ifInfiniteScroll}{/block:IndexPage}
}

#footer:empty{
    display:none;
}

#footer .border{
    margin-top:15px;
    width:100%;
    height:0;
    border-top:1px solid {color:Navigation Border};
}

.pagination{
    height:30px;
    margin-top:-15px;
}

.pagination ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
    {block:IndexPage}{block:ifInfiniteScroll}{block:ifManualLoad}display:none;{/block:ifManualLoad}{/block:ifInfiniteScroll}{/block:IndexPage}
}

.pagination li{
    padding:0 5px;
    margin:0 5px;
    background:{color:Background};
}

#load-more{
    padding:0 5px;
    margin:0 auto;
    width:30px;
    background:{color:Background};
}

.pagination li a, #load-more a{
    display:block;
    font-size:14px;
    width:30px;
    height:30px;
    line-height:0;
    border-radius:30px;
    color:{color:Navigation Link};
    background:{color:Navigation Background};
}

.pagination li a:hover, #load-more a:hover{
    color:{color:Navigation Link Hover};
    background:{color:Navigation Background Hover};
}

#load-more a.empty{
    display:none;
}

.pagination li a i, #load-more a i{
    line-height:30px;
}

#infscr-loading{
    display:none!important;
}

.clearfix{
    display:block;
    clear:both;
}

#lightbox{
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    padding:30px 40px;
    box-sizing:border-box;
    z-index:99999;
}

#lightboxbg {
    background:{color:Photoset Background};
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

#lightbox img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    position:relative;
    top:50%;
    left:50%;
    box-shadow:0 0 2px rgba(0,0,0,0.4);
    transform:translate(-50%, -50%);
    cursor:pointer;
}

.arrow-left, .arrow-right{
    color:{color:Photoset Controls};
    position:absolute;
    top:50%;
    margin-top:-20px;
    cursor:pointer;
    font-size:20px;
    width:40px;
    height:40px;
    line-height:0;
    border-radius:40px;
    background:rgba(0,0,0,0.3);
    text-align:center;
}

.arrow-left i, .arrow-right i{
    line-height:40px;
}

.arrow-left{
    left:50%;
}

.arrow-right{
    right:50%;
}

.custom-tooltip{
    display: none;
    max-width: 300px;
    font-size: 1em;
    line-height:1.2;
    color:{color:Tooltip Text};
    background:{color:Tooltip Background};
    box-shadow:0 0 2px rgba(0,0,0,0.3),0 0 1px rgba(255,255,255,0.7);
    font-family: inherit;
    padding: 0.5em 0.75em;
    z-index:9999;
    border:0;
    border-radius:2px;
}

{CustomCSS}
</style>
</head>

<body>
<div id="canvas">
<div id="sidebar">
<div class="inner">
<ul id="navigation">
<li class="line line2"></li>
<li><a href="/" title="Index"><i class="fa fa-file-text"></i></a></li>
<li class="line"></li>
<li><a href="/archive" title="Archive"><i class="fa fa-folder-open"></i></a></li>
{block:AskEnabled}<li class="line"></li>
<li><a href="/ask" title="{AskLabel}"><i class="fa fa-envelope"></i></a></li>{/block:AskEnabled}
<li class="line"></li>
<li id="more"><a href="#" class="show-menu" title="View menu"><i class="fa fa-bars"></i></a><a href="#" class="hide-menu" title="Hide menu"><i class="fa fa-remove"></i></a></li>
<li class="line line2"></li>
</ul>
{block:ifSidebarImage}<div id="sidebar-image"><div id="line3"></div><img src="{image:Sidebar Image}"><div id="line4"></div></div>{/block:ifSidebarImage}
<h1 id="title">{Title}</h1>
{block:ifSubtitle}<h2 id="subtitle">{text:Subtitle}</h2>{/block:ifSubtitle}
<div id="top"><div class="line line2"></div><a href="#" title="Back to top"><i class="fa fa-arrow-up"></i></a><div class="line line2"></div></div>
</div>
</div>
<div id="content">
<div class="inner">
<div id="menu">
<div class="contents">
<div class="outer">
<div class="box">
<div id="poster-avatar"><img src="{PortraitURL-96}" /></div>
{block:Description}<div id="description">{Description}</div>{/block:Description}
<div id="links"><ul>
{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}
{block:ifLink1Title}<li><a href="{text:Link 1 URL}">{text:Link 1 Title}</a></li>{/block:ifLink1Title}
{block:ifLink2Title}<li><a href="{text:Link 2 URL}">{text:Link 2 Title}</a></li>{/block:ifLink2Title}
{block:ifLink3Title}<li><a href="{text:Link 3 URL}">{text:Link 3 Title}</a></li>{/block:ifLink3Title}
{block:ifLink4Title}<li><a href="{text:Link 4 URL}">{text:Link 4 Title}</a></li>{/block:ifLink4Title}
{block:ifLink5Title}<li><a href="{text:Link 5 URL}">{text:Link 5 Title}</a></li>{/block:ifLink5Title}
{block:ifLink6Title}<li><a href="{text:Link 6 URL}">{text:Link 6 Title}</a></li>{/block:ifLink6Title}
{block:ifLink7Title}<li><a href="{text:Link 7 URL}">{text:Link 7 Title}</a></li>{/block:ifLink7Title}
{block:ifLink8Title}<li><a href="{text:Link 8 URL}">{text:Link 8 Title}</a></li>{/block:ifLink8Title}
<li id="credit"><a href="http://myrtillenne.dreamwidth.org">Theme</a></li>
<li id="search"><form name="search" action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="Search"/>
</form></li>
<div class="clearfix"></div>
</ul>
</div>
<div id="social">
<ul>
{block:ifWebsiteURL}<li><a href="{text:Website URL}"><i class="fa fa-globe"></i></a></li>{/block:ifWebsiteURL}
{block:ifEmailAddress}<li><a href="{text:Email Address}"><i class="fa fa-envelope"></i></a></li>{/block:ifEmailAddress}
{block:ifFacebookURL}<li><a href="{text:Facebook URL}"><i class="fa fa-facebook"></i></a></li>{/block:ifFacebookURL}
{block:ifTwitterURL}<li><a href="{text:Twitter URL}"><i class="fa fa-twitter"></i></a></li>{/block:ifTwitterURL}
{block:ifInstagramURL}<li><a href="{text:Instagram URL}"><i class="fa fa-instagram"></i></a></li>{/block:ifInstagramURL}
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="posts-wrapper">
<div class="contents">
{block:Posts}
<div class="posts" id="{PostID}">
<div class="post-spacing"></div>
<div class="box">
<div class="header">
<ul>
{block:IndexPage}{block:NotReblog}<li class="poster-avatar"><a href="/" title="Posted by {Name}"><img src="{PortraitURL-40}" /></a></li>{/block:NotReblog}
{block:RebloggedFrom}<li class="reblog-parent"><a href="{ReblogParentURL}" title="Reblogged from {ReblogParentName}"><img src="{ReblogParentPortraitURL-40}" /></a></li>
<li class="reblog-root"><a href="{ReblogRootURL}" title="Original by {ReblogRootName}"><img src="{ReblogRootPortraitURL-40}" /></a></li>{/block:RebloggedFrom}{/block:IndexPage}
{block:PermalinkPage}<li class="poster-avatar"><a href="/" title="{Name}"><img src="{PortraitURL-48}" /></a></li>{/block:PermalinkPage}
</ul>
</div>
{block:Text}
<div class="post text">
{block:Title}
<h3 class="title"><a href="{Permalink}">{Title}</a></h3>
{/block:Title}{Body}
{block:More}<div class="read-more"><a href="{Permalink}">Read More</a></div>{/block:More}
</div>
{/block:Text}
{block:Photo}
<div class="post photo">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
</div>
{/block:Photo}
{block:Panorama}
<div class="post panorama">
{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}
</div>
{/block:Panorama}
{block:Photoset}
<div class="post photoset"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-HighRes}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"{block:Caption} title="{Caption}" alt="{Caption}"{/block:Caption} /></div></div>{/block:Photos}</div></div>
{/block:Photoset}
{block:Quote}
<div class="post quote"><div class="quote-text">{Quote}</div><div class="post-type"><i class="fa fa-quote-left"></i></div>
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="post link">
<div class="link-container"><a href="{URL}" class="link" {Target}><h4 class="title">{Name}</h4></a></div><div class="post-type"><i class="fa fa-chain"></i></div>
{block:Description}<div class="description">{Description}
</div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post chat">
{block:Title}<h3 class="title"><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{block:Lines}
<div class="chat-line {Alt} user_{UserNumber}">
{block:Label}<span class="label">{Label}</span>
{/block:Label}{Line}</div>{/block:Lines}
</div>
{/block:Chat}
{block:Video}
<div class="post video">{Video-500}</div>
{/block:Video}
{block:Audio}
<div class="post audio">
<div class="audio-container"><div class="audio-caption"><div class="song">{block:TrackName}{TrackName}{/block:TrackName}</div><div class="artist">{block:Artist}{Artist}{/block:Artist}</div><div class="album">{block:Album} ▪ {Album}{/block:Album}</div></div><div class="audio-wrapper">{block:AudioPlayer}<div class="audio-player"><div class="player">{AudioPlayer}</div></div>{/block:AudioPlayer}{block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" /></div>{/block:AlbumArt}</div></div><div class="post-type"><i class="fa fa-microphone"></i></div></div>
{/block:Audio}
{block:Answer}
<div class="post ask">
<div class="question"><div class="asker-avatar"><img src="{AskerPortraitURL-30}" /></div><span class="ask-name">{Asker}</span> asked: {Question}</div>
{block:Answerer}
<div class="answer"><div class="answerer-avatar"><img src="{AnswererPortraitURL-30}" /></div><span class="ask-name">{Answerer}</span> answered: {Answer}</div>
{/block:Answerer}
<div class="replies">{Replies}</div>
</div>
{/block:Answer}
<div class="clearfix"></div>

{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}

{block:IndexPage}{block:HasTags}<div class="tags index">{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IndexPage}

{block:IndexPage}<div class="footer index">
<ul>
{block:Date}<li><a href="{Permalink}" title="{DayOfMonth} {Month} {Year}"><i class="fa fa-clock-o"></i></a></li>{/block:Date}
{block:NoteCount}<li><a href="{Permalink}" title="{NoteCountWithLabel}"><i class="fa fa-star"></i></a></li>{/block:NoteCount}
{block:Caption}<li class="show show-caption"><a href="#" data-id="caption" title="View caption"><i class="fa fa-commenting"></i></a></li>{/block:Caption}
{block:HasTags}<li class="show show-tags"><a href="#" data-id="tags" title="View tags"><i class="fa fa-tags"></i></a></li>{/block:HasTags}
<li class="custom-like-button" title="Like">{LikeButton}<a class="like-button-heart"><i class="fa fa-heart"></i></a></li>
<li><a href="{ReblogURL}" title="Reblog"><i class="fa fa-refresh"></i></a></li>
</ul>
</div>{/block:IndexPage}
{block:PermalinkPage}<div class="footer entry">
<ul>
{block:HasTags}<li class="tags">Tagged with <ul>{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}</ul></li>{/block:HasTags}
{block:Date}<li class="date">Posted on {DayOfMonth} {Month} {Year} ({TimeAgo})</li>{/block:Date}
{block:RebloggedFrom}<li class="reblog">Reblogged from <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>, original by <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a></li>{/block:RebloggedFrom}
{block:NoteCount}<li class="note-count">Has <a href="#" title="View notes">{NoteCountWithLabel}</a></li>{/block:NoteCount}
</ul>
{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
</div>{/block:PermalinkPage}
</div>
</div>
{/block:Posts}
</div>

<div id="footer">
{block:Pagination}
<div class="post-spacing"></div>
<div class="border"></div>
<div class="pagination">
<ul>
{block:PreviousPage}
<li class="previous"><a href="{PreviousPage}" title="Previous page"><i class="fa fa-arrow-left"></i>
</a></li>{/block:PreviousPage}
{block:NextPage}
<li class="next"><a href="{NextPage}" title="Next page"><i class="fa fa-arrow-right"></i>
</a></li>
{/block:NextPage}
</ul>
{block:ifInfiniteScroll}{block:ifManualLoad}<div id="load-more"><a href="#" class="load" title="Load more"><i class="fa fa-arrow-down"></i></a><a href="#" class="empty" title="No more posts to show"><i class="fa fa-remove"></i></a></div>{/block:ifManualLoad}{/block:ifInfiniteScroll}
</div>
{/block:Pagination}
{block:PermalinkPagination}
<div class="post-spacing"></div>
<div class="border"></div>
<div class="pagination"><ul>
{block:NextPost}
<li class="next"><a href="{NextPost}" title="Previous post"><i class="fa fa-arrow-left"></i></a></li>
{/block:NextPost}
{block:PreviousPost}
<li class="previous"><a href="{PreviousPost}" title="Next post"><i class="fa fa-arrow-right"></i></a></li>{/block:PreviousPost}
</ul></div>
{/block:PermalinkPagination}
</div>
</div>
</div>
</div>
</div>

$(function(){
    
    $('#navigation').on('click', '#more a.show-menu', function(e){
        e.preventDefault();
        $('a.hide-menu').css('display', 'block');
        $(this).hide();
        $('#posts-wrapper').fadeOut(function(){
            $('html, body').scrollTop(0);
            $('#menu').fadeIn();
        });
    });
    
    $('#navigation').on('click', '#more a.hide-menu', function(e){
        e.preventDefault();
        $('a.show-menu').css('display', 'block');
        $(this).hide();
        $('#menu').fadeOut(function(){
            $('#posts-wrapper').fadeIn();
        })
    });
    
    $('.photo-slideshow').pxuPhotoset({
        highRes: false,
        lightbox: false,
        rounded: false,
        gutter: '0px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
   });
    
    function resizeVideo(){
        if ({select:Post Size} < 500){
            newSize = {select:Post Size};
            width = $(this).width();
            height = $(this).height();
            ratio = newSize / width;
            newHeight = Math.floor(height * ratio);
            $(this).attr({'width': newSize, 'height' : newHeight});
            if ($(this).hasClass('tumblr_video_iframe')){
                $(this).parent().css({'width': newSize, 'height' : newHeight});
            }
        }
    }
   
    function resizeEmbed(){
        postSize = $(this).closest('.tmblr-embed').width();
        width = $(this).width();
        if (postSize < width){
            newSize = postSize;
            height = $(this).height();
            ratio = newSize / width;
            newHeight = Math.floor(height * ratio);
            $(this).attr({'width': newSize, 'height' : newHeight});
        }
    }
   
    $('.video iframe').each(resizeVideo);
    $('.tmblr-embed iframe').each(resizeEmbed);
    
    $('.photo-slideshow').on('click', 'img', lightbox);
    
    var imagesURLs = [];
    var mainImgEl;
    var arrowLeft;
    var arrowRight;
    var crtImgURL;
    var crtImgIndex;
    
    function lightbox(){
        $(this).closest('.photo-slideshow').find('img').each(function(){
            imagesURLs.push($(this).attr('data-highres'));
        });
        
        $('body').append('<div id="lightbox"><div id="lightboxbg"></div><img id="mainImage" /><div class="arrow-left"><i class="fa fa-arrow-left"></i></div><div class="arrow-right"><i class="fa fa-arrow-right"></i></div></div>');
        
        mainImgEl = $('#mainImage');
        arrowLeft = $('.arrow-left');
        arrowRight = $('.arrow-right');
        
        crtImgURL = $(this).attr('data-highres');
        crtImgIndex = $.inArray(crtImgURL, imagesURLs);
        
        mainImgEl.attr('src', crtImgURL);
        $('#lightbox').fadeIn();
        
        mainImgEl.load(placeArrows);
        placeArrows();
    }
        
    $('body').on('click', '#mainImage', function(){
        window.open(imagesURLs[crtImgIndex], '_blank', 'toolbar=0,location=0,menubar=0,scrollbars=1');
    });
        
    $('body').on('click', '.arrow-left', function(){
        if (crtImgIndex == 0){
            crtImgIndex = imagesURLs.length;
        }
        mainImgEl.attr('src', imagesURLs[crtImgIndex -= 1]).load(placeArrows);
        placeArrows();
    });
        
    $('body').on('click', '.arrow-right', function(){
        if (crtImgIndex == (imagesURLs.length - 1)){
            crtImgIndex = -1;
        }
        mainImgEl.attr('src', imagesURLs[crtImgIndex += 1]).load(placeArrows);
        placeArrows();
    });
        
    $(window).on('resize', function(){
        if (imagesURLs.length){
            placeArrows();
        }
    });
        
    function placeArrows(){
        var arrowMargin = mainImgEl.width()/2 + 20;
        arrowLeft.css({
            'margin-left' : -arrowMargin
        });
        arrowRight.css({
            'margin-right' : -arrowMargin
        });
    }
    
    $('body').on('click', '#lightboxbg', function() {
        $('#lightbox').fadeOut(function() {
            $('#lightbox').remove();
        });
        imagesURLs = [];
    });
    
    $('#top a').click(function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop : 0},600);
    });
    
    $('[title], #posts-wrapper, #notes').tooltip({ 
        track: true,
		show: {delay:100, duration: 500},
		tooltipClass: "custom-tooltip",
		position: { my: "left+15 top+15" }
    });
    
    $('.show-caption a').tooltip({
        content: 'View caption'
    });
    $('.show-tags a').tooltip({
        content: 'View tags'
    });
    
    $('body').on('click', '.show a', function(e){
        e.preventDefault();
        var toExpand = $(this).attr('data-id');
        $(this).closest('.posts').find('.' + toExpand).slideToggle();
        var crtContent = $(this).tooltip( "option", "content" );
        var newContent = (crtContent === 'View ' + toExpand) ? 'Hide ' + toExpand : 'View ' + toExpand;
        $(this).tooltip( "option", "content", newContent);
    });
    
    $('.footer.entry').on('click', '.note-count a', function(e){
        e.preventDefault();
        $('#notes').slideToggle(600);
        var crtContent = $(this).tooltip( "option", "content" );
        var newContent = (crtContent === 'View notes') ? 'Hide notes' : 'View notes';
        $(this).tooltip( "option", "content", newContent);
    });
    
    $('.note-count a').tooltip({
        content: 'View notes'
    });
    
    $('iframe.tumblr_audio_player').load(function(){
        $(this).contents().find('head').append($('<style "type=text/css">.audio-player{background:{color:Background}!important;color:{color:Text}!important;}</style>'));
    });
    
    var container = $('#posts-wrapper .contents');
    
    {block:IndexPage}
    {block:ifInfiniteScroll}
    container.infinitescroll({
        navSelector: '.pagination ul',
        nextSelector: '.pagination .next a',
        itemSelector: '.posts',
        loading: {
            finishedMsg: '<em></em>',
            img: '',
            msgText: '<em></em>'
        }{block:ifManualLoad},
        errorCallback: function(){ $('a.load').hide(); $('a.empty').css('display', 'block');}{/block:ifManualLoad}
    }, function(newElements){
        var newElems = $(newElements);
        var newElemsIDs = newElems.map(function(){ 
            return this.id; 
        }).get();
        var newPhotoset = newElems.find('.photo-slideshow');
        newPhotoset.each(function() {
            $(this).pxuPhotoset({
                highRes: false,
                lightbox: false,
                rounded: false,
                gutter: '0px',
                photoset: '.photo-slideshow',
                photoWrap: '.photo-data',
                photo: '.pxu-photo'
            });
        });
        newPhotoset.on('click', 'img', lightbox);
        newElems.find('.video iframe').each(resizeVideo);
        newElems.find('.tmblr-embed iframe').each(resizeEmbed);
        newElems.find('iframe.tumblr_audio_player').load(function(){
            $(this).contents().find('head').append($('<style "type=text/css">.audio-player{background:{color:Background}!important;color:{color:Text}!important;}</style>'));
        });
        newElems.find('.show a').tooltip({
            track: true,
    		show: {delay:100, duration: 500},
    		tooltipClass: "custom-tooltip",
    		position: { my: "left+10 top+20" }
        });
        newElems.find('.show-caption a').tooltip({
            content: 'View caption'
        });
        newElems.find('.show-tags a').tooltip({
            content: 'View tags'
        });
        Tumblr.LikeButton.get_status_by_post_ids(newElemsIDs);
    });
    {block:ifManualLoad}
    $(window).off('.infscr');
    $('#load-more a').click(function(e){
        e.preventDefault();
        container.infinitescroll('retrieve');
    });
    {/block:ifManualLoad}
    {/block:ifInfiniteScroll}
    {/block:IndexPage}
    
});
</script>
</body>
</html>

RESOURCES

photoset grid by Pixel Union
icon font by Dave Gandy
custom tooltips by JQuery Foundation
audio player tutorial by Roxie
infinite scroll by Paul Irish
sample sidebar image from Picjumbo

Marbles ver. 2

Post a comment in response: