myrtillenne

FEATURES

400 - 700px wide posts
4 extra navigation links with custom icons (choose from here)
page links and/or 8 links in popup
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:Background" content="">
<meta name="image:Sidebar Image" content="https://static.tumblr.com/10d56bbeadbb59e833c19303588ac0c7/edqql3l/Qh3os2lss/tumblr_static_65lzhsa2pgg0cc44800s844w.jpg">
<meta name="color:Background" content="#f4f1e2">
<meta name="color:Title" content="#565041">
<meta name="color:Title Shadow 1" content="#fff">
<meta name="color:Title Shadow 2" content="#f4cd79">
<meta name="color:Sidebar Background" content="#fff">
<meta name="color:Sidebar Text" content="#544956">
<meta name="color:Sidebar Link" content="#9956b6">
<meta name="color:Sidebar Link Hover" content="#DC9E1F">
<meta name="color:Sidebar Link Border" content="#ede5f3">
<meta name="color:Sidebar Borders" content="#b4ac9a">
<meta name="color:Sidebar Border Effect" content="#c030fe">
<meta name="color:Description Background" content="#fffef8">
<meta name="color:Description Border" content="#f2e8d0">
<meta name="color:Navigation Link" content="#fffef8">
<meta name="color:Navigation Link Hover" content="#fff">
<meta name="color:Navigation Link Background" content="#ceafdc">
<meta name="color:Navigation Link Background Hover" content="#f4cd79">
<meta name="color:Post Background" content="#fff">
<meta name="color:Post Text" content="#565041">
<meta name="color:Post Link" content="#DC9E1F">
<meta name="color:Post Link Hover" content="#9956b6">
<meta name="color:Post Title" content="#565041">
<meta name="color:Post Title Shadow 1" content="#fff">
<meta name="color:Post Title Shadow 2" content="#f4cd79">
<meta name="color:Post Borders" content="#b4ac9a">
<meta name="color:Post Border Effect" content="#c030fe">
<meta name="color:Post Background Alt" content="#fffef8">
<meta name="color:Post Border Alt" content="#f2e8d0">
<meta name="color:Post Text Alt" content="#544956">
<meta name="color:Post Link Alt" content="#9956b6">
<meta name="color:Post Link Hover Alt" content="#DC9E1F">
<meta name="color:Blockquote Border" content="#ede5f3">
<meta name="color:Post Icons" content="#fffef8">
<meta name="color:Post Icons Hover" content="#fff">
<meta name="color:Post Icons Background" content="#ceafdc">
<meta name="color:Post Icons Background Hover" content="#f4cd79">
<meta name="color:Photoset Background" content="#fff">
<meta name="color:Photoset Controls" content="#565041">
<meta name="color:Tooltip Background" content="#fff">
<meta name="color:Tooltip Text" content="#565041">
<meta name="color:Scrollbar" content="#ceafdc">
<meta name="color:Scrollbar Track" content="#fff">
<meta name="color:Description Scrollbar" content="#ede5f3">
<meta name="color:Description Scrollbar Track" content="#fffef8">
<meta name="text:Main Google Font" content="Lora">
<meta name="text:Secondary Google Font" content="Great Vibes">
<meta name="text:Subtitle" content="">
<meta name="text:Sidebar Image Width" content="280">
<meta name="text:Sidebar Image Height" content="320">
<meta name="text:Body Font Size" content="13">
<meta name="text:Title Font Size" content="26">
<meta name="text:Post Title Font Size" content="26">
<meta name="text:Post Spacing" content="50">
<meta name="text:Photoset Spacing" content="4">
<meta name="text:Navigation Link 1 Icon" content="link">
<meta name="text:Navigation Link 1 Title" content="">
<meta name="text:Navigation Link 1 URL" content="http://">
<meta name="text:Navigation Link 2 Icon" content="link">
<meta name="text:Navigation Link 2 Title" content="">
<meta name="text:Navigation Link 2 URL" content="http://">
<meta name="text:Navigation Link 3 Icon" content="link">
<meta name="text:Navigation Link 3 Title" content="">
<meta name="text:Navigation Link 3 URL" content="http://">
<meta name="text:Navigation Link 4 Icon" content="link">
<meta name="text:Navigation Link 4 Title" content="">
<meta name="text:Navigation Link 4 URL" content="http://">
<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 Image Style" content="auto" title="repeat">
<meta name="select:Background Image Style" content="cover" title="cover">
<meta name="select:Main Font" content="georgia, serif" title="Georgia">
<meta name="select:Main Font" content="arial, sans-serif" title="Arial">
<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:Post Size" content="500" title="500px">
<meta name="select:Post Size" content="400" title="400px">
<meta name="select:Post Size" content="450" title="450px">
<meta name="select:Post Size" content="540" title="540px">
<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 Link List" content="1">
<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};
    color:{color:Post Text};
    background-color:{color:Background};
    background-image:url({image:Background});
    background-size:{select:Background Image Style};
    background-attachment:fixed;
    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, #links::-webkit-scrollbar{
    width:8px;
    height:8px;
}

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

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

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

iframe#tumblr_controls, .iframe-controls--desktop{
    margin-top:calc({text:Title Font Size}px + 2.5em);
    padding-top:4px;
}

.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:Post Link};
    text-decoration:none;
    transition:color 0.4s, background 0.4s;
}

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

a img{
     border:0;
}

pre{
    white-space:pre-wrap;
}

#header{
    width:100%;
    height:calc({text:Title Font Size}px + 2.5em);
    background:{color:Sidebar Background};
    position:fixed;
    top:0;
    left:0;
    z-index:2;
}

#header .inner{
    width:calc({text:Sidebar Image Width}px + 148px + {select:Post Size}px + {text:Post Spacing}px);
    margin:0 auto;
    padding:1.25em 0;
    line-height:1;
    color:{color:Title};
    display:flex;
    align-items:center;
    position:relative;
}

#header .title{
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Title Font Size}px;
    {select:Title Style}
    text-shadow:1px 1px 0 {color:Title Shadow 1}, 2px 2px 0 {color:Title Shadow 2};
    height:1em;
    margin-left:55px;
}

#subtitle{
    margin-left:1.5em;
    text-transform:uppercase;
}

#search{
    position:absolute;
    top:50%;
    right:53px;
    background:{color:Description Background};
    border:1px solid {color:Description Border};
    padding:0.5em 1em;
    margin-top:-1.25em;
    box-sizing:border-box;
    height:2.5em;
}

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

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

::-webkit-input-placeholder{
  color:{color:Sidebar Text};
}

#search input[type="submit"]{
    color:{color:Sidebar Link};
    font-family:metro;
    line-height:1;
    cursor:pointer;
    position:absolute;
    top:50%;
    right:0;
    margin-top:-0.5em;
    padding:0 1em;
    transition:color 0.4s;
}

#search input[type="submit"]:hover{
    color:{color:Sidebar Link Hover};
}

#search input:focus{
    outline:none;
}

#content{
    width:calc({text:Sidebar Image Width}px + 148px + {select:Post Size}px + {text:Post Spacing}px);
    margin:calc({text:Title Font Size}px + 2.5em) auto 0;
    position:relative;
    padding:0 30px;
}

#sidebar{
    width:calc({text:Sidebar Image Width}px + 75px);
    position:fixed;
    top:calc({text:Title Font Size}px + 2.5em);
    color:{color:Sidebar Text};
}

#sidebar .inner{
    width:calc({text:Sidebar Image Width}px + 20px);
    padding-left:11px;
    padding-bottom:11px;
    margin-left:44px;
    margin-bottom:44px;
    position:relative;
}

#sidebar .b1{
    position:absolute;
    top:44px;
    left:0;
    width:1px;
    height:100%;
    background:{color:Sidebar Borders};
    overflow:hidden;
}

#sidebar .b1:before{
    content:"";
    position:absolute;
    top:-40px;
    left:0;
    width:1px;
    height:40px;
    background-image:linear-gradient(to bottom, transparent, {color:Sidebar Border Effect}, transparent);
    transition:all 2s;
}

#sidebar .inner:hover .b1:before{
    top:100%;
}

#sidebar .b2{
    position:absolute;
    right:44px;
    bottom:0;
    width:100%;
    height:1px;
    background:{color:Sidebar Borders};
    overflow:hidden;
}

#sidebar .b2:before{
    content:"";
    position:absolute;
    right:-40px;
    top:0;
    height:1px;
    width:40px;
    background-image:linear-gradient(to right, transparent, {color:Sidebar Border Effect}, transparent);
    transition:all 2s;
}

#sidebar .inner:hover .b2:before{
    right:100%;
}

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

#navigation{
    position:absolute;
    left:-44px;
    bottom:1px;
    width:34px;
    padding-right:10px;
    padding-bottom:10px;
    text-align:center;
}

#navigation li{
    margin-top:4px;
}

#navigation li a{
    display:block;
    width:34px;
    height:34px;
    color:{color:Navigation Link};
    background:{color:Navigation Link Background};
    line-height:0;
}

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

#navigation li a.nav{
    display:none;
}

#navigation li a.nav.active{
    display:block;
}

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

.mif-mail, .mif-menu{
    font-size:18px!important;
}

.mif-cross{
    font-size:12px!important;
}

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

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

#sidebar .contents{
    width:{text:Sidebar Image Width}px;
    background:{color:Sidebar Background};
    padding:0 10px 10px;
    position:relative;
}

#sidebar-image{
    width:{text:Sidebar Image Width}px;
    height:{text:Sidebar Image Height}px;
    background-image:url({image:Sidebar Image});
    background-size:cover;
}

#description-wrapper{
    background:{color:Description Background};
    border:1px solid {color:Description Border};
    padding:1em;
    margin-top:10px;
}

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

{block:ifShowLinkList}
#menu{
    position:absolute;
    top:0;
    left:10px;
    width:{text:Sidebar Image Width}px;
    height:{text:Sidebar Image Height}px;
    background:{color:Description Background};
    border:1px solid {color:Description Border};
    box-sizing:border-box;
    padding:1em;
    display:none;
}

#links{
    height:100%;
    text-align:center;
    overflow:auto;
}

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

#links li:last-child a{
    margin-bottom:0;
}
{/block:ifShowLinkList}

#pagination-wrapper{
    position:absolute;
    left:1px;
    bottom:-44px;
    height:34px;
    padding-top:10px;
    padding-left:10px;
}

.pagination, .pagination li, #load-more, #top{
    float:left;
    margin-right:4px;
}

#pagination-wrapper a{
    width:34px;
    height:34px;
    display:block;
    text-align:center;
    color:{color:Navigation Link};
    background:{color:Navigation Link Background};
    line-height:0;
}

#pagination-wrapper a:hover{
    color:{color:Navigation Link Hover};
    background:{color:Navigation Link Background Hover};
}

#pagination-wrapper span{
    font-size:16px;
    line-height:34px;
}

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

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

#top{
    display:none;
}

#container{
    padding-top:{text:Post Spacing}px;
    padding-left:{text:Post Spacing}px;
    margin-left:calc({text:Sidebar Image Width}px + 75px);
    position:relative;
}

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

.post-wrapper .inner{
    padding-right:11px;
    padding-bottom:11px;
    margin-right:42px;
    margin-bottom:42px;
    position:relative;
}

.post-wrapper .b1{
    position:absolute;
    top:42px;
    right:0;
    width:1px;
    height:100%;
    background:{color:Post Borders};
    overflow:hidden;
}

.post-wrapper .b1:before{
    content:"";
    position:absolute;
    top:-40px;
    left:0;
    width:1px;
    height:40px;
    background-image:linear-gradient(to bottom, transparent, {color:Post Border Effect}, transparent);
    transition:all 2s;
}

.post-wrapper:hover .b1:before{
    top:100%;
}

.post-wrapper .b2{
    position:absolute;
    left:42px;
    bottom:0;
    width:100%;
    height:1px;
    background:{color:Post Borders};
    overflow:hidden;
}

.post-wrapper .b2:before{
    content:"";
    position:absolute;
    top:0;
    left:-40px;
    height:1px;
    width:40px;
    background-image:linear-gradient(to right, transparent, {color:Post Border Effect}, transparent);
    transition:all 2s;
}

.post-wrapper:hover .b2:before{
    left:100%;
}

.post-wrapper .contents{
    width:{select:Post Size}px;
    padding:10px;
    background:{color:Post Background};
}

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

.read_more{
    border-bottom:1px solid {color:Blockquote Border};
}

.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:Blockquote Border};
    margin-right:0.5em;
}

.post .title{
    text-align:center;
    margin:0.75em 1em 1em;
    text-shadow:1px 1px 0 {color:Post Title Shadow 1}, 2px 2px 0 {color:Post Title Shadow 2};
}

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

.post .title a{
    color:{color:Post Title};
}

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

.ask-user-wrapper{
    display:flex;
    align-items:center;
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    border:1px solid {color:Post Border Alt};
}

.ask-avatar{
    width:40px;
    height:40px;
}

.answer .ask-avatar{
    order:2;
}

.ask-user{
    flex:1;
    padding:0 1em;
}

.question .ask-user{
    text-align:right;
}

.ask-user a{
    color:{color:Post Link Alt};
}

.ask-user a:hover{
    color:{color:Post Link Hover Alt};
}

.ask-inner{
    margin:1em;
}

.chat-line{
    display:flex;
    align-items:center;
    margin-bottom:10px;
}

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

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

.chat .label span{
    text-transform:uppercase;
}

.chat .label.even{
    order:2;
}

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

.chat-item{
    flex:1;
    padding:0.5em 1em;
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    border:1px solid {color:Post Border Alt};
}

.quote-text{
    text-align:center;
    margin:0.75em 1em 1em;
}

.quote-text p{
    font-size:{text:Post Title Font Size}px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    margin:0;
    color:{color:Post Title};
    text-shadow:1px 1px 0 {color:Post Title Shadow 1}, 2px 2px 0 {color:Post Title Shadow 2};
    {select:Title Style};
}

.source{
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    border:1px solid {color:Post Border Alt};
    padding:0.5em;
    text-align:center;
}

.source a{
    color:{color:Post Link Alt};
}

.source a:hover{
    color:{color:Post Link Hover Alt};
}

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

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

.audio-caption{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:1em;
}

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

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

.song{
    font-size:1.2em;
}

.artist{
    font-weight:bold;
}

.album{
    font-style:italic;
}

.caption, .text-body{
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    border:1px solid {color:Post Border Alt};
    padding:1em;
}

.caption a, .text-body a{
    color:{color:Post Link Alt};
}

.caption a:hover, .text-body a:hover{
    color:{color:Post Link Hover Alt};
}

.caption{
    margin-top:10px;
}

blockquote:not(.instagram-media){
    border-left:1px solid {color:Blockquote 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;
}

.text-body:empty{
    display:none;
}

.post:not(.quote) .tumblr_blog, .caption .tumblr_blog{
    border-bottom:1px solid {color:Blockquote Border};
}

.footer.left{
    position:absolute;
    right:-42px;
    bottom:1px;
    width:32px;
    padding-left:10px;
    padding-bottom:10px;
    text-align:center;
}

.footer.bottom{
    position:absolute;
    right:1px;
    bottom:-42px;
    height:32px;
    padding-top:10px;
    padding-right:10px;
}

.footer .item a{
    height:32px;
    display:block;
    color:{color:Post Icons};
    background:{color:Post Icons Background};
}

.footer .item a:hover{
    color:{color:Post Icons Hover};
    background:{color:Post Icons Background Hover};
}

.footer.left .item a{
    width:32px;
    line-height:0;
}

.footer.left .item span{
    font-size:14px;
    line-height:32px;
}

.footer.left .item{
    margin-top:4px;
}

.footer.bottom .item{
    float:left;
    margin-left:4px;
}

.footer.bottom .item img{
    display:block;
    padding:1px;
}

.footer.bottom .with-text a{
    padding:0 9px;
    text-transform:uppercase;
    line-height:32px;
}

.footer.bottom .with-text a:before{
    font-family:metro;
    font-size:14px;
    margin-right:7px;
    float:left;
}

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

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

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

.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:red;
    background:{color:Post Icons Background Hover};
}

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

.tags.index{
    margin:1em 1em 0.5em;
    {block:ifShowTagsOnClick}display:none;{/block:ifShowTagsOnClick}
}

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

.post-info .item{
    margin:1em;
}

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

#notes li:not(.more_notes_link_container){
    margin-top:10px;
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    border:1px solid {color:Post Border Alt};
}

#notes li a{
    color:{color:Post Link Alt};
}

#notes li a:hover{
    color:{color:Post Link Hover Alt};
}

#notes blockquote{
    margin:1em;
}

#notes .avatar{
    width:40px;
    height:40px;
    display:inline-block;
    vertical-align:middle;
}

#notes .action{
    padding:0 1em;
}

.more_notes_link_container{
    position:absolute;
    right:1px;
    bottom:-42px;
    width:32px;
    height:32px;
    padding-top:10px;
    padding-right:10px;
    font-size:0;
}

.more_notes_link:after, .notes_loading:after{
    display:block;
    font-size:14px;
    font-family:metro;
    line-height:32px;
    color:{color:Post Icons};
    background:{color:Post Icons Background};
    transition:color 0.4s, background 0.4s;
}

.more_notes_link:hover:after, .notes_loading:hover:after{
    color:{color:Post Icons Hover};
    background:{color:Post Icons Background Hover};
}

.more_notes_link:after{
    content:"\ea0a";
}

.notes_loading:after{
    content:"\e979";
}

#infscr-loading{
    text-align:center;
    font-size:20px;
    color:{color:Post Borders};
    margin-right:53px;
    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">{Title}</div><div id="subtitle">{text:Subtitle}</div>
<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>
<div id="content">
<div id="sidebar">
<div class="inner">
<div id="navigation">
<ul>
<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}
{block:ifShowLinkList}<li><a href="#" class="nav show-menu active" title="View links"><span class="mif-menu"></span></a><a href="#" class="nav hide-menu" title="Hide links"><span class="mif-cross"></span></a></li>{/block:ifShowLinkList}
{block:ifNavigationLink1Title}<li><a href="{text:Navigation Link 1 URL}" title="{text:Navigation Link 1 Title}"><span class="mif-{text:Navigation Link 1 Icon}"></span></a></li>{/block:ifNavigationLink1Title}
{block:ifNavigationLink2Title}<li><a href="{text:Navigation Link 2 URL}" title="{text:Navigation Link 2 Title}"><span class="mif-{text:Navigation Link 2 Icon}"></span></a></li>{/block:ifNavigationLink2Title}
{block:ifNavigationLink3Title}<li><a href="{text:Navigation Link 3 URL}" title="{text:Navigation Link 3 Title}"><span class="mif-{text:Navigation Link 3 Icon}"></span></a></li>{/block:ifNavigationLink3Title}
{block:ifNavigationLink4Title}<li><a href="{text:Navigation Link 4 URL}" title="{text:Navigation Link 4 Title}"><span class="mif-{text:Navigation Link 4 Icon}"></span></a></li>{/block:ifNavigationLink4Title}
<li><a href="https://myrtillenne.dreamwidth.org/" title="Theme"><span class="mif-embed2"></span></a></li>
</ul>
</div>
<div class="contents">
<div id="sidebar-image"></div>
{block:Description}<div id="description-wrapper"><div id="description">{Description}</div></div>{/block:Description}
{block:ifShowLinkList}
<div id="menu">
<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>
{/block:ifShowLinkList}
</div>
<div id="pagination-wrapper">
{block:Pagination}
<ul class="pagination">
{block:PreviousPage}<li class="previous"><a href="{PreviousPage}" title="Previous page"><span class="mif-arrow-left"></span></a></li>{/block:PreviousPage}
{block:NextPage}<li class="next"><a href="{NextPage}" title="Next page"><span class="mif-arrow-right"></span></a></li>{/block:NextPage}
</ul>
{block:ifInfiniteScroll}{block:ifManualLoad}<div id="load-more"><a href="#" class="load" title="Load more posts"><span class="mif-arrow-down"></span></a><a href="#" class="empty" title="No more posts to show"><span class="mif-cross"></span></a></div>{/block:ifManualLoad}{/block:ifInfiniteScroll}
{/block:Pagination}
{block:PermalinkPagination}
<ul class="pagination">
{block:NextPost}<li class="previous"><a href="{NextPost}" title="Previous post"><span class="mif-arrow-left"></span></a></li>{/block:NextPost}
{block:PreviousPost}<li class="next"><a href="{PreviousPost}" title="Next post"><span class="mif-arrow-right"></span></a></li>{/block:PreviousPost}
</ul>
{/block:PermalinkPagination}
<div id="top"><a href="#" title="Back to top"><span class="mif-arrow-up"></span></a></div>
</div>
<div class="b1"></div>
<div class="b2"></div>
</div>
</div>
<div id="container">
<div id="posts">
{block:Posts}
<div class="post-wrapper" id="{PostID}">
<div class="inner">
<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}<div class="chat-line">{block:Label}<div class="label {Alt}"><span>{Label}</span></div>{/block:Label}
<div class="chat-item {Alt} user_{UserNumber}">{Line}</div></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-user-wrapper"><div class="ask-avatar"><img src="{AskerPortraitURL-40}"></div><div class="ask-user"><span class="ask-name">{Asker}</span> asked</div></div><div class="ask-inner">{Question}</div></div>
{block:Answerer}
<div class="answer"><div class="ask-user-wrapper"><div class="ask-avatar"><img src="{AnswererPortraitURL-40}"></div><div class="ask-user"><span class="ask-name">{Answerer}</span> answered</div></div><div class="ask-inner">{Answer}</div></div>
{/block:Answerer}
<div class="text-body">{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}
{block:PermalinkPage}
<div class="post-info">
{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 class="item">Has {NoteCountWithLabel}</div>{/block:NoteCount}
{block:PostNotes}<div id="notes">{PostNotes-64}</div>{/block:PostNotes}
</div>
{/block:PermalinkPage}
</div>
<div class="b1"></div>
<div class="b2"></div>
{block:IndexPage}
<div class="footer left">
<div class="item custom-like-button" title="Like">{LikeButton}<a class="like-button-heart"><span class="mif-heart"></span></a></div>
<div class="item reblog-btn"><a href="{ReblogURL}" title="Reblog"><span class="mif-loop2"></span></a></div>
{block:Photo}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-image"></span></a></div>{/block:Photo}
{block:Photoset}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-images"></span></a></div>{/block:Photoset}
{block:Video}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-film"></span></a></div>{/block:Video}
{block:Audio}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-music"></span></a></div>{/block:Audio}
{block:Text}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-file-text"></span></a></div>{/block:Text}
{block:Link}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-link"></span></a></div>{/block:Link}
{block:Chat}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-bubbles"></span></a></div>{/block:Chat}
{block:Quote}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-bubble"></span></a></div>{/block:Quote}
{block:Answer}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-mail-read"></span></a></div>{/block:Answer}
{block:Panorama}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-camera"></span></a></div>{/block:Panorama}
</div>
<div class="footer bottom">
{block:Date}<div class="item with-text date"><a href="{Permalink}" title="{TimeAgo}">{DayOfMonth} {Month} {Year}</a></div>{/block:Date}
{block:NoteCount}<div class="item with-text note-count"><a href="{Permalink}#notes" title="View notes">{NoteCountWithLabel}</a></div>{/block:NoteCount}
{block:ifShowTagsOnClick}{block:HasTags}<div class="item with-text show-tags"><a href="#" data-id="tags" title="View tags">Tags</a></div>{/block:HasTags}{/block:ifShowTagsOnClick}
{block:RebloggedFrom}<div class="item"><a href="{ReblogParentURL}" title="Reblogged from {ReblogParentName}"><img src="{ReblogParentPortraitURL-30}"></a></div>
<div class="item"><a href="{ReblogRootURL}" title="Originally posted by {ReblogRootName}"><img src="{ReblogRootPortraitURL-30}"></a></div>{/block:RebloggedFrom}
<div class="clearfix"></div>
</div>
{/block:IndexPage}
</div>
</div>
{/block:Posts}
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

$(function(){
    $('#navigation').on('click', 'li a.nav', function(e){
        e.preventDefault();
        $('#menu').fadeToggle();
        $(this).parent().find('a').toggleClass('active');
    });
    
    $('.photo-slideshow').pxuPhotoset({
        lightbox: false,
        rounded: false,
        gutter: '0px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
   });
    
    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 = [];
    });
    
    var $window = $(window);
    var $top = $('#top');
    
    $window.on('scroll', function(){
        if ($(this).scrollTop() > $(this).innerHeight()){
            $top.fadeIn()
        } else {
            $top.fadeOut();
        }
    });
    
    $top.on('click', 'a', function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop : 0},600);
    });
    
    $('[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}
    
    function styleAudio(){
        $(this).contents().find('head').append($('<style "type=text/css">.audio-player, .progress{background:{color:Post Background Alt}!important;color:{color:Post Link Alt}!important;}</style>'));
    }
    
    $('iframe.tumblr_audio_player').load(styleAudio);
    
    function removeColon(_,txt){
        return txt.slice(0, -1);
    }
    
    $('.post.chat').find('.label span').text(removeColon);
    
    var container = $('#posts');
    
    {block:IndexPage}
    {block:ifInfiniteScroll}
    container.infinitescroll({
        navSelector: '.pagination',
        nextSelector: '.pagination .next a',
        itemSelector: '.post-wrapper',
        loading: {
            finishedMsg: '',
            img: '',
            msgText: '<span class="mif-spinner3 mif-ani-spin"></span>'
        }{block:ifManualLoad},
        errorCallback: function(){ $('a.load').hide(); $('a.empty').css('display', 'block'); }{/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(styleAudio);
        newElems.find('.post.chat').find('.label span').text(removeColon);
        {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').click(function(e){
        e.preventDefault();
    });
    $('#load-more a.load').click(function(e){
        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

Tags:

layout,
site:tumblr

rosecarmine

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

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

.arrow-left{
    left:50%;
}

.arrow-right{
    right:50%;
}

{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

Tags:

layout,
site:tumblr

rosecarmine

FEATURES

300 - 800px wide posts
1 - 4 columns
popup menu containing search, description and links
navigation links, page links and 8 extra links
full header on first page (optional)
subtitle and header text (optional)
unnested captions (optional)
like and reblog links on index page
pagination or infinite scroll with 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:Background" content="https://static.tumblr.com/8254b6bd7ab5249ffde52e13851e06d1/edqql3l/3OAoqzhjq/tumblr_static_a81x9pgqq348sw0wg44084gw8.jpg">
<meta name="color:Background" content="#f2f2f2">
<meta name="color:Gradient 1" content="#83bfd6">
<meta name="color:Gradient 2" content="#ddd0a2">
<meta name="color:Text" content="#44636a">
<meta name="color:Link" content="#3f9bbe">
<meta name="color:Link Hover" content="#d4b132">
<meta name="color:Navigation Link" content="#f6f6f6">
<meta name="color:Navigation Link Hover" content="#fff">
<meta name="color:Title" content="#f6f6f6">
<meta name="color:Content Background" content="#f6f6f6">
<meta name="color:Post Background" content="#fff">
<meta name="color:Post Gradient 1" content="#d4b132">
<meta name="color:Post Gradient 2" content="#3f9bbe">
<meta name="color:Post Inner Border" content="#e7e7e7">
<meta name="color:Photoset Background" content="#fff">
<meta name="color:Photoset Controls" content="#44636a">
<meta name="color:Tooltip Background" content="#fff">
<meta name="color:Tooltip Text" content="#44636a">
<meta name="color:Scrollbar" content="#83bfd6">
<meta name="color:Scrollbar Track" content="#f2f2f2">
<meta name="select:Main Font" content="georgia, serif" title="Georgia">
<meta name="select:Main Font" content="arial, sans-serif" title="Arial">
<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:Text Align" content="left" title="left">
<meta name="select:Text Align" content="justify" title="justify">
<meta name="select:Background Image Style" content="cover" title="cover">
<meta name="select:Background Image Style" content="auto" title="repeat">
<meta name="select:Header Content Position" content="flex-end" title="bottom">
<meta name="select:Header Content Position" content="flex-start" title="top">
<meta name="select:Header Content Position" content="center" title="middle">
<meta name="select:Content Opacity" content="0.8" title="80%">
<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.5" title="50%">
<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.9" title="90%">
<meta name="select:Content Opacity" content="1.0" title="100%">
<meta name="select:Post Size" content="300" title="300px">
<meta name="select:Post Size" content="350" title="350px">
<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="540" title="540px">
<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:Post Size" content="750" title="750px">
<meta name="select:Post Size" content="800" title="800px">
<meta name="select:Column Number" content="1" title="1 column">
<meta name="select:Column Number" content="2" title="2 columns">
<meta name="select:Column Number" content="3" title="3 columns">
<meta name="select:Column Number" content="4" title="4 columns">
<meta name="text:Subtitle" content="Subtitle or short description">
<meta name="text:Header Text" content="">
<meta name="text:Main Google Font" content="Lora">
<meta name="text:Secondary Google Font" content="Macondo">
<meta name="text:Body Font Size" content="13">
<meta name="text:Navigation Font Size" content="15">
<meta name="text:Post Title Font Size" content="18">
<meta name="text:Post Spacing" content="20">
<meta name="text:Photoset Spacing" content="2">
<meta name="text:Navigation Link 1 Title" content="">
<meta name="text:Navigation Link 1 URL" content="http://">
<meta name="text:Navigation Link 2 Title" content="">
<meta name="text:Navigation Link 2 URL" content="http://">
<meta name="text:Navigation Link 3 Title" content="">
<meta name="text:Navigation Link 3 URL" content="http://">
<meta name="text:Navigation Link 4 Title" content="">
<meta name="text:Navigation Link 4 URL" content="http://">
<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="if:Show Header" content="1">
<meta name="if:Show Caption" content="1">
<meta name="if:Unnest Caption" content="1">
<meta name="if:Show Tags" content="1">
<meta name="if:Infinite Scroll" content="0">
<meta name="if:Inverted Tumblr Controls" content="1">

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

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

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

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

a img{
    border:0;
}

pre{
    white-space:pre-wrap;
}

iframe#tumblr_controls, .iframe-controls--desktop{
    margin-top:3px;
    {block:ifInvertedTumblrControls}
    -webkit-filter:invert(100%);
    filter:invert(100%);
    {/block:ifInvertedTumblrControls}
    margin-right:25px;
    opacity:0.7;
}

#canvas{
    width:100%;
    height:100%;
    border:30px solid transparent;
    padding:3em;
    box-sizing:border-box;
    position:fixed;
    top:0;
    left:0;
    font-size:{text:Navigation Font Size}px;
}

#topbar, #bottombar{
    position:absolute;
    left:0;
    width:100%;
    z-index:9;
}

#topbar{
    top:0;
}

#bottombar{
    bottom:0;
}

#leftbar, #rightbar{
    position:absolute;
    top:3em;
    width:3em;
    height:calc(100% - 6em);
    z-index:9;
}

#leftbar{
    left:0;
    background-color:{color:Gradient 2};
    background-image:linear-gradient(to bottom, {color:Gradient 1}, {color:Gradient 2});
}

#rightbar{
    right:0;
    background-color:{color:Gradient 2};
    background-image:linear-gradient(to top, {color:Gradient 1}, {color:Gradient 2});
    display:flex;
    justify-content:center;
    flex-direction:column;
}

#topbar:before, #leftbar:before, #rightbar:before, #bottombar:before{
    content:"";
    width:3em;
    height:3em;
    position:absolute;
    z-index:-1;
}

#topbar:before{
    background:{color:Gradient 1};
    top:0;
    left:0;
}

#leftbar:before{
    background:{color:Gradient 2};
    left:0;
    bottom:-3em;
}

#rightbar:before{
    background:{color:Gradient 2};
    top:-3em;
    right:0;
}

#bottombar:before{
    background:{color:Gradient 1};
    right:0;
    bottom:0;
}

#navbar{
    padding:0.75em 0;
    line-height:1.5;
    text-align:center;
    margin:0 3em;
    background-color:{color:Gradient 1};
    background-image:linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

#navbar ul{
    list-style:none;
    margin:0;
    padding:0;
    text-transform:uppercase;
}

#navbar li{
    display:inline-block;
    padding:0 0.5em;
}

#navbar a{
    color:{color:Navigation Link};
}

#navbar a:hover{
    color:{color:Navigation Link Hover};
}

#titles-wrapper{
    padding:0.75em 0;
    line-height:1.5;
    text-align:center;
    margin:0 3em;
    background-color:{color:Gradient 1};
    background-image:linear-gradient(to left, {color:Gradient 1}, {color:Gradient 2});
    color:{color:Title};
}

#bottombar .title{
    text-transform:uppercase;
    padding:0 0.25em;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

#subtitle{
    padding:0 0.25em;
}

#subtitle:before{
    content:"[ ";
}

#subtitle:after{
    content:" ]";
}

#subtitle:empty{
    display:none;
}

#top{
    display:none;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    line-height:1.5;
}

#top a{
    display:block;
    padding:0.5em;
    width:0.75em;
    word-wrap:break-word;
    text-transform:uppercase;
    font-size:0.75em;
    text-align:center;
    margin:0 auto;
    color:{color:Navigation Link};
}

#menu-wrapper{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
    display:none;
    font-size:{text:Body Font Size}px;
}

#menu{
    display:flex;
    width:100%;
    height:100%;
    align-items:center;
}

#menu .inner{
    width:500px;
    min-width:500px;
    position:relative;
    padding:2px;
    margin:auto;
    z-index:1;
}

#menu .inner:before, #menu .inner:after {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    bottom:0;
    left:0;
    z-index:-1;
}

#menu .inner:before{
    background-position:0 0, 0 100% ;
    background-repeat:no-repeat;
    background-size:100% 2px;
    background-image:linear-gradient(to right, {color:Post Gradient 1}, {color:Post Gradient 2}), linear-gradient(to left, {color:Post Gradient 1}, {color:Post Gradient 2});;
}

#menu .inner:after{
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
    background-size:2px 100%;
    background-image:linear-gradient(to bottom, {color:Post Gradient 1}, {color:Post Gradient 2}), linear-gradient(to top, {color:Post Gradient 1}, {color:Post Gradient 2});;
}

#menu .contents{
    margin:3px;
    padding:5px;
    background:{color:Post Background};
}

#description{
    margin:1.2em;
    text-align:{select:Text Align};
}

#links{
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    list-style:none;
    text-align:center;
}

#links:empty{
    display:none;
}

#links li{
    min-width:25%;
    line-height:1.5;
    flex-grow:1;
}

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

#search{
    font-size:1em;
    position:relative;
}

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

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

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

#search input:focus{
    outline:none;
}

#menu #close{
    margin:1.2em;
    text-align:center;
}

#menu #close a{
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

#content{
    overflow:auto;
    height:100%;
    border:3px solid {color:Background};
    box-sizing:border-box;
    background-image:url({image:Background});
    background-size:{select:Background Image Style};
    background-position:center center;
    font-size:{text:Body Font Size}px;
}

{block:ifShowHeader}
#header{
    display:none;
    width:100%;
    height:100%;
    justify-content:{select:Header Content Position};
    flex-direction:column;
    align-items:center;
}

.page1 #header{
    display:flex;
}

#header-content{
    margin:2em auto;
    border:1px double rgba({RGBcolor:Content Background}, {select:Content Opacity});
    padding:2px;
    max-width:300px;
    text-align:center;
}

