myrtillenne | Crossroad ver. 2 (Reply)

FEATURES

400 - 700px wide posts
header image (custom x 300px)
header icon (200 x 200px)
page links and/or 8 links
show/hide tags on index page (optional)
like and reblog links on index page
pagination or infinite scroll (with optional manual load)
font size and google fonts of your choice
custom photoset lightbox

CODE

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<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/metro/3.0.17/css/metro-icons.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:Header Image" content="https://static.tumblr.com/27cfdf2a28b55fbba8b1995ea7dd02e7/edqql3l/2mPorhi5f/tumblr_static_dbbbpk529gggk8gsw88ocg0wk.jpg">
<meta name="image:Header Icon" content="https://static.tumblr.com/b08dec5807fbc26753673603d5b2e0c4/edqql3l/3Ctorhiyw/tumblr_static_1o9o4p0gas4gk4cg8cw44wwgk.jpg">
<meta name="color:Background" content="#edf4f7">
<meta name="color:Text" content="#576d75">
<meta name="color:Link" content="#21b3e2">
<meta name="color:Link Hover" content="#528396">
<meta name="color:Title" content="#ffffff">
<meta name="color:Header Background" content="#addae9">
<meta name="color:Header Border" content="#8ecde1">
<meta name="color:Sidebar Background" content="#bce1ed">
<meta name="color:Sidebar Border" content="#addae9">
<meta name="color:Sidebar Text" content="#528396">
<meta name="color:Sidebar Link" content="#ffffff">
<meta name="color:Sidebar Link Hover" content="#21b3e2">
<meta name="color:Navigation Link" content="#ffffff">
<meta name="color:Navigation Link Hover" content="#21b3e2">
<meta name="color:Navigation Link Background" content="#addae9">
<meta name="color:Navigation Link Background Hover" content="#edf4f7">
<meta name="color:Navigation Link Border" content="#edf4f7">
<meta name="color:Pagination Link" content="#ffffff">
<meta name="color:Pagination Background" content="#addae9">
<meta name="color:Post Background" content="#ffffff">
<meta name="color:Post Border" content="#addae9">
<meta name="color:Post Inner Border" content="#bce1ed">
<meta name="color:Post Icons" content="#ffffff">
<meta name="color:Post Icons Background" content="#addae9">
<meta name="color:Post Info Link" content="#21b3e2">
<meta name="color:Post Info Link Hover" content="#ffffff">
<meta name="color:Post Info Link Background" content="#ffffff">
<meta name="color:Post Info Link Background Hover" content="#addae9">
<meta name="color:Post Info Link Border" content="#addae9">
<meta name="color:Photoset Background" content="#ffffff">
<meta name="color:Photoset Controls" content="#576d75">
<meta name="color:Tooltip Background" content="#ffffff">
<meta name="color:Tooltip Text" content="#576d75">
<meta name="color:Scrollbar" content="#8ecde1">
<meta name="color:Scrollbar Track" content="#edf4f7">
<meta name="color:Description Scrollbar" content="#edf4f7">
<meta name="color:Description Scrollbar Track" content="#addae9">
<meta name="text:Header Width add units" content="100%">
<meta name="text:Body Font Size" content="13">
<meta name="text:Title Font Size" content="16">
<meta name="text:Post Title Font Size" content="16">
<meta name="text:Post Spacing" content="50">
<meta name="text:Photoset Spacing" content="2">
<meta name="text:Main Google Font" content="">
<meta name="text:Secondary Google Font" content="Asul">
<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="select:Header Image Style" content="cover" title="cover">
<meta name="select:Header Image Style" content="auto" title="repeat">
<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:Post Size" content="540" title="540px">
<meta name="select:Post Size" content="400" title="400px">
<meta name="select:Post Size" content="450" title="450px">
<meta name="select:Post Size" content="500" title="500px">
<meta name="select:Post Size" content="600" title="600px">
<meta name="select:Post Size" content="650" title="650px">
<meta name="select:Post Size" content="700" title="700px">
<meta name="select:Text Align" content="left" title="left">
<meta name="select:Text Align" content="justify" title="justify">
<meta name="select:Tumblr Controls" content="gw" title="grey on white">
<meta name="select:Tumblr Controls" content="bw" title="black on white">
<meta name="select:Tumblr Controls" content="wb" title="white on black">
<meta name="if:Show Tags On Click" 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;
}

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

::-webkit-scrollbar-track{
    background:{color:Scrollbar Track};
}

::-webkit-scrollbar-thumb{
    background:{color:Scrollbar};
    border:2px solid {color:Scrollbar Track};
}

::-webkit-scrollbar-corner{
    background:{color:Scrollbar Track};
}

#description::-webkit-scrollbar{
    width:8px;
    height:8px;
}

#description::-webkit-scrollbar-track{
    background:{color:Description Scrollbar Track};
}

#description::-webkit-scrollbar-thumb{
    background:{color:Description Scrollbar};
    border-color:{color:Description Scrollbar Track};
}

#description::-webkit-scrollbar-corner{
    background:{color:Description Scrollbar Track};
}

iframe#tumblr_controls, .iframe-controls--desktop{
    margin:10px;
}

.bw iframe#tumblr_controls, .bw .iframe-controls--desktop{
    filter:invert(100%);
    -webkit-filter:invert(100%);
}

.gw iframe#tumblr_controls, .gw .iframe-controls--desktop{
    filter:invert(100%);
    -webkit-filter:invert(100%);
    opacity:0.4;
}

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

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

a img{
     border:0;
}

pre{
    white-space:pre-wrap;
}

#canvas{
    {block:ifHeaderWidth}max-width:calc({text:Header Width add units} + 2px);{/block:ifHeaderWidth}
    margin:0 auto;
}

#header{
    margin-top:50px;
    position:relative;
    z-index:1;
}

#header .inner{
    width:calc(364px + {select:Post Size}px + {text:Post Spacing}px);
    margin:0 auto;
}

#header-image{
    width:100%;
    height:302px;
    border:1px solid {color:Header Border};
    box-sizing:border-box;
    position:absolute;
    left:0;
    bottom:0;
    z-index:-1;
}

#header-image-inner{
    width:100%;
    height:100%;
    background-color:{color:Header Background};
    background-image:url({image:Header Image});
    background-size:{select:Header Image Style};
    background-position:center center;
}

#header .title{
    width:300px;
    color:{color:Title};
    background:{color:Sidebar Background};
    text-align:center;
    padding:1.2em 0;
    border:1px solid {color:Sidebar Border};
    border-bottom:0;
}

#header .title span{
    display:block;
    padding:0 20px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Title Font Size}px;
    text-transform:uppercase;
    line-height:1;
}

#header-icon-wrapper{
    width:300px;
    height:300px;
    background:rgba({RGBcolor:Sidebar Background}, 0.5);
    border:1px solid {color:Header Border};
}

#header-icon{
    width:200px;
    height:200px;
    margin:46px;
    background-image:url({image:Header Icon});
    background-size:cover;
    border:4px solid {color:Header Border};
}

#content{
    width:calc(364px + {select:Post Size}px + {text:Post Spacing}px);
    margin:0 auto;
    position:relative;
}

#sidebar{
    width:302px;
    position:absolute;
    top:0;
    color:{color:Sidebar Text};
    z-index:2;
}

#sidebar a{
    color:{color:Sidebar Link};
}

#sidebar a:hover{
    color:{color:Sidebar Link Hover};
}

#sidebar .title{
    color:{color:Title};
    line-height:1;
    padding-bottom:1.2em;
    text-align:center;
    display:none;
}

#sidebar .title span{
    font-size:{text:Title Font Size}px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    text-transform:uppercase;
}

#sidebar .contents{
    background:{color:Sidebar Background};
    padding:20px;
    border:1px solid {color:Sidebar Border};
    border-top:0;
}

#sidebar ul{
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}

#sidebar .contents li a{
    color:{color:Navigation Link};
    background:{color:Navigation Link Background};
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

#sidebar .contents li a:hover{
    color:{color:Navigation Link Hover};
    background:{color:Navigation Link Background Hover};
}

#navigation{
    display:flex;
}

#navigation li{
    flex:1;
}

#navigation li a{
    display:block;
    border:1px solid {color:Navigation Link Border};
    margin:1px;
    line-height:0;
}

#navigation span{
    font-size:16px;
    line-height:28px;
}

.mif-mail{
    font-size:20px!important;
}

#description{
    max-height:12em;
    overflow:auto;
    margin:1.2em 0;
}

#links{
    display:flex;
    flex-wrap:wrap;
    text-align:center;
}

#links li{
    min-width:50%;
    flex-grow:1;
}

#links li a, #search{
    display:block;
    border:1px solid {color:Navigation Link Border};
    margin:1px;
    padding:0.25em 0.5em;
}

#search{
    position:relative;
    color:{color:Navigation Link};
    background:{color:Navigation Link Background};
}

#search input{
    background:transparent;
    border:0;
    font-size:1em;
}

#search input[type="text"]{
    height:1.5em;
    color:{color:Navigation Link};
    font-family:{block:ifMainGoogleFont}{text:Main Google Font}, {/block:ifMainGoogleFont}{select:Main Font};
    padding:0;
}

::-webkit-input-placeholder{
  color:{color:Navigation Link};
}

#search input[type="submit"]{
    color:{color:Navigation Link};
    font-family:metro;
    cursor:pointer;
    position:absolute;
    right:0;
    margin-top:0.2em;
    padding:0 0.5em;
}

#search input:focus{
    outline:none;
}

.pagination-wrapper{
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    text-transform:uppercase;
    text-align:center;
    margin:2px -2px 0;
    display:flex;
}

#sidebar .pagination-wrapper a{
    color:{color:Pagination Link};
    background:{color:Pagination Background};
    display:block;
    padding:0.25em 0.5em;
}

.pagination{
    display:flex;
    flex:2;
    {block:IndexPage}{block:ifInfiniteScroll}display:none;{/block:ifInfiniteScroll}{/block:IndexPage}
}

.pagination li{
    flex:1;
    margin:2px;
}

.previous a:before{
    content:"\e648";
    font-family:metro;
    margin-right:0.25em;
}

.next a:after{
    content:"\e649";
    font-family:metro;
    margin-left:0.25em;
}

#load-more{
    flex:2;
    margin:2px;
}

#load-more a:after{
    content:"\e64b";
    font-family:metro;
    margin-left:0.5em;
}

#top{
    flex:1;
    margin:2px;
}

#top a:before{
    content:"\e64a";
    font-family:metro;
    margin-right:0.5em;
}

.pagination-wrapper a:not(.active){
    color:rgba({RGBcolor:Pagination link}, 0.5)!important;
    cursor:text;
}

#container{
    padding-top:{text:Post Spacing}px;
    padding-left:{text:Post Spacing}px;
    margin:0 52px {text:Post Spacing}px 302px;
    position:relative;
    z-index:3;
}

.post-wrapper{
    margin-bottom:{text:Post Spacing}px;
    width:calc({select:Post Size}px + 10px);
    position:relative;
}

.poster-icon{
    position:absolute;
    top:0;
    right:-52px;
}

.poster-icon img{
    display:block;
    border:4px solid {color:Post Icons Background};
    margin-bottom:4px;
}

.post-wrapper .contents{
    width:{select:Post Size}px;
    padding:4px;
    background:{color:Post Background};
    border:1px solid {color:Post Border};
}

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

.read_more{
    display:block;
    text-align:center;
    border:1px solid {color:Post Inner Border};
    padding:0.5em;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    text-transform:uppercase;
}

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

.post{
    text-align:{select:Text Align};
}

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

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

.post ul li:before, .caption ul li:before{
    content:"▪";
    color:{color:Post Inner Border};
    margin-right:0.5em;
}

.post .title{
    border:1px solid {color:Post Inner Border};
    padding:1.2em;
    line-height:1;
    text-align:center;
}

.post .title span{
    font-size:{text:Post Title Font Size}px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    text-transform:uppercase;
}

.post .text-body{
    margin:1.2em;
}

.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;
}

.answer{
    margin-top:4px;
}

.ask-avatar{
    width:40px;
    height:40px;
    border:4px solid {color:Post Inner Border};
    margin-right:1em;
}

.ask-avatar img{
    display:block;
}

.ask-avatar, .ask-user{
    display:inline-block;
    vertical-align:middle;
    margin-bottom:4px;
}

.ask-user span{
    display:block;
}

