my Tumblr theme

index | misc

I created my own tumblr theme.

tony's tumblr theme

my tumblr is here.

I started with The Minimalist, and modified the css heavily, and added more css to the custom css in the advanced tab in the customize panel.

CSS customizations

Here you have the css code I added in the “custom css” field under the advanced tab in the customizations side bar. This stuff will override what's in the inline css:

/** 
	tonybaldwin.me css by tony baldwin 
	© copyright tony baldwin, http://tonybaldwin.me
	published according to the Gnu Public License, v. 3 or later.	
	this first part I added to the custom css in the advanced tab.
	It should override anything contrary in the embedded css, afaik
**/
 
body { 
	background-image:url('http://tonybaldwin.me/imgs/tiled_space.jpg');
	background-repeat: repeat;
	background-attachment:fixed;
	font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
	font-size: 8pt;
	color: #000;
	background-color: #fff;
	margin: auto;
	width: 600px;
}
 
#masthead {
    	width: 600px;
	margin: auto;
    	padding: 15px;
    	background: #fff;
    	color: #000;
    	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top:50px;
	font-size: 120%;
	/* for IE */
 
}
 
#main {
    	width: 600px;
	margin: auto;
    	padding: 15px;
    	background: #fff;
    	color: #000;
    	-moz-border-radius: 5px;
	margin-top:50px;
	border-radius: 5px;
	font-size: 150%;
 
}
 
#footer {
    	width: 600px;
	text-align: center;
    	padding: 15px;
    	background: #000;
    	color: #fff;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-size: 80%;
	/* for IE */
 
}
 
.clear {
	clear: both;
}
 
a:link {text-decoration: underline; color: darkblue;}
a:visited {text-decoration: none; color: #888;}
a:active {text-decoration: none; color: #777;}
a:hover {text-decoration: none; color: white; background-color: #303e74; -moz-border-radius: 3px; border-radius: 3px;}
 
ul li ul li ul li {	
	margin-left: 10px;
}
 
img { 
	float: center; 
	margin: 5px; 
	border-width: 3px;
	border-color: #444444;
	border-style: solid;
	}
 
pre {
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
	  }

From here down you have the modifications I made to inline css from The Minimalist (essentially, I changed the background, width, corners, fonts, many of the link properties, and other text display properties):

/*----- GENERAL -----*/
 
     header, footer, section, article, nav, aside {
        display: block;
     }
 
     body {
        /**background: #ffffff;
        color: #222; **/
        background: #fff;
        color: #000;
    background-image:url('http://tonybaldwin.me/imgs/tiled_space.jpg');
	background-repeat: repeat;
	background-attachment:fixed;
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        padding-top: 1px;
        text-align: center;
        width:600px;
        margin: 0 auto;
     }
 
     h1, h2, h3, hQ {
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
     }
 
     h1 {
        font-size: 50px;
        line-height: 50px;
     }
 
     h2 {
        font-size: 31px;
        line-height: 37px; 
     }
 
     h3 {
        font-size: 21px;
        line-height: 27px; 
     }
 
 
     hr{
        border:0 #ccc solid;
        border-top-width:1px;
        clear:both;
        height:1px;
     }
 
     ol{list-style:decimal}
 
     ul{list-style:disc}
 
     li{margin-left:30px}
 
     p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:15px}
 
    a:link {text-decoration: none; font-weight: bold; color: darkblue;}
    a:visited {text-decoration: none; color: #333;}
    a:active {text-decoration: none; color: #ffffff;}
    a:hover {text-decoration: none; color: white; 
        background-color: #303e74; -moz-border-radius: 3px; 
        border-radius: 3px;}
 
     #main {
        padding: 10px;
        background-color: #fff;
 
 
     }
 
/*----- MASTHEAD -----*/
 
     .noMeta > div {
        padding: 10px;
        background-color: #fff;
     }
 
     #masthead {
        margin-bottom: 0px;
        background-color: #fff;
        text-align: center;
     }
 
     #masthead h1 {
        margin-bottom: 0;
     }
 
     #masthead h1 a:link, #masthead h1 a:visited {
        color: #000;
        text-decoration: none;
     }
 
     #masthead h1 a:active {
        outline: 0;
     }
 
     #masthead p {
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        font-size: 20px;
        color: #fff;
        margin-bottom: 0;
     }
 
     #masthead a:link, #masthead a:visited {
        color: darkblue;
     }
 
     #masthead a:hover {text-decoration: none; color: #303e74; background-color: white; -moz-border-radius: 3px; border-radius: 3px;}
 
     #siteDescription{
        font-size: 13px;
        color: #222;
        border-top: 1px solid #222;
        margin-top: 20px;
        margin-bottom: -5px;
        padding: 15px 0 0 0;
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
     }
 
