Skip to content

Instantly share code, notes, and snippets.

@andrewchee

andrewchee/Instajournal.html

Created May 26, 2012 05:05
Show Gist options
  • Save andrewchee/2792324 to your computer and use it in GitHub Desktop.
Save andrewchee/2792324 to your computer and use it in GitHub Desktop.
Download ZIP
Instajournal Tumblr Theme
Raw
Readme.md

Demo: instajournal.tumblr.com

v1.1

Added image hover effect. Fixed a few tags. Tip: If you're updating from version 1.0 — Make sure you manually replace the footer text in your appearance settings to remove the weird link glitch (just remove there href wrap). Or copy and paste this — Running on Instajournal 1.1.

v1.0

The Instajournal Tumblr Theme only supports single aspect ratio photo posts! No other Tumblr post types supported in this version. The Theme comes with a bunch of appearance settings accessible through your customise appearance page. Tip: Set up auto posting of your Instagrams with If This Then That — and trigger with this recipe.

Some of my favourite Instajournals can be found on: instaaaa.tumblr.com.

Raw
Instajournal.html
<!--
Instajournal v1.1
http://instajournal.tumblr.com/
By B-yce
http://b-yce.com/
-->
<html>
<head>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<title>{Title}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<meta name="color:Font Color" content="#000000" />
<meta name="color:Hover Color" content="#0000ff" />
<meta name="color:Background Color" content="#000000" />
<meta name="color:Header Font" content="#000000" />
<meta name="color:Header Background" content="#f2f2f2" />
<meta name="color:Header Font Hover" content="#f2f2f2" />
<meta name="color:Header Background Hover" content="#000000" />
<meta name="color:Left Font" content="#000000" />
<meta name="color:Left Background" content="#f2f2f2" />
<meta name="color:Left Font Hover" content="#f2f2f2" />
<meta name="color:Left Background Hover" content="#000000" />
<meta name="color:Right Font" content="#000000" />
<meta name="color:Right Background" content="#f2f2f2" />
<meta name="color:Right Font Hover" content="#f2f2f2" />
<meta name="color:Right Background Hover" content="#000000" />
<meta name="color:Date Font" content="#000000" />
<meta name="color:Date Background" content="#f2f2f2" />
<meta name="color:Caption Font" content="#000000" />
<meta name="color:Caption Background" content="#f2f2f2" />
<meta name="color:Notes Font" content="#000000" />
<meta name="color:Notes Background" content="#f2f2f2" />
<meta name="color:Loader Font" content="#000000" />
<meta name="color:Loader Background" content="#f2f2f2" />
<meta name="color:Footer Font" content="#000000" />
<meta name="color:Footer Background" content="#f2f2f2" />
<meta name="color:Footer Font Hover" content="#f2f2f2" />
<meta name="color:Footer Background Hover" content="#000000" />
<meta name="color:Scrollbar Color" content="#f2f2f2" />
<meta name="color:Scrollbar Hover Color" content="#0000ff" />
<meta name="color:Scrollbar Gutter Color" content="#000000" />
<meta name="if:Font Smoothing" content="1" />
<meta name="if:Show Header" content="1" />
<meta name="if:Show Dates" content="1" />
<meta name="if:Show Captions" content="1" />
<meta name="if:Show Notes" content="1" />
<meta name="if:Show Footer" content="1" />
<meta name="text:Body Font Size" content="13px" />
<meta name="text:Body Line Height" content="17px" />
<meta name="text:Mobile Font Size" content="30px" />
<meta name="text:Mobile Line Height" content="40px" />
<meta name="font:Body Font" content="Arial, Helvetica, sans-serif"/>
<meta name="text:Index Image Size" content="25%" />
<meta name="text:Permalink Image Size" content="500px" />
<meta name="text:Mobile Image Size" content="100%" />
<meta name="text:Padding" content="6px" />
<meta name="text:Webkit Scrollbar Width" content="12px" />
<meta name="text:Footer Text" content="Running on Instajournal 1.1"/>
<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
{block:IfFontSmoothing}
html{
-webkit-font-smoothing:antialiased;
}
{/block:IfFontSmoothing}
body{
margin:0;
font:{text:Body Font Size} {font:Body Font};
line-height:{text:Body Line Height};
color:{color:Font Color};
background:{color:Background Color};
}
.header{
color:{color:Header Font};
background-color:{color:Header Background};
position:fixed;
top:0;
left:0;
z-index:9999;
}
a.header, a.left, a.right, .date, .caption, .notes, .load, a.footer{
padding:{text:Padding};
float:left;
}
.date{
color:{color:Date Font};
background-color:{color:Date Background};
}
.caption{
color:{color:Caption Font};
background-color:{color:Caption Background};
}
.notes{
color:{color:Notes Font};
background-color:{color:Notes Background};
}
.load{
color:{color:Loader Font};
background-color:{color:Loader Background};
}
.clear{
clear:both;
}
a,
a:visited{
color:{color:Font Color};
text-decoration:underline;
}
a img{
-webkit-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
}
a:hover{
color:{color:Hover Color};
}
a img:hover{
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;
}
a.header, a.left, a.right, a.footer{
border:0px;
margin:0px;
text-decoration:none;
}
a.header{
color:{color:Header Font};
background-color:{color:Header Background};
}
a.header:hover{
color:{color:Header Font Hover};
background-color:{color:Header Background Hover};
}
a.left{
color:{color:Left Font};
background-color:{color:Left Background};
}
a.left:hover{
color:{color:Left Font Hover};
background-color:{color:Left Background Hover};
}
a.right{
color:{color:Right Font};
background-color:{color:Right Background};
}
a.right:hover{
color:{color:Right Font Hover};
background-color:{color:Right Background Hover};
}
a.footer{
color:{color:Footer Font};
background-color:{color:Footer Background};
}
a.footer:hover{
color:{color:Footer Font Hover};
background-color:{color:Footer Background Hover};
}
:focus{
-moz-outline-style:none;
}
.indx{
float:left;
width:{text:Index Image Size};
}
.perm{
float:left;
width:{text:Permalink Image Size};
}
img.avatar{
display:none !important;
}
#infscr-loading img{
display:none !important;
}
.notes ul, .notes ol{
list-style:none;
padding:0;
}
::-webkit-scrollbar{
width:{text:Webkit Scrollbar Width};
height:{text:Webkit Scrollbar Width};
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{
display:block;
height:0px;
width:0px;
}
::-webkit-scrollbar-button:vertical:increment, ::-webkit-scrollbar-button:horizontal:increment{
background-color:transparent;
}
::-webkit-scrollbar-track-piece{
background-color:{color:Scrollbar Gutter Color};
}
::-webkit-scrollbar-thumb:vertical{
height:50px;
background-color:{color:Scrollbar Color};
}
::-webkit-scrollbar-thumb:horizontal{
width:50px;
background-color:{color:Scrollbar Color};
}
::-webkit-scrollbar-thumb:hover{
background-color:{color:Scrollbar Hover Color};
}
::-webkit-scrollbar-corner{
background-color:{color:Background Color};
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body{
font-size:{text:Mobile Font Size};
line-height:{text:Mobile Line Height};
}
.indx, .perm{
float:left;
width:{text:Mobile Image Size};
}
}
{CustomCSS}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29984069-1']);
_gaq.push(['_setDomainName', 'tumblr.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="wrapper">
{block:IfShowHeader}
<div class="header">
<a class="header" href="/">{Title} {Description}</a>
</div>
{/block:IfShowHeader}
{block:Posts}
<div class="posts">
{block:IndexPage}
{block:Photo}<a href="{Permalink}"><img class="indx" src="{PhotoURL-HighRes}"/></a>{/block:Photo}
{/block:IndexPage}
{block:PermalinkPage}
{block:Photo}<a href="/"><img class="perm" src="{PhotoURL-HighRes}"/></a>{/block:Photo}
<div class="clear"></div>
{block:PermalinkPagination}
{block:PreviousPost}<div class="pagination"><a href="{PreviousPost}" class="left">Previous Post</a></div>{/block:PreviousPost}
{block:NextPost}<div class="pagination"><a href="{NextPost}" class="right">Next Post</a></div>{/block:NextPost}
{/block:PermalinkPagination}
{block:IfShowDates}
<div class="clear"></div>
{block:Date}<div class="date">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</div>{/block:Date}
{/block:IfShowDates}
{block:IfShowCaptions}
<div class="clear"></div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:IfShowCaptions}
{block:IfShowNotes}
<div class="clear"></div>
{block:PostNotes}<div class="notes">{PostNotes}</div>{/block:PostNotes}
{/block:IfShowNotes}
{/block:PermalinkPage}
</div>
{/block:Posts}
{block:Pagination}
{block:PreviousPage}<div class="pagination"><a href="{PreviousPage}" class="left">Previous Page</a></div>{/block:PreviousPage}
{block:NextPage}<div class="pagination"><a href="{NextPage}" class="right">Next Page</a></div>{/block:NextPage}
{/block:Pagination}
</div>
{block:IfShowFooter}
<div class="clear"></div>
<div class="footer">
<a class="footer" href="http://instajournal.tumblr.com/">{text:Footer Text}</a>
</div>
{/block:IfShowFooter}
{block:IndexPage}
<script type="text/javascript" src="http://static.tumblr.com/9snku1k/nq2ly5vr1/jquery.1.7.1.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/9snku1k/bQtlxyt6n/jquery.infinitescroll.js"></script>
<script type="text/javascript" src="http://platform.tumblr.com/v1/share.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
$('#wrapper').infinitescroll({
navSelector: '.pagination',
nextSelector: '.pagination a.right',
itemSelector: '#wrapper > .posts',
loading: {
img: 'http://static.tumblr.com/9snku1k/tIdlymgha/holder.png',
msgText: '<div class="load">Loading...</div>',
finishedMsg: '<div class="load">The Beginning.</div>'
}
});
});
$(function() {
$('#wrapper').infinitescroll('scroll');
});
})(window.jQuery);
</script>
{/block:IndexPage}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment