Tumblr Styles Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<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="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; font: 12px/20px Helvetica, "Helvetica", Helvetica, mono; padding-top: 25px; text-align: center; width:500px; margin: 0 auto; }

h1, h2, h3, hQ { font-family: Helvetica; }

h1 { font-size: 50px;

line-height: 50px; }

h2 { font-size: 31px; line-height: 37px; }

h3 { font-size: 21px; line-height: 27px; }

a:link, a:visited { color: #222222; font-weight: bold; text-decoration: none; } a:hover, a:active { text-decoration: underline; }

hr{ border:0 #ccc solid; border-top-width:1px; clear:both; height:0; }

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}

#main { padding: 0px; }

/*----- MASTHEAD -----*/

.noMeta > div { padding: 0px; }

#masthead { margin-bottom: 0px;

}

#masthead h1 { margin-bottom: 0; }

#masthead h1 a:link, #masthead h1 a:visited { text-transform: Uppercase; color: #bca474; text-decoration: none; }

#masthead h1 a:active { outline: 0; }

#masthead p { font-family: Helvetica, Sans; font-size: 20px; color: #fff; margin-bottom: 0; }

#masthead a:link, #masthead a:visited { color: #fff; }

#siteDescription{ font-size: 15px; color: #222; text-transform: Uppercase; border-top: 1px solid #bca474; margin-top: 20px; margin-bottom: -5px; padding: 10px 0 0 0; font-family: Helvetica; }

/*----- 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 Georgia, "Times New Roman", Times, serif;

color: #bca474; border: 0px; }

/*----- MAIN HEADER NAV STRIP -----*/

#mainNav { border-top: 1px solid #bca474; border-bottom: 2px solid #bca474; margin-top: 20px; padding: 13px 0 14px 0; font-family: Cufon; }

#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: #bca474; text-transform: Uppercase; }

#mainNav a:hover, #mainNav a:active { outline: none; text-decoration: none; border-bottom: 1px solid #bca474; }

#mainNav a.active { text-decoration: none; border-bottom: 1px solid #bca474; }

/*----- ARTICLE META INFO -----*/

#designline {

margin-top: 50px; }

h5{ position: relative; top: -35px; margin-bottom: 0px; font-family: Georgia, serif; font-size: 10px; color: #bca474; text-decoration: none; text-transform: Uppercase; font-weight: bold; border-bottom: 1px solid #bca474; background: #fff; }

h5 a:link, .line a:visited{ font-family: Georgia, serif; font-size: 10px; color: #bca474; text-decoration: none; text-transform: Uppercase; font-weight: bold; }

h5 a:hover{ text-decoration: underline; }

h5 abbr{ display: inline-block; position: relative; margin: 0 auto; padding: 0 8px; background: #fff; top: 10px; }

h5.postDate a{ color: #bca474; }

/*----- ARTICLE -----*/

article { background: #fff; margin-bottom: 20px; text-align: left; position: relative;

}

article img { border: none; margin-bottom: 15px; max-width: 500px; }

article p img { margin: 0; } 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 { text-transform: Uppercase; color: #222; text-decoration: none; }

article h2 a:hover, article h2 a:active { text-decoration: none; border-bottom: 1px solid #222; }

blockquote { border-left: 2px solid #bca474; 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: center; }

/*----- 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 Georgia, "Times New Roman", Times, 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: #222; padding: 20px 0 32px 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; }

#sitemeta p { margin: 0; }

#sitemeta a:link, #sitemeta a:visited { color: #222; font-weight: bold; }

{CustomCSS}</style>





<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 type="text/javascript"> Cufon.replace('h1',{ fontFamily: "Cufon" }); Cufon.replace('h2',{ fontFamily: "Cufon" }); Cufon.replace('h3',{ fontFamily: "Cufon" }); Cufon.replace('#mainNav',{ fontFamily: "Cufon" }); Cufon.replace('#siteDescription',{ fontFamily: "Cufon" }); </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"> {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} <li><a href="http://twitter.com/{text:Twitter name}">Twitter</a></li> {/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}">{DayOfMOnth}{DayOfMonthSuffix} {ShortMonth} {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>—{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>—{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: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}">« {DayOfMonth} {ShortMonth}</a></li>{/block:PreviousDayPage}{block:NextDayPage}|<li><a href="{NextDayPage}">{DayOfMonth} {ShortMonth} »</a></li>{block:NextDayPage} </ul> </nav> {/block:DayPagination} </div> </section>

<footer id="sitemeta"> <div class="clearfix"> <div class="thefooter"> <p><a href="http://www.tumblr.com/theme/12051">The Minimalist Theme</a> designed by <a href="http://minimalist.co">The Minimalist</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>

Tumblr Styles Template

Documents

Transcript of Tumblr Styles Template