Skip to content

Instantly share code, notes, and snippets.

Created April 12, 2012 19:07
Show Gist options
  • Save pamelafox/2370192 to your computer and use it in GitHub Desktop.
Save pamelafox/2370192 to your computer and use it in GitHub Desktop.
Twitter Bootstrap Tumblr Theme
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en" xmlns:fb="" xmlns:og=""> <!--<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name='description' content='{MetaDescription}'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" media="screen" href="" />
<link rel='alternate' type='application/rss+xml' href='{RSS}'>
<style type="text/css" media="screen">
body {
padding-top: 50px;
min-height: 100%;
background-image: -ms-radial-gradient(center, ellipse cover, #EDEDED 0%, #FFFFFF 100%);
background-image: -moz-radial-gradient(center, ellipse cover, #EDEDED 0%, #FFFFFF 100%);
background-image: -o-radial-gradient(center, ellipse cover, #EDEDED 0%, #FFFFFF 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 501, color-stop(0, #EDEDED), color-stop(1, #FFFFFF));
background-image: -webkit-radial-gradient(center, ellipse cover, #EDEDED 0%, #FFFFFF 100%);
background-image: radial-gradient(center, ellipse cover, #EDEDED 0%, #FFFFFF 100%);
.post {
width: 710px;
box-shadow: 0 0 6px #ccc;
margin: 0.5em auto 45px;
border:1px solid #AAA;
background: white;
position: relative;
.post-inner {
margin: 0 5px;
padding: 40px 50px 30px;
.post-inner h1 a {
color: #313131;
font-weight: bold;
.post-inner p {
margin-bottom: 15px;
.post-meta {
color: #AAA;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px solid #EBEBEB;
.post-avatar {
position: absolute;
left: -35px;
top: 50px;
-webkit-border-radius: 32px;
-moz-border-radius: 32px;
border-style: 1px solid #ccc;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.51);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.51);
.post-body img {
border: 5px solid white;
margin: 0 auto 30px;
display: block;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.51);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.51);
.post-body img.right {
float: right;
margin: 10px -120px 30px 40px;
.footer {
margin-top: 45px;
padding: 35px 0 36px;
border-top: 1px solid #E5E5E5;
#disqus_thread {
width: 670px;
margin: auto;
<!-- Topbar
================================================== -->
<div id="header" class="navbar navbar-fixed-top" data-scrollspy="scrollspy" >
<div class="navbar-inner">
<div class="container">
<div class="pull-left">
<a class="brand" href="/">{Title}</a>
<ul class="nav">
<li><a href="{PreviousPage}">Previous Page</a></li>
<li><a href="{NextPage}">Next Page</a></li>
<li><a href="{PreviousPost}">Previous Post</a></li>
<li><a href="{NextPost}">Next Post</a></li>
<li><a class="pull-right" href="/archive">Archive</a></li>
<div class="container">
<div class="post row">
<div class="post-inner">
<h1><a href='{Permalink}'>{Title}</a></h1>
<div class="post-meta">
<img class="post-avatar" src="{PortraitURL-64}" width="64" height="64">
{Name} &mdash; {Month} {DayOfMonth}, {Year}</p>
<div class="post-body">
{LinkOpenTag}<img src='{PhotoURL-500}' alt='{PhotoAlt}'/>{LinkCloseTag}
<p class='quote'>"{Quote}"</p>
<a href='{URL}' class='link' {Target}>{Name}</a>
<table cellpadding='0' cellspacing='0' width='100%' border='0' class='chat'>
<tr class='{Alt}'>
<td class='label'>{Label}</td>
<div class='audio'>
<div class='audioLeft'>
<div class='audioRight'>
{FormattedPlayCount} Plays
<br class='clear' />
<div style="font-size: 10px; text-align: left;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></div>
<script type="text/javascript">
var disqus_url = "{Permalink}";
var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>{block:Permalink}
<div id="disqus_thread"></div>
<script type="text/javascript">
* var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<a href="" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
{/block:Permalink}<script type="text/javascript">
var disqus_shortname = 'SHORTNAME';
(function () {
var s = document.createElement('script'); s.async = true;
s.src = '';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
<!-- Footer -->
<div class="footer">
<a href="{PreviousPage}">&#171; Previous</a>
<a href="{NextPage}">Next &#187;</a>
<a href="/archive">Archive</a>
<!-- /Footer -->
<!-- /container -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment