myrtillenne | Diamond

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

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

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

.arrow-left{
    left:50%;
}

.arrow-right{
    right:50%;
}

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

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

{CustomCSS}
</style>
</head>

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

$(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
infinite scroll by Paul Irish
images used in previews from Unsplash, Subtlepatterns
sakura script used in second preview by timoschaefer

Flat | Top-Level Comments Only

Hi, I added the .css and .js files to my tumblr assets, but I'm struggling to get them actually working once I paste in the code.

Would you be willing to share the code for the pink preview, with the petal part included? I know I need to add the assets myself, but seeing an example of how the code's done would really help.

Love your theme! Thanks.

Hello!

I don't have a separate code for the pink version but I have added the petal script to the default theme here: https://pastebin.com/UZB8JdUU

Diamond

Trying to get petals working

Re: Trying to get petals working