/*----- SEARCH FORM -----*/
 
     #frmSearch {
        padding-top: 20px; 
        display: none;
     }
 
     #txtSearch {
        background: url(http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg) left no-repeat;
        width: 225px;
        padding: 2px 0 0 20px;
        font: 12px/12px ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        color: #222;
        border: 0px;
     }
 
/*----- MAIN HEADER NAV STRIP -----*/
 
     #mainNav {
        border-top: 1px solid #222;
        margin-top: 10px;
        padding: 5px;
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
     }
 
     #mainNav ul {
        list-style: none;
        margin: 0;
        padding: 0;
     }
 
     #mainNav li {
        margin: 5px;
        display: inline;
        padding: 0;
     }
 
     #mainNav a:link, #mainNav a:visited {
        padding: 0;
        font-size: 14px;
        line-height: 14px;
        margin: 0 2px;
        text-decoration: none;
        color: #222;
     }
 
     #mainNav a:hover, #mainNav a:active {
        outline: none;
        text-decoration: none;
        border-bottom: 1px solid #222;
        color: white; 
        background-color: #303e74; 
        -moz-border-radius: 3px; 
        border-radius: 3px;}
     }
 
     #mainNav a.active {
        text-decoration: none; 
        color:  white; 
        background-color: #303e74;
        -moz-border-radius: 3px; 
        border-radius: 3px;
     }
 
/*----- ARTICLE META INFO -----*/
 
     #designline {
        margin-top: 50px;
     }
 
     h5{
        position: relative;
        top: -35px;
        margin-bottom: 0px;
        font-family:‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        font-size: 10px;
        color: #303e74;
        text-decoration: none;
        font-weight: bold;
        border-top: 1px solid #303e74;
        background: #fff;
     }
 
     h5 a:link, .line a:visited{
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        font-size: 10px;
        color: #303e74;
        text-decoration: none;
        font-weight: bold;
     }
 
     h5 a:hover{
        text-decoration: underline;
        color: white; 
        background-color: #999; 
        -moz-border-radius: 3px; 
        border-radius: 3px;
        }
     }
 
     h5 abbr{
        display: inline-block;
        position: relative;
        margin: 0 auto;
        padding: 0 8px;
        background: #fff;
        top: 10px;
     }
 
     h5.postDate a{
        color: #303e74;
     }
 