#header .contents{
    border:3px solid rgba({RGBcolor:Content Background}, {select:Content Opacity});
    background:{color:Post Background};
    background-clip:padding-box;
    padding:1em;
}

#header-text{
    margin-bottom:1em;
}

#header-text:empty{
    display:none;
}

#scroll{
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}
{/block:ifShowHeader}

#content .inner{
    background:rgba({RGBcolor:Content Background}, {select:Content Opacity});
    min-height:100%;
    padding:{text:Post Spacing}px;
    box-sizing:border-box;
}

#container{
    {block:IndexPage}max-width:calc(({select:Post Size}px + 20px + {text:Post Spacing}px * 2) * {select:Column Number});{/block:IndexPage}
    margin:0 auto;
}

#posts{
    margin:0 auto;
}

.post-wrapper{
    float:left;
    margin:{text:Post Spacing}px;
    padding:2px;
    width:calc({select:Post Size}px + 16px);
    {block:PermalinkPage}
    min-width:516px;
    float:none;
    margin:{text:Post Spacing}px auto;
    {/block:PermalinkPage}
    position:relative;
    z-index:1;
}

.post-wrapper:before, .post-wrapper:after {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    bottom:0;
    left:0;
    z-index:-1;
}

.post-wrapper:before{
    background-position:0 0, 0 100%;
    background-repeat:no-repeat;
    background-size:100% 2px;
    background-image:linear-gradient(to right, {color:Post Gradient 1}, {color:Post Gradient 2}), linear-gradient(to left, {color:Post Gradient 1}, {color:Post Gradient 2});
}

.post-wrapper:after{
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
    background-size:2px 100%;
    background-image:linear-gradient(to bottom, {color:Post Gradient 1}, {color:Post Gradient 2}), linear-gradient(to top, {color:Post Gradient 1}, {color:Post Gradient 2});
}

.post-wrapper .contents{
    margin:3px;
    padding:5px;
    background:{color:Post Background};
}

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

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

.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.text{
    margin:1.2em;
}

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

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

.post.video{
    margin:0 auto;
    max-width:700px;
}

.question, .answer{
    border:1px solid {color:Post Inner Border};
    margin-bottom:5px;
}

.ask-avatar img{
    width:50px;
    height:50px;
    padding:5px;
    border-bottom:1px solid {color:Post Inner Border};
}

.question .ask-avatar img{
    float:left;
    border-right:1px solid {color:Post Inner Border};
    margin-right:1em;
}

.answer .ask-avatar img{
    float:right;
    border-left:1px solid {color:Post Inner Border};
    margin-left:1em;
}

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

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

.ask-inner{
    margin:1.2em;
}

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

.replies .text-body:empty{
    display:none;
}

.chat .title{
    margin:0 1.2em;
}

.chat-item{
    padding:0.5em 1.2em;
    border:1px solid transparent;
}

.chat-item.odd{
    border:1px solid {color:Post Inner Border};
}

.chat span{
    font-weight:bold;
}

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

.link .title{
    border:1px solid {color:Post Inner Border};
    padding:1.2em;
}

.link .title h3{
    margin:0;
}

.link .description{
    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:110px;
    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:100px;
    height:100px;
    padding:5px;
}

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

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

blockquote.tumblr_parent{
    border:0;
    padding:0;
    background:transparent;
}

blockquote.tumblr_parent .tumblr_blog{
    display:table;
    margin-bottom:1em;
}

{block:ifNotUnnestCaption}
.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};
}
{/block:ifNotUnnestCaption}

.footer{
    clear:both;
}

.footer.index{
    border:1px solid {color:Post Inner Border};
    padding:0.5em 1em;
    margin-top:5px;
}

.footer.index .item:not(.tags){
    margin-right:0.5em;
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

.custom-like-button{
    position:relative;
    display:inline-block;
}
 
.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:Link Hover};
}
 
.like_button.liked + .like-button-heart:before{
    content:"Un";
}

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

.footer.entry{
    margin:1.2em;
}

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

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

#notes li{
    padding:0.5em 1.2em;
    border:1px solid transparent;
}

#notes li:nth-child(odd){
    border:1px solid {color:Post Inner Border};
}

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

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

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

li.more_notes_link_container{
    border:0!important;
}

.clearfix{
    clear:both;
}

#footer{
    text-align:center;
    padding:{text:Post Spacing}px 0;
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

#footer:empty{
    display:none;
}

#footer ul{
    margin:0;
    padding:0;
}

#footer li, #load-more{
    display:inline-block;
    margin:0 0.5em;
    padding:1px;
    position:relative;
    z-index:1;
}

#footer li:before, #footer li:after, #load-more:before, #load-more:after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    bottom:0;
    left:0;
    z-index:-1;
}

#footer li:before, #load-more:before{
    background-position:0 0, 0 100%;
    background-repeat:no-repeat;
    background-size:100% 1px;
    background-image:linear-gradient(to right, {color:Post Gradient 1}, {color:Post Gradient 2}), linear-gradient(to left, {color:Post Gradient 1}, {color:Post Gradient 2});
}

#footer li:after, #load-more:after{
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
    background-size:1px 100%;
    background-image:linear-gradient(to bottom, {color:Post Gradient 1}, {color:Post Gradient 2}), linear-gradient(to top, {color:Post Gradient 1}, {color:Post Gradient 2});
}

#footer li a, #footer span{
    display:block;
    margin:2px;
    padding:0.25em 1em;
    background:{color:Post Background};
}

.pagination.index{
    {block:ifInfiniteScroll}display:none;{/block:ifInfiniteScroll}
}

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

#infscr-loading img{
    display:none!important;
}
    
#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;
}

.arrow-left{
    left:50%;
}

.arrow-right{
    right:50%;
}

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

{CustomCSS}
</style>
</head>
<body{block:ifShowHeader}{block:HomePage} class="page{CurrentPage}"{/block:HomePage}{/block:ifShowHeader}>
<div id="canvas">
<div id="topbar">
<div id="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archive">Archive</a></li>
{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
{block:ifNavigationLink1Title}<li><a href="{text:Navigation Link 1 URL}">{text:Navigation Link 1 Title}</a></li>{/block:ifNavigationLink1Title}
{block:ifNavigationLink2Title}<li><a href="{text:Navigation Link 2 URL}">{text:Navigation Link 2 Title}</a></li>{/block:ifNavigationLink2Title}
{block:ifNavigationLink3Title}<li><a href="{text:Navigation Link 3 URL}">{text:Navigation Link 3 Title}</a></li>{/block:ifNavigationLink3Title}
{block:ifNavigationLink4Title}<li><a href="{text:Navigation Link 4 URL}">{text:Navigation Link 4 Title}</a></li>{/block:ifNavigationLink4Title}
<li><a class="popbox" href="#" title="Click to open">Menu</a></li>
<li><a href="https://myrtillenne.dreamwidth.org">Theme</a></li>
</ul>
</div>
</div>
<div id="leftbar"></div>
<div id="rightbar"><div id="top"><a href="#">Scroll to top</a></div></div>
<div id="bottombar"><div id="titles-wrapper"><span class="title">{Title}</span><span id="subtitle">{text:Subtitle}</span></div></div>
<div id="menu-wrapper">
<div class="fade"></div>
<div id="menu">
<div class="inner">
<div class="contents">
<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>
{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="close"><a href="#">Close</a></div>
</div>
</div>
</div>
</div>
<div id="content">
{block:ifShowHeader}{block:HomePage}<div id="header">
<div id="header-content">
<div class="contents">
<div id="header-text">{text:Header Text}</div>
<div id="scroll"><a href="#">Scroll to posts</a></div>
</div>
</div>
</div>{/block:HomePage}{/block:ifShowHeader}
<div class="inner">
<div id="container">
<div id="posts">
{block:Posts}
<div class="post-wrapper" id="{PostID}">
<div class="contents">
{block:Text}
<div class="post text">
{block:Title}
<div class="title"><h3><a href="{Permalink}">{Title}</a></h3></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"><h3><a href="{URL}" {Target}>{Name}</a></h3></div>
{block:Description}<div class="description"><div class="text-body">{Description}</div></div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post chat">
{block:Title}
<div class="title"><h3><a href="{Permalink}">{Title}</a></h3></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}<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-64}" /></div><div class="ask-inner"><span class="ask-name">{Asker}</span> asked: {Question}</div><div class="clearfix"></div></div>
{block:Answerer}
<div class="answer"><div class="ask-avatar"><img src="{AnswererPortraitURL-64}" /></div><div class="ask-inner"><span class="ask-name">{Answerer}</span> answered: {Answer}</div><div class="clearfix"></div></div>
{/block:Answerer}
<div class="replies"><div class="text-body">{Replies}</div></div>
</div>
{/block:Answer}

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

{block:IndexPage}
<div class="footer index">
{block:Date}<span class="item"><a href="{Permalink}" title="{TimeAgo} - view post">{DayOfMonth} {ShortMonth} {ShortYear}</a></span> {/block:Date}
{block:NoteCount}<span class="item"><a href="{Permalink}#notes" title="{NoteCountWithLabel} - view notes">{NoteCount} N</a></span> {/block:NoteCount}
{block:RebloggedFrom}<span class="item"><a href="{ReblogParentURL}" title="{ReblogParentName}">Via</a></span> <span class="item"><a href="{ReblogRootURL}" title="{ReblogRootName}">Src</a></span> {/block:RebloggedFrom}
<div class="item custom-like-button">{LikeButton}<a class="like-button-heart">Like</a></div>
<span class="item"><a href="{ReblogURL}">Reblog</a></span> 
{block:ifShowTags}{block:HasTags}<span class="item tags">{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}</span>{/block:HasTags}{/block:ifShowTags}
</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 class="item">Has {NoteCountWithLabel}</div>{/block:NoteCount}
</div>
{/block:PermalinkPage}
{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
</div>
</div>
{/block:Posts}
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div id="footer">
{block:Pagination}
<ul class="pagination index">
{block:PreviousPage}
<li class="previous"><a href="{PreviousPage}">Previous</a></li>{/block:PreviousPage}
{block:JumpPagination length="5"}{block:CurrentPage}<li class="current_page"><span>{PageNumber}</span></li>
{/block:CurrentPage}{block:JumpPage}<li class="jump_page"><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}
<li class="next"><a href="{NextPage}">Next</a></li>
{/block:NextPage}
</ul>
{block:ifInfiniteScroll}<div id="load-more"><span><a href="#">Load more posts</a></span></div>{/block:ifInfiniteScroll}
{/block:Pagination}
{block:PermalinkPagination}
<ul class="pagination entry">
{block:NextPost}
<li class="next"><a href="{NextPost}">Previous</a></li>
{/block:NextPost}
{block:PreviousPost}
<li class="previous"><a href="{PreviousPost}">Next</a></li>
{/block:PreviousPost}
</ul>
{/block:PermalinkPagination}
</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>
<script src="https://static.tumblr.com/vywm3oc/iGoograd4/masonry.pkgd.min.js"></script>
<script src="https://static.tumblr.com/vywm3oc/uwVograkb/imagesloaded.pkgd.min.js"></script>
{block:ifInfiniteScroll}<script src="https://static.tumblr.com/vywm3oc/toFo5s9sz/jquery.infinitescroll.min.js"></script>{/block:ifInfiniteScroll}
{block:ifUnnestCaption}<script src="https://static.tumblr.com/edqql3l/dA3oqvg04/unnest.min.js"></script>{/block:ifUnnestCaption}
<script type="text/javascript">
$(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;
   
   function resizeVideo(){
        if ({select:Post Size} < 700){
            newSize = $('.post.video').width();
            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);
    
    var content = $('#content');
    var container = $('#posts');
    
    function contentGrid(){
        if ({select:Column Number} > 1){
            container.imagesLoaded(function(){
                container.masonry({
                    itemSelector : '.post-wrapper',
                    fitWidth: true
                });
            });
        }
    }
    
    {block:IndexPage}
    contentGrid();
    
    {block:ifInfiniteScroll}
    loadMore = $('#load-more');
    
    container.infinitescroll({
        navSelector: '.pagination',
        nextSelector: '.pagination .next a',
        itemSelector: '.post-wrapper',
        loading: {
            finishedMsg: '',
            img: '',
            msgText: '<span class="mif-spinner3 mif-ani-spin"></span>'
        },
        errorCallback: function(){ loadMore.html('<span>No more posts to show.</span>').delay(500).animate({'opacity' : 0}); $('#footer').delay(1000).slideUp();}
    },
    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.css({ opacity: 0 });
        newElems.imagesLoaded(function(){
            newElems.animate({ opacity: 1 });
            if ({select:Column Number} > 1){
                container.masonry( 'appended', newElems, true );
            }
        });
        {block:ifUnnestCaption}
        newElems.unnest({
            yourCaption: '.caption, .text-body',
            tumblrAvatars: false,
            usernameColon: false
        });
        {/block:ifUnnestCaption}
        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>'));
        });
        var newElemsIDs = newElems.map(function(){ 
            return this.id; 
        }).get();
        Tumblr.LikeButton.get_status_by_post_ids(newElemsIDs);
    });
    $(window).off('.infscr');
    loadMore.on('click', 'a', function(e){
        e.preventDefault();
        container.infinitescroll('retrieve');
    });
    {/block:ifInfiniteScroll}
    {/block:IndexPage}
    
    $('.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><div class="arrow-left"><span class="mif-arrow-left"></span></div><div class="arrow-right"><span class="mif-arrow-right"></span></div><img id="mainImage" /></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 = [];
    });
    
    var $top = $('#top');
    
    content.on('scroll', function(){
        if ($(this).scrollTop() > $(this).height()) {
            $top.fadeIn();
        } else {
            $top.fadeOut();
        }
    });
    
    $top.on('click', 'a', function(e){
        e.preventDefault();
        content.animate({scrollTop : 0},600);
    });

});
</script>
</body>
</html>

RESOURCES

photoset grid by Pixel Union
custom tooltips by JQuery Foundation
icon font by Metro UI CSS
audio player tutorial by Roxie
unnest captions script by magnusthemes and neothm
masonry and images loaded by David DeSandro
infinite scroll by Paul Irish

Tags:

layout,
site:tumblr

rosecarmine

FEATURES

all-in-one theme containing about, links (including page links), contact with ask, submit and optional faq and blogroll
300 - 500px wide posts
show tags on click (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

This is a revamp of an older theme.

All additional panels are optional. Instructions and examples can be found in the code.

If you disable the navigation panel, your page links will be added to the sidebar navigation. You can also add up to four extra sidebar links. If you disable the contact panel, links to the ask and submit pages will be added to the sidebar navigation.

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:Background" content="">
<meta name="image:Left Sidebar Background" content="https://secure.static.tumblr.com/24be713636c05e83bf1fd23a111d7eec/vywm3oc/rNlo75ppg/tumblr_static_9gbad3fal5ogwccc8o4w8k08s.png">
<meta name="image:Right Sidebar Background" content="https://secure.static.tumblr.com/80a4112863797404942540522a8763ab/vywm3oc/NVyo75pph/tumblr_static_a69ra68b05c0w8gggo48ow0c0.png">
<meta name="image:About Icon" content="https://secure.static.tumblr.com/f5689917cf5daef5529d45dd96d92778/vywm3oc/Pooonjj55/tumblr_static_ed9ydlgnre0og0k4ks48osk8k.jpg">
<meta name="color:Background" content="#fff">
<meta name="color:Text" content="#777">
<meta name="color:Link" content="#d87889">
<meta name="color:Link Hover" content="#d28a75">
<meta name="color:Left Sidebar Background" content="#f7e9e1">
<meta name="color:Left Sidebar Text" content="#aa8a8a">
<meta name="color:Left Sidebar Link" content="#bd6f84">
<meta name="color:Left Sidebar Link Hover" content="#be6d6d">
<meta name="color:Left Sidebar Border" content="#d7c5c5">
<meta name="color:Right Sidebar Background" content="#f7e9e1">
<meta name="color:Right Sidebar Text" content="#aa8a8a">
<meta name="color:Right Sidebar Link" content="#bd6f84">
<meta name="color:Right Sidebar Link Hover" content="#be6d6d">
<meta name="color:Right Sidebar Border" content="#d7c5c5">
<meta name="color:Content Background" content="#fff">
<meta name="color:Post Text Alt" content="#aaa">
<meta name="color:Post Border" content="#ededed">
<meta name="color:Post Footer Link" content="#d87889">
<meta name="color:Post Footer Link Hover" content="#d28a75">
<meta name="color:Photoset Background" content="#fff">
<meta name="color:Photoset Controls" content="#777">
<meta name="color:Tooltip Background" content="#fff">
<meta name="color:Tooltip Text" content="#777">
<meta name="select:Main Font" content="cambria, serif" title="Cambria">
<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="arial, sans-serif" title="Arial">
<meta name="select:Main Font" content="courier, monospace" title="Courier">
<meta name="select:Main Font" content="verdana, sans-serif" title="Verdana">
<meta name="select:Main Font" content="lucida console, monospace" title="Lucida Console">
<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: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:Text Align" content="left" title="left">
<meta name="select:Text Align" content="justify" title="justify">
<meta name="text:Main Google Font" content="">
<meta name="text:Secondary Google Font" content="Amarante">
<meta name="text:Sidebar Width" content="330">
<meta name="text:Sidebar Image Height" content="500">
<meta name="text:Body Font Size" content="14">
<meta name="text:Navigation Font Size" content="14">
<meta name="text:Title Font Size" content="20">
<meta name="text:Post Title Font Size" content="18">
<meta name="text:Post Footer Font Size" content="14">
<meta name="text:Post Spacing" content="40">
<meta name="text:Photoset Spacing" content="2">
<meta name="text:About Panel Title" content="About">
<meta name="text:Links Panel Title" content="Navigation">
<meta name="text:Contact Panel Title" content="Contact">
<meta name="text:FAQ Title" content="Frequently Asked Questions">
<meta name="text:Blogroll Panel Title" content="Blogroll">
<meta name="text:Sidebar Extra Link 1 Title" content="">
<meta name="text:Sidebar Extra Link 1 URL" content="http://">
<meta name="text:Sidebar Extra Link 2 Title" content="">
<meta name="text:Sidebar Extra Link 2 URL" content="http://">
<meta name="text:Sidebar Extra Link 3 Title" content="">
<meta name="text:Sidebar Extra Link 3 URL" content="http://">
<meta name="text:Sidebar Extra Link 4 Title" content="">
<meta name="text:Sidebar Extra Link 4 URL" content="http://">
<meta name="if:Sidebar Gradient" content="1">
<meta name="if:Show About Panel" content="1">
<meta name="if:Show About Icon" content="1">
<meta name="if:Show Links Panel" content="1">
<meta name="if:Show Contact Panel" content="1">
<meta name="if:Show FAQ" content="1">
<meta name="if:Show Blogroll Panel" content="1">
<meta name="if:Show Tags On Click" content="0">
<meta name="if:Infinite Scroll" content="0">
<meta name="if:Manual Load" content="0">
<style>

html, body{
    height:100%;
}

body{
    margin:0;
    background:url({image:Background}) {color:Background};
    font-size:{text:Body Font Size}px;
    font-family:{block:ifMainGoogleFont}{text:Main Google Font}, {/block:ifMainGoogleFont}{select:Main Font};
    color:{color:Text};
    line-height:1.5;
    overflow-y:scroll;
}

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

a img{
    border:0;
}

a{
    color:{color:Link};
    text-decoration:none;
    transition:all 0.6s ease;
}

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

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

blockquote{
    border-left: 1px solid {color:Post Border};
    padding-left:1em;
    margin-left:0;
    margin-right:0;
}

pre{
    white-space:pre-wrap;
}

#canvas{
    height:100%;
    min-width:calc({select:Post Size}px + (40px + {text:Sidebar Width}px) * 2);
}

