Multi-column base theme code

Base code for a multi-column Tumblr theme can be found below. The base code includes jQuery with a basic Masonry layout and infinite-scroll features.

Feel free to use it as a ‘base code’ or boilerplate to get started with your Tumblr theme. If you need help adding the code to your Tumblr please visit these instructions.

Demo base code

Information for theme makers

Theme makers may change the number of columns and margin available via the theme’s customize menu by using the ‘post margin’ and ‘post width’ options (remember you can pass in default values for meta elements if you want changes to be permanent when people copy the code).

If you’re learning how to create Tumblr themes, please read below for the most important HTML elements:

  • <meta .../> — custom values for options
  • <head> — starts off HTML documents, not shown on screen
  • <style> — where the theme’s CSS is kept
  • <header id="masthead"> — contains portrait, title and description
  • <div id="content"> — holds all posts
  • <article> — holds a single post
  • <header class="metadata"> — contains information about the post
  • <div class="pagination"> — used for infinite scroll, or if disabled ‘next’/’previous’ page buttons

The code

<!DOCTYPE html>
<html>
<head>
<!--
Theme: Base column by Build Themes
Base code: Build Themes (http://buildthemes.tumblr.com/code/base-column)
Version: 1.4
-->
<meta name="color:Background" content="#369fa0" />
<meta name="color:Body links" content="#615151" />
<meta name="color:Body text" content="#1d1818" />
<meta name="color:Masthead background" content="#0a0303" />
<meta name="color:Masthead links" content="#b9b8b8" />
<meta name="color:Masthead text" content="#868484" />
<meta name="color:Post color" content="#ffffff" />
<meta name="color:Text highlight" content="#d83e3e" />
<meta name="font:Body" content='Georgia,serif'/>
<meta name="if:Infinite scroll" content="1"/>
<meta name="if:Masthead search" content="0"/>
<meta name="if:Masthead portrait" content="0"/>
<meta name="text:Font size" content='0.8em'/>
<meta name="text:Google Analytics ID" content=''/>
<meta name="image:Masthead" content="" />
<meta name="image:Background" content="" />
<meta name="text:Post margin" content='10px'/>
<meta name="text:Post width" content='38%'/>
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>{block:TagPage}{Tag} posts - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*Basic styles*/
::-moz-selection {
	background: {color:Text highlight};
	color: #fff;
}
::selection {
	background: {color:Text highlight};
	color: #fff;
}
#content {
	margin: 2%;
}
body {
	background: {color:Background} url('{image:Background}');
	color: {color:Body text};
	font-family: {font:Body};
	font-size: {text:Font size};
	margin: 0;
	padding: 0;
}
a {
	color: {color:Body links};
	text-decoration: none;
}
blockquote {
	background: rgba(0, 0, 0, 0.2);
	border-left: 10px solid rgba(0, 0, 0, 0.2);
	margin: 0;
	padding: 2%;
}
iframe, img, embed, object, video {
	max-width: 100%;
}
img {
	height: auto;
	width: auto;
}
/*Masthead*/
#masthead {
	background: {color:Masthead background} url('{image:Masthead}');
	padding: 3%;
	color: {color:Masthead text};
}
#masthead a {
	color: {color:Masthead links};
}
nav li {
	display: inline;
}
/*Article*/
article {
	background: {color:Post color};
	margin: {text:Post margin};
	padding: 3%;
	width: {text:Post width};
}
.chat span {
	float: left;
	margin-right: 1%;
}
/*Metadata*/
.metadata {
	display: inline-block;
	width: 100%;
}
.reblogged {
	float: right;
}
/*Tags and notes*/
#tags, nav ul, .chat ul {
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}
#tags li {
	float: left;
	margin-right: 1%;
}
.notes {
	clear: both;
	padding: 0;
}
/*Custom CSS*/
{CustomCSS}
</style>
</head>
<body>
<!--Masthead-->
<header id="masthead">
	<!--Details: portrait (optional), title and description-->
	<div id="header">
		{block:IfMastheadPortrait}
		<img src="{PortraitURL-128}"/>
		{/block:IfMastheadPortrait}
		<h1><a href="/" title="{lang:Home}">{Title}</a></h1>
		{block:Description}
		<p>{Description}</p>
		{block:Description}
	</div>
	<!--Navigation-->
	<nav>
		<ul>
			{block:HasPages}
			{block:Pages}
			<li> <a href="{URL}">{Label}</a></li>
			{/block:Pages}
			{/block:HasPages}
			{block:SubmissionsEnabled}
			<li> <a href="/submit">{SubmitLabel}</a></li>
			{/block:SubmissionsEnabled}
			{block:AskEnabled}
			<li> <a href="/ask">{AskLabel}</a></li>
			{/block:AskEnabled}
		</ul>
	</nav>
	<!--Search form (optional)-->
	{block:IfMastheadSearch}
	<form action="/search" method="get">
		<input type="text" name="q" value="{SearchQuery}"/>
		<input type="submit" value="{lang:Search}"/>
	</form>
	{/block:IfMastheadSearch}