/*----- ARTICLE -----*/
 
     article {
        background: #fff;
        margin-bottom: 20px;
        text-align: left;
       position: relative;
      }
 
     article img {
    text-align: left; 
    margin: 10px; 
	border-width: 3px;
	border-color: #444444;
	border-style: solid;
    max-width: 550;
     }
 
     article p {
        margin: 0;
        line-height: 15pt 
     }
     article > div {
        padding: 0px;
        overflow: hidden;
     }
     article .searchPage {
        margin: 35px 0 0 0;
     }
 
     .searchPageText {
        margin: 0 0 30px 0;
     }
 
     article .meta a:link, article .meta a:visited {
        text-decoration: none;
     }
 
     article .meta a:hover, article .meta a:active {
        text-decoration: underline;
     }
 
     article h2 {
        text-align: center;
        color: #222222;
     }
 
     article h2 a:link, article h2 a:visited {
        color: #222;
        text-decoration: none;
     }
 
     article h2 a:hover, article h2 a:active {
        text-decoration: none; color: white; background-color: #303e74; -moz-border-radius: 3px; border-radius: 3px;
     }
 
     blockquote {
        border-left: 2px solid  #777;
        margin-left: 0;
        padding-left: 1em;
     }
 
     #quoteSource{
        margin: 0 auto;
        text-align: left;
     }
 
     #quoteText h2 {
        text-align: left;
        color: #222222;
     }
 
     article .chat {
        list-style: none;
        padding: 0;
        margin: 0;
     }
 
     article .chat li {
        margin: 0 0 2px;
        padding: 2px 0 2px 0;
     }
 
     .photoCaption {
        text-align: left;
        margin-left: 5px;
 
     }
 
/*----- AUDIO PLAYER -----*/
 
     .audio {
        height: 28px;
        width: 26px;
        overflow: hidden;
        margin: auto;
        padding-top: 7px;
     }
 
     .audioc {
        background-image:url('http://static.tumblr.com/f1whv92/9iCl6bfgp/audiocircle.png');
        background-repeat: no-repeat; 
        height: 41px;
        width: 41px;
     }
 
     .audioCaption {
        margin-top: 1px;
     }
 
     .audioleft {
        width: 41px;
        float: left;
      }
 
     .audioright {
        width: 444px;
        float: right;
      }
 
     .audioContainer {
        margin-top: 5px;
     }
 
     .audioClear {
        clear:both;
     }
 
/*----- ARTICLE NOTES -----*/
 
     .notes {
        border-top: 1px solid #bca474;
        list-style: none;
        padding: 20px 0 5px 0;
        margin: 30px 0 0 0;
     }
     .notes li {
        margin: 0;
     }
 
     .notes .avatar {
        margin: 0 5px 0 0;
        position: relative;
        top: 5px;
     }
 
     .notes blockquote {
        margin: 10px 0 0 35px;
        padding-left: 10px;
        border-left: 2px solid #222222;
     }
 
     .media {
        width: 500px;
        margin-bottom: 20px;
     }
 
/*----- PAGE NAVIGATION -----*/
 
     #pageNav {
        margin-top: 20px;
        border-top: 1px solid #222;
     }
 
     #pageNav ul {
        list-style: none;
        padding: 10px 15px;
        margin: 10px 0;
     }
 
     #pageNav li {
        margin: 0;
        display: inline;
     }
 
     #pageNav a:link, #pageNav a:visited {
        font: 11px ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        padding: 0;
        margin: 0 2px;
        background: #34hdf5;
        color: #222;
        text-decoration: none;
     }
 
     #pageNav a:hover, #pageNav a:active, #pageNav a.active:link, #pageNav a.active:visited {
        text-decoration: underline;
     }
 
     #pageNavOlder:after {
        content: " »";
        font-size: 10px;
     }
 
     #pageNavNewer:before {
        content: "« ";
     }
 
/*----- FOOTER META -----*/
 
     #sitemeta {
        border-top: 2px solid #222;
        color: #999;
        padding: 20px 0 32px 0;
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        font-size: 11px;
     }
 
     #sitemeta p {
        margin: 0;
     }
 
     #sitemeta a:link, #sitemeta a:visited {
        color: #888;
        font-weight: bold;
     }

To submit this to tumblr and make it available with a click, I need to marry the two css bits, and upload the background image to tumblr.
Some, I'm sure, of what's in there is redundant.
If/when I get around to that, I will probably make a post to my blog, and, of course, to my tumblr to announce it.
In the mean time, you can copy paste the css here in your customizations tab. It might be smart to choose the minimalist theme, first, then make the modifications. If you do so, please do not hotlink the background image, but upload it somewhere and alter the body {background-image:url('http://tonybaldwin.me/imgs/tiled_space.jpg')} to reflect the location of the image. You can, of course, use a different image, even.

tonybaldwin 2012.02.07.11.10


Tags

Because tags weren't displayed on my posts, I added the following:

   {block:HasTags}
                   <p align="left" style="font-size: small;"> tagged: 
                        {block:Tags}
                            
                                <small><a href="{TagURL}">#{Tag}</a></small>
                        
                        {/block:Tags}
                    </p>
                {/block:HasTags}
     

Right before the end of the posts block (ie., before

{/block:Posts}

).

tonybaldwin 2012.02.18.11.38


Full HTML customization

If you want, here is the entirety of the code from the html customization panel, which includes css and other alterations. One could simply copy/paste this, replacing the current code, to use my theme, AND, of course, use the above custom css in the custom css panel.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!--
     Theme: tony's tumblr theme v1.
     Design: tony's tumblr theme (http://tonybaldwin.me)
-->
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
     <title>{Title}{block:PostSummary} | {PostSummary}{/block:PostSummary}{block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}</title>	
     <meta name="description" content="{MetaDescription}" />
     <meta name="if:Show description" content="1" />	
     <meta name="if:Show search" content="1" />
     <meta name="text:Twitter name" content="" />
     <meta name="text:Disqus Shortname" content="" />
     <meta name="text:Google Analytics ID" content="" />	
     <link rel="shortcut icon" href="{Favicon}" />
     <link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />
 
<!-- Styles -->
 
<link rel="stylesheet" href="http://static.tumblr.com/f1whv92/Mp9l6ewcg/reset.css" />
<style type="text/css">
 
/*----- GENERAL -----*/
 
     header, footer, section, article, nav, aside {
        display: block;
     }
 
     body {
        /**background: #ffffff;
        color: #222; **/
        background: #fff;
        color: #000;
    background-image:url('http://tonybaldwin.me/imgs/tiled_space.jpg');
	background-repeat: repeat;
	background-attachment:fixed;
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        padding-top: 1px;
        text-align: center;
        width:600px;
        margin: 0 auto;
     }
 
     h1, h2, h3, hQ {
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
     }
 
     h1 {
        font-size: 50px;
        line-height: 50px;
     }
 
     h2 {
        font-size: 31px;
        line-height: 37px; 
     }
 
     h3 {
        font-size: 21px;
        line-height: 27px; 
     }
 
 
     hr{
        border:0 #ccc solid;
        border-top-width:1px;
        clear:both;
        height:1px;
     }
 
     ol{list-style:decimal}
 
     ul{list-style:disc}
 
     li{margin-left:30px}
 
     p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:15px}
 
    a:link {text-decoration: none; font-weight: bold; color: darkblue;}
    a:visited {text-decoration: none; color: #333;}
    a:active {text-decoration: none; color: #ffffff;}
    a:hover {text-decoration: none; color: white; 
        background-color: #303e74; -moz-border-radius: 3px; 
        border-radius: 3px;}
 
     #main {
        padding: 10px;
        background-color: #fff;
 
 
     }
 
/*----- MASTHEAD -----*/
 
     .noMeta > div {
        padding: 10px;
        background-color: #fff;
     }
 
     #masthead {
        margin-bottom: 0px;
        background-color: #fff;
        text-align: center;
     }
 
     #masthead h1 {
        margin-bottom: 0;
     }
 
     #masthead h1 a:link, #masthead h1 a:visited {
        color: #000;
        text-decoration: none;
     }
 
     #masthead h1 a:active {
        outline: 0;
     }
 
     #masthead p {
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        font-size: 20px;
        color: #fff;
        margin-bottom: 0;
     }
 
     #masthead a:link, #masthead a:visited {
        color: darkblue;
     }
 
     #masthead a:hover {text-decoration: none; color: #303e74; background-color: white; -moz-border-radius: 3px; border-radius: 3px;}
 
     #siteDescription{
        font-size: 13px;
        color: #222;
        border-top: 1px solid #222;
        margin-top: 20px;
        margin-bottom: -5px;
        padding: 15px 0 0 0;
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
     }
 
