myrtillenne

FEATURES

all-in-one theme containing about, links (including page links), contact with ask, submit and optional faq and blogroll
300 - 500px wide posts
show tags on click (optional)
like and reblog links on index page
pagination or infinite scroll (with optional manual load)
font size and google fonts of your choice
custom photoset lightbox

This is a revamp of an older theme.

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

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

CODE

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:ifMainGoogleFont}<link href="https://fonts.googleapis.com/css?family={text:Main Google Font}" rel="stylesheet" type="text/css">{/block:ifMainGoogleFont}
{block:ifSecondaryGoogleFont}<link href="https://fonts.googleapis.com/css?family={text:Secondary Google Font}" rel="stylesheet" type="text/css">{/block:ifSecondaryGoogleFont}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metro/3.0.17/css/metro-icons.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="https://static.tumblr.com/vywm3oc/SKaog4f6h/style.css" rel="stylesheet" type="text/css">
{block:Description}
<meta name="description" content="{MetaDescription}">
{/block:Description}
<meta name="image:Background" content="">
<meta name="image:Left Sidebar Background" content="https://secure.static.tumblr.com/24be713636c05e83bf1fd23a111d7eec/vywm3oc/rNlo75ppg/tumblr_static_9gbad3fal5ogwccc8o4w8k08s.png">
<meta name="image:Right Sidebar Background" content="https://secure.static.tumblr.com/80a4112863797404942540522a8763ab/vywm3oc/NVyo75pph/tumblr_static_a69ra68b05c0w8gggo48ow0c0.png">
<meta name="image:About Icon" content="https://secure.static.tumblr.com/f5689917cf5daef5529d45dd96d92778/vywm3oc/Pooonjj55/tumblr_static_ed9ydlgnre0og0k4ks48osk8k.jpg">
<meta name="color:Background" content="#fff">
<meta name="color:Text" content="#777">
<meta name="color:Link" content="#d87889">
<meta name="color:Link Hover" content="#d28a75">
<meta name="color:Left Sidebar Background" content="#f7e9e1">
<meta name="color:Left Sidebar Text" content="#aa8a8a">
<meta name="color:Left Sidebar Link" content="#bd6f84">
<meta name="color:Left Sidebar Link Hover" content="#be6d6d">
<meta name="color:Left Sidebar Border" content="#d7c5c5">
<meta name="color:Right Sidebar Background" content="#f7e9e1">
<meta name="color:Right Sidebar Text" content="#aa8a8a">
<meta name="color:Right Sidebar Link" content="#bd6f84">
<meta name="color:Right Sidebar Link Hover" content="#be6d6d">
<meta name="color:Right Sidebar Border" content="#d7c5c5">
<meta name="color:Content Background" content="#fff">
<meta name="color:Post Text Alt" content="#aaa">
<meta name="color:Post Border" content="#ededed">
<meta name="color:Post Footer Link" content="#d87889">
<meta name="color:Post Footer Link Hover" content="#d28a75">
<meta name="color:Photoset Background" content="#fff">
<meta name="color:Photoset Controls" content="#777">
<meta name="color:Tooltip Background" content="#fff">
<meta name="color:Tooltip Text" content="#777">
<meta name="select:Main Font" content="cambria, serif" title="Cambria">
<meta name="select:Main Font" content="georgia, serif" title="Georgia">
<meta name="select:Main Font" content="Palatino, 'Palatino Linotype', serif" title="Palatino">
<meta name="select:Main Font" content="Times, 'Times New Roman', serif" title="Times New Roman">
<meta name="select:Main Font" content="arial, sans-serif" title="Arial">
<meta name="select:Main Font" content="courier, monospace" title="Courier">
<meta name="select:Main Font" content="verdana, sans-serif" title="Verdana">
<meta name="select:Main Font" content="lucida console, monospace" title="Lucida Console">
<meta name="select:Title Style" content="font-weight:normal;" title="normal">
<meta name="select:Title Style" content="font-style:italic;" title="italic">
<meta name="select:Title Style" content="font-weight:bold;" title="bold">
<meta name="select:Title Style" content="font-weight:bold;font-style:italic;" title="bold italic">
<meta name="select:Post Size" content="500" title="500px">
<meta name="select:Post Size" content="450" title="450px">
<meta name="select:Post Size" content="400" title="400px">
<meta name="select:Post Size" content="350" title="350px">
<meta name="select:Post Size" content="300" title="300px">
<meta name="select:Text Align" content="left" title="left">
<meta name="select:Text Align" content="justify" title="justify">
<meta name="text:Main Google Font" content="">
<meta name="text:Secondary Google Font" content="Amarante">
<meta name="text:Sidebar Width" content="330">
<meta name="text:Sidebar Image Height" content="500">
<meta name="text:Body Font Size" content="14">
<meta name="text:Navigation Font Size" content="14">
<meta name="text:Title Font Size" content="20">
<meta name="text:Post Title Font Size" content="18">
<meta name="text:Post Footer Font Size" content="14">
<meta name="text:Post Spacing" content="40">
<meta name="text:Photoset Spacing" content="2">
<meta name="text:About Panel Title" content="About">
<meta name="text:Links Panel Title" content="Navigation">
<meta name="text:Contact Panel Title" content="Contact">
<meta name="text:FAQ Title" content="Frequently Asked Questions">
<meta name="text:Blogroll Panel Title" content="Blogroll">
<meta name="text:Sidebar Extra Link 1 Title" content="">
<meta name="text:Sidebar Extra Link 1 URL" content="http://">
<meta name="text:Sidebar Extra Link 2 Title" content="">
<meta name="text:Sidebar Extra Link 2 URL" content="http://">
<meta name="text:Sidebar Extra Link 3 Title" content="">
<meta name="text:Sidebar Extra Link 3 URL" content="http://">
<meta name="text:Sidebar Extra Link 4 Title" content="">
<meta name="text:Sidebar Extra Link 4 URL" content="http://">
<meta name="if:Sidebar Gradient" content="1">
<meta name="if:Show About Panel" content="1">
<meta name="if:Show About Icon" content="1">
<meta name="if:Show Links Panel" content="1">
<meta name="if:Show Contact Panel" content="1">
<meta name="if:Show FAQ" content="1">
<meta name="if:Show Blogroll Panel" content="1">
<meta name="if:Show Tags On Click" content="0">
<meta name="if:Infinite Scroll" content="0">
<meta name="if:Manual Load" content="0">
<style>

