myrtillenne

FEATURES

container theme
post width, sidebar width, font size, google fonts, post spacing, photoset spacing of your choice
sidebar image (optional)
page links and 8 extra links
like and reblog links on index page
show tags on click (optional)
pagination or infinite scroll with manual load
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://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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metro/3.0.17/css/metro-icons.css">
{block:Description}
<meta name="description" content="{MetaDescription}">
{/block:Description}
<meta name="image:Background" content="https://secure.static.tumblr.com/9bcd993977d2928e3d1cecfc3a2e36dc/vywm3oc/Fyiomxd0d/tumblr_static_b0ad4hd6xcwk48g4wogwkw840.jpg">
<meta name="image:Sidebar Image" content="https://secure.static.tumblr.com/95418612de6ba1923501cf4a790b6f07/vywm3oc/S1womz358/tumblr_static_6zyqd2f4wx448o40g0848cock.png">
<meta name="color:Background" content="#fce8e0">
<meta name="color:Text" content="#9b7870">
<meta name="color:Link" content="#dd5b8c">
<meta name="color:Link Hover" content="#e8798c">
<meta name="color:Navigation Background" content="#e8798c">
<meta name="color:Navigation Link" content="#fce8e0">
<meta name="color:Navigation Link Hover" content="#f6f6f6">
<meta name="color:Searchbar Text" content="#f6f6f6">
<meta name="color:Pagination Background" content="#dd5b8c">
<meta name="color:Pagination Link" content="#fce8e0">
<meta name="color:Pagination Link Hover" content="#f6f6f6">
<meta name="color:Content Background" content="#ffffff">
<meta name="color:Post Background" content="#ffffff">
<meta name="color:Post Border" content="#fc89b3">
<meta name="color:Post Border Gradient" content="#f9b2a0">
<meta name="color:Post Inner Border" content="#f7c6c1">
<meta name="color:Post Icons" content="#f6f6f6">
<meta name="color:Post Icons Hover" content="#e8798c">
<meta name="color:Photoset Background" content="#ffffff">
<meta name="color:Photoset Controls" content="#9b7870">
<meta name="color:Tooltip Background" content="#ffffff">
<meta name="color:Tooltip Text" content="#9b7870">
<meta name="color:Scrollbar" content="#f7c6c1">
<meta name="color:Scrollbar Track" content="#f6f6f6">
<meta name="text:Post Width" content="450">
<meta name="text:Sidebar Width" content="320">
<meta name="text:Sidebar Image Width" content="">
<meta name="text:Main Google Font" content="">
<meta name="text:Secondary Google Font" content="Cookie">
<meta name="text:Body Font Size" content="14">
<meta name="text:Title Font Size" content="26">
<meta name="text:Links Font Size" content="22">
<meta name="text:Post Title Font Size" content="26">
<meta name="text:Post Spacing" content="40">
<meta name="text:Photoset Spacing" content="4">
<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:Background Style" content="cover" title="Full Screen Image">
<meta name="select:Background Style" content="auto" title="Pattern">
<meta name="select:Sidebar Position" content="left" title="left">
<meta name="select:Sidebar Position" content="right" title="right">
<meta name="select:Content Opacity" content="0.5" title="50%">
<meta name="select:Content Opacity" content="0" title="0%">
<meta name="select:Content Opacity" content="0.1" title="10%">
<meta name="select:Content Opacity" content="0.2" title="20%">
<meta name="select:Content Opacity" content="0.3" title="30%">
<meta name="select:Content Opacity" content="0.4" title="40%">
<meta name="select:Content Opacity" content="0.6" title="60%">
<meta name="select:Content Opacity" content="0.7" title="70%">
<meta name="select:Content Opacity" content="0.8" title="80%">
<meta name="select:Content Opacity" content="0.9" title="90%">
<meta name="select:Content Opacity" content="1.0" title="100%">
<meta name="select:Main Font" content="cambria, serif" title="Cambria">
<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:Title Style" content="font-weight:normal;" title="normal">
<meta name="select:Title Style" content="font-style:italic;" title="italic">
<meta name="select:Title Style" content="font-weight:bold;" title="bold">
<meta name="select:Title Style" content="font-weight:bold;font-style:italic;" title="bold italic">
<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:Show Tags On Click" content="0">
<meta name="if:Infinite Scroll" 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};
    color:{color:Text};
    background-color:{color:Background};
    background-image:url('{image:Background}');
    background-size:{select:Background Style};
    background-position:center center;
    background-attachment:fixed;
    margin:0;
}

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

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