/*----- SEARCH FORM -----*/
 
     #frmSearch {
        padding-top: 20px; 
        display: none;
     }
 
     #txtSearch {
        background: url(http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg) left no-repeat;
        width: 225px;
        padding: 2px 0 0 20px;
        font: 12px/12px ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        color: #222;
        border: 0px;
     }
 
/*----- MAIN HEADER NAV STRIP -----*/
 
     #mainNav {
        border-top: 1px solid #222;
        margin-top: 10px;
        padding: 5px;
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
     }
 
     #mainNav ul {
        list-style: none;
        margin: 0;
        padding: 0;
     }
 
     #mainNav li {
        margin: 5px;
        display: inline;
        padding: 0;
     }
 
     #mainNav a:link, #mainNav a:visited {
        padding: 0;
        font-size: 14px;
        line-height: 14px;
        margin: 0 2px;
        text-decoration: none;
        color: #222;
     }
 
     #mainNav a:hover, #mainNav a:active {
        outline: none;
        text-decoration: none;
        border-bottom: 1px solid #222;
        color: white; 
        background-color: #303e74; 
        -moz-border-radius: 3px; 
        border-radius: 3px;}
     }
 
     #mainNav a.active {
        text-decoration: none; 
        color:  white; 
        background-color: #303e74;
        -moz-border-radius: 3px; 
        border-radius: 3px;
     }
 
/*----- ARTICLE META INFO -----*/
 
     #designline {
        margin-top: 50px;
     }
 
     h5{
        position: relative;
        top: -35px;
        margin-bottom: 0px;
        font-family:‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        font-size: 10px;
        /** color: #303e74;  **/
        text-decoration: none;
        font-weight: bold;
 
        border-top: 1px solid #303e74;
        background: #fff;
     }
 
     h5 a:link, .line a:visited{
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        font-size: 10px;
        color: #303e74;
        text-decoration: none;
        font-weight: bold;
     }
 
     h5 a:hover{
        text-decoration: underline;
        color: #fff; 
        background-color: #eee; 
        -moz-border-radius: 3px; 
        border-radius: 3px;
        padding 5px;
        }
     }
 
     h5 abbr{
        display: inline-block;
        position: relative;
        margin: 0 auto;
        padding: 0 8px;
        background: #fff;
        top: 10px;
     }
 
     h5.postDate a{
        color: #303e74;
     }
 
/*----- ARTICLE -----*/
 
     article {
        background: #fff;
        margin-bottom: 20px;
        text-align: left;
       position: relative;
      }
 
     article img {
    text-align: left; 
    margin: 10px; 
	border-width: 3px;
	border-color: #444444;
	border-style: solid;
    max-width: 550;
     }
 
     article p {
        margin: 0;
        line-height: 15pt 
     }
     article > div {
        padding: 0px;
        overflow: hidden;
     }
     article .searchPage {
        margin: 35px 0 0 0;
     }
 
     .searchPageText {
        margin: 0 0 30px 0;
     }
 
     article .meta a:link, article .meta a:visited {
        text-decoration: none;
     }
 
     article .meta a:hover, article .meta a:active {
        text-decoration: underline;
     }
 
     article h2 {
        text-align: center;
        color: #222222;
     }
 
     article h2 a:link, article h2 a:visited {
        color: #222;
        text-decoration: none;
     }
 
     article h2 a:hover, article h2 a:active {
        text-decoration: none; color: white; background-color: #303e74; -moz-border-radius: 3px; border-radius: 3px;
     }
 
     blockquote {
        border-left: 2px solid  #777;
        margin-left: 0;
        padding-left: 1em;
     }
 
     #quoteSource{
        margin: 0 auto;
        text-align: left;
     }
 
     #quoteText h2 {
        text-align: left;
        color: #222222;
     }
 
     article .chat {
        list-style: none;
        padding: 0;
        margin: 0;
     }
 
     article .chat li {
        margin: 0 0 2px;
        padding: 2px 0 2px 0;
     }
 
     .photoCaption {
        text-align: left;
        margin-left: 5px;
 
     }
 
/*----- AUDIO PLAYER -----*/
 
     .audio {
        height: 28px;
        width: 26px;
        overflow: hidden;
        margin: auto;
        padding-top: 7px;
     }
 
     .audioc {
        background-image:url('http://static.tumblr.com/f1whv92/9iCl6bfgp/audiocircle.png');
        background-repeat: no-repeat; 
        height: 41px;
        width: 41px;
     }
 
     .audioCaption {
        margin-top: 1px;
     }
 
     .audioleft {
        width: 41px;
        float: left;
      }
 
     .audioright {
        width: 444px;
        float: right;
      }
 
     .audioContainer {
        margin-top: 5px;
     }
 
     .audioClear {
        clear:both;
     }
 
/*----- ARTICLE NOTES -----*/
 
     .notes {
        border-top: 1px solid #bca474;
        list-style: none;
        padding: 20px 0 5px 0;
        margin: 30px 0 0 0;
     }
     .notes li {
        margin: 0;
     }
 
     .notes .avatar {
        margin: 0 5px 0 0;
        position: relative;
        top: 5px;
     }
 
     .notes blockquote {
        margin: 10px 0 0 35px;
        padding-left: 10px;
        border-left: 2px solid #222222;
     }
 
     .media {
        width: 500px;
        margin-bottom: 20px;
     }
 
/*----- PAGE NAVIGATION -----*/
 
     #pageNav {
        margin-top: 20px;
        border-top: 1px solid #222;
     }
 
     #pageNav ul {
        list-style: none;
        padding: 10px 15px;
        margin: 10px 0;
     }
 
     #pageNav li {
        margin: 0;
        display: inline;
     }
 
     #pageNav a:link, #pageNav a:visited {
        font: 11px ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        padding: 0;
        margin: 0 2px;
        background: #34hdf5;
        color: #222;
        text-decoration: none;
     }
 
     #pageNav a:hover, #pageNav a:active, #pageNav a.active:link, #pageNav a.active:visited {
        text-decoration: underline;
     }
 
     #pageNavOlder:after {
        content: " »";
        font-size: 10px;
     }
 
     #pageNavNewer:before {
        content: "« ";
     }
 
/*----- FOOTER META -----*/
 
     #sitemeta {
        border-top: 2px solid #222;
        color: #999;
        padding: 20px 0 32px 0;
        font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
        font-size: 11px;
     }
 
     #sitemeta p {
        margin: 0;
     }
 
     #sitemeta a:link, #sitemeta a:visited {
        color: #888;
        font-weight: bold;
     }
 
{CustomCSS}
</style>
 
<!-- Scripts -->
 
<!--[if IE]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script src="http://static.tumblr.com/oawavkn/JPAlyq9zp/cufon-yui.js" type="text/javascript"></script>
     <script src="http://static.tumblr.com/f1whv92/fgIl65bo1/cufon_300.font.js" type="text/javascript"></script>
 
 
 
<script>
     $(function() {
        var search = $("#txtSearch").val();
        var placeholder = "Search...";
        var fadeToOpacity = 0.4;
        $("#txtSearch").fadeTo("normal", fadeToOpacity);
        if (search == "") {
     $("#txtSearch").val(placeholder);
     }
     $("#txtSearch").blur(function() {
        search = $("#txtSearch").val();
        if (!(search != "" && search != placeholder)) {
        $("#txtSearch").val(placeholder);
     }
     $("#txtSearch").fadeTo("normal", fadeToOpacity);
     });
     $("#txtSearch").focus(function() {
        search = $("#txtSearch").val();
        if (search == placeholder) {
        $("#txtSearch").val("");
     }
     $("#txtSearch").fadeTo("normal", 1);
     });
     $("#btnSearch").click(function() {
     $("#frmSearch").slideToggle("normal");
     $(this).toggleClass("active");
 //  $("#txtSearch").focus();
     });
     });