html, body{
    height:100%;
}

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

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

a img{
    border:0;
}

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

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

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

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

pre{
    white-space:pre-wrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#pagination{
    text-align:center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.panel.active{
    display:block;
}

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

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

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

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

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

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

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

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

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

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

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

.post.photoset img{
    cursor:pointer;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.replies:empty{
    display:none;
}

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

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

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

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

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

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

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

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

.album-art{
    width:90px;
    height:90px;
    position:absolute;
    visibility:visible;
    opacity:1;
    transition: visibility 0.4s step-start, opacity 0.4s linear;
    top:5px;
    left:5px;
}

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

.post.audio:hover .album-art{
    visibility:hidden;
    opacity:0;
    transition:visibility 0.4s step-end, opacity 0.4s linear;
}

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

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

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

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

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

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

.caption{
    margin:20px 0;
}

.footer{
    clear:both;
}

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

.like-reblog{
    float:right;
}

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

.custom-like-button{
    position:relative;
}
 
.like_button iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    z-index:10;
}

.like_button:hover + .like-button-heart{
    color:{color:Link Hover};
}
 
.like_button.liked + .like-button-heart{
    text-transform:lowercase;
}

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

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

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

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

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

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

.tags li{
    display:inline;
}

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

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

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

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

#notes li{
    margin:0.75em 0;
}

#notes blockquote{
    margin:1em 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

#info{
    margin-bottom:20px;
}

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

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

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

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

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

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

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

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

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

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

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

#search input:focus{
    outline: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

.arrow-left{
    left:50%;
}

.arrow-right{
    right:50%;
}

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

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

{CustomCSS}

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

