/ Published in: HTML
Redesigned Tumblr Theme based on [Office](http://safe.tumblr.com/theme/4040581/0# "Office") by [Alex Penny](http://alexpenny.com/ "Alex Penny")
Change log:
# Desember 31, 2010
+ added <a href="http://code.google.com/p/twitterjs/">TwitterJS</a> by Remmy Sharp
+ enabling custom text to include Twitter Username for Twitter Widget
# Desember 26, 2010
+ modified Disqus embed code to appear outside PostNotes but still in PermalinkPage
# Dec 14 2011
+ Updated font-size
Change log:
# Desember 31, 2010
+ added <a href="http://code.google.com/p/twitterjs/">TwitterJS</a> by Remmy Sharp
+ enabling custom text to include Twitter Username for Twitter Widget
# Desember 26, 2010
+ modified Disqus embed code to appear outside PostNotes but still in PermalinkPage
# Dec 14 2011
+ Updated font-size
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!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" /> <meta name="if:Show Title" content="1" /> <meta name="if:Show Description" content="1" /> <meta name="if:Show Profile Picture" content="1" /> <meta name="if:Show Post Info" content="1" /> <meta name="if:Show Notes" content="1" /> <meta name="if:Show Tags" content="1" /> <meta name="color:Accent" content="#00ff00"/> <meta name="color:White Text" content="#FFFFFF"/> <meta name="color:Body Links" content="#009900"/> <meta name="color:Background" content="#000000"/> <meta name="image:Logo" content=""/> <meta name="image:Background" content="http://static.tumblr.com/jn9hrij/Vx8l35qrc/bg.jpg"/> <meta name="text:Disqus Shortname" content="" /> <meta name="text:Google Analytics ID" content="" /> <meta name="text:Twitter Username" content="" /> <link rel="shortcut icon" href="{Favicon}" /> <link rel="alternate" type="application/rss+xml" href="{RSS}" /> {block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description} <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style type="text/css"> /* - - - - - - - - - - - - - Alex - - - - - - - - - - - - - */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; } body { line-height: 1; background: white; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } #path { display: none; } a { text-decoration: none; color: {color:Accent}; } a { color: {color:Body Links}; } a:hover { text-decoration: underline; } /* - - - - - - - - - - - - - General - - - - - - - - - - - - - */ body { background: {color:Background} url('{image:Background}'); background-attachment: fixed; margin-top: 30px; font-family: Monaco, Courier; font-size: 12px; color: #00ff00; } .rightcolumn { float: left; width: 710px; margin-left: 250px; } blockquote { margin: 5px 30px 5px 20px; padding-left: 15px; line-height: 25px; border-left: 1px dotted #00ff00; color: #00ff00; } .text blockquote { margin: 25px 30px 25px 20px; } .postcontain{ float: left; margin-bottom: 20px; } .left { margin-left: 15px; float: left; } .right { float: right; } /* - - - - - - - - -- - - Header - - - - - - - -- - - - */ .header { float: left; width: 100%; } h1 a{ font-size: 20px; line-height: 40px; color: #009900; font-weight: normal; float: left; } h1 a:hover { text-decoration: none; } .title a{ width: 320px; } .search { width: 200px; padding-left: 10px; height: 35px; float: right; background: #FFF; -webkit-border-radius: 20px; -moz-border-radius: 20px; border: solid 1px #D1D1D1; } .search form { float: right; width: 100%; display: inline; } #submit { height: 50px; width: 35px; padding: 0px; margin: 0px; border: none; background: none; float: right; background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat ; background-position: -8px -4px; } #submit:hover { cursor: pointer; } .search #textbox { font-size: 16px; font-family: Verdana; background: none; color: #00ff00; float: left; height: 40px; width: 100px; padding: 0px; margin: 0 0 0 7px; border: none;} #boxresults { background-color: {color:Accent}; float: left; margin-top: 5px; padding: 7px 9px; -webkit-border-radius: 20px; -moz-border-radius: 20px; font-size: 10px; font-family: Verdana; color: {color:White Text}; margin-left: -2px; cursor: default; } .first { clear: both; min-height: 25px; height: 50px; margin-bottom: 20px; } /* - - - - - - - - -- - - Left Column - - - - - - - -- - - - */ #leftwrap { position: absolute; float: left; width: 200px; } #leftcolumn { width: 200px; height: 400px; position: fixed; top: 25px; left: 0px; } #logobox { width:130px; margin: 0 0 25px 35px; } #sidemenu { float: left; } #menu { clear: both; float: left; width: 200px; z-index: 100; } #info { clear: both; text-align: left; font-size: 12px; color: #C6C6C6; line-height: 18px; padding: 10px 0 0 35px; margin: 0px; } #info a { text-decoration: underline; color: #C6C6C6; font-size: 12px; } #info a:hover { color: {color:Accent}; } #profilepic { margin-left: 35px; padding-top: 30px; height: 128px; } #profilepic img { -webkit-border-radius: 5px; -moz-border-radius: 5px; } .navmenu { margin-top: 30px; width: 100%; float: left; } .navmenu li{ clear: both; font-family: verdana; font-size: 14px; } .navmenu li a { color: #090; text-indent: 35px; float: left; clear: both; width: 200px; line-height: 35px; } .navmenu li a:hover { color: {color:White Text}; background-color: {color:Accent}; margin-top: -1px; text-decoration: none; } /* - - - - - - - - -- - - Date - - - - - - - -- - - - */ .datetime { float: left; width: 100%; margin-top: 8px; margin-bottom: 20px; color: #AAAAAA; text-transform: uppercase; font-size: 11px; } .datetime a { color: #AAAAAA; } .datetime a:hover { text-decoration: none; } .date { float: left; width: 250px; } .new { margin-top: 30px; } .time { float: right; padding-left: 20px; } .post{ padding-bottom: 16px; float: left; clear: both; } .postinner{ width:500px; margin: 20px 0 0 20px; } .posted { background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat; background-position: -13px -134px; } .reblogged { background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat; background-position: -15px -174px; } /* - - - - - - - - - -- - Boxes - - - - - - - -- - - - */ .text, .photo, .video, .chat { width: 710px; float: left; .clear: both; } .quote, .link, .audio { width: 710px; padding-bottom: 10px; } .short { float: left; width: 710px; position: relative; } /* .shadow { background: url(http://static.tumblr.com/jn9hrij/WwEl32aup/bottomshadow.png) no-repeat top; clear: both; height: 14px; } .containshadow { float: left; padding-bottom: 14px; background: url(http://static.tumblr.com/jn9hrij/WwEl32aup/bottomshadow.png) no-repeat bottom; clear: both; } */ /* - - - - - - - - -- - - Text Post - - - - - - - -- - - - */ .text { /* background: url(http://static.tumblr.com/jn9hrij/BM3l309fn/linev.jpg) repeat-y; background-color: white; */ } .text h3 { font-family: Helvetica; font-size: 18px; } .text h3 a{ padding: 10px 0; font-weight: normal; line-height: 35px; margin: 0 30px 0 70px; text-decoration: none; float: left; max-width: 460px; } .paper { /* background: url(http://static.tumblr.com/jn9hrij/8ull309ey/linesh.jpg); */ width: 100%; padding-bottom:1px; float: left; } .textcontain { margin-left: 75px; } .paper p { margin: 0 30px 25px 0; } .paper p iframe { padding-top: 15px; padding-bottom: 25px; } .text ul li, .text ol li { line-height: 25px; margin: 0 30px 0 25px; padding-left: 5px; color: #00ff00; list-style-type: disc; } .text ol li { list-style-type: decimal; } .text ul, .text ol { margin-bottom: 25px; } .text ul ul, .text ul ol, .text ol ol, .text ol ul { margin-bottom: 0px; } .text ul li ul li { line-height: 25px; margin: 0 0 0 25px; padding-left: 5px; color: #00ff00; list-style-type: circle; } .text blockquote { margin-left: 10px; padding-left: 15px; line-height: 25px; color: #00ff00; } .text blockquote p { margin-left: 0px; padding-left: 15px; line-height: 25px; } .paper h1, .paper h2, .paper h3, .paper h4, .paper h5 { margin-left: 75px; line-height: 25px; font-size: 18px; } /* - - - - - - - -- -body text - - - - - - -- - - */ .text p, .caption, #description, .chatbox { line-height: 25px; font-size: 12px; color: #00ff00; } .audio .caption, .quote .caption { margin: 0 20px; } .caption { margin-top: 8px; } /* - - - - - - - - - - - - Audio Post - - - - - - - - - - - - */ .audio .short{ float: left; height: 270px; } .audioplayercircle { position: absolute; z-index: 3; background: black; -webkit-border-radius: 50px; -moz-border-radius: 50px; top: 103px; left: 106px; opacity: .8; } .audioplayer { width: 20px; height: 30px; overflow: hidden; margin: 17px 24px 13px 16px; } .audio .floaters { position: absolute; } .audio .caption img { margin-bottom: 10px; max-width: 502px; } .recordart { margin: 70px 0 0 210px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); } .albumshadow { margin-left: 264px; } .record { margin-top: 30px; margin-left: 160px; } .audiodata{ top: 0px; right: 0px; margin-left: 270px; width: 260px; height: 270px; position: absolute; z-index: 5; } .audiodata li { background: {color:Accent}; padding: 10px 20px; margin: 20px 0 0; color: {color:White Text}; -webkit-border-top-left-radius: 40px; -webkit-border-bottom-left-radius: 40px; -moz-border-radius-topleft: 40px; -moz-border-radius-bottomleft: 40px; font-family: Helvetica; font-size: 16px; float: right; clear: both; display: block; opacity: .9; } /* - - -- - - - - - - - - Quote Post - -- - - - - -- - - - */ .postedquote { font-size: 14px; font-weight: normal; line-height: 28px; padding: 20px; } .dash { text-indent: -20px; height: 0px; font-size: 13px; font-family: Arial; } /* - - - - - - - - -- - - Link Post - -- - - - - - - - - - */ .postedlink { padding: 10px 18px 5px 18px; margin-right: 15px; color: {color:Accent}; font-size: 14px; font-weight: normal; float: left; } .postedlink { color: {color:Body Links}; } .postedlink:hover { background: {color:Accent}; color: color: {color:White Text}; text-decoration: none; } .postedlink:hover { background: {color:Accent}; color: {color:White Text}; text-decoration: none; } .description { line-height: 35px; padding-left: 20px; font-size: 12px; } /* - -- - - - - - - - - - Photo Post - - - - - - -- - - - - */ .photo img { width: 100%; } /* - -- - - - - - - - - - Chat Post - - - - - - -- - - - - */ .chat h3 { font-family: Helvetica; font-size: 20px; line-height: 30px; margin-left: 30px; } .text h3 a, .chat h3 a{ font-weight: normal; margin-right: 20px; } .chat { padding-top: 15px; } .chatbox li { padding: 0 30px; line-height: 30px; } .label { font-weight: normal; } .even { background: #0b2c02; } /* - - - - - - - - - -- - Metadata - - - - - - - -- - - - */ .metadata { float: left; clear: both; width: 500px; margin: 20px 20px 0px 20px; } .audio .metadata, .quote .metadata, .link .metadata { margin-top: 10px; } .metadata a { text-transform: lowercase; font-size: 13px; padding: 7px; line-height: 36px; } .metadata ul li{ margin: 0px;} .metadata ul { margin-bottom: 0px; } .metadata a:hover { color: {color:White Text}; background: {color:Accent}; text-decoration: none; } .note { float: left; } .tags { float: right; max-width: 360px; } .note li { display: inline; } .note li a{ margin-right: 6px; } .tags li { display: inline; float: left; } .tags li a{ margin-left: 10px; } .descr { clear: both; float: left;padding-bottom: 20px; width: 100%; } .spacer { float: left; clear: both; height:10px; width: 500px; } li .permalink { background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat; background-position: -8px -87px; padding-right: 14px; } li a.permalink:hover { background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat {color:Accent}; background-position: -8px -567px; padding-right: 14px; } .text .permalink, .text .permalink:hover , .photo .permalink, .photo .permalink:hover, .video .permalink, .video .permalink:hover, .chat .permalink, .chat .permalink:hover { border: none; margin-left: -3px; } .anchor, .pagination { float: left; clear: both; width: 710px; margin-bottom: 55px; } .ask { display: none; {block:AskEnabled}display: block;{/block:AskEnabled} } .submit { display: none; {block:SubmissionsEnabled}display: block;{/block:SubmissionsEnabled} } #disqus_content { float: left; width: 500px; } #dsq-new-post { float: left; clear: both; margin-top: 25px; } .notes li { float: left; clear: both; padding: 5px 0; } .searchpage { margin-top: 30px; clear: both; float: left; } .searchpage h3 { font-size: 20px; font-family: Helvetica, Arial; font-weight: normal; } #tweet { float:left; padding: 20px 10px 30px 35px; font-size: 12px; line-height: 150%; } #tweet h3 { margin-bottom: 10px; font-size: 14px; } #tweet ul, #tweet ul li { list-style: none none outside; margin:0; padding:0; } #tweet ul li { margin-bottom: 10px; } #tweet small { font-size: 11px; color: #c6c6c6; } .askmask { position: absolute; } {CustomCSS} </style> </head> <body> <script type="text/javascript"> $(function() { $("object[data^='http://vimeo.com']").each(function() { var parent = $(this).parent(); var vimeoCode = parent.html(); var params = ""; if (vimeoCode.toLowerCase().indexOf("<param") == -1) { $("param", this).each(function() { params += $(this).get(0).outerHTML; }); } var oldOpts = /show_title=1&show_byline=0&show_portrait=0&color=00ADEF/g; var newOpts = "show_title=0&show_byline=0&show_portrait=0&color=55C4E8"; vimeoCode = vimeoCode.replace(oldOpts, newOpts); if (params != "") { params = params.replace(oldOpts, newOpts); vimeoCode = vimeoCode.replace(/<embed/i, params + "<embed"); } parent.html(vimeoCode); }); }); </script> <div id="leftwrap"> <div id="leftcolumn"> {block:IfNotLogoImage}{/block:IfNotLogoImage} <div id="sidemenu"> <div id="menu"> {block:IfNotShowProfilePicture}{/block:IfNotShowProfilePicture} {block:IfShowProfilePicture} {/block:IfShowProfilePicture} <ul class="navmenu"> {block:HasPages} {/block:HasPages} <!--<li><a href="{RSS}">{lang:Subscribe}</a></li>--> </ul> </div> </div><!-- /Menu --> {block:IfTwitterUsername} <!-- Twitter Widget --> <div id="tweet"> <div id="tweets"> </div> </div> <script type="text/javascript" charset="utf-8"> getTwitters('tweets', { id: '{text:Twitter Username}', count: 1, enableLinks: true, ignoreReplies: true, clearContents: true, newwindow:true, onTimeout: function(){ } }); </script> <!-- /Twitter Widget --> {/block:IfTwitterUsername} <div id="info"> </div><!-- /sidemenu --> </div> <div class="rightcolumn"> <div class="header"> {block:IfNotShowTitle}{/block:IfNotShowTitle} <!-- #mod: hide search, it's ugly --> <!-- <div class="search"> <form action="/search" method="get"> {block:SearchPage}<div id="boxresults">{SearchResultCount}</div>{/block:SearchPage} <input id="textbox" type="text" name="q" value=""/> <input id="submit" type="submit" value=""/> </form> </div>--> <!-- /Search --> </div><!-- /Header --> {block:IfNotShowDescription}{/block:IfNotShowDescription} {block:IfShowDescription} {/block:IfShowDescription} <div class="postcontain"> {block:NoSearchResults} <div class="searchpage"> </div> {/block:NoSearchResults} {block:Posts} {block:Date} {block:NewDayDate} {/block:NewDayDate} {block:SameDayDate} {/block:SameDayDate} {/block:Date} {block:Answer} <div class="containshadow"> <div class="post text"> {/block:Answer} {block:Text} <div class="containshadow"> <div class="post text"> {block:Title} {/block:Title} {/block:Text} {block:Photo} <div class="containshadow"> <div class="post photo"> <div class="postinner"> {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag} {block:Caption} {/block:Caption} </div><!-- /postinner --> {/block:Photo} {block:Video} <div class="containshadow"> <div class="post video"> <div class="postinner"> {Video-500} {block:Caption} {/block:Caption} </div><!-- /postinner --> {/block:Video} {block:Photoset} <div class="containshadow"> <div class="post photo"> <div class="postinner"> {Photoset-500} {block:Caption} {/block:Caption} </div><!-- /postinner --> {/block:Photoset} {block:Quote} <div class="containshort"> <div class="post quote"> <div class="short"> </div> {block:Source} {/block:Source} {/block:Quote} {block:Link} <div class="containshort"> <div class="post link"> {block:Description} {/block:Description} {/block:Link} {block:Chat} <div class="containshadow"> <div class="post chat"> {block:Title} {/block:Title} <ul class="chatbox"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} {/block:Label} {Line} </li> {/block:Lines} </ul> {/block:Chat} {block:Audio} <div class="containshort"> <div class="post audio"> <div class="short"> <img class="recordart floaters" src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" alt="default album art" width="130" height="130" /> {block:AlbumArt} <img class="recordart floaters" width="130" height="130" src="{AlbumArtURL}" /> {/block:AlbumArt} <img class="record floaters" src="http://static.tumblr.com/jn9hrij/57yl31rvk/record.png" alt="record" width="213" height="213" /> <img class="albumshadow floaters" src="http://static.tumblr.com/jn9hrij/Hybl31ybe/albumshadow.png" alt="default album art" width="31" height="270" /> <img class="floaters" src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" alt="default album art" width="270" height="270" /> {block:AlbumArt} <img class="floaters" width="270" height="270" src="{AlbumArtURL}" /> {/block:AlbumArt} <img class="floaters" src="http://static.tumblr.com/jn9hrij/0enl2zzv5/reflection.png" alt="CD reflection" width="270" height="270" /> <ul class="audiodata"> {block:TrackName} {/block:TrackName} {block:Artist} {/block:Artist} {block:Album} {/block:Album} </ul> </div> {block:Caption} {/block:Caption} {/block:Audio} {block:IfShowPostInfo} <div class="metadata"> <ul class="note"> {block:IfNotShowNotes}{/block:IfNotShowNotes} {block:IfShowNotes} {/block:IfShowNotes} {block:IfDisqusShortname} {block:IfDisqusShortname} </ul> {block:IfNotShowTags}{/block:IfNotShowTags} {block:IfShowTags} {block:HasTags} <ul class="tags"> {/block:Tags} </ul> {/block:HasTags} {/block:IfShowTags} </div><!-- /Metadata --> {/block:IfShowPostInfo} </div> </div> {/block:Posts} {block:PostNotes} <div class="post"> <div class="postinner"> {PostNotes} </div> </div> {/block:PostNotes} {block:PermalinkPage} {block:IfDisqusShortname} {/block:IfDisqusShortname} {/block:PermalinkPage} {block:IfDisqusShortname} <div class="post"> <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> </div> {/block:IfDisqusShortname} </div><!-- /Postcontain --> {block:Pagination} <div class="pagination"> </div> {/block:Pagination} </div><!-- /Rightcolumn --> {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>