</script>
 
</head>
<body>
 
     <header id="masthead" class="clearfix">
        <div id="thehead">          
              <h1 class="cufon"><a href="/">{Title}</a></h1>
              <form action="/search" method="get" id="frmSearch">
              <input type="text" id="txtSearch" name="q" value="{SearchQuery}" />
              </form>    
 
     {block:Description}
        <div id="siteDescription">{Description}</div>
     {block:Description}
 
           <nav id="mainNav">    
           <li><a href="http://tonybaldwin.me">tonybaldwin.me</a></li>
              {block:HasPages}
              {block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
              {/block:HasPages}
              {block:AskEnabled}<li><a href="/ask">ask</a></li>{/block:AskEnabled}
              {block:SubmissionsEnabled}<li><a href="/submit">submit</a></li>{/block:SubmissionsEnabled}                 
              <li><a href="/archive">archive</a></li>
              <li><a href="/random">random</a></li>
              <li><a href="{RSS}">rss</a></li>
              <li><a href="javascript:;" id="btnSearch">search</a></li>
              {block:IfTwitterName}
 
              {/block:IfTwitterName}
           </nav>         
        </div>
     </header>
 
     <section id="main" class="clearfix">
     <div class="layout">           
     {block:SearchPage}
        <article>
           <div>
              <div class="searchPage">
                 <h2>Search results for <a href="{URLSafeSearchQuery}">{SearchQuery}</a></h2>
              </div>
                    {block:NoSearchResults}
                    <div class="searchPageText">
                       <p>I’m sorry, but we couldn't find anything matching "<b>{SearchQuery}</b>". Suggestions:</p>
                       <ul>
                          <li>Make sure all words are spelled correctly.</li>
                          <li>Try different keywords.</li>
                          <li>Try more general keywords.</li>
                       </ul>
                    </div>
                    {/block:NoSearchResults}
           </div>
        </article>
     {/block:SearchPage}
 
     {block:TagPage}
     <article>
        <div>
           <div class="searchPage">
           <h2>Posts tagged <a href="{TagURL}">{Tag}</a></h2>
           </div>
        </div>
     </article>
     {/block:TagPage}      
 
{block:Posts}
     <div id="designline">
        <h5 class="postDate">
           <abbr>{block:Date}<a href="{Permalink}">{Month} {DayOfMOnth}, {Year}</a>{/block:Date}{block:NoteCount} | <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}
           </abbr>
 
 
 
        </h5>
     </div>
 
     <article>
        <div>
           {block:Text}
              {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
              {Body}
           {/block:Text}
 
           {block:Photo}
              {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
              {block:Caption}<div class="photoCaption">{Caption}</div>{/block:Caption}
           {/block:Photo}
 
           {block:Photoset}
              <div class="media">{Photoset-500}</div>
              {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
           {/block:Photoset}
 
           {block:Quote}
              <div id="quoteText"><h2>{Quote}</h2></div>
              {block:Source}<div id="quoteSource"><p>&mdash;{Source}</p></div>{/block:Source}
           {/block:Quote}
 
           {block:Link}
              <h2><a href="{URL}" {Target}>{Name}</a></h2>
              {block:Description}
              <div>{Description}</div>
              {/block:Description}
           {/block:Link}       
 
          {block:Chat}
             {block:Title}<h2>{Title}</h2>{/block:Title}
             <ul class="chat">
                {block:Lines}
                <li>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li>
                {/block:Lines}
             </ul>
          {/block:Chat}
 
          {block:Audio}
             <div class="audioleft">
                <div class="audioc">
                <div class="audio">{AudioPlayerBlack}</div>
                </div>
             </div>
             <div class="audioright"> 
                <div class="audioCaption">{block:Artist}<b>{Artist}</b>{/block:Artist}
<p>&mdash;{block:TrackName}{TrackName}{/block:TrackName}</p>
                </div>
             </div>
             <div class="audioClear"></div>
             <div class="audioContainer">
                {block:Caption}{Caption}{/block:Caption}
             </div>
          {/block:Audio}
 
          {block:Video}
             <div class="media">{Video-500}</div>
             {block:Caption}<div>{Caption}</div>{/block:Caption} 
          {/block:Video}
 
          {block:Answer}
             <h3>{Asker} asked: {Question}</h3>
             {Answer}
          {/block:Answer}
 
          {block:Date}
 
                    {block:IfDisqusShortname}
  <script type="text/javascript">
  //<![CDATA[
  (function() {
    var links = document.getElementsByTagName('a');
    var query = '?';
    for(var i = 0; i < links.length; i++) {
      if(links[i].href.indexOf('#disqus_thread') >= 0) {
        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
      }
    }
    document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
    })();
    //]]>
    </script>
  {/block:IfDisqusShortname}
 
          {block:PostNotes}
             {PostNotes}
          {/block:PostNotes}
 
          {block:Date}
 
        </div>
 
 
 
     </article>
 
      {block:HasTags}
                   <p align="left" style="font-size: small;"> tagged: 
                        {block:Tags}
 
                                <small><a href="{TagURL}">#{Tag}</a></small>
 
                        {/block:Tags}
                    </p>
                {/block:HasTags}
 
{/block:Posts}
 
     {block:PermalinkPagination}
        <nav id="pageNav">
           <ul class="clearfix">
              {block:PreviousPost}<li><a href="{PreviousPost}" id="pageNavNewer">Previous</a></li>{/block:PreviousPost}
              {block:NextPost}<li><a href="{NextPost}" id="pageNavOlder">Next</a></li>{/block:NextPost}  
           </ul>
        </nav>
     {/block:PermalinkPagination}
 
     {block:Pagination}
        <nav id="pageNav">
           <ul class="clearfix">
             {block:PreviousPage}<li><a href="{PreviousPage}" id="pageNavNewer">Newer</a></li>{/block:PreviousPage} 
             {block:JumpPagination length="5"}
             {block:CurrentPage}<li><a href="{URL}" class="active">{PageNumber}</a></li>{/block:CurrentPage}
             {block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
             {/block:JumpPagination}
             {block:NextPage}<li><a href="{NextPage}" id="pageNavOlder">Older</a></li>{/block:NextPage} 
           </ul>
        </nav>
     {/block:Pagination} 
 
     {block:DayPagination}
        <nav id="pageNav">
           <ul class="clearfix">
              {block:PreviousDayPage}<li><a href="{PreviousDayPage}">&laquo; {DayOfMonth} {ShortMonth}</a></li>{/block:PreviousDayPage}{block:NextDayPage}|<li><a href="{NextDayPage}">{DayOfMonth} {ShortMonth} &raquo;</a></li>{block:NextDayPage}
           </ul>
        </nav>
     {/block:DayPagination}
 
     </div><!-- END layout -->
     </section>
 
     <footer id="sitemeta">
        <div class="clearfix">
           <div class="thefooter">
              <p><a href="http://tonybaldwin.me/hax/doku.php?id=misc:tumblrtheme">the tony's tumblr theme</a> designed by <a href="http://tonybaldwin.me/webs/">tony baldwin</a> | powered by <a href="http://tumblr.com">tumblr</a></p>
           </div>
        </div>
     </footer>
 
     {block:IfGoogleAnalyticsID}
        <script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker=_gat._getTracker("{text:Google Analytics ID}");pageTracker._trackPageview()}catch(err){}</script>
     {block:IfGoogleAnalyticsID}
 
</body>
</html>

tonybaldwin 2012.02.18.11.41