<div class="panel post-wrapper active">
<div class="content">
{block:Posts}
<div class="posts" id="{PostID}">
{block:Text}
<div class="post text">
{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
{Body}
</div>
{/block:Text}
{block:Photo}
<div class="post photo">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
</div>
{/block:Photo}
{block:Panorama}
<div class="post panorama">
{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}
</div>
{/block:Panorama}
{block:Photoset}
<div class="post photoset"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"{block:Caption} title="{Caption}" alt="{Caption}"{/block:Caption} /></div></div>{/block:Photos}</div></div>
{/block:Photoset}
{block:Quote}
<div class="post quote"><div class="quote-text"><div class="quote-mark"><span class="mif-quote"></span></div>{Quote}</div>{block:Source}<div class="source">— {Source}</div>{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="post link"><div class="link-container"><a href="{URL}" class="link" {Target}>{Name}</a></div>{block:Description}<div class="description">{Description}</div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post chat">
{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
{block:Lines}
<div class="chat-item {Alt} user_{UserNumber}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}
</div>{/block:Lines}
</div>
{/block:Chat}
{block:Video}
<div class="post video">{Video-500}</div>
{/block:Video}
{block:Audio}
<div class="post audio">
<div class="audio-container"><div class="audio-wrapper">{block:AudioPlayer}<div class="audio-player"><div class="player">{AudioPlayer}</div></div>{/block:AudioPlayer}{block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" /></div>{/block:AlbumArt}</div>
<div class="audio-caption">
{block:TrackName}<div class="song">{TrackName}</div>{/block:TrackName}{block:Artist}<div class="artist">{Artist}</div>{/block:Artist}{block:Album}<div class="album"> ▪ {Album}</div>{/block:Album}
</div>
</div>
</div>
{/block:Audio}
{block:Answer}
<div class="post ask">
<div class="question"><div class="asker-wrapper"><img class="asker-avatar" src="{AskerPortraitURL-30}" /><div class="asker-name"><span>{Asker}</span>asked:</div></div><div class="asker-question">{Question}</div></div>
{block:Answerer}
<div class="answer"><div class="answerer-wrapper"><img class="answerer-avatar" src="{AnswererPortraitURL-30}" /><div class="answerer-name"><span>{Answerer}</span>answered:</div></div><div class="answerer-answer">{Answer}</div></div>
{/block:Answerer}
<div class="replies">{Replies}</div>
</div>
{/block:Answer}
<div class="clearfix"></div>

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

{block:IndexPage}
<div class="footer index">
{block:Date}<span class="date"><a href="{Permalink}" title="{TimeAgo}">{Month} {DayOfMonth}{DayOfMonthSuffix} {Year}</a></span>{/block:Date}
{block:NoteCount} ▪ <span class="note-count"><a href="{Permalink}#notes" title="View notes">{NoteCountWithLabel}</a></span>{/block:NoteCount}
{block:RebloggedFrom} ▪ <a href="{ReblogParentURL}" title="{ReblogParentName}">Via</a> ▪ 
<a href="{ReblogRootURL}" title="{ReblogRootName}">Source</a>{/block:RebloggedFrom}
{block:ifShowTagsOnClick}{block:HasTags} ▪ <span class="show-tags"><a href="#" title="Show tags">Tags</a></span>{/block:HasTags}{/block:ifShowTagsOnClick}
<div class="like-reblog"><span class="custom-like-button">{LikeButton}<a class="like-button-heart">Like</a></span> ▪ <span class="reblog-btn"><a href="{ReblogURL}">Reblog</a></span></div>
<div class="clearfix"></div>
</div>
{block:HasTags}<div class="tags index">{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}
{/block:IndexPage}

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

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

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

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

<div id="info">

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

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

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

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

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

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

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

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

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

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

<div id="search"><form name="search" action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/><input id="search-btn" type="submit" value="" title="Search"/>
</form></div>
</div>
</div>
{/block:ifShowLinksPanel}

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

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

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

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

</div>

{/block:ifShowFAQ}

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

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

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

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

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

RESOURCES

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

Flat | Top-Level Comments Only

From: (Anonymous)

Hello!

I absolutely love this theme and use it on my blog. There's one thing I'd like to change about it, though, so I wonder if you can help me out? I would like the theme to stretch gifs and images in response posts to the column width and I can't seem to find the solution with my inferior CSS skills. I hope I'm not being too obnoxious with this! I do love the theme a lot.

Thank you so much!
-Sera

From:

rosecarmine

Hello! I'm so glad you like the theme. :)

Yes, sure. You want only in ask/answer posts? If so, add
.asker-question img, .answerer-answer img{
width:100%;
height:auto;
}
Let me know if it has the effect you want.

Hello!
Oh, fabulous! It worked, thank you ever so much. :) I'll be keeping this theme for a very long time. Huge thanks for responding to me and sharing the theme!

You're very welcome! ^_^

Journal layouts

Double

Double

A question

Re: A question

Re: A question

Re: A question

Welcome!

Terms of use