::-webkit-scrollbar-thumb {
    background: {color:Scrollbar};
}

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

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

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

a img{
     border:0;
}

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

blockquote:last-child{
    margin-bottom:0;
}

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

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

pre{
    white-space:pre-wrap;
}

#canvas{
    width:84vw;
    min-width:860px;
    height:84%;
    padding:54px;
    box-sizing:border-box;
    position:fixed;
    top:8%;
    left:0;
    right:0;
    margin:auto;
    display:flex;
}

@media(min-width:1000px){
    #canvas{
        left:8%;
        right:8%;
    }
}

#canvas > .border-left{
    position:absolute;
    left:0;
    top:34px;
    width:34px;
    height:calc(100% - 68px);
    background-image: linear-gradient(to bottom, {color:Navigation Background}, {color:Pagination Background});
}

#canvas > .border-right{
    position:absolute;
    right:0;
    top:34px;
    width:34px;
    height:calc(100% - 68px);
    background-image: linear-gradient(to bottom, {color:Navigation Background}, {color:Pagination Background});
}

#header{
    width:100%;
    height:34px;
    position:absolute;
    top:0;
    left:0;
}

#navigation{
    width:100%;
    height:34px;
}

#navigation ul{
    margin:0;
    padding:0;
    display:flex;
}

#navigation li{
    list-style:none;
    width:34px;
    height:34px;
    background:{color:Navigation Background};
    margin-right:6px;
    position:relative;
}

#navigation li a{
    display:block;
    text-align:center;
    color:{color:Navigation Link};
    font-size:16px;
    width:34px;
    height:34px;
    line-height:0;
}

#navigation li a:hover, #search input#search-btn:hover{
    color:{color:Navigation Link Hover};
}

#navigation li a span{
    line-height:34px;
}

.block{
    flex:1;
}

.block2{
    margin-right:0!important;
}

.mif-mail, .mif-paper-plane{
    font-size:20px;
}

#search input[type="text"]{
    width:20px;
    height:34px;
    margin-left:5px;
    vertical-align:top;
    border:0;
    color:{color:Searchbar Text};
    background:transparent;
}

#search input:focus{
    outline:none;
}

#search input#search-btn{
    border:0;
    font-family:metro;
    font-size:16px;
    vertical-align:top;
    position:absolute;
    top:0;
    right:0;
    width:34px;
    height:34px;
    line-height:0;
    color:{color:Navigation Link};
    background:{color:Navigation Background};
    cursor:pointer;
    transition:color 0.6s;
}

#sidebar{
    width:{text:Sidebar Width}px;
    overflow:auto;
    background:{color:Post Background};
    display:flex;
    flex-direction:column;
    border:10px solid {color:Post Background};
}

.left-sidebar #sidebar{
    border-right:0;
}

.right-sidebar #sidebar{
    order:2;
    border-left:0;
}

#sidebar .inner{
    padding:1.5em;
    margin:auto;
}

#icon{
    margin-bottom:1.5em;
}

#icon img{
    border:5px solid {color:Post Inner Border};
    padding:5px;
    background:{color:Post Background};
    {block:ifSidebarImageWidth}max-width:{text:Sidebar Image Width}px;
    height:auto;{/block:ifSidebarImageWidth}
    display:block;
    margin:0 auto;
}