/*--------------- sidebars ---------------*/

#sidebar{
    position:fixed;
    width:100%;
    height:100%;
    z-index:1;
}

#sidebar .inner{
    max-width:calc({select:Post Size}px + 40px * 2);
    margin:0 auto;
    height:100%;
    padding:0 {text:Sidebar Width}px;
}

#secondary, #tertiary{
    width:{text:Sidebar Width}px;
    display:table;
    height:100%;
    text-align:center;
    position:relative;
}

#secondary{
    float:left;
    margin-left:-{text:Sidebar Width}px;
    color:{color:Left Sidebar Text};
    background:{color:Left Sidebar Background};
}

#tertiary{
    float:right;
    margin-right:-{text:Sidebar Width}px;
    color:{color:Right Sidebar Text};
    background:{color:Right Sidebar Background};
}

.image-bg{
    position:absolute;
    left:0;
    width:100%;
    height:{text:Sidebar Image Height}px;
    background-size:cover;
    background-position:top center;
}

#secondary .image-bg{
    top:0;
    background-image:url({image:Left Sidebar Background});
}

#tertiary .image-bg{
    bottom:0;
    background-image:url({image:Right Sidebar Background});
}

{block:ifSidebarGradient}
.image-bg:before{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:200px;
}

#secondary .image-bg:before{
    bottom:0;
    background-image: linear-gradient(to bottom, transparent, {color:Left Sidebar Background});
}

#tertiary .image-bg:before{
    top:0;
    background-image: linear-gradient(to bottom, {color:Right Sidebar Background}, transparent);
}
{/block:ifSidebarGradient}

#sidebar .content{
    position:relative;
    display:table-cell;
    padding:30px;
}

#secondary .content{
    vertical-align:bottom;
}

#secondary a{
    color:{color:Left Sidebar Link};
}

#secondary a:hover{
    color:{color:Left Sidebar Link Hover};
}

#navigation{
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Navigation Font Size}px;
    border-bottom:3px double {color:Left Sidebar Border};
    padding-bottom:20px;
    margin-bottom:20px;
}

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

#navigation li{
    display:inline-block;
    padding:0.25em 0.5em;
}

#pagination{
    text-align:center;
}

#pagination ul{
    margin:0;
    padding:0;
    {block:ifInfiniteScroll}display:none;{/block:ifInfiniteScroll}
}

#pagination, #top{
    display:inline-block;
    vertical-align:middle;
}

#pagination li{
    display:inline-block;
    line-height:1;
    padding:0.5em;
    min-width:1em;
}

#pagination li span{
    vertical-align:top;
}

li.current_page, li#previous, li#next{
    border:3px double {color:Left Sidebar Border};
}

#top{
    border:3px double {color:Left Sidebar Border};
}

#top span{
    padding:0.5em;
    line-height:1;
}

#top a{
    visibility:hidden;
    opacity:0;
    transition:visibility 0.4s step-end, opacity 0.4s linear;
}

#top a.active{
    visibility:visible;
    opacity:1;
    transition:visibility 0.4s step-start, opacity 0.4s linear;
}

#tertiary a{
    color:{color:Right Sidebar Link};
}

#tertiary a:hover{
    color:{color:Right Sidebar Link Hover};
}

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

#tertiary .description{
    border-bottom:3px double {color:Right Sidebar Border};
    padding-bottom:20px;
    margin-bottom:20px;
}

#contents{
    width:calc({select:Post Size}px + 40px * 2);
    min-height:100%;
    background:{color:Content Background};
    margin:0 auto;
    position:relative;
    z-index:2;
}

.panel{
    width:{select:Post Size}px;
    padding:60px 40px;
    display:none;
}

.panel.active{
    display:block;
}

/*--------------- posts panel ---------------*/

.posts{
    width:{select:Post Size}px;
    margin-top:{text:Post Spacing}px;
}

.posts:first-child{
    margin:0;
}

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

.read_more{
    display:block;
    border-top:1px solid {color:Post Border};
    padding-top:0.75em;
    text-align:center;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Post Footer Font Size}px;
}

.post{
    margin-bottom:20px;
    text-align:{select:Text Align};
}

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

.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 Border};
    margin-right:0.5em;
}

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

.asker-wrapper, .answerer-wrapper{
    display:flex;
    align-items:center;
}

.asker-avatar, .answerer-avatar{
    border:3px double {color:Post Border};
    padding:5px;
    margin-right:1em;
}

.asker-name, .answerer-name{
    line-height:1;
    color:{color:Post Text Alt};
}

.asker-name span, .answerer-name span{
    display:block;
    font-size:{text:Post Title Font Size}px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    color:{color:Text};
}

.answerer-wrapper{
    margin-top:20px;
}

.asker-question, .answerer-answer, .replies{
    margin-top:1em;
}

.asker-question{
    font-style:italic;
}

.replies{
    border-top:1px solid {color:Post Border};
}

.replies:empty{
    display:none;
}

.quote-text, .link-container{
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Post Title Font Size}px;
    {select:Title Style}
    margin-bottom:20px;
}

.quote-mark{
    float:left;
    margin-top:-7px;
}

.quote-mark span{
    text-align:center;
    color:{color:Post Text Alt};
    width:1em;
    height:1em;
    line-height:1em;
    padding:0.25em;
    border:3px double {color:Post Border};
    margin-right:0.5em;
}

.source{
    text-align:right;
    color:{color:Post Text Alt};
}

.audio-container{
    display:flex;
    align-items:center;
}

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

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

.player{
    width:90px;
    height:28px;
    overflow:hidden;
    padding:31px 0;
}

.album-art{
    width:90px;
    height:90px;
    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;
}

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

.artist, .album{
    display:inline;
    color:{color:Post Text Alt};
}

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

.chat-item.even{
    color:{color:Post Text Alt};
}

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

.chat .label{
    font-weight:bold;
}

.caption{
    margin:20px 0;
}

.footer{
    clear:both;
}

.footer.index{
    border-top:3px double {color:Post Border};
    border-bottom:3px double {color:Post Border};
    color:{color:Post Border};
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Post Footer Font Size}px;
    padding:0.5em 0;
    line-height:1.5em;
}

.like-reblog{
    float:right;
}

.custom-like-button, .reblog-btn{
    display:inline-block;
    vertical-align:top;
}

.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:Link Hover};
}
 
.like_button.liked + .like-button-heart{
    text-transform:lowercase;
}

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

.tags.index{
    margin-top:0.75em;
    {block:ifShowTagsOnClick}display:none;{/block:ifShowTagsOnClick}
}

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

.footer.entry{
    line-height:2;
    border-top:3px double {color:Post Border};
    padding-top:20px;
}

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

ul.tags{
    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:0;
    padding:0;
}

#notes li{
    margin:0.75em 0;
}

#notes blockquote{
    margin:1em 0;
}

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

.more_notes_link, .notes_loading{
    display:block;
    padding-top:1em;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Post Footer Font Size}px;
    line-height:1;
}

#load-more{
    text-align:center;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Post Footer Font Size}px;
    margin-top:{text:Post Spacing}px;
    line-height:1;
}

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

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

/*--------------- other panels ---------------*/

.panel-title{
    text-align:center;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    {select:Title Style}
    font-size:{text:Title Font Size}px;
    border-bottom: 3px double {color:Post Border};
    padding-bottom:0.5em;
    margin-bottom:20px;
    line-height:1.2;
}

h4.title{
    border-bottom:1px solid {color:Post Border};
    padding:0.5em 0.25em;
    margin:0;
    line-height:1.2;
}

p.section{
    margin-bottom:20px;
}

/*--------------- about panel ---------------*/

#about-icon img{
    width:120px;
    height:auto;
    border:3px double {color:Post Border};
    padding:5px;
}

#about-icon{
    float:right;
    margin-left:20px;
}

#info{
    margin-bottom:20px;
}

.info-item{
    margin:0.5em 0;
}

.about p.section{
    text-align:{select:Text Align};
}

/*--------------- links panel ---------------*/

.links ul{
    margin:0 0 20px;
    padding:0;
    overflow:hidden;
}

.links li{
    float:left;
    list-style:none;
    width:50%;
}

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

.links li:nth-child(odd) a{
    margin-right:5px;
}

.links li:nth-child(even) a{
    margin-left:5px;
}

#search{
    width:195px;
    margin:0 auto;
    line-height:0;
}

#search input[type="text"]{
    height:23px;
    width:150px;
    border:3px double {color:Post Border};
    background:{color:Content Background};
    color:{color:Text};
}

#search input#search-btn{
    background:{color:Content Background};
    color:{color:Post Text Alt};
    border:3px double {color:Post Border};
    width:31px;
    height:31px;
    font-family: metro;
    font-size:14px;
    line-height:0;
    vertical-align:top;
    cursor:pointer;
    margin-left:6px;
}

#search input:focus{
    outline: none;
}

/*--------------- contact panel ---------------*/

.faq-question{
    font-weight:bold;
}

.faq-question:before{
    content:"\f063";
    float:left;
    font-family:metro;
    text-align:center;
    color:{color:Post Text Alt};
    width:1em;
    height:1em;
    line-height:1em;
    padding:0.25em;
    border:3px double {color:Post Border};
    margin-right:0.5em;
    margin-top:-6px;
    font-weight:normal;
}

.faq-answer{
    margin:0.75em 0 20px;
    padding-bottom:0.75em;
    border-bottom:1px solid {color:Post Border};
}

/*--------------- blogroll panel ---------------*/

.blogroll ul{
    text-align:center;
    margin:0;
    padding:0;
}

.blogroll ul li{
    display:inline-block;
    margin:0.25em;
}

.blogroll ul li img{
    padding:5px;
    display:block;
    border: 3px double {color:Post Border};
}

/*--------------- photoset lightbox ---------------*/

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

.arrow-left{
    left:50%;
}

.arrow-right{
    right:50%;
}

/*--------------- tooltips ---------------*/

.custom-tooltip{
    display: none;
    max-width: 300px;
    font-size: 1em;
    line-height: 1;
    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;
    color:{color:Tooltip Text};
    padding: 0.5em 0.75em;
    z-index:9999;
    border:0;
    border-radius:0;
}

{CustomCSS}

</style>
</head>
<body>
<div id="canvas">
<div id="sidebar">
<div class="inner">
<div id="secondary"><div class="image-bg"></div>
<div class="content">
<div id="navigation">
<ul>
<li><a href="/">Index</a></li>
<li class="nav"><a data-id="post-wrapper" href="#">Posts</a></li>
<li><a href="/archive">Archive</a></li>
{block:ifShowAboutPanel}<li class="nav"><a data-id="about" href="#">{text:About Panel Title}</a></li>{/block:ifShowAboutPanel}
{block:ifShowLinksPanel}<li class="nav"><a data-id="links" href="#">{text:Links Panel Title}</a></li>{/block:ifShowLinksPanel}
{block:ifNotShowLinksPanel}{block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}{/block:ifNotShowLinksPanel}
{block:ifSidebarExtraLink1Title}<li><a href="{text:Sidebar Extra Link 1 URL}">{text:Sidebar Extra Link 1 Title}</a></li>{/block:ifSidebarExtraLink1Title}
{block:ifSidebarExtraLink2Title}<li><a href="{text:Sidebar Extra Link 2 URL}">{text:Sidebar Extra Link 2 Title}</a></li>{/block:ifSidebarExtraLink2Title}
{block:ifSidebarExtraLink3Title}<li><a href="{text:Sidebar Extra Link 3 URL}">{text:Sidebar Extra Link 3 Title}</a></li>{/block:ifSidebarExtraLink3Title}
{block:ifSidebarExtraLink4Title}<li><a href="{text:Sidebar Extra Link 4 URL}">{text:Sidebar Extra Link 4 Title}</a></li>{/block:ifSidebarExtraLink4Title}
{block:ifShowContactPanel}<li class="nav"><a data-id="contact" href="#">{text:Contact Panel Title}</a></li>{/block:ifShowContactPanel}
{block:ifNotShowContactPanel}
{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
{/block:ifNotShowContactPanel}
{block:ifShowBlogrollPanel}{block:Following}<li class="nav"><a data-id="blogroll" href="#">{text:Blogroll Panel Title}</a></li>{/block:Following}{/block:ifShowBlogrollPanel}
<li><a href="https://myrtillenne.dreamwidth.org">Theme</a></li>
</ul>
</div>
{block:Pagination}
<div id="pagination">
<ul>
{block:PreviousPage}<li id="previous"><a href="{PreviousPage}" title="Previous page"><span class="mif-arrow-left"></span></a></li>{/block:PreviousPage}
{block:JumpPagination length="5"}{block:CurrentPage}<li class="current_page"><span>{PageNumber}</span></li>
{/block:CurrentPage}{block:JumpPage}<li class="jump_page"><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}<li id="next"><a href="{NextPage}" title="Next page"><span class="mif-arrow-right"></span></a></li>{/block:NextPage}
</ul>
</div>
{/block:Pagination}
<div id="top"><a href="#" title="Back to top"><span class="mif-arrow-up"></span></a></div>
</div>
</div>
<div id="tertiary"><div class="image-bg"></div>
<div class="content">
{block:Description}<div class="description">{Description}</div>{/block:Description}<div class="title"><a href="/">{Title}</a></div>
</div>
</div>
</div>
</div>
<div id="contents">

<div class="panel post-wrapper active">
<div class="content">
{block:Posts}
<div class="posts" id="{PostID}">
{block:Text}
<div class="post text">
{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
{Body}
</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-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" 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"><div class="quote-mark"><span class="mif-quote"></span></div>{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-500}</div>
{/block:Video}
{block:Audio}
<div class="post audio">
<div class="audio-container"><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">{TrackName}</div>{/block:TrackName}{block:Artist}<div class="artist">{Artist}</div>{/block:Artist}{block:Album}<div class="album"> ▪ {Album}</div>{/block:Album}
</div>
</div>
</div>
{/block:Audio}
{block:Answer}
<div class="post ask">
<div class="question"><div class="asker-wrapper"><img class="asker-avatar" src="{AskerPortraitURL-30}" /><div class="asker-name"><span>{Asker}</span>asked:</div></div><div class="asker-question">{Question}</div></div>
{block:Answerer}
<div class="answer"><div class="answerer-wrapper"><img class="answerer-avatar" src="{AnswererPortraitURL-30}" /><div class="answerer-name"><span>{Answerer}</span>answered:</div></div><div class="answerer-answer">{Answer}</div></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}
<div class="footer index">
{block:Date}<span class="date"><a href="{Permalink}" title="{TimeAgo}">{Month} {DayOfMonth}{DayOfMonthSuffix} {Year}</a></span>{/block:Date}
{block:NoteCount} ▪ <span class="note-count"><a href="{Permalink}#notes" title="View notes">{NoteCountWithLabel}</a></span>{/block:NoteCount}
{block:RebloggedFrom} ▪ <a href="{ReblogParentURL}" title="{ReblogParentName}">Via</a> ▪ 
<a href="{ReblogRootURL}" title="{ReblogRootName}">Source</a>{/block:RebloggedFrom}
{block:ifShowTagsOnClick}{block:HasTags} ▪ <span class="show-tags"><a href="#" title="Show tags">Tags</a></span>{/block:HasTags}{/block:ifShowTagsOnClick}
<div class="like-reblog"><span class="custom-like-button">{LikeButton}<a class="like-button-heart">Like</a></span> ▪ <span class="reblog-btn"><a href="{ReblogURL}">Reblog</a></span></div>
<div class="clearfix"></div>
</div>
{block:HasTags}<div class="tags index">{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}
{/block:IndexPage}

{block:PermalinkPage}
<div class="footer entry">{block:Date}Posted on {Month} {DayOfMonth}{DayOfMonthSuffix} {Year} at {24Hour}:{Minutes} ({TimeAgo}){/block:Date}{block:HasTags}<br />Tagged with <ul class="tags">{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}</ul>{/block:HasTags}{block:RebloggedFrom}<br />Reblogged from <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>, originally by <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>{/block:RebloggedFrom}{block:NoteCount}<br />Notes (<a href="{Permalink}#notes">{NoteCount}</a>){/block:NoteCount}</div>
{/block:PermalinkPage}