</header>
<!--Content holder-->
<div id="content">
{block:Posts}
<article>
<!--Metadata: date, note count, content source-->
<header class="metadata">
	{block:Date} <a href="{Permalink}"> <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}">{DayOfMonth} {Month} {Year}</time> </a> {/block:Date}

	{block:NoteCount} <a class="notecount" href="{Permalink}#notes">{NoteCountWithLabel}</a> {/block:NoteCount}

	{block:ContentSource}
	<div class="reblogged">
	<a href="{SourceURL}">{lang:Source}:{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo} {block:RebloggedFrom}<img src="{ReblogParentPortraitURL-16}"/>{/block:RebloggedFrom}
	{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}</a>
	</div>
	{/block:ContentSource}  
</header>
<!--Unique code for each post type-->
{block:Text}
<div class="text">
	{block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
	{Body}
{/block:Text}

{block:Photo}
<div class="photo">
	{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
	{block:Caption}{Caption}{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="photoset">
	{block:IndexPage}{Photoset-250}{/block:IndexPage}
	{block:PermalinkPage}{Photoset-700}{/block:PermalinkPage} 
	{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

{block:Quote}
<div class="quote">
	<blockquote>{Quote}</blockquote>
	{block:Source}<cite> {Source} </cite>{/block:Source}
{/block:Quote}

{block:Link}
<div class="link">
	<h1 class="title"><a href="{URL}">{Name}</a></h1>
	{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Chat}
<div class="chat">
	<ul>
		{block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
	</ul>
{/block:Chat}

{block:Audio}
<div class="audio">
	{block:TrackName}<h1 class="title"><a href="{Permalink}">{TrackName}</a></h1>{/block:TrackName}
	<div class="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}</div>
	<div class="player">{AudioPlayerBlack}</div>
	{block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
	{block:Caption}{Caption}{/block:Caption}
{/block:Audio}

{block:Video}
<div class="video">
	<div class="video-player">{Video-500}</div>
	{block:Caption}{Caption}{/block:Caption}
{/block:Video}

{block:Answer}
<div class="answer">
	<h1 class="title">{Question}</h1>
	<div class="user"><img src="{AskerPortraitURL-96}"/><p>{Asker}</p></div>
	{Answer}
{/block:Answer}
</div>
<!--Post footer (tags and notes) on displayed on permalink pages-->
{block:Permalink}
<footer class="details">
{block:HasTags}
	<ul id="tags">
		{block:Tags}<li> <a href="{TagURL}">{Tag}</a> </li>{/block:Tags}
	</ul>
{/block:HasTags}
{block:PostNotes}
<div id="notes">
	{PostNotes}
</div>
{/block:PostNotes}
</footer>
{/block:Permalink}
 </article>
{/block:Posts}
<!--Close of article-->
</div>
<!--Pagination: previous/next page links-->
{block:Pagination}
<div class="pagination">
	{block:PreviousPage}<a href="{PreviousPage}">Previous page</a>{/block:PreviousPage}
	{block:NextPage}<a href="{NextPage}">Next page</a>{/block:NextPage}
</div>
{/block:Pagination}
<!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
{block:IfInfiniteScroll}
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
{/block:IfInfiniteScroll}
<!--Code for infinite scroll and grid layout-->
<script>
(function() {
	var $tumblelog = $('#content');
	{block:IfInfiniteScroll}
	$tumblelog.infinitescroll({
		navSelector  : ".pagination",            
		nextSelector : ".pagination a:first",    
		itemSelector : "article",
		bufferPx     : 50,
		done : "",
		loading: {
			finishedMsg: "<p> </p>",
			img : " ",
			msg: null,
			msgText: "<p> </p>"
		},
	},
	  function( newElements ) {
			var $newElems = $( newElements ).css({ opacity: 0 });
			$newElems.imagesLoaded(function(){
				$newElems.animate({ opacity: 1 });
				$tumblelog.masonry( 'appended', $newElems);
			});
		  }
	);
	{/block:IfInfiniteScroll}
	$tumblelog.imagesLoaded( function(){
	  $tumblelog.masonry({
		columnWidth: function( containerWidth ) {
			return containerWidth / 100;
		  }
	  });
	});
})();
</script>
<!--For users adding Google Analytics ID-->
<script>
var _gaq=[['_setAccount','{text:Google Analytics ID}'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
blog comments powered by Disqus