Posted By

apaunchev on 01/26/11

Tagged

theme

Versions (?)

Last Edited at 01/26/11 12:32am

Statistics

Viewed 874 times

Favorited by 4 user(s)

Related snippets

Tumblr Custom Theme Framework

/ Published in: HTML

Every time I start coding a new Tumblr theme I find myself writing the same Tumblr tags over and over again. That's why I decided to create a boilerplate, or a framework, that I can reuse for my next projects.

I tried to cover most of the features included in the [documentation](http://www.tumblr.com/docs/en/custom_themes), yet provide just the bare essentials so you can build up from there.

Have fun!

(v 1.3)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
 
		<title>{Title}{block:PostSummary} &mdash; {PostSummary}{/block:PostSummary}</title>
 
		{block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
 
		<link rel="shortcut icon" href="{Favicon}">
		<link rel="apple-touch-icon" href="{PortraitURL-128}">
 
		<link rel="alternate" type="application/rss+xml" href="{RSS}">
 
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
 
		<style>
			{CustomCSS}
		</style>
	</head>
 
	<body>
		<header>
			<h1><a href="/">{Title}</a></h1>
 
			{block:Description}
				<p>{Description}</p>
			{/block:Description}
		</header>
 
		<div class="content">
			<section class="posts">
				{block:NoSearchResults}
					<h4>Sorry, nothing found for &ldquo;{SearchQuery}&rdquo;.</h4>
				{/block:NoSearchResults}
 
				{block:TagPage}
					<h4>Posts tagged &lsquo;{Tag}&rsquo;</h4>
				{/block:TagPage}
 
				{block:Posts}
					<article class="post {PostType}">
						{block:Text}
							{block:Title}
								<h2>{Title}</h2>
							{/block:Title}
 
							{Body}
						{/block:Text}
 
						{block:Photo}
							{LinkOpenTag}
								<img src="{PhotoURL-500}" alt="{PhotoAlt}">
							{LinkCloseTag}
 
							{block:HighRes}
								<a href="{PhotoURL-HighRes}">View in high-res</a>
							{/block:HighRes}
 
							{block:Exif}
								<dl>
									{block:Camera}
										<dt>Camera:</dt>
										<dd>{Camera}</dd>
									{/block:Camera}
 
									{block:Aperture}
										<dt>Aperture:</dt>
										<dd>{Aperture}</dd>
									{/block:Aperture}
 
									{block:Exposure}
										<dt>Exposure:</dt>
										<dd>{Exposure}</dd>
									{/block:Exposure}
 
									{block:FocalLength}
										<dt>Focal Length:</dt>
										<dd>{FocalLength}</dd>
									{/block:FocalLength}
								</dl>
							{/block:Exif}
 
							{block:Caption}
								{Caption}
							{/block:Caption}
						{/block:Photo}
 
						{block:Photoset}
							{Photoset-500}
 
							{block:Caption}
								{Caption}
							{/block:Caption}
						{/block:Photoset}
 
						{block:Quote}
							<blockquote>
								<p>{Quote}</p>
 
								{block:Source}
									<b class="source">{Source}</b>
								{/block:Source}
							</blockquote>
						{/block:Quote}
 
						{block:Link}
							<h2><a href="{URL}"{Target}>{Name}</a></h2>
 
							{block:Description}
								{Description}
							{/block:Description}
						{/block:Link}
 
						{block:Chat}
							{block:Title}
								<h2>{Title}</h2>
							{/block:Title}
 
							<ul>
								{block:Lines}
									<li class="{Alt}">
										{block:Label}
										    <b>{Label}</b>
										{/block:Label}
 
										{Line}
									</li>
								{/block:Lines}
							</ul>
						{/block:Chat}
 
						{block:Audio}
							{block:AudioEmbed}
								{AudioEmbed-500}
							{/block:AudioEmbed}
 
							{block:AudioPlayer}
								{block:AlbumArt}
									<img src="{AlbumArtURL}" alt="Album Art">
								{/block:AlbumArt}
 
								{AudioPlayerBlack}
 
								{block:ExternalAudio}
									<a href="{ExternalAudioURL}">Download</a>
								{/block:ExternalAudio}
							{/block:AudioPlayer}
 
							{block:Caption}
								{Caption}
							{/block:Caption}
						{/block:Audio}
 
						{block:Video}
							{Video-500}
 
							{block:Caption}
								{Caption}
							{/block:Caption}
						{/block:Video}
 
						{block:Answer}
							<h2>{Asker} asked: <q>{Question}</q></h2>
 
							{Answer}
						{/block:Answer}
 
						{block:Date}
							<footer>
								<ul>
									<li><a href="{Permalink}" title="{DayOfWeek}, {DayOfMonth} {Month} {Year}, {24Hour}:{Minutes}:{Seconds}">{TimeAgo}</a></li>
									{block:NoteCount}<li><a href="{Permalink}">{NoteCountWithLabel}</a></li>{/block:NoteCount}
									{block:HasTags}
										<li>Tags:
											<ul>
												{block:Tags}
													<li>
														<a href="{TagURL}">{Tag}</a>
													</li>
												{/block:Tags}
											</ul>
										</li>
									{/block:HasTags}
									{block:RebloggedFrom}<li>Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a></li>{/block:RebloggedFrom}
									{block:ContentSource}
										<li>Source:
											<a href="{SourceURL}">
												{block:SourceLogo}
													<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}">
												{/block:SourceLogo}
 
												{block:NoSourceLogo}
													{SourceTitle}
												{/block:NoSourceLogo}
											</a>
										</li>
									{/block:ContentSource}
								</ul>
							</footer>
						{/block:Date}
					</article> <!-- /post -->
 
					{block:PostNotes}
						{PostNotes}
					{/block:PostNotes}
				{/block:Posts}
 
				{block:PermalinkPagination}
					<nav>
						{block:PreviousPost}
							<a href="{PreviousPost}">&larr; Previous Post</a>
						{/block:PreviousPost}
 
						{block:NextPost}
							<a href="{NextPost}">Next post &rarr;</a>
						{/block:NextPost}
					</nav>
				{/block:PermalinkPagination}
 
				{block:Pagination}
					<nav>
						{block:PreviousPage}
							<a href="{PreviousPage}">&larr; Previous</a>
						{/block:PreviousPage}
 
						<span>{CurrentPage}/{TotalPages}</span>
 
						{block:NextPage}
							<a href="{NextPage}">Next &rarr;</a>
						{/block:NextPage}
					</nav>
				{/block:Pagination}
			</section> <!-- /posts -->
		</div> <!-- /content -->
 
		<footer>
			<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}
				<li><a href="/archive">Archive</a></li>
				<li><a href="{RSS}">RSS feed</a></li>
			</ul>
 
			<p>Powered by <a href="http://www.tumblr.com/">Tumblr</a>.</p>
		</footer>
	</body>
</html>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.