{block:PostNotes}
<div id="notes">{PostNotes}</div>
{/block:PostNotes}
</div>
{/block:Posts}
</div>
{block:Pagination}{block:ifInfiniteScroll}{block:ifManualLoad}<div id="load-more"><a href="#">Load more posts</a></div>{/block:ifManualLoad}{/block:ifInfiniteScroll}
{/block:Pagination}
</div>

{block:ifShowAboutPanel}<div class="panel about">
<div class="content">
<div class="panel-title">{text:About Panel Title}</div>

{block:ifShowAboutIcon}<div id="about-icon"><img src="{image:About Icon}" /></div>{/block:ifShowAboutIcon}

<div id="info">

<div class="info-item"><b>Name: </b>add name here</div>
<div class="info-item"><b>Age: </b>add age here</div>
<div class="info-item"><b>Occupation: </b>add ocupation</div>
<div class="info-item"><b>Location: </b>add location here</div>
<div class="info-item"><b>Hobbies: </b>add hobbies here</div>
</div>

<p class="section">
This is an example paragraph.
</p>

<h4 class="title">This is an example heading</h4>

<p class="section">
This is an example paragraph.
</p>

</div>
</div>{/block:ifShowAboutPanel}

{block:ifShowLinksPanel}
<div class="panel links">
<div class="content">
<div class="panel-title">{text:Links Panel Title}</div>

<h4 class="title">Add section title here</h4>
<ul>
{block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}

<li><a href="http://add link here">Add link title here</a></li>
<li><a href="http://add link here">Add link title here</a></li>
<li><a href="http://add link here">Add link title here</a></li>
<li><a href="http://add link here">Add link title here</a></li>
</ul>

<h4 class="title">Social</h4>
<ul>

<li><a href="http://add website url here">Website</a></li>
<li><a href="http://www.facebook.com/add username here">Facebook</a></li>
<li><a href="http://twitter.com/add username here">Twitter</a></li>
<li><a href="http://www.instagram.com/add username here">Instagram</a></li>
</ul>

<div 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></div>
</div>
</div>
{/block:ifShowLinksPanel}

{block:ifShowContactPanel}
<div class="panel contact">
<div class="content">

{block:ifShowFAQ}
<div class="panel-title">{text:FAQ Title}</div>
<div class="faq">

<div class="faq-question">Add question here</div>
<div class="faq-answer">Add answer here</div>

<p class="section">
Here you can add some extra text if you'd like.
</p>

</div>

{/block:ifShowFAQ}

{block:AskEnabled}
<div id="ask-field">
{block:ifNotShowFAQ}<div class="panel-title">{AskLabel}</div>{/block:ifNotShowFAQ}
<p class="section"><iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe></p>
</div>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<div id="submit-field">
<div class="panel-title">{SubmitLabel}</div>
<p class="section"><iframe frameborder="0" scrolling="no" width="100%" height="400" src="https://www.tumblr.com/submit_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="submit_form"></iframe></p>
</div>
{/block:SubmissionsEnabled}
</div>
</div>{/block:ifShowContactPanel}

{block:ifShowBlogrollPanel}{block:Following}<div class="panel blogroll">
<div class="content">
<div class="panel-title">{text:Blogroll Panel Title}</div>
<ul>{block:Followed}
<li><a target="_blank" href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}" /></a></li>
{/block:Followed}</ul>
</div>
</div>{/block:Following}{/block:ifShowBlogrollPanel}
</div>
</div>

$('.photo-slideshow').pxuPhotoset({
        highRes: false,
        lightbox: false,
        rounded: false,
        gutter: '0px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
   });
    
    $('.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><div class="arrow-left"><span class="mif-arrow-left"></span></div><div class="arrow-right"><span class="mif-arrow-right"></span></div><img id="mainImage" /></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', '#lightboxbg', function() {
        $('#lightbox').fadeOut(function() {
            $('#lightbox').remove();
        });
        imagesURLs = [];
    });
    
    {block:ifShowTagsOnClick}$('.show-tags a').tooltip({
        content: 'Show tags'
    });{/block:ifShowTagsOnClick}
    
    {block:ifShowTagsOnClick}
    $('body').on('click', '.show-tags a', function(e){
        e.preventDefault();
        $(this).closest('.posts').find('.tags').slideToggle();
        var crtContent = $(this).tooltip( "option", "content" );
        var newContent = (crtContent === 'Show tags') ? 'Hide tags' : 'Show tags';
        $(this).tooltip( "option", "content", newContent);
    });
    {/block:ifShowTagsOnClick}
    
    $('[title], .post-wrapper, #notes').tooltip({ 
        track: true,
        show: {delay:100, duration: 500},
        tooltipClass: "custom-tooltip",
        position: { my: "left+10 top+20" }
    });
    
    $('#top a').click(function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop : 0},600);
    });
    
    $(window).scroll(function(){
        if ($(this).scrollTop() > $(this).innerHeight()) {
            $('#top a').addClass('active');
        } else {
            $('#top a').removeClass('active');
        }
    });
    
    {block:IndexPage}
    {block:ifInfiniteScroll}
    $('.post-wrapper .content').infinitescroll({
        navSelector: '#pagination ul',
        nextSelector: '#pagination #next a',
        itemSelector: '.posts',
        loading: {
            finishedMsg: '',
            img: '',
            msgText: '<span class="mif-spinner3 mif-ani-spin"></span>'
        }{block:ifManualLoad},
        errorCallback: function(){ $('#load-more').html('No more posts to show.');}{/block:ifManualLoad}
    }, function(newElements){
        var newElems = $(newElements);
        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:Content Background}!important;color:{color:Text}!important;}</style>'));
        });
        {block:ifShowTagsOnClick}
        newElems.find('.show-tags a').tooltip({
            track: true,
    	    show: {delay:100, duration: 500},
    	    tooltipClass: "custom-tooltip",
    	    position: { my: "left+10 top+20" }
        });
        newElems.find('.show-tags a').tooltip({
            content: 'Show tags'
        });
        {/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').click(function(e){
        e.preventDefault();
        $('.post-wrapper .content').infinitescroll('retrieve');
    });
    {/block:ifManualLoad}
    {/block:ifInfiniteScroll}
    {/block:IndexPage}
    
    {block:ifShowContactPanel}
    var crtPath = window.location.pathname;

{block:AskEnabled}
    function removeAsk(){
        if(crtPath == "/ask"){
            $('.contact #ask-field').remove();
        }
    }
    removeAsk();
    {/block:AskEnabled}
    
    {block:SubmissionsEnabled}
    function removeSubmit(){
        if(crtPath == "/submit"){
            $('.contact #submit-field').remove();
        }
    }
    removeSubmit();
    {/block:SubmissionsEnabled}
    {/block:ifShowContactPanel}
    
    $('iframe.tumblr_audio_player').load(function(){
        $(this).contents().find('head').append($('<style "type=text/css">.audio-player{background:{color:Content Background}!important;color:{color:Text}!important;}</style>'));
    });

});
</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

Tags:

layout,
site:tumblr

rosecarmine

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

.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

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
images used in previews from Unsplash

Tags:

layout,
site:tumblr

rosecarmine

FEATURES

400 - 800px wide posts
page links and 8 extra links
full screen header on first page (optional)
header icon 170x170px (optional)
subtitle (optional)
dropdown links list (optional)
like and reblog links on index page
pagination or infinite scroll (with optional manual load)
font size, google fonts, post spacing, photoset spacing, header height, description height, line height 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://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.14/css/metro-icons.css">
{block:Description}
<meta name="description" content="{MetaDescription}">
{/block:Description}
<meta name="image:Header Background" content="https://secure.static.tumblr.com/07158a5b00c7bb32fb62dae52a74b3e5/vywm3oc/iJ7om8mf5/tumblr_static_67e0n0q2w7c4gk444s4ko0o48.jpg">
<meta name="image:Header Icon" content="https://secure.static.tumblr.com/6ac32ae13f4d40ec872c1488d328877b/vywm3oc/lWRom90fq/tumblr_static_fih8ybkjxog0cc0c8kgcokwc.jpg">
<meta name="image:Content Background" content="">
<meta name="color:Background" content="#0a1e37">
<meta name="color:Text" content="#0a1e37">
<meta name="color:Link" content="#007baa">
<meta name="color:Link Hover" content="#005daa">
<meta name="color:Header Background" content="#e8f4fd">
<meta name="color:Header Content Background" content="#0a1e37">
<meta name="color:Header Text" content="#e8f4fd">
<meta name="color:Header Link" content="#b0d2dc">
<meta name="color:Header Link Hover" content="#d7caa3">
<meta name="color:Navigation Background" content="#0a1e37">
<meta name="color:Navigation Text" content="#6d929d">
<meta name="color:Navigation Link" content="#b0d2dc">
<meta name="color:Navigation Link Hover" content="#d7caa3">
<meta name="color:Navigation Inner Border" content="#38708c">
<meta name="color:Content Background" content="#e8f4fd">
<meta name="color:Post Background" content="#ffffff">
<meta name="color:Post Border" content="#0a1e37">
<meta name="color:Post Inner Border" content="#38708c">
<meta name="color:Post Icons" content="#b0d2dc">
<meta name="color:Post Icons Hover" content="#d7caa3">
<meta name="color:Post Icons Background" content="#0a1e37">
<meta name="color:Photoset Background" content="#0a1e37">
<meta name="color:Photoset Controls" content="#e2eff3">
<meta name="color:Tooltip Background" content="#0a1e37">
<meta name="color:Tooltip Text" content="#b0d2dc">
<meta name="color:Scrollbar" content="#007baa">
<meta name="color:Scrollbar Track" content="#0a1e37">
<meta name="color:Description Scrollbar" content="#e2eff3">
<meta name="text:Subtitle" content="">
<meta name="text:Main Google Font" content="Lora">
<meta name="text:Secondary Google Font" content="Lora:700i">
<meta name="text:Body Font Size" content="16">
<meta name="text:Navigation Font Size" content="16">
<meta name="text:Title Font Size" content="28">
<meta name="text:Post Title Font Size" content="24">
<meta name="text:Line Height" content="1.5">
<meta name="text:Post Spacing" content="80">
<meta name="text:Photoset Spacing" content="8">
<meta name="text:Header Height" content="">
<meta name="text:Description Height" content="">
<meta name="text:Index Title" content="Index">
<meta name="text:Archive Title" content="Archive">
<meta name="text:Links Title" content="Links">
<meta name="text:Search Title" content="Search">
<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 Background Style" content="cover" title="Full Screen Image">
<meta name="select:Header Background Style" content="auto" title="Pattern">
<meta name="select:Main Font" content="Palatino, 'Palatino Linotype', serif" title="Palatino">
<meta name="select:Main Font" content="arial, sans-serif" title="Arial">
<meta name="select:Main Font" content="cambria, serif" title="Cambria">
<meta name="select:Main Font" content="georgia, serif" title="Georgia">
<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="700" title="700px">
<meta name="select:Post Size" content="800" title="800px">
<meta name="select:Post Size" content="750" title="750px">
<meta name="select:Post Size" content="650" title="650px">
<meta name="select:Post Size" content="600" title="600px">
<meta name="select:Post Size" content="540" title="540px">
<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:Header Content Position" content="flex-start" title="top">
<meta name="select:Header Content Position" content="center" title="middle">
<meta name="select:Header Content Position" content="flex-end" title="bottom">
<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:Header Content Opacity" content="1.0" title="100%">
<meta name="select:Header Content Opacity" content="0.9" title="90%">
<meta name="select:Header Content Opacity" content="0.8" title="80%">
<meta name="select:Header Content Opacity" content="0.7" title="70%">
<meta name="select:Header Content Opacity" content="0.6" title="60%">
<meta name="select:Header Content Opacity" content="0.5" title="50%">
<meta name="select:Header Content Opacity" content="0.4" title="40%">
<meta name="select:Header Content Opacity" content="0.3" title="30%">
<meta name="select:Header Content Opacity" content="0.2" title="20%">
<meta name="select:Header Content Opacity" content="0.1" title="10%">
<meta name="select:Post Opacity" content="1.0" title="100%">
<meta name="select:Post Opacity" content="0.9" title="90%">
<meta name="select:Post Opacity" content="0.8" title="80%">
<meta name="select:Post Opacity" content="0.7" title="70%">
<meta name="select:Post Opacity" content="0.6" title="60%">
<meta name="select:Post Opacity" content="0.5" title="50%">
<meta name="select:Post Opacity" content="0.4" title="40%">
<meta name="select:Post Opacity" content="0.3" title="30%">
<meta name="select:Post Opacity" content="0.2" title="20%">
<meta name="select:Post Opacity" content="0.1" title="10%">
<meta name="select:Content Background Style" content="auto" title="Pattern">
<meta name="select:Content Background Style" content="cover" title="Full Screen Image">
<meta name="select:Text Align" content="left" title="left">
<meta name="select:Text Align" content="justify" title="justify">
<meta name="if:Full Screen Header" content="0">
<meta name="if:Header Icon" content="1">
<meta name="if:Header Border" content="1">
<meta name="if:Transparent Header Content" content="1">
<meta name="if:Dropdown Links List" content="0">
<meta name="if:Post Border" content="1">
<meta name="if:Transparent Post" content="1">
<meta name="if:Show Tags" content="1">
<meta name="if:Infinite Scroll" content="0">
<meta name="if:Manual Load" content="0">
<style>
body{
    line-height:{text:Line Height};
    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:Background};
    margin:0;
}

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

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

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

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

#header .description::-webkit-scrollbar-thumb {
    background: {color:Description Scrollbar};
}

#header .description::-webkit-scrollbar-track {
    background: transparent;
}

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

.page1 #header{
    min-height:100vh;
    display:flex;
    flex-direction: column;
}

#header a{
    color:{color:Navigation Link};
}

#header a:hover{
    color:{color:Navigation Link Hover};
}

#header > .inner{
    display:flex;
    align-items:{select:Header Content Position};
    {block:ifHeaderHeight}min-height:{text:Header Height}px;{/block:ifHeaderHeight}
    padding:0 30px;
    background-color:{color:Header Background};
    background-image:url('{image:Header Background}');
    background-size:{select:Header Background Style};
    background-position:center center;
    position:relative;
}

.page1 #header > .inner{
    flex: 1;
    min-height:auto;
}

{block:ifHeaderBorder}
#header .border-left{
    position:absolute;
    top:0;
    left:0;
    width:30px;
    height:100%;
    background-image: linear-gradient(to bottom, transparent, {color:Navigation Background});
}

#header .border-right{
    position:absolute;
    top:0;
    right:0;
    width:30px;
    height:100%;
    background-image: linear-gradient(to bottom, transparent, {color:Navigation Background});
}
{/block:ifHeaderBorder}

#header-content{
    margin:30px 0;
    width:100%;
    text-align:center;
}

{block:ifHeaderIcon}
#header-icon{
    padding-bottom:1.5em;
}

#icon, #icon-inner{
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
}

#icon{
    width: 120px;
    height: 120px;
    transform: rotate(45deg);
    margin:25px auto;
}

#icon-inner{
    width: 170px;
    height: 170px;
    transform: rotate(-45deg) translateY(-35px);
    background:{color:Navigation Background};
}

#icon-inner img{
    width:100%;
    height:auto;
}
{/block:ifHeaderIcon}

#header-content .inner{
    max-width:{select:Post Size}px;
    margin:0 auto;
    color:{color:Header Text};
    {block:ifNotTransparentHeaderContent}
    padding:1.5em;
    background:rgba({RGBcolor:Header Content Background},{select:Header Content Opacity});
    {/block:ifNotTransparentHeaderContent}
}

#header-content .inner a{
    color:{color:Header Link};
}

#header-content .inner a:hover{
    color:{color:Header Link Hover};
}

.page1 #header-content .inner{
    padding-bottom:28px;
}

#header .description{
    margin-bottom:1em;
    {block:ifDescriptionHeight}max-height:{text:Description Height}px;
    overflow:auto;{/block:ifDescriptionHeight}
}

.page1 #titles-container{
    padding-bottom:1em;
}

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

#header .subtitle{
    font-size:1em;
    line-height:1.2;
    text-transform:uppercase;
    margin-top:0.5em;
}

#header .title:empty{
    display:none;
}

{block:ifFullScreenHeader}{block:HomePage}
#scroll{
    width:40px;
    height:40px;
    margin:-20px auto 0;
    text-align:center;
    position:relative;
    z-index:1;
    display:none;
}

#scroll a{
    display:block;
    text-align:center;
    font-size:16px;
    line-height:0;
}

#scroll a span{
    line-height:40px;
}

#scroll a:before{
    content:"";
    width:100%;
    height:100%;
    background:{color:Navigation Background};
    position:absolute;
    top:0;
    left:0;
    transform:rotate(45deg);
    z-index:-1;
}

.page1 #scroll{
    display:block;
}
{/block:HomePage}{/block:ifFullScreenHeader}

#navigation{
    color:{color:Navigation Text};
    background:{color:Navigation Background};
    text-align:center;
    width:100%;
    line-height:1.2;
    padding:25px 0;
    z-index:9;
}

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

#navigation > ul li{
    display:inline-block;
    margin:0 10px;
    overflow:hidden;
    white-space:nowrap;
    text-transform:uppercase;
    font-size:{text:Navigation Font Size}px;
}

#navigation > ul li a{
    display:block;
    width:100%;
    margin:0 -20px;
    padding:0 20px;
    background-image: linear-gradient(to right, transparent, #fff, transparent);
    background-size: 20px 100%;
    background-clip: text;
    -webkit-background-clip: text;
    background-position: top left;
    background-repeat:no-repeat;
    transition:color 0.4s, background 0.8s 0.4s;
}