#sidebar .title{
    text-align:center;
    font-size:{text:Title Font Size}px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    line-height:1;
    {select:Title Style}
}

#sidebar .description{
    margin-top:1.5em;
}

#sidebar .description:before{
    content:"\f063";
    float:left;
    font-family:metro;
    width:1.9em;
    height:1.9em;
    line-height:1.9em;
    font-size:1.5em;
    text-align:center;
    color:{color:Post Background};
    background:{color:Post Inner Border};
    margin-right:0.5em;
}

#links{
    margin-top:1.5em;
    text-align:center;
}

#links a{
    margin:0 0.25em;
    display:inline-block;
    font-size:{text:Links Font Size}px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    {select:Title Style}
    line-height:1.2;
}

#content{
    flex:1;
    background:rgba({RGBcolor:Content Background},{select:Content Opacity});
    overflow:auto;
    border:10px solid {color:Post Background};
}

#container{
    padding:20px;
}

.posts{
    position:relative;
    margin:{text:Post Spacing}px auto;
    max-width:calc({text:Post Width}px + 10px + 3em);
    padding:0 10px;
    border-top:10px solid {color:Post Border};
    border-bottom:30px solid transparent;
    {block:PermalinkPage}border-bottom:10px solid {color:Post Border Gradient};{/block:PermalinkPage}
}

.posts .border-left{
    position:absolute;
    left:0;
    top:0;
    width:10px;
    height:100%;
    background-image: linear-gradient(to bottom, {color:Post Border}, {color:Post Border Gradient});
}

.posts .border-right{
    position:absolute;
    right:0;
    top:0;
    width:10px;
    height:100%;
    background-image: linear-gradient(to bottom, {color:Post Border}, {color:Post Border Gradient});
}

.posts .contents{
    background:{color:Post Background};
    max-width:{text:Post Width}px;
    padding:1.5em;
    margin:5px;
}

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

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

.posts .contents ol{
    padding-left:1em;
    list-style-position:inside;
}

.posts .contents 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 img, .post iframe{
    display:block;
}

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

.post .title{
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    line-height:1.2;
    margin-bottom:1em;
    text-align:center;
    {select:Title Style}
}

.post .title a{
    font-size:{text:Post Title Font Size}px;
}

.post.video{
    max-width:700px;
    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;
}

.read_more{
    display:block;
    border-top:1px dashed {color:Post Inner Border};
    padding-top:0.75em;
    text-align:center;
}

.quote-text{
    font-style:italic;
    font-size:1.5em;
    line-height:1.2;
}

.quote .source{
    margin-top:1em;
    padding-top:1em;
    border-top:1px dashed {color:Post Inner Border};
    text-align:center;
}

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

.post.link .description{
    margin-top:1em;
    padding-top:1em;
    border-top:1px dashed {color:Post Inner Border};
}

.answer, .replies{
    margin-top:1em;
    padding-top:1em;
    border-top:1px dashed {color:Post Inner Border};
    clear:both;
}

.ask-avatar{
    float:left;
    width:4.3em;
    height:4.3em;
    color:{color:Post Background};
    border:3px solid {color:Post Inner Border};
    padding:3px;
    box-sizing:border-box;
    margin-right:0.75em;
}

.ask-avatar img{
    width:100%;
    height:100%;
    display:block;
}

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

.answer p{
    margin-bottom:0;
}

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

.replies:empty{
    display:none;
}

.audio-wrapper{
    position:relative;
    width:100px;
    height:100px;
    border:3px solid {color:Post Inner Border};
    padding:5px;
    margin-right:1em;
}

.audio-player{
    position:absolute;
    top:5px;
    left:5px;
}

.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:5px;
    left:5px;
}

.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-wrapper, .audio-caption{
    display:inline-block;
    vertical-align:middle;
}

.audio-caption div{
    border-bottom:1px dashed {color:Post Inner Border};
    padding:0.25em 1em;
}

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

