Pyro’s Bootstrap Tumblr Theme

Pyro’s Bootstrap Tumblr Theme

This theme is built on Twitter’s Bootstrap.
Copy and paste the code below.

<!DOCTYPE html>
<head>
 	<title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
	<link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
	<meta name="description" content="{MetaDescription}" />
	{/block:Description}
    <meta name="text:About Me" content="">
    <meta name="text:Disqus" content="">
	<link href="http://static.tumblr.com/zyc9iyz/pb6meqtti/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!--<link href="http://static.tumblr.com/zyc9iyz/VfJmeqpy1/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">-->
    <style type="text/css">
	{CustomCSS}
	.center { text-align:center; }
	.post {	margin-bottom:20px; list-style:none; position:relative;}
	.date { text-align:left; }
	.text, .quote, .photoset, .link, .chat, .video, .audio, .answer, #twitter { padding:10px; background-color:#e8e8e8; }
	.photo p{ position:absolute; top:20px; background-color:#fff; padding:2px 5px; margin:0; opacity: 0.9; line-height:15px;}
	.well { margin-bottom:0px; }
	.timestamp { position:absolute; background-color:#257eaa; color:#fff; top:-10px; right:0px; padding:0 5px; font-size:10px;}
	</style>
</head>
<body>
<div>
  <div>
	<div>
	<h1>{Title} {block:Description}<small>{Description}</small>{/block:Description}</h1>
	 	 <ul>
          <li><a href="{URL}/.">Home</a></li>
          {block:HasPages}
          {block:Pages}
          <li><a href="{URL}">{Label}</a></li>
          {/block:Pages}
          {/block:HasPages}
          {block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
        </ul>
	</div>
  </div><!-- /row -->

  <div>

    <div>
    	<div><img src="{PortraitURL-128}"></div>
		<br>{text:About Me}<br>
        <div>
            {block:Following}
            <h6>Blogs I follow:</h6>
            {block:Followed}
            <a href="{FollowedURL}"><img src="{FollowedPortraitURL-30}" title="{FollowedName}"></a>
            {/block:Followed}
            {/block:Following}
        </div>

        <div>
        </div>

        <div>
            {block:Likes}
            <div id="likes_container">
                <h3>Stuff I like</h3>

                {Likes limit="3" summarize="100" width="300"}

                <a href="http://www.tumblr.com/liked/by/{Name}">
                    See more stuff I like
                </a>
            </div>
            {/block:Likes}
        </div>

    </div><!-- /span2 -->

    <div>
    <div> 
    <div id="posts"> 

<!--	{block:Twitter}
        <div>
            <div id="twitter" style="display:none;">
                <h4><a href="http://twitter.com/{TwitterUsername}">Latest Tweets</a></h4>

                <div id="tweets"></div>
            </div>

            <script type="text/javascript">
                function recent_tweets(data) {
                    for (i=0; i<data.length; i++) {
                        document.getElementById("tweets").innerHTML =
                            document.getElementById("tweets").innerHTML +
                            '<a href="http://twitter.com/{TwitterUsername}/status/' +
                            (data[i].id_str ? data[i].id_str : data[i].id) +
                            '"><div><i></i> ' + data[i].text +
                            '</div></a>';
                    }
                    document.getElementById("twitter").style.display = 'block';
                }
            </script>
         </div>
	{/block:Twitter}-->

	{block:Posts}

		{block:Text}
			<div>
            <div>
            {block:Date}                          
            <span>{ShortMonth} {DayOfMonth} {Year}</span>
            {/block:Date}

			{block:Title}
			<h4><a href="{Permalink}">{Title}</a>{block:PostTitle} - {PostTitle}{/block:PostTitle}</h4>
			{/block:Title}
			<p>{Body}</p>

                <div> 
                {block:HasTags}
                {block:Tags}
                <a href="{TagURL}"><i></i> {Tag}</a>
                {/block:Tags}
                {/block:HasTags}

                {block:PostNotes}
                {block:NoteCount}
                {NoteCountWithLabel}
                {/block:NoteCount}
                {/block:PostNotes}            
                <a href="{Permalink}#disqus_thread"><i></i>Comments</a>
                </div>
            </div>
            </div>  
		{/block:Text}

        {block:Photo}
			<div>
            <div>
            {block:Date}                          
            <span>{ShortMonth} {DayOfMonth} {Year}</span>
            {/block:Date}
            <img src="{PhotoURL-400}" alt="{PhotoAlt}" style="width:380px;">

            {block:Caption}
            <span>{Caption}</span>
            {/block:Caption}

                <div>  
                {block:HasTags}
                {block:Tags}<a href="{TagURL}">
                <i></i> {Tag}</a>{/block:Tags}
                {/block:HasTags}

                {block:PostNotes}
                {block:NoteCount}
                {NoteCountWithLabel}
                {/block:NoteCount}
                {/block:PostNotes}

                <a href="{Permalink}#disqus_thread">
                Comments</a>
                </div>
            </div>
			</div>
		{/block:Photo}

		{block:Photoset}
			<div>
            <div>
            {block:Date}                          
            <span>{ShortMonth} {DayOfMonth} {Year}</span>
            {/block:Date}

            <div>
            {Photoset-250}
			{block:Caption}
			<div>{Caption}</div>
            {/block:Caption}
            </div>

            	<div>     
                {block:HasTags}
                {block:Tags}<a href="{TagURL}">
                <i></i> {Tag}</a>{/block:Tags}
                {/block:HasTags} 
                {block:PostNotes}
                {block:NoteCount}
                {NoteCountWithLabel}
                {/block:NoteCount}
                {/block:PostNotes}
                <a href="{Permalink}#disqus_thread">
                Comments</a>
            	</div>
            </div>
            </div>
		{/block:Photoset}

		{block:Quote}
			<div>
            <div>
            {block:Date}                          
            <span>{ShortMonth} {DayOfMonth} {Year}</span>
            {/block:Date}

            <blockquote>
            <p>"{Quote}"</p>
            <small>
            {block:Source}
            <div>{Source}</div>
            {/block:Source}
            </small>
            </blockquote>

                <div>                     
				{block:HasTags}
                {block:Tags}
                <a href="{TagURL}">
                <i></i> {Tag}</a>
                {/block:Tags}
                {/block:HasTags}

                {block:PostNotes}
                {block:NoteCount}
                {NoteCountWithLabel}
                {/block:NoteCount}
                {/block:PostNotes}
            	<a href="{Permalink}#disqus_thread">
                Comments</a>
                </div>
			</div>
			</div>
		{/block:Quote}

		{block:Link}
			<div>
            <div>
            {block:Date}                          
            <span>{ShortMonth} {DayOfMonth} {Year}</span>
            {/block:Date}

            <h4><a href="{URL}" {Target}>{Name}</a></h4>
            {block:Description}
            <div>{Description}</div>
            {/block:Description}
            	<div>                    
				{block:HasTags}
                {block:Tags}
                <a href="{TagURL}">
                <i></i> {Tag}</a>
                {/block:Tags}
                {/block:HasTags}

                {block:PostNotes}
                {block:NoteCount}
                {NoteCountWithLabel}
                {/block:NoteCount}
                {/block:PostNotes}
            	<a href="{Permalink}#disqus_thread">
                Comments</a>
                </div>
			</div>
            </div>
		{/block:Link}

		{block:Chat}
            <div>
            <div>
            {block:Date}                          
            <span>{ShortMonth} {DayOfMonth} {Year}</span>
            {/block:Date}

                    {block:Title}
                        <h4><a href="{Permalink}">{Title}</a></h4>
                    {/block:Title}

                    <div>
                    <table> 
                        {block:Lines}
                        <tr>
                            <td>
                            {block:Label}
                            	{Label}
                            {/block:Label}
                            </td>
                            <td>
                            	{line}
                            </td>                             
						</tr>
                        {/block:Lines}                   
                    </table>
                    </div>
                    <div>                    
					{block:HasTags}
                    {block:Tags}<a href="{TagURL}"><i></i> {Tag}</a>{/block:Tags}
                   	{/block:HasTags}

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
            <a href="{Permalink}#disqus_thread">Comments</a>
                    </div>
                </div>
                </div>
		{/block:Chat}

		{block:Video}
                <div>
                <div>
            {block:Date}                          
            <span>{ShortMonth} {DayOfMonth} {Year}</span>
            {/block:Date}

                    {Video-250}

                    {block:Caption}
                        <div>{Caption}</div>
                    {/block:Caption}
                    <div>                    
					{block:HasTags}
                    {block:Tags}<a href="{TagURL}"><i></i> {Tag}</a>{/block:Tags}
                   	{/block:HasTags}

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
            <a href="{Permalink}#disqus_thread">Comments</a>
                    </div>
                </div>
                </div>
		{/block:Video}

		{block:Audio}
                <div>
                <div>
            {block:Date}                          
            <span>{ShortMonth} {DayOfMonth} {Year}</span>
            {/block:Date}
                    {AudioPlayerBlack}

                    {block:Caption}
                        <div>{Caption}</div>
                    {/block:Caption}
                    <div>
                    {block:Date}                          
                    {ShortMonth} {DayOfMonth} {Year}
                    {/block:Date}

					{block:HasTags}
                    {block:Tags}<a href="{TagURL}"><i></i> {Tag}</a>{/block:Tags}
                   	{/block:HasTags}

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
            <a href="{Permalink}#disqus_thread">Comments</a>
                    </div>
                    </div>
                </div>
		{/block:Audio}

		{block:Answer}
			<div>
			<div>
            {block:Date}                          
            <span>{ShortMonth} {DayOfMonth} {Year}</span>
            {/block:Date}

				<p><img src="{AskerPortraitURL-16}" alt="ask">{Asker}: {Question}</p>
                <p>{Answer}</p>

                    <div>
                    {block:HasTags}
                    {block:Tags}<a href="{TagURL}"><i></i> {Tag}</a>{/block:Tags}
                   	{/block:HasTags}

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
				<a href="{Permalink}#disqus_thread">Comments</a>
			</div>
            </div>
            </div>
		{/block:Answer}

        <!-- disqus -->
        {block:PermalinkPage} 
        <div>
			<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 = 'http://privatepyro.disqus.com/embed.js';
           (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
          })();
        </script>
        <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=privatepyro">comments powered by Disqus.</a></noscript>

        {/block:Permalink}<script type="text/javascript">
        var disqus_shortname = '{text:Disqus}';
        (function () {
          var s = document.createElement('script'); s.async = true;
          s.src = 'http://privatepyro.disqus.com/count.js';
          (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
        }());
        </script></div></div>
        {/block:PermalinkPage}

        {/block:Posts}
    </div>
	</div><!-- /span10 -->
	</div><!-- /row -->

	<div>
    <div>
    	{block:Pagination}
            {block:PreviousPage}
                <a href="{PreviousPage}">Previous</a>
            {/block:PreviousPage}

            {block:JumpPagination length="5"}
                {block:CurrentPage}
                    <span>{PageNumber}</span>
                {/block:CurrentPage}

                {block:JumpPage}
                    <a href="{URL}">{PageNumber}</a>
                {/block:JumpPage}
            {/block:JumpPagination}

            {block:NextPage}
                <a href="{NextPage}">Next</a>
            {/block:NextPage}
        {/block:Pagination}

        <a href="/archive">Archive</a>        
        <div>
        Designed by <a href="http://www.privatepyro.com">Private Pyro</a>
        </div>
  	</div><!-- /span12 -->
    </div><!-- /foot -->

  </div><!-- /row -->
</div><!-- /container -->

<script type="text/javascript" src="http://static.tumblr.com/zyc9iyz/d8Hmeqpxq/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
<script type="text/javascript">

        $(window).load(function () {
            $('#posts').masonry();
        });

</script>    
{block:Twitter}
<script type="text/javascript" src="/tweets.js"></script>
{/block:Twitter}
</body>
</html>

Preview:

pyrosbootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *

*

© Private Pyro 2013