#navigation > ul li a:hover{
    background-position: top right;
}

{block:ifDropdownLinksList}
#links{
    padding:0 30px;
    display:none;
}

#links ul{
    padding-top:1em;
    margin-top:1em;
    border-top:2px solid {color:Navigation Inner Border};
}

#links li{
    display:inline-block;
    margin:0 0.5em;
    font-size:1em;
}
{/block:ifDropdownLinksList}

#search{
    width:300px;
    margin:10px auto 0;
    padding:5px 0;
    line-height:0;
    border-bottom:1px solid {color:Navigation Inner Border};
    display:none;
}

#search input[type="text"]{
    width:260px;
    background:transparent;
    border:0;
    color:{color:Navigation Text};
}

#search input[type="submit"]{
    width:30px;
    color:{color:Navigation Link};
    background:transparent;
    border:0;
    font-family: metro;
    font-size:14px;
    vertical-align:top;
    cursor:pointer;
}

#search input:focus{
    outline: none;
}

#content{
    background-color:{color:Content Background};
    background-image: url('{image:Content Background}');
    background-size:{select:Content Background Style};
    background-attachment: fixed;
    padding:10px 30px;
}

#container{
    margin:0 auto;
    max-width:calc({select:Post Size}px{block:ifPostBorder} + 3em{/block:ifPostBorder}{block:ifNotTransparentPost} + 3em{/block:ifNotTransparentPost});
}

.posts{
    position:relative;
    border-bottom:2px solid {color:Post Border};
    margin:{text:Post Spacing}px 0;
    padding-bottom:20px;
}

{block:ifPostBorder}
.border-left{
    width:2px;
    height:100%;
    position:absolute;
    bottom:-2px;
    left:-2px;
    background-image: linear-gradient(to bottom, transparent, {color:Post Border});
}

.border-right{
    width:2px;
    height:100%;
    position:absolute;
    bottom:-2px;
    right:-2px;
    background-image: linear-gradient(to bottom, transparent, {color:Post Border});
}
{/block:ifPostBorder}

.posts .contents{
    max-width:{select:Post Size}px;
    margin:1.5em{block:ifNotPostBorder} auto{/block:ifNotPostBorder};
    {block:ifNotTransparentPost}padding:1.5em;
    background:rgba({RGBcolor:Post Background},{select:Post Opacity});{/block:ifNotTransparentPost}
}

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

.post{
    width:100%;
    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:"";
    display:inline-block;
    vertical-align:middle;
    margin-right:0.5em;
    width:4px;
    height:4px;
    background:{color:Post Inner Border};
    margin-top:-2px;
    transform: rotate(45deg);
}

.post-info{
    {block:IndexPage}text-align:center;
    text-transform:uppercase;
    margin-bottom:1.5em;
    line-height:1;{/block:IndexPage}
    {block:PermalinkPage}clear:both;{/block:PermalinkPage}
}

.diamond-bullet{
    content:"";
    display:inline-block;
    vertical-align:middle;
    margin:-2px 0.5em 0;
    width:4px;
    height:4px;
    background:{color:Post Inner Border};
    transform: rotate(45deg);
}

.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;
    {block:IndexPage}margin-bottom:0.5em;{/block:IndexPage}
    {block:PermalinkPage}margin-bottom:1.5em;{/block:PermalinkPage}
    text-align:center;
    {select:Title Style}
}

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

.read_more{
    display:block;
    border-top:2px solid {color:Post Inner Border};
}

.read_more:before{
    content:"";
    display:block;
    width: 0;
    height: 0;
    margin-left:1em;
    margin-bottom:0.5em;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    border-top: 1em solid {color:Post Inner Border};
}

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

.chat-item{
    margin-bottom:0.75em;
}

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

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

.chat-line{
    position:relative;
    border-top:2px solid {color:Post Inner Border};
    margin-top:10px;
    padding-top:0.5em;
    font-style:italic;
}

.chat-line:after{
    content:"";
    position:absolute;
    width: 0;
    height: 0;
    top:-10px;
    border-bottom: 10px solid {color:Post Inner Border};
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.odd .chat-line:after{
    left:10px;
}

.even .chat-line:after{
    right:10px;
}

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

.quote-text, .ask-content{
    padding-bottom:1em;
}

.source, .ask-name{
    border-top:2px solid {color:Post Inner Border};
    text-align:center;
}

.source:before, .ask-name:before{
    content:"";
    display:block;
    width: 0;
    height: 0;
    margin:0 auto 0.5em;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    border-top: 1em solid {color:Post Inner Border};
}

.answer, .replies{
    margin-top:1.5em;
}

.replies:empty{
    display:none;
}

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

.post.link .description{
    margin-top:1em;
}

.post.audio{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    line-height:1.5;
}

.audio-wrapper{
    width:auto;
    height:8em;
    padding-left:28px;
    margin-right:1.5em;
    border:2px solid {color:Post Inner Border};
    background:#f2f2f2;
    position:relative;
}

.audio-player{
    width:28px;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#f2f2f2;
    opacity:0.7;
    transition:width 0.5s linear;
    overflow:hidden;
}

.audio-wrapper:hover .audio-player{
    width:100%;
}

.player{
    width:100%;
    height:8em;
    position:relative;
    top:4em;
    margin-top:-14px;
    overflow:hidden;
}

.album-art{
    height:8em;
}

.album-art img{
    width:auto;
    height:100%;
}

.audio-caption{
    flex:1;
}

.song{
    font-size:1.5em;
}

.artist{
    margin-top:1em;
    border-top:2px solid {color:Post Inner Border};
}

.artist:before{
    content:"";
    display:block;
    width: 0;
    height: 0;
    margin-left:1em;
    margin-bottom:0.5em;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    border-top: 1em solid {color:Post Inner Border};
}

.caption{
    margin-top:1.5em;
}

.tags.index{
    border-top:2px solid {color:Post Inner Border};
    padding-top:0.75em;
    margin-top:1.5em;
    line-height:1.2;
    text-align:center;
    clear:both;
}

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

.footer{
    padding-top:8px;
    clear:both;
}

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

.footer ul{
    text-align:center;
    position:absolute;
    left:0;
    bottom:-21px;
    width:100%;
    line-height:0;
    z-index:1;
}

.footer li{
    display:inline-block;
    vertical-align:middle;
    width:30px;
    height:30px;
    margin:0 7px;
    text-align:center;
    position:relative;
}

.footer li:before{
    content:"";
    width:100%;
    height:100%;
    background:{color:Post Icons background};
    position:absolute;
    top:0;
    left:0;
    transform:rotate(45deg);
    z-index:-1;
}

.footer li.post-type{
    width:40px;
    height:40px;
}

.footer li a{
    display:block;
    font-size:14px;
    width:100%;
    height:100%;
    color:{color:Post Icons};
}

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

.footer li.post-type a{
    font-size:18px;
}

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

.footer li.post-type a span{
    line-height:40px;
}

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

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

.post-info .item{
    margin-top:0.5em;
}

.post-info .item:first-child{
    margin-top:1.5em;
}

.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:1.5em 0 0;
    padding:0;
    border-top:2px solid {color:Post Inner Border};
}

#notes ol:before{
    content:"";
    display:block;
    width: 0;
    height: 0;
    margin-left:1em;
    margin-bottom:1em;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    border-top: 1em solid {color:Post Inner Border};
}

#notes li{
    margin-top:0.5em;
}

#notes blockquote{
    margin:1em 0;
}

.avatar_frame{
    display:none;
}

.more_notes_link, .notes_loading{
    display:block;
    width:30px;
    height:30px;
    font-size:0;
    margin-left:-15px;
    left:50%;
    bottom:-16px;
    position:absolute;
    z-index:1;
}

.diamond{
    position:absolute;
    bottom:-16px;
    width:30px;
    height:30px;
    margin-left:-15px;
    left:50%;
    background:{color:Post Icons Background};
    transform:rotate(45deg);
}

.more_notes_link:after, .notes_loading:after{
    display:block;
    font-size:14px;
    font-family: metro;
    line-height:30px;
    color:{color:Post Icons};
    transition:color 0.4s, background 0.4s;
}

.more_notes_link:after{
    content: "\ea0a";
}

.notes_loading:after{
    content: "\e979";
}

#footer{
    color:{color:Navigation Text};
    background:{color:Navigation Background};
    text-align:center;
    width:100%;
    padding:15px 0;
    text-transform:uppercase;
    position:relative;
    font-size:{text:Navigation Font Size}px;
    line-height:1.2;
}

.pagination{
    margin:0;
    padding:0;
}

.pagination.index{
    {block:ifInfiniteScroll}display:none;{/block:ifInfiniteScroll}
}

#footer li, #load-more{
    display:inline-block;
    margin:0 10px;
    overflow:hidden;
    white-space:nowrap;
    text-transform:uppercase;
}

#footer a{
    color:{color:Navigation Link};
}

#footer a:hover{
    color:{color:Navigation Link Hover};
}

#footer li a, #load-more a{
    display:block;
    width:100%;
    margin:0 -20px;
    padding:0 20px;
    background-image: linear-gradient(to right, transparent, #fff, transparent);
    background-size: 20px 100%;
    background-clip: text;
    -webkit-background-clip: text;
    background-position: top left;
    background-repeat:no-repeat;
    transition:color 0.4s, background 0.8s 0.4s;
}

#footer li a:hover, #load-more a:hover{
    background-position: top right;
}

#top{
    position:fixed;
    right:20px;
    bottom:20px;
    display:none;
    z-index:9;
}

#top a{
    position:relative;
    display:block;
    width:40px;
    height:40px;
    margin:8px;
    text-align:center;
    font-size:16px;
    line-height:0;
}

#top a span{
    line-height:40px;
}

#top a:before{
    content:"";
    width:100%;
    height:100%;
    background:{color:Navigation Background};
    position:absolute;
    top:0;
    left:0;
    transform:rotate(45deg);
    z-index:-1;
}

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

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

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

.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{block:ifFullScreenHeader}{block:HomePage} class="page{CurrentPage}"{/block:HomePage}{/block:ifFullScreenHeader}>
<div id="canvas">
<div id="header">
<div class="inner">
{block:ifHeaderBorder}
<div class="border-left"></div>
<div class="border-right"></div>
{/block:ifHeaderBorder}
<div id="header-content">
{block:ifHeaderIcon}<div id="header-icon"><div id="icon"><div id="icon-inner"><img src="{image:Header Icon}"></div></div></div>{/block:ifHeaderIcon}
<div class="inner">
{block:Description}<div class="description">{Description}</div>{/block:Description}
<div id="titles-container">
<div class="title">{Title}</div>
{block:ifSubtitle}<div class="subtitle">{text:Subtitle}</div>{/block:ifSubtitle}
</div>
</div>
{block:ifFullScreenHeader}{block:HomePage}<div id="scroll"><a href="#" title="Scroll to posts"><span class="mif-arrow-down"></span></a></div>{/block:HomePage}{/block:ifFullScreenHeader}
</div>
</div>
<div id="navigation">
<ul>
<li><a href="/">{text:Index Title}</a></li>
<li><a href="/archive">{text:Archive Title}</a></li>
{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
{block:ifDropdownLinksList}<li class="menu-title"><a href="#" data-id="links">{text:Links Title}</a></li>{/block:ifDropdownLinksList}
{block:ifNotDropdownLinksList}
{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}
{/block:ifNotDropdownLinksList}
<li class="menu-title"><a href="#" data-id="search">{text:Search Title}</a></li>
<li id="credit"><a href="https://myrtillenne.dreamwidth.org">Theme</a></li>
</ul>
{block:ifDropdownLinksList}<div id="links"><ul>
{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}
</ul></div>{/block:ifDropdownLinksList}
<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>
<div id="content">
<div id="container">
{block:Posts}
<div class="posts" id="{PostID}">
{block:ifPostBorder}<div class="border-left"></div>
<div class="border-right"></div>{/block:ifPostBorder}
<div class="contents">
{block:Text}
<div class="post text">
{block:Title}
<div class="title"><a href="{Permalink}">{Title}</a></div>
{/block:Title}
</div>
{/block:Text}
{block:Chat}
<div class="post chat">
{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
</div>
{/block:Chat}
{block:IndexPage}
<div class="post-info">
{block:Date}<a href="{Permalink}" title="{TimeAgo}">{DayOfMonth} {Month} {Year}</a>{/block:Date}{block:NoteCount}<div class="diamond-bullet"></div><a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}{block:RebloggedFrom}<div class="diamond-bullet"></div><a href="{ReblogParentURL}" title="{ReblogParentName}">Via</a><div class="diamond-bullet"></div>
<a href="{ReblogRootURL}" title="{ReblogRootName}">Source</a>{/block:RebloggedFrom}
</div>
{/block:IndexPage}
{block:Text}
<div class="post text"><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:Lines}
<div class="chat-item {Alt} user_{UserNumber}">
{block:Label}<div class="label">{Label}</div>{/block:Label}
<div class="chat-line">{Line}</div>
</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:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" /></div>{/block:AlbumArt}{block:AudioPlayer}<div class="audio-player"><div class="player">{AudioPlayer}</div></div>{/block:AudioPlayer}</div>
<div class="audio-caption">
{block:TrackName}<div class="song">{TrackName}</div>{/block:TrackName}
{block:Album}<div class="album">{Album}</div>{/block:Album}
{block:Artist}<div class="artist">{Artist}</div>{/block:Artist}
</div>
</div>
{/block:Audio}
{block:Answer}
<div class="post ask">
<div class="question"><div class="ask-content">{Question}</div><div class="ask-name"><span>{Asker}</span></div></div>
{block:Answerer}
<div class="answer"><div class="ask-content">{Answer}</div><div class="ask-name"><span>{Answerer}</span></div> </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:ifShowTags}{block:IndexPage}{block:HasTags}<div class="tags index">{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IndexPage}{/block:ifShowTags}

{block:PermalinkPage}
<div class="post-info">
{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 date">Posted on {DayOfMonth} {Month} {Year} at {24Hour}:{Minutes} ({TimeAgo})</div>{/block:Date}
{block:RebloggedFrom}<div class="item 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="item note-count">Has {NoteCountWithLabel}</div>{/block:NoteCount}
</div>
{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
{/block:PermalinkPage}
</div>

{block:IndexPage}<div class="footer index">
<ul>
<li class="custom-like-button" title="Like">{LikeButton}<a class="like-button-heart"><span class="mif-heart"></span></a></li>
{block:Photo}<li class="post-type"><a href="{Permalink}" title="View post"><span class="mif-image"></span></a></li>{/block:Photo}
{block:Photoset}<li class="post-type"><a href="{Permalink}" title="View post"><span class="mif-images"></span></a></li>{/block:Photoset}
{block:Video}<li class="post-type"><a href="{Permalink}" title="View post"><span class="mif-video-camera"></span></a></li>{/block:Video}
{block:Audio}<li class="post-type"><a href="{Permalink}" title="View post"><span class="mif-music"></span></a></li>{/block:Audio}
{block:Text}<li class="post-type"><a href="{Permalink}" title="View post"><span class="mif-file-text"></span></a></li>{/block:Text}
{block:Link}<li class="post-type"><a href="{Permalink}" title="View post"><span class="mif-link"></span></a></li>{/block:Link}
{block:Chat}<li class="post-type"><a href="{Permalink}" title="View post"><span class="mif-bubbles"></span></a></li>{/block:Chat}
{block:Quote}<li class="post-type"><a href="{Permalink}" title="View post"><span class="mif-quote"></span></a></li>{/block:Quote}
{block:Answer}<li class="post-type"><a href="{Permalink}" title="View post"><span class="mif-mail-read"></span></a></li>{/block:Answer}
{block:Panorama}<li class="post-type"><a href="{Permalink}" title="View post"><span class="mif-camera"></span></a></li>{/block:Panorama}
<li class="reblog-btn"><a href="{ReblogURL}" title="Reblog"><span class="mif-loop2"></span></a></li>
</ul>
</div>{/block:IndexPage}
{block:PermalinkPage}<div class="diamond"></div>{/block:PermalinkPage}
</div>
{/block:Posts}
</div>
</div>
<div id="footer">
{block:Pagination}
<ul class="pagination index">
{block:PreviousPage}<li class="previous"><a href="{PreviousPage}">Previous page</a></li>{/block:PreviousPage}
{block:JumpPagination length="8"}{block:CurrentPage}<li class="current_page"><span>{PageNumber}</span></li>
{/block:CurrentPage}{block:JumpPage}<li class="jump_page"><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}<li class="next"><a href="{NextPage}">Next page</a></li>{/block:NextPage}
</ul>
{block:ifInfiniteScroll}{block:ifManualLoad}<div id="load-more"><a href="#">Load more posts</a></div>{/block:ifManualLoad}{/block:ifInfiniteScroll}
{/block:Pagination}
{block:PermalinkPagination}
<ul class="pagination entry">
{block:NextPost}<li class="previous"><a href="{NextPost}">Previous post</a></li>{/block:NextPost}
{block:PreviousPost}<li class="next"><a href="{PreviousPost}">Next post</a></li>{/block:PreviousPost}
</ul>
{/block:PermalinkPagination}
<div id="top"><a href="#" title="Back to top"><span class="mif-arrow-up"></span></a></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>

RESOURCES

photoset grid by Pixel Union
icon font by Metro UI CSS
custom tooltips by JQuery Foundation
infinite scroll by Paul Irish
images used in previews from Unsplash, Subtlepatterns
sakura script used in second preview by timoschaefer

Tags:

layout,
site:tumblr

rosecarmine

FEATURES

250 - 500px wide posts
1 - 4 columns
page links and 8 extra links
show/hide post info (caption, tags, date, note count) on index page
like and reblog links on index page
about, links, updates sidebar panels
background types: solid colour, pattern, full page image, gradients (horizontal, vertical, diagonal), gradients with transparent image
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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.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:Background Image" content="https://static.tumblr.com/bf54a7756ffefee8c950494ee6e3fec1/vywm3oc/qFLogj3jc/tumblr_static_59384vzqw44cgo808gksg8sog.png">
<meta name="image:Sidebar Image" content="https://static.tumblr.com/6f27a340123099cdc3843c2deeca2e4d/vywm3oc/DT8ogj3lg/tumblr_static_1wfg5vo4q5us0wsokg4cgo00w.jpg">
<meta name="color:Background" content="#862d4f">
<meta name="color:Background Gradient" content="#362d5e">
<meta name="color:Text" content="#36162a">
<meta name="color:Link" content="#b43d93">
<meta name="color:Link Hover" content="#4850aa">
<meta name="color:Navigation Link" content="#c9c2d1">
<meta name="color:Navigation Link Hover" content="#e9d1da">
<meta name="color:Navigation Background" content="#16142c">
<meta name="color:Navigation Background Hover" content="#36162a">
<meta name="color:Sidebar Background" content="#16142c">
<meta name="color:Sidebar Text" content="#c9c2d1">
<meta name="color:Sidebar Link" content="#e9d1da">
<meta name="color:Sidebar Link Hover" content="#c9c2d1">
<meta name="color:Sidebar Link Background" content="#862d4f">
<meta name="color:Sidebar Link Background Hover" content="#362d5e">
<meta name="color:Sidebar Scrollbar" content="#862d4f">
<meta name="color:Post Background" content="#e9d1da">
<meta name="color:Post Background Alt" content="#36162a">
<meta name="color:Post Text Alt" content="#e9d1da">
<meta name="color:Post Link Alt" content="#e9d1da">
<meta name="color:Post Link Hover Alt" content="#e9d1da">
<meta name="color:Post Footer Link" content="#e9d1da">
<meta name="color:Post Footer Link Hover" content="#c9c2d1">
<meta name="color:Post Footer Background" content="#36162a">
<meta name="color:Post Footer Background Hover" content="#16142c">
<meta name="color:Post Scrollbar" content="#b43d93">
<meta name="color:Blockquote Border" content="#b43d93">
<meta name="color:Photoset Background" content="#16142c">
<meta name="color:Photoset Controls" content="#c9c2d1">
<meta name="color:Tooltip Background" content="#16142c">
<meta name="color:Tooltip Text" content="#c9c2d1">
<meta name="text:Sidebar Image Width" content="320">
<meta name="text:Sidebar Image Height" content="430">
<meta name="text:Body Font Size" content="12">
<meta name="text:Title Font Size" content="22">
<meta name="text:Post Title Font Size" content="16">
<meta name="text:Updates Heading Font Size" content="16">
<meta name="text:Post Spacing" content="50">
<meta name="text:Photoset Spacing" content="5">
<meta name="text:Main Google Font" content="">
<meta name="text:Secondary Google Font" content="Almendra SC">
<meta name="text:Sidebar Overlay Opacity" content="1.0">
<meta name="text:Post Info Overlay Opacity" content="1.0">
<meta name="text:Navigation Background Opacity" content="1.0">
<meta name="text:Navigation Background Hover Opacity" content="1.0">
<meta name="text:Sidebar Background Opacity" content="1.0">
<meta name="text:Post Background Opacity" content="1.0">
<meta name="text:Post Background Alt Opacity" content="1.0">
<meta name="text:Post Footer Background Opacity" content="1.0">
<meta name="text:Post Footer Background Hover Opacity" content="1.0">
<meta name="text:About Content" content="">
<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:Updates Section 1 Heading" content="">
<meta name="text:Updates Section 1 Content" content="">
<meta name="text:Updates Section 2 Heading" content="">
<meta name="text:Updates Section 2 Content" content="">
<meta name="text:Updates Section 3 Heading" content="">
<meta name="text:Updates Section 3 Content" content="">
<meta name="text:Updates Section 4 Heading" content="">
<meta name="text:Updates Section 4 Content" content="">
<meta name="select:Background Type" content="bg-color" title="Solid colour">
<meta name="select:Background Type" content="bg-image" title="Image">
<meta name="select:Background Type" content="bg-gradient-vertical" title="Vertical Gradient">
<meta name="select:Background Type" content="bg-gradient-horizontal" title="Horizontal Gradient">
<meta name="select:Background Type" content="bg-gradient-diagonal-left" title="Diagonal Gradient Left">
<meta name="select:Background Type" content="bg-gradient-diagonal-right" title="Diagonal Gradient Right">
<meta name="select:Background Image Type" content="auto" title="Pattern">
<meta name="select:Background Image Type" content="cover" title="Full Page Background">
<meta name="select:Main Font" content="arial, sans-serif" title="Arial">
<meta name="select:Main Font" content="cambria, serif" title="Cambria">
<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="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:Column Number" content="1" title="1 column">
<meta name="select:Column Number" content="2" title="2 columns">
<meta name="select:Column Number" content="3" title="3 columns">
<meta name="select:Column Number" content="4" title="4 columns">
<meta name="select:Text Align" content="left" title="left">
<meta name="select:Text Align" content="justify" title="justify">
<meta name="if:Transparent Background Image" content="0">
<meta name="if:Show Title Separately" content="0">
<meta name="if:Show Description Separately" content="0">
<meta name="if:Show About" content="1">
<meta name="if:Show Updates" content="0">
<meta name="if:Post Info Always Visible" 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-attachment: fixed;
    color:{color:Text};
    margin:0;
}

.bg-color{
    background-color:{color:Background};
    {block:ifTransparentBackgroundImage}background-image:url({image:Background Image});
    background-size:{select:Background Image Type};{/block:ifTransparentBackgroundImage}
}

.bg-image{
    background-color:{color:Background};
    background-image:url({image:Background Image});
    background-size:{select:Background Image Type};
}

.bg-gradient-vertical{
    background-color:{color:Background};
    background-image:{block:ifTransparentBackgroundImage}url({image:Background Image}), {/block:ifTransparentBackgroundImage}linear-gradient({color:Background}, {color:Background Gradient});
    {block:ifTransparentBackgroundImage}background-size:{select:Background Image Type};{/block:ifTransparentBackgroundImage}
}

.bg-gradient-horizontal{
    background-color:{color:Background};
    background-image:{block:ifTransparentBackgroundImage}url({image:Background Image}), {/block:ifTransparentBackgroundImage}linear-gradient(to right, {color:Background}, {color:Background Gradient});
    {block:ifTransparentBackgroundImage}background-size:{select:Background Image Type};{/block:ifTransparentBackgroundImage}
}

.bg-gradient-diagonal-left{
    background-color:{color:Background};
    background-image:{block:ifTransparentBackgroundImage}url({image:Background Image}), {/block:ifTransparentBackgroundImage}radial-gradient(circle at bottom right, {color:Background}, {color:Background Gradient});
    {block:ifTransparentBackgroundImage}background-size:{select:Background Image Type};{/block:ifTransparentBackgroundImage}
}

.bg-gradient-diagonal-right{
    background-color:{color:Background};
    background-image:{block:ifTransparentBackgroundImage}url({image:Background Image}), {/block:ifTransparentBackgroundImage}radial-gradient(circle at bottom left, {color:Background}, {color:Background Gradient});
    {block:ifTransparentBackgroundImage}background-size:{select:Background Image Type};{/block:ifTransparentBackgroundImage}
}

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

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

::-webkit-scrollbar-thumb {
    background: {color:Navigation Background};
}

::-webkit-scrollbar-corner {
    background: {color:Background};
}

.panel::-webkit-scrollbar-track {
    background: {color:Sidebar Background};
    background:rgba({RGBcolor:Sidebar Background},{text:Sidebar Overlay Opacity});
}

.panel::-webkit-scrollbar-thumb {
    background: {color:Sidebar Scrollbar};
}

.panel::-webkit-scrollbar-corner {
    background: {color:Sidebar Background};
    background:rgba({RGBcolor:Sidebar Background},{text:Sidebar Overlay Opacity});
}

.post-info::-webkit-scrollbar-track {
    background: {color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Info Overlay Opacity});
}

.post-info::-webkit-scrollbar-thumb {
    background: {color:Post Scrollbar};
}

.post-info::-webkit-scrollbar-corner {
    background: {color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Info Overlay Opacity});
}

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:Blockquote 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;
}

.fa-home, .fa-bolt, .fa-pencil, .fa-music{
    font-size:16px;
}

#canvas{
    padding:0 {text:Post Spacing}px;
}

#canvas .inner{
    margin:0 auto;
    {block:IndexPage}max-width:calc({text:Sidebar Image Width}px + ({select:Post Size}px + {text:Post Spacing}px) * {select:Column Number});
{/block:IndexPage}
    {block:PermalinkPage}
    width:calc({text:Sidebar Image Width}px + 500px + {text:Post Spacing}px);{/block:PermalinkPage}
}

.columns1 #canvas .inner{
    width:calc({text:Sidebar Image Width}px + {select:Post Size}px + {text:Post Spacing}px);
}

#sidebar{
    position:fixed;
    top:0;
    display:table;
    width:{text:Sidebar Image Width}px;
    height:100%;
    color:{color:Sidebar Text};
}

#sidebar .inner{
    display:table-cell;
    vertical-align:middle;
}

#navigation{
    width:{text:Sidebar Image Width}px;
    margin-bottom:5px;
}

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

#navigation li{
    list-style:none;
    width:30px;
    height:30px;
    background:{color:Navigation Background};
    background:rgba({RGBcolor:Navigation Background},{text:Navigation Background Opacity});
    margin-left:5px;
    transition: background 0.4s;
}

#navigation li:not(.block):hover{
    background:{color:Navigation Background Hover};
    background:rgba({RGBcolor:Navigation Background Hover},{text:Navigation Background Hover Opacity});
}

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

#navigation li a:hover{
    color:{color:Navigation Link Hover};
}

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

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

#navigation li.active a.show-tab{
    display:none;
}

#navigation li.active a.hide-tab{
    display:block;
}

#sidebar li.block1{
    flex:1;
    margin-left:0;
}

#sidebar li.block2{
    width:10px;
}

#menu{
    position:relative;
    width:{text:Sidebar Image Width}px;
}

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

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

#sidebar-image{
    width:{text:Sidebar Image Width}px;
    height:{text:Sidebar Image Height}px;
    background-image:url({image:Sidebar Image});
    background-size:cover;
}

#sidebar 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 0 20px;
    font-weight:normal;
    {block:ifShowTitleSeparately}
    margin: 5px 0 0;
    padding:20px;
    background:{color:Sidebar Background};
    background:rgba({RGBcolor:Sidebar Background},{text:Sidebar Background Opacity});
    text-align:right;
    {/block:ifShowTitleSeparately}
}

#sidebar .description{
    font-style:italic;
    {block:ifShowDescriptionSeparately}
    margin-top:5px;
    padding:20px;
    background:{color:Sidebar Background};
    background:rgba({RGBcolor:Sidebar Background},{text:Sidebar Background Opacity});
    font-style:normal;
    {/block:ifShowDescriptionSeparately}
}

.panel{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:{color:Sidebar Background};
    background:rgba({RGBcolor:Sidebar Background},{text:Sidebar Overlay Opacity});
    overflow:auto;
    display:none;
}

.panel.active{
    display:block;
}

.panel .outer{
    display:table;
    width:100%;
    height:100%;
}

.panel .box{
    display:table-cell;
    vertical-align:middle;
    padding:20px;
}

#poster-avatar{
    float:left;
    margin-right:1em;
}

.panel.about p{
    {block:ifNotShowTitleSeparately}margin-top:20px;{/block:ifNotShowTitleSeparately}
    {block:ifNotShowDescriptionSeparately}margin-top:20px;{/block:ifNotShowDescriptionSeparately}
}

h1#title:empty, .panel.about p:empty{
    display:none;
}

.links ul{
    margin:0;
    padding:0;
}

.links li{
    list-style:none;
    width:90%;
    margin:0 auto 5px;
    line-height:1.5;
}

.links li a{
    display:block;
    padding:0.5em 0.75em;
    background:{color:Sidebar Link Background};
}

.links li a:hover{
    background:{color:Sidebar Link Background Hover};
}

#search{
    text-align:center;
}

#search input[type="text"]{
    border:0;
    background:{color:Sidebar Link Background};
    font-size:1em;
    font-family:{block:ifMainGoogleFont}{text:Main Google Font}, {/block:ifMainGoogleFont}{select:Main Font};
    padding:0.5em 0.75em;
    height:2.5em;
    color:{color:Sidebar Link};
    width:calc(90% - 2.5em - 5px);
    margin-right:5px;
    box-sizing:border-box;
}

#search input[type="submit"]{
    border:0;
    background:{color:Sidebar Link Background};
    font-family: FontAwesome;
    font-size:1em;
    padding:0.5em;
    vertical-align:top;
    width:2.5em;
    height:2.5em;
    line-height:0;
    color:{color:Sidebar Link};
    cursor:pointer;
}

#search input:focus{
    outline: none;
}

.panel.updates h3:first-child{
    margin-top:0;
}

.panel.updates h3{
    font-size:{text:Updates Heading Font Size}px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-weight:normal;
}

.pagination{
    width:{text:Sidebar Image Width}px;
    margin-top:5px;
    display:flex;
}

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

.item, .pagination li{
    width:30px;
    height:30px;
    background:{color:Navigation Background};
    background:rgba({RGBcolor:Navigation Background},{text:Navigation Background Opacity});
    margin-left:5px;
    transition:background 0.4s;
}

.pagination li{
    float:left;
}

.item:not(.block):hover, .pagination li:hover{
    background:{color:Navigation Background Hover};
    background:rgba({RGBcolor:Navigation Background Hover},{text:Navigation Background Hover Opacity});
}

.pagination .block1{
    flex:1;
    margin-left:0;
}

.pagination .block2{
    width:10px;
}

.pagination .item a, .pagination li a{
    display:block;
    text-align:center;
    color:{color:Navigation Link};
    font-size:14px;
    width:30px;
    height:30px;
    line-height:0;
    position:relative;
}

.pagination .item a:hover, .pagination li a:hover{
    color:{color:Navigation Link Hover};
}

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

.pagination a i{
    line-height:30px;
}

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

#content{
    margin-left:{text:Sidebar Image Width}px;
    margin-top:{text:Post Spacing}px;
    position:relative;
    z-index:2;
}

.posts{
    float:left;
    width:{select:Post Size}px;
    margin-left:{text:Post Spacing}px;
    margin-bottom:{text:Post Spacing}px;
    {block:PermalinkPage}width:500px;{/block:PermalinkPage}
}

.columns1 .posts{
    width:{select:Post Size}px;
}

.posts .contents{
    position:relative;
    width:100%;
}

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

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

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

.title-container{
    padding:1em 20px;
    margin-bottom:5px;
    background:{color:Post Background Alt};
    background:rgba({RGBcolor:Post Background Alt},{text:Post Background Alt Opacity});
}

.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;
    font-weight:normal;
    margin:0;
}

.post h3.title a{
    color:{color:Post Link Alt};
}

.post h3.title a:hover{
    color:{color:Post Link Hover Alt};
}

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

.text-body{
    padding:20px;
    background:{color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Background Opacity});
}

.post.photo{
    background:{color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Background Opacity});
}

.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-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Post Title Font Size}px;
    line-height:1.2;
    padding:20px;
    margin-bottom:5px;
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    background:rgba({RGBcolor:Post Background Alt},{text:Post Background Alt Opacity});
}

.source{
    text-align:center;
    background:{color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Background Opacity});
    padding:1em 20px;
}

.question, .answer{
    position:relative;
}

.ask-avatar{
    position:absolute;
    left:0;
    top:0;
    width:40px;
    height:40px;
    border-left:10px solid {color:Post Background Alt};
    border-left:10px solid rgba({RGBcolor:Post Background Alt},{text:Post Background Alt Opacity});
    padding-left:5px;
}

.asker-avatar img, .answerer-avatar img{
    display:block;
}

.ask-name{
    display:flex;
    align-items:center;
    min-height:40px;
    margin-left:60px;
    padding:0 10px;
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    background:rgba({RGBcolor:Post Background Alt},{text:Post Background Alt Opacity});
}

.ask-name a{
    color:{color:Post Link Alt};
}

.ask-name a:hover{
    color:{color:Post Link Hover Alt};
}

.ask-content{
    padding:20px;
    margin:5px 0;
    background:{color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Background Opacity});
}

.replies{
    padding:20px;
    background:{color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Background Opacity});
}

.replies:empty{
    display:none;
}

.chat-line{
    margin:0 0 5px;
    padding:1em 20px;
    background:{color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Background Opacity});
}

.chat .chat-line.even{
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    background:rgba({RGBcolor:Post Background Alt},{text:Post Background Alt Opacity});
}

.chat span{
    font-weight:bold;
}

.link .link-container{
    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;
    padding:20px;
    margin-bottom:5px;
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    background:rgba({RGBcolor:Post Background Alt},{text:Post Background Alt Opacity});
}

.link-container a{
    color:{color:Post Link Alt};
}

.link-container a:hover{
    color:{color:Post Link Hover Alt};
}

.link .description{
    background:{color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Background Opacity});
    padding:20px;
    margin-top:5px;
}

.audio-wrapper{
    border-left:10px solid {color:Post Background Alt};
    border-left:10px solid rgba({RGBcolor:Post Background Alt},{text:Post Background Alt Opacity});
    overflow:hidden;
    margin-bottom:5px;
    display:flex;
}

.album-art{
    width:60px;
    height:60px;
    margin-left:5px;
}

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

.plays{
    flex:1;
    display:flex;
    align-items:center;
    min-height:60px;
    margin-left:5px;
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    background:rgba({RGBcolor:Post Background Alt},{text:Post Background Alt Opacity});
}

.plays span{
    padding:0 20px;
    text-transform:uppercase;
}

