myrtillenne

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

#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%);
    -webkit-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 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

Flat | Top-Level Comments Only

From: (Anonymous)

Hi. I’ve been using some of your Tumblr themes for awhile now. If you don’t mind, could you share the hex color codes you used in the second screenshot? Love how it looks. Thank you. ☺️

From:

rosecarmine

Hi! Thank you :)

#A5D1DA

#F4D8D7

#888888

#E5788D

#F3E5E5

#E0EEEE

#FFFFFF

Journal layouts

Switch

Switch

no subject

no subject

Welcome!

Terms of use