.chat .chat-item:last-child{
    margin:0;
    padding:0;
    border:0;
}

.chat span{
    font-weight:bold;
}

.caption{
    margin-top:1.5em;
}

.tags.index{
    margin-top:1.5em;
    padding-top:0.75em;
    line-height:1.2;
    color:{color:Post Inner Border};
    border-top:1px dashed {color:Post Inner Border};
    text-align:center;
    clear:both;
    {block:ifShowTagsOnClick}display:none;{/block:ifShowTagsOnClick}
}

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

.footer{
    clear:both;
}

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

.footer.index{
    position:absolute;
    width:100%;
    height:30px;
    left:0;
    bottom:-30px;
}

.footer.index ul{
    display:flex;
}

.footer.index li{
    width:30px;
    height:30px;
    margin-right:5px;
    text-align:center;
    background:{color:Post Border Gradient};
    position:relative;
}

.footer.index li a{
    display:block;
    font-size:14px;
    width:30px;
    height:30px;
    line-height:0;
    color:{color:Post Icons};
}

.footer.index li a:hover{
    color:{color:Post Icons Hover};
}

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

.mif-star-full, .mif-image, .mif-film, .mif-camera{
    font-size:16px;
}

.mif-alarm, .mif-drafts{
    font-size:18px;
}

.mif-quote{
    font-size:22px;
}

.mif-cross{
    font-size:10px;
}

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

.like_button{
    position:absolute;
    top:0;
    left:0;
    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:0;
    z-index:1;
}

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

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

{block:ifShowTagsOnClick}
.footer.index .show-tags a{
    display:none;
}

.footer.index .show-tags a.active{
    display:block;
}
{/block:ifShowTagsOnClick}

.footer.entry{
    background:{color:Post Background};
    margin:-5px 5px 5px;
    padding:0 1.5em 1.5em;
}

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

.footer.entry .li{
    padding-top:0.5em;
}

.footer.entry .li:first-child{
    padding-top:1.5em;
    border-top:1px dashed {color:Post Inner Border};
}

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

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

#notes li{
    margin-top:0.75em;
    border-top:1px dashed {color:Post Inner Border};
    padding-top:0.75em;
}

#notes blockquote{
    margin:1em 0;
}

.avatar_frame img{
    display:inline-block;
    vertical-align:middle;
    margin-right:0.5em;
}

#footer{
    position:absolute;
    width:100%;
    bottom:0;
    left:0;
    height:34px;
}

#pagination{
    display:flex;
}

#pagination ul{
    list-style:none;
    margin:0;
    padding:0;
    {block:IndexPage}{block:ifInfiniteScroll}display:none;{/block:ifInfiniteScroll}{/block:IndexPage}
}

#pagination .li, #pagination li{
    width:34px;
    height:34px;
    background:{color:Pagination Background};
    margin-right:6px;
}

#pagination li{
    float:left;
}

#pagination a{
    display:block;
    text-align:center;
    width:34px;
    height:34px;
    color:{color:Pagination Link};
    font-size:16px;
    line-height:0;
}

#pagination a:hover{
    color:{color:Pagination Link Hover};
}

#pagination a:not(.active){
    opacity:0.5;
    cursor:default;
}

#pagination a span{
    line-height:34px;
}

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

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

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

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

#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;
    text-align:center;
}

.arrow-left{
    left:50%;
}

.arrow-right{
    right:50%;
}

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

.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:Sidebar Position}-sidebar">
<div id="canvas">
<div class="border-left"></div>
<div class="border-right"></div>
<div id="header">
<div id="navigation">
<ul>
<li class="block block1"></li>
<li><a href="/" title="Index"><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-paper-plane"></span></a></li>{/block:SubmissionsEnabled}
<li id="search"><form name="search" action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/><input id="search-btn" type="submit" value="" title="Search"/>
</form></li>
<li id="credit"><a href="http://myrtillenne.dreamwidth.org" title="Theme"><span class="mif-paint"></span></a></li>
<li class="block block2"></li>
</ul>
</div>
</div>
<div id="sidebar">
<div class="inner">
{block:ifSidebarImage}<div id="icon"><img src="{image:Sidebar Image}"></div>{/block:ifSidebarImage}
<div class="title">{Title}</div>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
<div id="links">
{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
{block:ifLink1Title}<a href="{text:Link 1 URL}">{text:Link 1 Title}</a>{/block:ifLink1Title}
{block:ifLink2Title}<a href="{text:Link 2 URL}">{text:Link 2 Title}</a>{/block:ifLink2Title}
{block:ifLink3Title}<a href="{text:Link 3 URL}">{text:Link 3 Title}</a>{/block:ifLink3Title}
{block:ifLink4Title}<a href="{text:Link 4 URL}">{text:Link 4 Title}</a>{/block:ifLink4Title}
{block:ifLink5Title}<a href="{text:Link 5 URL}">{text:Link 5 Title}</a>{/block:ifLink5Title}
{block:ifLink6Title}<a href="{text:Link 6 URL}">{text:Link 6 Title}</a>{/block:ifLink6Title}
{block:ifLink7Title}<a href="{text:Link 7 URL}">{text:Link 7 Title}</a>{/block:ifLink7Title}
{block:ifLink8Title}<a href="{text:Link 8 URL}">{text:Link 8 Title}</a>{/block:ifLink8Title}
</div>
</div>
</div>
<div id="content">
<div id="container">
{block:Posts}
<div class="posts" id="{PostID}">
<div class="border-left"></div>
<div class="border-right"></div>
<div class="contents">
{block:Text}
<div class="post text">
{block:Title}
<div class="title"><a href="{Permalink}">{Title}</a></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>
{/block:Photoset}
{block:Quote}
<div class="post quote"><div class="quote-text">{Quote}</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}>{Name}</a></div>
{block:Description}<div class="description">{Description}
</div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post chat">
{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
{block:Lines}
<div class="chat-item {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-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}{block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" /></div>{/block:AlbumArt}</div>
<div class="audio-caption">
{block:TrackName}<div class="song">Track: {TrackName}</div>{/block:TrackName}
{block:Artist}<div class="artist">Artist: {Artist}</div>{/block:Artist}
{block:Album}<div class="album">Album: {Album}</div>{/block:Album}
</div>
</div>
{/block:Audio}
{block:Answer}
<div class="post ask">
<div class="question"><div class="ask-avatar"><img src="{AskerPortraitURL-128}" /></div><span class="ask-name">{Asker} asked: </span>{Question}</div>
{block:Answerer}
<div class="answer"><div class="ask-avatar"><img src="{AnswererPortraitURL-128}" /></div><span class="ask-name">{Answerer} answered: </span>{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}
</div>

{block:IndexPage}<div class="footer index">
<ul>
<li class="block block1"></li>
{block:Photo}<li><a href="{Permalink}" title="View post"><span class="mif-image"></span></a></li>{/block:Photo}
{block:Photoset}<li><a href="{Permalink}" title="View post"><span class="mif-images"></span></a></li>{/block:Photoset}
{block:Video}<li><a href="{Permalink}" title="View post"><span class="mif-film"></span></a></li>{/block:Video}
{block:Audio}<li><a href="{Permalink}" title="View post"><span class="mif-music"></span></a></li>{/block:Audio}
{block:Text}<li><a href="{Permalink}" title="View post"><span class="mif-pencil"></span></a></li>{/block:Text}
{block:Link}<li><a href="{Permalink}" title="View post"><span class="mif-link"></span></a></li>{/block:Link}
{block:Chat}<li><a href="{Permalink}" title="View post"><span class="mif-bubbles"></span></a></li>{/block:Chat}
{block:Quote}<li><a href="{Permalink}" title="View post"><span class="mif-quote"></span></a></li>{/block:Quote}
{block:Answer}<li><a href="{Permalink}" title="View post"><span class="mif-drafts"></span></a></li>{/block:Answer}
{block:Panorama}<li><a href="{Permalink}" title="View post"><span class="mif-camera"></span></a></li>{/block:Panorama}
<li><a href="{Permalink}" title="{DayOfMonth} {Month} {Year}"><span class="mif-alarm"></span></a></li>
{block:NoteCount}<li><a href="{Permalink}#notes" title="{NoteCountWithLabel}"><span class="mif-star-full"></span></a></li>{/block:NoteCount}
{block:ifShowTagsOnClick}{block:HasTags}<li class="show-tags"><a href="#" class="show active" title="View tags"><span class="mif-tag"></span></a><a href="#" class="hide" title="Hide tags"><span class="mif-cross"></span></a></li>{/block:HasTags}{/block:ifShowTagsOnClick}
{block:RebloggedFrom}<li><a href="{ReblogParentURL}" title="Reblogged from {ReblogParentName}"><img src="{ReblogParentPortraitURL-40}" /></a></li>
<li><a href="{ReblogRootURL}" title="Originally by {ReblogRootName}"><img src="{ReblogRootPortraitURL-40}" /></a></li>{/block:RebloggedFrom}
<li class="custom-like-button" title="Like">{LikeButton}<a class="like-button-heart"><span class="mif-heart"></span></a></li>
<li><a href="{ReblogURL}" title="Reblog"><span class="mif-loop2"></span></a></li>
<li class="block block2"></li>
</ul>
</div>{/block:IndexPage}
{block:PermalinkPage}
<div class="footer entry">
{block:HasTags}<div class="li tags">Tagged with <ul>{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}</ul></div>{/block:HasTags}
{block:Date}<div class="li date">Posted on {DayOfMonth} {Month} {Year} at {24Hour}:{Minutes} ({TimeAgo})</div>{/block:Date}
{block:RebloggedFrom}<div class="li post-source">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 class="li note-count">Has {NoteCountWithLabel}</div>{/block:NoteCount}
{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
</div>
{/block:PermalinkPage}
</div>
{/block:Posts}
</div>
</div>
<div id="footer">
<div id="pagination">
<div class="li block block1"></div>
{block:Pagination}
<ul>
<li class="previous"><a{block:PreviousPage} href="{PreviousPage}" class="active" title="Previous page"{/block:PreviousPage}><span class="mif-arrow-left"></span>
</a></li>
<li class="next"><a{block:NextPage} href="{NextPage}" class="active" title="Next page"{/block:NextPage}><span class="mif-arrow-right"></span>
</a></li>
</ul>
{block:ifInfiniteScroll}<div class="li load-more"><a href="#" class="active" title="Load more posts"><span class="mif-arrow-down"></span></a></div>{/block:ifInfiniteScroll}
{/block:Pagination}
{block:PermalinkPagination}
<ul>
<li class="next"><a{block:NextPost} href="{NextPost}" class="active" title="Previous post"{/block:NextPost}><span class="mif-arrow-left"></span></a></li>
<li class="previous"><a{block:PreviousPost} href="{PreviousPost}" class="active" title="Next post"{/block:PreviousPost}><span class="mif-arrow-right"></span></a></li>
</ul>
{/block:PermalinkPagination}
<div class="li top"><a href="#"><span class="mif-arrow-up"></span></a></div>
<div class="li block block2"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://static.tumblr.com/vywm3oc/QT1og4esa/pxuphotoset.js"></script>
{block:ifInfiniteScroll}<script src="https://static.tumblr.com/vywm3oc/toFo5s9sz/jquery.infinitescroll.min.js"></script>{/block:ifInfiniteScroll}
<script>

$(function(){
    
    $('.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;

RESOURCES