.audio-player{
    margin-left:5px;
    width:60px;
    height:60px;
    background:rgba({RGBcolor:Post Background Alt},{text:Post Background Alt Opacity});
}

.player{
    width:32px;
    height:28px;
    margin:16px 14px;
    overflow:hidden;
}

.audio-caption{
    text-align:center;
    padding:20px;
    background:{color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Background Opacity});
}

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

.post-info{
    background:{color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Background Opacity});
    {block:ifPostInfoAlwaysVisible}margin-top:5px;{/block:ifPostInfoAlwaysVisible}
    {block:ifNotPostInfoAlwaysVisible}width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:rgba({RGBcolor:Post Background},{text:Post Info Overlay Opacity});
    overflow:auto;
    display:none;{/block:ifNotPostInfoAlwaysVisible}
}

.post-info .outer{
    display:table;
    width:100%;
    height:100%;
}

.post-info .box{
    display:table-cell;
    vertical-align:bottom;
}

.caption{
    {block:IndexPage}margin:20px;{/block:IndexPage}
    {block:PermalinkPage}
    padding:20px;
    background:{color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Background Opacity});
    {/block:PermalinkPage}
}

.tags.index{
    margin:20px;
}

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

.post-info .datenotes{
    margin:20px;
    text-transform:uppercase;
    line-height:1;
}

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

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

.footer.index{
    height:30px;
}

.footer.index ul{
    display:flex;
}

.footer.index li{
    width:30px;
    height:30px;
    margin-right:5px;
    text-align:center;
    background:{color:Post Footer Background};
    background:rgba({RGBcolor:Post Footer Background},{text:Post Footer Background Opacity});
    position:relative;
    transition:background 0.4s;
}

.footer.index li:not(.block):hover{
    background:{color:Post Footer Background Hover};
    background:rgba({RGBcolor:Post Footer Background Hover},{text:Post Footer Background Hover Opacity});
}

.footer li.block2{
    width:10px;
}

.footer li.block1{
    flex:1;
    margin-right:0;
}

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

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

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

.footer.index .show-info a{
    display:none;
}

.footer.index .show-info a.active{
    display:block;
}

.footer.entry > ul > li{
    line-height:30px;
    background:{color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Background Opacity});
    margin:5px 0 5px 35px;
    padding:0 10px;
}

.footer.entry > ul > li:before{
    display:block;
    float:left;
    width:30px;
    height:30px;
    margin-left:-45px;
    font-size:14px;
    font-family: FontAwesome;
    color:{color:Post Footer Link};
    background:{color:Post Footer Background};
    background:rgba({RGBcolor:Post Footer Background},{text:Post Footer Background Opacity});
    text-align:center;
}

.footer.entry > ul > li.tags:before{
    content: "\f02c";
}

.footer.entry > ul > li.date:before{
    content: "\f133";
}

.footer.entry > ul > li.reblog:before{
    content: "\f021";
}

.footer.entry > ul > li.post-source:before{
    content: "\f040";
}

.footer.entry > ul > li.note-count:before{
    content: "\f005";
}

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

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

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

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

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

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

#notes li{
    margin:5px 0 5px 35px;
    background:{color:Post Background};
    background:rgba({RGBcolor:Post Background},{text:Post Background Opacity});
}

li.note{
    padding:0 10px;
    line-height:30px;
}

#notes .avatar{
    float:left;
    width:30px;
    height:30px;
    margin-left:-45px;
}

#notes li.more_notes_link_container{
    text-align:left!important;
}

.more_notes_link:before, .notes_loading:before{
    display:block;
    float:left;
    width:30px;
    height:30px;
    margin-left:-45px;
    font-size:14px;
    font-family: FontAwesome;
    color:{color:Post Footer Link};
    background:{color:Post Footer Background};
    background:rgba({RGBcolor:Post Footer Background},{text:Post Footer Background Opacity});
    text-align:center;
    transition:color 0.4s, background 0.4s;
}

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

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

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

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

.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: 11px;
    line-height: 16px;
    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: verdana, sans-serif;
    padding: 5px 9px;
    z-index:9999;
    border:0;
    border-radius:0;
}

{CustomCSS}
</style>
</head>

<body class="content{select:Post Size} columns{select:Column Number} {select:Background Type}">
<div id="canvas">
<div class="inner">
<div id="sidebar">
<div class="inner">
<div id="navigation">
<ul>
<li class="block block1"></li>
<li><a href="/" title="Index"><i class="fa fa-home"></i></a></li>
<li><a href="/archive" title="Archive"><i class="fa fa-folder-open"></i></a></li>
{block:AskEnabled}<li><a href="/ask" title="{AskLabel}"><i class="fa fa-envelope"></i></a></li>{/block:AskEnabled}
{block:ifShowAbout}<li><a href="#" class="nav show-tab" data-id="about" title="About"><i class="fa fa-vcard"></i></a><a href="#" class="nav hide-tab" title="Close"><i class="fa fa-remove"></i></a></li>{/block:ifShowAbout}
<li><a href="#" class="nav show-tab" data-id="links" title="Navigation"><i class="fa fa-navicon"></i></a><a href="#" class="nav hide-tab" title="Close"><i class="fa fa-remove"></i></a></li>
{block:ifShowUpdates}<li><a href="#" class="nav show-tab" data-id="updates" title="Updates"><i class="fa fa-bolt"></i></a><a href="#" class="nav hide-tab" title="Close"><i class="fa fa-remove"></i></a></li>{/block:ifShowUpdates}
<li id="credit"><a href="http://myrtillenne.dreamwidth.org" title="Theme"><i class="fa fa-paint-brush"></i></a></li>
<li class="block block2"></li>
</ul>
</div>
<div id="menu">
<div id="sidebar-image"></div>
{block:ifShowTitleSeparately}<h1 class="title">{Title}</h1>{/block:ifShowTitleSeparately}
{block:ifShowDescriptionSeparately}{block:Description}<div class="description">{Description}</div>{/block:Description}{/block:ifShowDescriptionSeparately}
{block:ifShowAbout}
<div class="panel about">
<div class="outer">
<div class="box">
{block:ifNotShowTitleSeparately}<h1 class="title">{Title}</h1>{/block:ifNotShowTitleSeparately}
<div id="poster-avatar"><img src="{PortraitURL-64}" /></div>
{block:ifNotShowDescriptionSeparately}{block:Description}<div class="description">{Description}</div>{/block:Description}{/block:ifNotShowDescriptionSeparately}
<p>{text:About Content}</p>
</div>
</div>
</div>
{/block:ifShowAbout}
<div class="panel links">
<div class="outer">
<div class="box">
<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}
</ul>
<div id="search"><form name="search" action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="Search"/><input type="submit" value=""/>
</form></div>
</div>
</div>
</div>
{block:ifShowUpdates}
<div class="panel updates">
<div class="outer">
<div class="box">
{block:ifUpdatesSection1Heading}<h3>{text:Updates Section 1 Heading}</h3>{/block:ifUpdatesSection1Heading}
{block:ifUpdatesSection1Content}<p>{text:Updates Section 1 Content}</p>{/block:ifUpdatesSection1Content}
{block:ifUpdatesSection2Heading}<h3>{text:Updates Section 2 Heading}</h3>{/block:ifUpdatesSection2Heading}
{block:ifUpdatesSection2Content}<p>{text:Updates Section 2 Content}</p>{/block:ifUpdatesSection2Content}
{block:ifUpdatesSection3Heading}<h3>{text:Updates Section 3 Heading}</h3>{/block:ifUpdatesSection3Heading}
{block:ifUpdatesSection3Content}<p>{text:Updates Section 3 Content}</p>{/block:ifUpdatesSection3Content}
{block:ifUpdatesSection4Heading}<h3>{text:Updates Section 4 Heading}</h3>{/block:ifUpdatesSection4Heading}
{block:ifUpdatesSection4Content}<p>{text:Updates Section 4 Content}</p>{/block:ifUpdatesSection4Content}
</div>
</div>
</div>
{/block:ifShowUpdates}
</div>
<div class="pagination">
<div class="item block block1"></div>
{block:Pagination}
<ul>
<li class="previous"><a{block:PreviousPage} href="{PreviousPage}" class="active" title="Previous page"{/block:PreviousPage}><i class="fa fa-arrow-left"></i>
</a></li>
<li class="next"><a{block:NextPage} href="{NextPage}" class="active" title="Next page"{/block:NextPage}><i class="fa fa-arrow-right"></i>
</a></li>
</ul>
{block:ifInfiniteScroll}{block:ifManualLoad}<div class="item load-more"><a href="#" class="active" title="Load more posts"><i class="fa fa-arrow-down"></i></a></div>{/block:ifManualLoad}{/block:ifInfiniteScroll}
{/block:Pagination}
{block:PermalinkPagination}
<ul>
<li class="next"><a{block:NextPost} href="{NextPost}" class="active" title="Previous post"{/block:NextPost}><i class="fa fa-arrow-left"></i></a></li>
<li class="previous"><a{block:PreviousPost} href="{PreviousPost}" class="active" title="Next post"{/block:PreviousPost}><i class="fa fa-arrow-right"></i></a></li>
</ul>
{/block:PermalinkPagination}
<div class="item top"><a href="#"><i class="fa fa-arrow-up"></i></a></div>
<div class="item block block2"></div>
</div>
</div>
</div>
<div id="content">
{block:Posts}
<div class="posts" id="{PostID}">
<div class="contents">
{block:Text}
<div class="post text">
{block:Title}
<div class="title-container"><h3 class="title"><a href="{Permalink}">{Title}</a></h3></div>
{/block:Title}<div class="text-body">{Body}</div>
</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-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" 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-container"><h3 class="title"><a href="{Permalink}">{Title}</a></h3></div>
{/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-wrapper">{block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" /></div>{/block:AlbumArt}{block:AudioPlayer}<div class="audio-player"><div class="player">{AudioPlayer}</div></div>{/block:AudioPlayer}<div class="plays">{block:PlayCount}<span>{PlayCountWithLabel}</span>{/block:PlayCount}</div></div>
<div class="audio-caption">
{block:TrackName}<span class="song">{TrackName}</span>{/block:TrackName}
{block:Artist}<span class="artist">{Artist}</span>{/block:Artist}
{block:Album}<span class="album"> - {Album}</span>{/block:Album}
</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-name"><span>{Asker} asked: </span></div><div class="ask-content">{Question}</div></div>
{block:Answerer}
<div class="answer"><div class="ask-avatar"><img src="{AnswererPortraitURL-40}" /></div><div class="ask-name"><span>{Answerer} answered:</span></div> <div class="ask-content">{Answer}</div></div>
{/block:Answerer}
<div class="replies">{Replies}</div>
</div>
{/block:Answer}

{block:IndexPage}
<div class="post-info"><div class="outer"><div class="box">{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:HasTags}<div class="tags index">{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}
<div class="datenotes">
{block:Date}Posted on <a href="{Permalink}">{DayOfMonth} {Month} {Year}</a>{/block:Date}{block:NoteCount} - <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}
</div>
</div></div>
</div>
{/block:IndexPage}
</div>

{block:IndexPage}<div class="footer index">
<ul>
<li class="block block2"></li>
{block:Photo}<li><a href="{Permalink}" title="View post"><i class="fa fa-image"></i></a></li>{/block:Photo}
{block:Photoset}<li><a href="{Permalink}" title="View post"><i class="fa fa-object-ungroup"></i></a></li>{/block:Photoset}
{block:Video}<li><a href="{Permalink}" title="View post"><i class="fa fa-video-camera"></i></a></li>{/block:Video}
{block:Audio}<li><a href="{Permalink}" title="View post"><i class="fa fa-music"></i></a></li>{/block:Audio}
{block:Text}<li><a href="{Permalink}" title="View post"><i class="fa fa-pencil"></i></a></li>{/block:Text}
{block:Link}<li><a href="{Permalink}" title="View post"><i class="fa fa-link"></i></a></li>{/block:Link}
{block:Chat}<li><a href="{Permalink}" title="View post"><i class="fa fa-comments"></i></a></li>{/block:Chat}
{block:Quote}<li><a href="{Permalink}" title="View post"><i class="fa fa-quote-left"></i></a></li>{/block:Quote}
{block:Answer}<li><a href="{Permalink}" title="View post"><i class="fa fa-envelope-open"></i></a></li>{/block:Answer}
{block:Panorama}<li><a href="{Permalink}" title="View post"><i class="fa fa-camera"></i></a></li>{/block:Panorama}
{block:ifNotPostInfoAlwaysVisible}<li class="show-info"><a href="#" class="show active" title="View post info"><i class="fa fa-file-text"></i></a><a href="#" class="hide" title="Close"><i class="fa fa-remove"></i></a></li>{/block:ifNotPostInfoAlwaysVisible}
<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>
{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}
<li class="block block1"></li>
</ul>
</div>{/block:IndexPage}
{block:PermalinkPage}<div class="footer entry">
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
<ul>
{block:HasTags}<li class="tags"><ul>{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}</ul></li>{/block:HasTags}
{block:Date}<li class="date">{DayOfMonth} {Month} {Year} ({TimeAgo})</li>{/block:Date}
{block:RebloggedFrom}<li class="reblog"><a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a></li>
<li class="post-source"><a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a></li>{/block:RebloggedFrom}
{block:NoteCount}<li class="note-count">{NoteCountWithLabel}</li>{/block:NoteCount}
</ul>
</div>{/block:PermalinkPage}
{block:PostNotes}<div id="notes">{PostNotes-64}</div>{/block:PostNotes}
</div>
{/block:Posts}
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>

$(function(){
    
    var parentLi;
    
    $('#navigation ul').on('click', 'li a.nav', function(e){
        e.preventDefault();
        parentLi = $(this).parent('li');
        parentLi.toggleClass('active');
        if ($('.panel.active').length){
            $('.panel.active').fadeOut(function(){
                $(this).removeClass('active');
            });
            parentLi.siblings('li').removeClass('active');
        }
        var panelToShow = $(this).attr('data-id');
        $('.' + panelToShow).fadeIn(function(){
            $(this).addClass('active');
        });
    });
    
    $('.photo-slideshow').pxuPhotoset({
        highRes: false,
        lightbox: false,
        rounded: false,
        gutter: '0px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
   });
    
    function resizeIframe(){
        if ({select:Post Size} < 500){
            var newSize = $('.posts').width();
            var width = $(this).width();
            var height = $(this).height();
            var ratio = newSize / width;
            var 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(){
        var newSize = $(this).closest('.tmblr-embed').width();
        var width = $(this).width();
        var height = $(this).height();
        var ratio = newSize / width;
        var newHeight = Math.floor(height * ratio);
        $(this).attr({'width': newSize, 'height' : newHeight});
    }
    
    $('.video iframe').each(resizeIframe);
    $('.tmblr-embed iframe').each(resizeEmbed);
    
    var container = $('#content');
    var colNo = {select:Column Number};
    
    function contentGrid(){
        if (colNo > 1){
        container.imagesLoaded(function(){
            container.masonry({
                itemSelector : '.posts'
            });
        });
        }
    }
        
    {block:IndexPage}
    contentGrid();

$(window).on('resize', function(){
        contentGrid();
    });

{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(){ $('.load-more a').attr('title', '').removeClass('active');}{/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(resizeIframe);
        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:transparent!important;color:{color:Post Text Alt}!important;}</style>'));
        });
        newElems.css({ opacity: 0 });
        newElems.imagesLoaded(function(){
            newElems.animate({ opacity: 1 });
            if (colNo > 1){
                container.masonry( 'appended', newElems, true );
            }
        });
        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}
    
    $('.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><div class="arrow-left"><i class="fa fa-arrow-left"></i></div><div class="arrow-right"><i class="fa fa-arrow-right"></i></div><img id="mainImage" /></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', '#lightboxbg', function() {
        $('#lightbox').fadeOut(function() {
            $('#lightbox').remove();
        });
        imagesURLs = [];
    });
    
    var $top = $('.top a');
    
    var $window = $(window);
    
    $window.scroll(function(){
        if ($(this).scrollTop() > $(this).height()) {
            $top.addClass('active').attr('title', 'Back to top');
        } else {
            $top.removeClass('active').attr('title', '');
        }
    });
    
    $top.click(function(e){
        e.preventDefault();
        if ($window.scrollTop() > $window.height()) {
            $('html, body').animate({scrollTop : 0},600);
        }
    });
    
    $('[title], #content, #notes, .top').tooltip({ 
        track: true,
        show: {delay:100, duration: 500},
        tooltipClass: "custom-tooltip",
        position: { my: "left+15 top+15" }
    });
    
    $('body').on('click', '.show-info a', function(e){
        e.preventDefault();
        $(this).parent().find('a').toggleClass('active');
        $(this).closest('.posts').find('.post-info').fadeToggle();
    });
    
    $('iframe.tumblr_audio_player').load(function(){
        $(this).contents().find('head').append($('<style "type=text/css">.audio-player{background:transparent!important;color:{color:Post Text Alt}!important;}</style>'));
    });
    
});
    
</script>
</body>
</html>

RESOURCES

photoset grid by Pixel Union
icon font by Dave Gandy
custom tooltips by JQuery Foundation
audio player tutorial by Roxie
masonry and images loaded by David DeSandro
infinite scroll by Paul Irish

Tags:

layout,
site:tumblr

rosecarmine

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

.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

Tags:

layout,
site:tumblr

Welcome!

Hello and welcome to my design journal containing free custom layouts made by me, rosecarmine.

Thank you for visiting and I hope you enjoy using my layouts.

Terms of use

Credit me on your journal or profile page.
Do not use my codes as bases.

Layouts

Resources

Backgrounds

Mini icons

Journal layouts

Entries tagged with site:tumblr

Brittle

Crossroad ver. 2

Gallery

Double

Painting

Diamond

Switch

Marbles ver. 2

Welcome!

Terms of use

Layouts

Links

Resources