myrtillenne | Crossroad ver. 2

FEATURES

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

CODE

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:ifMainGoogleFont}<link href="https://fonts.googleapis.com/css?family={text:Main Google Font}" rel="stylesheet" type="text/css">{/block:ifMainGoogleFont}
{block:ifSecondaryGoogleFont}<link href="https://fonts.googleapis.com/css?family={text:Secondary Google Font}" rel="stylesheet" type="text/css">{/block:ifSecondaryGoogleFont}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metro/3.0.17/css/metro-icons.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="https://static.tumblr.com/vywm3oc/SKaog4f6h/style.css" rel="stylesheet" type="text/css">
{block:Description}
<meta name="description" content="{MetaDescription}">
{/block:Description}
<meta name="image:Header Image" content="https://static.tumblr.com/27cfdf2a28b55fbba8b1995ea7dd02e7/edqql3l/2mPorhi5f/tumblr_static_dbbbpk529gggk8gsw88ocg0wk.jpg">
<meta name="image:Header Icon" content="https://static.tumblr.com/b08dec5807fbc26753673603d5b2e0c4/edqql3l/3Ctorhiyw/tumblr_static_1o9o4p0gas4gk4cg8cw44wwgk.jpg">
<meta name="color:Background" content="#edf4f7">
<meta name="color:Text" content="#576d75">
<meta name="color:Link" content="#21b3e2">
<meta name="color:Link Hover" content="#528396">
<meta name="color:Title" content="#ffffff">
<meta name="color:Header Background" content="#addae9">
<meta name="color:Header Border" content="#8ecde1">
<meta name="color:Sidebar Background" content="#bce1ed">
<meta name="color:Sidebar Border" content="#addae9">
<meta name="color:Sidebar Text" content="#528396">
<meta name="color:Sidebar Link" content="#ffffff">
<meta name="color:Sidebar Link Hover" content="#21b3e2">
<meta name="color:Navigation Link" content="#ffffff">
<meta name="color:Navigation Link Hover" content="#21b3e2">
<meta name="color:Navigation Link Background" content="#addae9">
<meta name="color:Navigation Link Background Hover" content="#edf4f7">
<meta name="color:Navigation Link Border" content="#edf4f7">
<meta name="color:Pagination Link" content="#ffffff">
<meta name="color:Pagination Background" content="#addae9">
<meta name="color:Post Background" content="#ffffff">
<meta name="color:Post Border" content="#addae9">
<meta name="color:Post Inner Border" content="#bce1ed">
<meta name="color:Post Icons" content="#ffffff">
<meta name="color:Post Icons Background" content="#addae9">
<meta name="color:Post Info Link" content="#21b3e2">
<meta name="color:Post Info Link Hover" content="#ffffff">
<meta name="color:Post Info Link Background" content="#ffffff">
<meta name="color:Post Info Link Background Hover" content="#addae9">
<meta name="color:Post Info Link Border" content="#addae9">
<meta name="color:Photoset Background" content="#ffffff">
<meta name="color:Photoset Controls" content="#576d75">
<meta name="color:Tooltip Background" content="#ffffff">
<meta name="color:Tooltip Text" content="#576d75">
<meta name="color:Scrollbar" content="#8ecde1">
<meta name="color:Scrollbar Track" content="#edf4f7">
<meta name="color:Description Scrollbar" content="#edf4f7">
<meta name="color:Description Scrollbar Track" content="#addae9">
<meta name="text:Header Width add units" content="100%">
<meta name="text:Body Font Size" content="13">
<meta name="text:Title Font Size" content="16">
<meta name="text:Post Title Font Size" content="16">
<meta name="text:Post Spacing" content="50">
<meta name="text:Photoset Spacing" content="2">
<meta name="text:Main Google Font" content="">
<meta name="text:Secondary Google Font" content="Asul">
<meta name="text:Link 1 Title" content="">
<meta name="text:Link 1 URL" content="http://">
<meta name="text:Link 2 Title" content="">
<meta name="text:Link 2 URL" content="http://">
<meta name="text:Link 3 Title" content="">
<meta name="text:Link 3 URL" content="http://">
<meta name="text:Link 4 Title" content="">
<meta name="text:Link 4 URL" content="http://">
<meta name="text:Link 5 Title" content="">
<meta name="text:Link 5 URL" content="http://">
<meta name="text:Link 6 Title" content="">
<meta name="text:Link 6 URL" content="http://">
<meta name="text:Link 7 Title" content="">
<meta name="text:Link 7 URL" content="http://">
<meta name="text:Link 8 Title" content="">
<meta name="text:Link 8 URL" content="http://">
<meta name="select:Header Image Style" content="cover" title="cover">
<meta name="select:Header Image Style" content="auto" title="repeat">
<meta name="select:Main Font" content="arial, sans-serif" title="Arial">
<meta name="select:Main Font" content="georgia, serif" title="Georgia">
<meta name="select:Main Font" content="Palatino, 'Palatino Linotype', serif" title="Palatino">
<meta name="select:Main Font" content="Times, 'Times New Roman', serif" title="Times New Roman">
<meta name="select:Main Font" content="courier, monospace" title="Courier">
<meta name="select:Main Font" content="lucida console, monospace" title="Lucida Console">
<meta name="select:Main Font" content="verdana, sans-serif" title="Verdana">
<meta name="select:Post Size" content="540" title="540px">
<meta name="select:Post Size" content="400" title="400px">
<meta name="select:Post Size" content="450" title="450px">
<meta name="select:Post Size" content="500" title="500px">
<meta name="select:Post Size" content="600" title="600px">
<meta name="select:Post Size" content="650" title="650px">
<meta name="select:Post Size" content="700" title="700px">
<meta name="select:Text Align" content="left" title="left">
<meta name="select:Text Align" content="justify" title="justify">
<meta name="select:Tumblr Controls" content="gw" title="grey on white">
<meta name="select:Tumblr Controls" content="bw" title="black on white">
<meta name="select:Tumblr Controls" content="wb" title="white on black">
<meta name="if:Show Tags On Click" content="0">
<meta name="if:Infinite Scroll" content="0">
<meta name="if:Manual Load" content="0">
<style>
body{
    line-height:1.5;
    font-size:{text:Body Font Size}px;
    font-family:{block:ifMainGoogleFont}{text:Main Google Font}, {/block:ifMainGoogleFont}{select:Main Font};
    background:{color:Background};
    color:{color:Text};
    margin:0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

a img{
     border:0;
}

pre{
    white-space:pre-wrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#navigation{
    display:flex;
}

#navigation li{
    flex:1;
}

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

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

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

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

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

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

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

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

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

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

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

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

#search input:focus{
    outline:none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.post.photoset img{
    cursor:pointer;
}

.photo-slideshow .count-2 {
    width:calc((100% - {text:Photoset Spacing}px) / 2);
}

.photo-slideshow .count-2:first-child{
     margin-right:{text:Photoset Spacing}px;
}

.photo-slideshow .count-3 {
    width:calc(33.333333% - {text:Photoset Spacing}px * 2 / 3);
    margin-right:{text:Photoset Spacing}px;
}

.photo-slideshow .count-3:last-child{
    margin-right:0;
}

.photo-slideshow .row{
    margin-bottom:{text:Photoset Spacing}px!important;
}

.photo-slideshow .row:last-child{
    margin-bottom:0!important;
}

.answer{
    margin-top:4px;
}

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

.ask-avatar img{
    display:block;
}

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

.ask-user span{
    display:block;
}

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

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

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

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

.replies{
    margin:1.2em;
}

.replies:empty{
    display:none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.artist{
    font-weight:bold;
}

.album{
    font-style:italic;
}

.caption{
    margin:1.2em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tags li{
    display:inline;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.fade {
    background:{color:Photoset Background};
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0.8;
}

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

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

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

.arrow-left{
    left:50%;
}

.arrow-right{
    right:50%;
}

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

{CustomCSS}
</style>
</head>

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

{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:IndexPage}{block:HasTags}<div class="tags index">{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IndexPage}

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

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

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

RESOURCES

photoset grid by Pixel Union
icon font by Metro UI CSS
custom tooltips by JQuery Foundation
audio player tutorial by Roxie
infinite scroll by Paul Irish

Flat | Top-Level Comments Only

I'm really impressed! The level of customization from your themes is amazing, I've never seen anything so clean yet so detailed :0!

I also love that you used Taemin ♥ Hahaha I recently got into them again after years of being out of the loop and the first thing I said was "Taemin digievolved". Seriously. He's grown up to be even prettier than he already was it's crazy.
ALSO, I need to say that View is one hell of a song and video dfkjshfjhg sorry I'm fangirling a bit xD

It's a shame I stopped using Tumblr (except for one secret blog I have xD) otherwise I would use this theme right away! But Tumblr makes me dizzy and I honestly get easily overwhelmed by the amount of information that goes through the dashboard every minute. Wow.

Anyway, I love this design and I know many more people will too!

Really? Thank you so much! I'm so glad you like it. Your comment made me very happy because I'm not too content with this layout. I was thinking of abandoning it and was sad because I spent quite some time on it.

Actually, Taemin is my absolute favourite and I've wanted to use him since I started making themes. He's so awesome and a perfect role model.
No worries, let's fangirl together. I'm so glad you like Shinee too. They are very special to me. And yes, View is great! :)

Aww, that's so nice. I can't thank you enough.

:0!!! Wow you didn't like it! I love it <3 I can see you must have spent a lot of time making it.

About Shinee, my all time bias is Minho xD Haha I DON'T KNOW WHY but he makes me shake and shiver everytime I see him. But when I came back to see what they were doing recently and saw Taemin I was like NO WAY Taemin has grown up really well. Not that he wasn't good looking before, but now it's just crazy xD

All of them have amazing voices and pressence. It's one of the most talented and well balanced bands in my opinion, and they are doing pretty good for the years they are already on stage. I hope they are having good times and that everything is worth it for them, otherwise I would be so sad ♥

Such a beautiful theme! Honestly, ever since I've discovered your themes and layouts, I've fallen in love with your designs.

Hello my favourite theme maker! I'm currently using this theme and wondering if it's possible to make the header icon change on refresh? I got a script (https://pastebin.com/9r0yiW3U) but can't figured out where to paste it to make it work. Could you please help?

This is great design, but I don't really understand how to change my tumblr to use this. If you could give some advice, it would be greatly appreciated

Hi, here is a guide: http://themeber.com/support/tumblr/guides/how-to-install-your-tumblr-theme

Seu tema é lindíssimo e recentemente modifiquei meu Tumblr para ele, gostei muito da composição cromática em tons de azuis e o modo como ele tem fácil visualização tanto em dispositivos móveis quanto em desktop. Troquei a imagem de cabeçalho e perfil para gifs personalizados em tons púrpura que casaram com a seu trabalho. Obrigada por compartilhar o arquivo.

Edited 2025-01-15 02:42 (UTC)

Crossroad ver. 2

no subject

no subject

no subject

no subject

Header Icon

I could use a little help

Re: I could use a little help

no subject