.ask-name{
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

.answer p:first-of-type{
    margin-top:0;
}

.answer p:last-child{
    margin-bottom:0;
}

.ask-inner{
    border:1px solid {color:Post Inner Border};
    padding:1.2em;
}

.replies{
    margin:1.2em;
}

.replies:empty{
    display:none;
}

.chat .label{
    margin:0.25em 1.2em;
}

.chat .label span{
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    position:relative;
}

.chat .label span:after{
    content:"";
    position:absolute;
    right:0;
    width:0.25em;
    height:100%;
    background:{color:Post Background};
}

.chat .even{
    text-align:right;
}

.chat-item{
    padding:0.5em 1.2em;
    border:1px solid {color:Post Inner Border};
    margin:4px 0;
}

.chat-item.even:last-child{
    margin-bottom:0;
}

.quote-text{
    border:1px solid {color:Post Inner Border};
    padding:1.2em;
}

.quote-text p{
    font-size:1.5em;
    font-style:italic;
    margin:0;
}

.source{
    text-align:center;
    margin:1.2em;
}

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

.audio-player{
    width:32px;
    min-width:32px;
    height:27px;
    overflow:hidden;
}

.audio-caption{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:126px;
    padding:1em;
    box-sizing:border-box;
    border-left:1px solid {color:Post Inner Border};
    border-right:1px solid {color:Post Inner Border};
}

.album-art{
    min-width:120px;
    height:120px;
    border:3px solid {color:Post Inner Border};
}

.album-art img{
    width:120px;
    height:120px;
}

.song{
    font-size:{text:Post Title Font Size}px;
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

.artist{
    font-weight:bold;
}

.album{
    font-style:italic;
}

.caption{
    margin:1.2em;
}

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

.post:not(.quote) .tumblr_blog, .caption .tumblr_blog{
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    position:relative;
}

.post:not(.quote) .tumblr_blog:after, .caption .tumblr_blog:after{
    content:"";
    position:absolute;
    right:-0.25em;
    width:0.25em;
    height:100%;
    background:{color:Post Background};
}

.footer{
    clear:both;
    margin-top:4px;
}

.footer.index .item, .post-type{
    float:left;
    margin-right:4px;
    text-align:center;
}

.footer.index a{
    display:block;
    padding:0.25em 0.5em;
}

.footer.index .item a{
    color:{color:Post Info Link};
    background:{color:Post Info Link Background};
    border:1px solid {color:Post Info Link Border};
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    padding-left:2em;
    position:relative;
}

.footer.index .item a:hover{
    color:{color:Post Info Link Hover};
    background:{color:Post Info Link Background Hover};
}

.footer.index .item a:after{
    font-family:metro;
    position:absolute;
    top:0.25em;
    left:0.5em;
}

.date a:after{
    content:"\e953";
}

.note-count a:after{
    content:"\e9d9";
}

.show-tags a:after{
    content:"\e935";
}

.like-button-heart:after{
    content:"\e9da";
}

.reblog-btn a:after{
    content:"\ea2e";
}

.footer.index .post-type a{
    width:1em;
    color:{color:Post Icons};
    background:{color:Post Icons Background};
    border:1px solid transparent;
}

.post-type span{
    vertical-align:top;
    margin-top:0.25em;
}

.custom-like-button{
    position:relative;
}

.like_button iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    z-index:10;
}
 
.like_button:hover + .like-button-heart{
    color:{color:Post Info Link Hover}!important;
    background:{color:Post Info Link Background Hover}!important;
}

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

.like_button.liked + .like-button-heart:before{
    content:"Un";
}

.tags.index{
    padding:0.5em 1.2em;
    margin-top:4px;
    border:1px solid {color:Post Inner Border};
    {block:ifShowTagsOnClick}display:none;{/block:ifShowTagsOnClick}
}

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

.footer.entry{
    padding:4px;
    margin:4px 0;
    background:{color:Post Background};
    border:1px solid {color:Post Border};
}

.footer.entry:empty{
    display:none;
}

.footer.entry .item{
    margin:1em 1.2em;
}

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

.tags li{
    display:inline;
}

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

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

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

#note-count{
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    border:1px solid {color:Post Inner Border};
    text-align:center;
    padding:0.5em;
}

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

#notes li:not(.more_notes_link_container){
    margin:1.2em;
}

#notes blockquote{
    margin:1em 0 0.5em;
}

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

.more_notes_link_container{
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    border:1px solid {color:Post Inner Border};
    padding:0.5em;
}

#infscr-loading{
    text-align:center;
    font-size:20px;
    color:{color:Post Border};
    margin-bottom:{text:Post Spacing}px;
}

#infscr-loading img{
    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;
}

.fade {
    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;
    text-align:center;
}

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

.arrow-left{
    left:50%;
}

.arrow-right{
    right:50%;
}

.custom-tooltip{
    display:none;
    max-width:300px;
    font-size:1em;
    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.5);
    font-family:inherit;
    padding:0.25em 0.5em;
    z-index:9999;
    border:0;
    border-radius:0;
}

{CustomCSS}
</style>
</head>

<body class="{select:Tumblr Controls}">
<div id="canvas">
<div id="header"><div class="inner"><div class="title"><span>{Title}</span></div>
<div id="header-icon-wrapper"><div id="header-icon"></div></div>
</div>
<div id="header-image"><div id="header-image-inner"></div></div>
</div>
<div id="content">
<div id="sidebar">
<div class="inner">
<div class="contents">
<div class="title"><span>{Title}</span></div>
<ul id="navigation">
<li><a href="/" title="Home"><span class="mif-home"></span></a></li>
<li><a href="/archive" title="Archive"><span class="mif-folder-open"></span></a></li>
{block:AskEnabled}<li><a href="/ask" title="{AskLabel}"><span class="mif-mail"></span></a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit" title="{SubmitLabel}"><span class="mif-pencil"></span></a></li>{/block:SubmissionsEnabled}
<li><a href="https://myrtillenne.dreamwidth.org/" title="Theme"><span class="mif-cogs"></span></a></li>
</ul>
{block:Description}<div id="description">{Description}</div>{/block:Description}
<ul id="links">
{block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
{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}
</ul>
<div id="search"><form name="search" action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="Search"/><input type="submit" value="" title="Search"/>
</form></div>
</div>
<div class="pagination-wrapper">
<div id="top"><a href="#">Top</a></div>
{block:Pagination}
<ul class="pagination">
<li class="previous"><a{block:PreviousPage} class="active" href="{PreviousPage}"{/block:PreviousPage}>Previous</a></li>
<li class="next"><a{block:NextPage} href="{NextPage}" class="active"{/block:NextPage}>Next</a></li>
</ul>
{block:ifInfiniteScroll}{block:ifManualLoad}<div id="load-more"><a href="#" class="active">Load more posts</a></div>{/block:ifManualLoad}{/block:ifInfiniteScroll}
{/block:Pagination}
{block:PermalinkPagination}
<ul class="pagination">
<li class="previous"><a{block:NextPost} href="{NextPost}" class="active"{/block:NextPost}>Previous</a></li>
<li class="next"><a{block:PreviousPost} href="{PreviousPost}" class="active"{/block:PreviousPost}>Next</a></li>
</ul>
{/block:PermalinkPagination}
</div>
</div>
</div>
<div id="container">
<div id="posts">
{block:Posts}
<div class="post-wrapper" id="{PostID}">
<div class="poster-icon">
{block:IndexPage}{block:NotReblog}<div class="item"><a href="/" title="Posted by {Name}"><img src="{PortraitURL-40}" /></a></div>{/block:NotReblog}
{block:RebloggedFrom}<div class="item"><a href="{ReblogParentURL}" title="Reblogged from {ReblogParentName}"><img src="{ReblogParentPortraitURL-40}" /></a></div>
<div class="item"><a href="{ReblogRootURL}" title="Originally posted by {ReblogRootName}"><img src="{ReblogRootPortraitURL-40}" /></a></div>{/block:RebloggedFrom}{/block:IndexPage}
{block:PermalinkPage}<div class="item"><a href="/" title="{Name}"><img src="{PortraitURL-40}" /></a></div>{/block:PermalinkPage}
</div>
<div class="contents">
{block:Text}
<div class="post text">
{block:Title}
<div class="title"><span><a href="{Permalink}">{Title}</a></span></div>
{/block:Title}<div class="text-body">{Body}</div>
</div>
{/block:Text}
{block:Photo}
<div class="post photo">
{LinkOpenTag}<img src="{PhotoURL-HighRes}" 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 class="clearfix"></div>
</div>
{/block:Photoset}
{block:Quote}
<div class="post quote"><div class="quote-text"><p>"{Quote}"</p></div>{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="post link">
<div class="title"><span><a href="{URL}" {Target}>{Name}</a></span></div>
{block:Description}<div class="text-body">{Description}</div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post chat">
{block:Title}
<div class="title"><span><a href="{Permalink}">{Title}</a></span></div>
{/block:Title}
{block:Lines}{block:Label}<div class="label {Alt}"><span>{Label}</span></div>{/block:Label}
<div class="chat-item {Alt} user_{UserNumber}">{Line}
</div>
{/block:Lines}
</div>
{/block:Chat}
{block:Video}
<div class="post video">{Video-700}</div>
{/block:Video}
{block:Audio}
<div class="post audio"><div class="audio-wrapper">{block:AudioPlayer}<div class="audio-player"><div class="player">{AudioPlayer}</div></div>{/block:AudioPlayer}<div class="audio-caption">{block:TrackName}<div class="song">{TrackName}</div>{/block:TrackName}{block:Artist}<div class="artist">{Artist}</div>{/block:Artist}{block:Album}<div class="album">{Album}</div>{/block:Album}</div>{block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" /></div>{/block:AlbumArt}
</div></div>
{/block:Audio}
{block:Answer}
<div class="post ask">
<div class="question"><div class="ask-avatar"><img src="{AskerPortraitURL-40}" /></div><div class="ask-user"><span class="ask-name">{Asker}</span>asked</div><div class="ask-inner">{Question}</div><div class="clearfix"></div></div>
{block:Answerer}
<div class="answer"><div class="ask-avatar"><img src="{AnswererPortraitURL-40}" /></div><div class="ask-user"><span class="ask-name">{Answerer}</span>answered</div><div class="ask-inner">{Answer}</div><div class="clearfix"></div></div>
{/block:Answerer}
<div class="replies">{Replies}</div>
</div>
{/block:Answer}

{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}

</div>
{block:IndexPage}
<div class="footer index">
{block:Photo}<div class="post-type"><a href="{Permalink}" title="View post"><span class="mif-image"></span></a></div>{/block:Photo}
{block:Photoset}<div class="post-type"><a href="{Permalink}" title="View post"><span class="mif-images"></span></a></div>{/block:Photoset}
{block:Video}<div class="post-type"><a href="{Permalink}" title="View post"><span class="mif-film"></span></a></div>{/block:Video}
{block:Audio}<div class="post-type"><a href="{Permalink}" title="View post"><span class="mif-music"></span></a></div>{/block:Audio}
{block:Text}<div class="post-type"><a href="{Permalink}" title="View post"><span class="mif-file-text"></span></a></div>{/block:Text}
{block:Link}<div class="post-type"><a href="{Permalink}" title="View post"><span class="mif-link"></span></a></div>{/block:Link}
{block:Chat}<div class="post-type"><a href="{Permalink}" title="View post"><span class="mif-bubbles"></span></a></div>{/block:Chat}
{block:Quote}<div class="post-type"><a href="{Permalink}" title="View post"><span class="mif-bubble"></span></a></div>{/block:Quote}
{block:Answer}<div class="post-type"><a href="{Permalink}" title="View post"><span class="mif-mail-read"></span></a></div>{/block:Answer}
{block:Panorama}<div class="post-type"><a href="{Permalink}" title="View post"><span class="mif-camera"></span></a></div>{/block:Panorama}
{block:Date}<div class="item date"><a href="{Permalink}" title="{TimeAgo}">{DayOfMonth} {Month} {Year}</a></div>{/block:Date}
{block:NoteCount}<div class="item note-count"><a href="{Permalink}#notes" title="View notes">{NoteCountWithLabel}</a></div>{/block:NoteCount}
{block:ifShowTagsOnClick}{block:HasTags}<div class="item show-tags"><a href="#" data-id="tags" title="View tags">Tags</a></div>{/block:HasTags}{/block:ifShowTagsOnClick}
<div class="item custom-like-button">{LikeButton}<a class="like-button-heart">Like</a></div>
<div class="item reblog-btn"><a href="{ReblogURL}">Reblog</a></div>
<div class="clearfix"></div>
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div class="footer entry">
{block:HasTags}<div class="item tags">Tagged with <ul>{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}</ul></div>{/block:HasTags}
{block:Date}<div class="item">Posted on {DayOfMonth} {Month} {Year} at {24Hour}:{Minutes} ({TimeAgo})</div>{/block:Date}
{block:RebloggedFrom}<div class="item">Reblogged from <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>, originally posted by <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a></div>{/block:RebloggedFrom}
{block:NoteCount}<div id="note-count">{NoteCountWithLabel}</div>{/block:NoteCount}
{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
</div>
{/block:PermalinkPage}
</div>
{/block:Posts}
</div>
</div>
</div>
</div>

$(function(){
    
    var $window = $(window);
    var sidebar = $('#sidebar');
    var sidebarTitle = sidebar.find('.title');
    var sidebarContents = sidebar.find('.contents');
    var stickySidebarTop = sidebar.offset().top - 50;
    
    $window.scroll(function(){
        if ($(this).scrollTop() >= stickySidebarTop) {
            sidebar.css({'position': 'fixed', 'top': 50});
            sidebarContents.css({'border-top' : '1px solid {color:Sidebar Border}'});
            sidebarTitle.slideDown();
        } else {
            sidebar.css({'position': 'absolute', 'top': 0});
            sidebarContents.css({'border-top' : 0});
            sidebarTitle.slideUp();
        }
    });
    
    var $top = $('#top a');
    
    $window.on('scroll', function(){
        if ($(this).scrollTop() > $(this).innerHeight()) {
            $top.addClass('active');
        } else {
            $top.removeClass('active');
        }
    });
    
    $top.on('click', function(e){
        e.preventDefault();
        if ($(this).hasClass('active')){
            $('html, body').animate({scrollTop : 0},600);
        }
    });
    
    $('.photo-slideshow').pxuPhotoset({
        lightbox: false,
        rounded: false,
        gutter: '0px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
    });
   
    var postSize;
    var newSize;
    var width;
    var height;
    var ratio;
    var newHeight;
    
    function resizeVideo(){
        if ({select:Post Size} < 700){
            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 class="fade"></div><img id="mainImage" /><div class="arrow-left"><span class="mif-arrow-left"></span></div><div class="arrow-right"><span class="mif-arrow-right"></span></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 + 40;
        arrowLeft.css({
            'margin-left' : -arrowMargin
        });
        arrowRight.css({
            'margin-right' : -arrowMargin
        });
    }
    
    $('body').on('click', '#lightbox .fade', function() {
        $('#lightbox').fadeOut(function() {
            $('#lightbox').remove();
        });
        imagesURLs = [];
    });
    
    $('[title], #container, #notes').tooltip({
        track: true,
		show: {delay:100, duration: 500},
		tooltipClass: "custom-tooltip",
		position: { my: "left+15 top+15" }
    });
    
    {block:ifShowTagsOnClick}
    $('.show-tags a').tooltip({
        content: 'View tags'
    });
    
    $('body').on('click', '.show-tags a', function(e){
        e.preventDefault();
        $(this).closest('.post-wrapper').find('.tags').slideToggle();
        var crtContent = $(this).tooltip( "option", "content");
        var newContent = (crtContent === 'View tags') ? 'Hide tags' : 'View tags';
        $(this).tooltip( "option", "content", newContent);
    });
    {/block:ifShowTagsOnClick}
    
    $('iframe.tumblr_audio_player').load(function(){
        $(this).contents().find('head').append($('<style "type=text/css">.audio-player{background:{color:Post Background}!important;color:{color:Text}!important;}</style>'));
    });
    
    var container = $('#posts');
    
    {block:IndexPage}
    {block:ifInfiniteScroll}
    container.infinitescroll({
        navSelector: '.pagination',
        nextSelector: '.pagination .next a',
        itemSelector: '.post-wrapper',
        loading: {
            finishedMsg: '<em></em>',
            img: '',
            msgText: '<span class="mif-spinner3 mif-ani-spin"></span>'
        }{block:ifManualLoad},
        errorCallback: function(){ $('#load-more a').removeClass('active'); }{/block:ifManualLoad}
    }, function(newElements){
        var newElems = $(newElements);
        var newPhotoset = newElems.find('.photo-slideshow');
        newPhotoset.each(function() {
            $(this).pxuPhotoset({
                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:Post Background}!important;color:{color:Text}!important;}</style>'));
        });
        {block:ifShowTagsOnClick}
        newElems.find('.show-tags a').tooltip({
            content: 'View tags',
            track: true,
    		show: {delay:100, duration: 500},
    		tooltipClass: "custom-tooltip",
    		position: { my: "left+10 top+20" }
        });
        {/block:ifShowTagsOnClick}
        var newElemsIDs = newElems.map(function(){ 
            return this.id; 
        }).get();
        Tumblr.LikeButton.get_status_by_post_ids(newElemsIDs);
    });
    {block:ifManualLoad}
    $(window).off('.infscr');
    $('#load-more a.active').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 Metro UI CSS
custom tooltips by JQuery Foundation
audio player tutorial by Roxie
infinite scroll by Paul Irish

Crossroad ver. 2

Post a comment in response: