#Tumblr Terminal Theme
If you found bugs, you can comment on this gist.
Alex Penny, I used most CSS from his Office theme. Because I'm too lazy to build from scratch.
| <!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="" /> | |
| <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} | |
| <!--[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" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> | |
| <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:IfLogoImage}<a href="/"><div id="logobox"><img src="{image:Logo}"/></div></a>{/block:IfLogoImage} | |
| {block:IfNotLogoImage}{/block:IfNotLogoImage} | |
| <div id="sidemenu"> | |
| <div id="menu"> | |
| {block:IfNotShowProfilePicture}{/block:IfNotShowProfilePicture} | |
| {block:IfShowProfilePicture} | |
| <div id="profilepic"><a href="/"><img src="{PortraitURL-128}" alt="{Title}"/></a></div> | |
| {/block:IfShowProfilePicture} | |
| <ul class="navmenu"> | |
| <li><a title="Home" href="/">{lang:Home}</a></li> | |
| {block:HasPages} | |
| {block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages} | |
| {/block:HasPages} | |
| {block:AskEnabled}<li class="ask"><a href="/ask" class="page">{AskLabel}</a></li>{/block:AskEnabled} | |
| <li><a href="/archive">{lang:Archive}</a></li> | |
| <!--<li><a href="{RSS}">{lang:Subscribe}</a></li>--> | |
| {block:SubmissionsEnabled}<li class="submit"><a href="/submit" class="page">{SubmitLabel}</a></li>{/block:SubmissionsEnabled} | |
| </ul> | |
| </div> | |
| </div><!-- /Menu --> | |
| {block:IfTwitterUsername} | |
| <!-- Twitter Widget --> | |
| <div id="tweet"> | |
| <h3>Tweet-a-tron</h3> | |
| <div id="tweets"> | |
| <span>Grep... <a href="http://twitter.com/{text:Twitter Username}" title="Twitter">@{text:Twitter Username}</a></span><br /> | |
| </div> | |
| </div> | |
| <script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script> | |
| <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(){ | |
| jQuery('#tweets').html('<small>Failed to load. Shame on you, Twitter!</small>'); | |
| } | |
| }); | |
| </script> | |
| <!-- /Twitter Widget --> | |
| {/block:IfTwitterUsername} | |
| <div id="info"> | |
| <a href="http://officetheme.tumblr.com">Office</a> by <a title="Alex Penny graphic designer " href="http://alexpenny.com">Alex Penny</a> and modified by <a href="http://firewalkerdesign.com" title="Didik Wicaksono, Website Designer">Didik Wicaksono</a></div> | |
| </div><!-- /sidemenu --> | |
| </div> | |
| <div class="rightcolumn"> | |
| <div class="header"> | |
| {block:IfNotShowTitle}{/block:IfNotShowTitle} | |
| {block:IfShowTitle}<h1 class="title" ><a href="/">{Title}</a></h1>{/block:IfShowTitle} | |
| <!-- #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:Description}<p class="caption descr">{Description}</p>{/block:Description} | |
| {/block:IfShowDescription} | |
| <div class="postcontain"> | |
| {block:NoSearchResults} | |
| <div class="searchpage"> | |
| <h3>{lang:No search results for SearchQuery}</h3> | |
| </div> | |
| {/block:NoSearchResults} | |
| {block:Posts} | |
| {block:Date} | |
| {block:NewDayDate} | |
| <span class="datetime new"><a class="date" href="/archive" title="{lang:Archive}" >{Month} {DayOfMonth}, {Year}</a><a title="Permalink" class="time{block:Reblog} reblogged{/block:Reblog}{block:NotReblog} posted{/block:NotReblog}" href="{Permalink}"> | |
| {12Hour}:{Minutes} {AmPm}</a></span> | |
| {/block:NewDayDate} | |
| {block:SameDayDate} | |
| <span class="datetime"><a title="{lang:Permalink}" class="time{block:Reblog} reblogged{/block:Reblog}{block:NotReblog} posted{/block:NotReblog}" href="{Permalink}"> | |
| {12Hour}:{Minutes} {AmPm}</a></span> | |
| {/block:SameDayDate} | |
| {/block:Date} | |
| {block:Answer} | |
| <div class="containshadow"> | |
| <div class="post text"> | |
| <h3><a href="{Permalink}"><img class="askmask" src="http://static.tumblr.com/jn9hrij/uLvl364bp/askmask.png" alt="asker" /><img src="{AskerPortraitURL-48}" alt="questioner" /></a></h3> | |
| <div class="paper"><div class="textcontain"><p>{Asker}: {Question}</p>{Answer}</div></div> | |
| {/block:Answer} | |
| {block:Text} | |
| <div class="containshadow"> | |
| <div class="post text"> | |
| {block:Title} | |
| <h3><a href="{Permalink}">{Title}</a></h3> | |
| {/block:Title} | |
| <div class="paper"><div class="textcontain">{Body}</div></div> | |
| {/block:Text} | |
| {block:Photo} | |
| <div class="containshadow"> | |
| <div class="post photo"> | |
| <div class="postinner"> | |
| {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag} | |
| {block:Caption} | |
| <div class="caption">{Caption}</div> | |
| {/block:Caption} | |
| </div><!-- /postinner --> | |
| {/block:Photo} | |
| {block:Video} | |
| <div class="containshadow"> | |
| <div class="post video"> | |
| <div class="postinner"> | |
| {Video-500} | |
| {block:Caption} | |
| <div class="caption">{Caption}</div> | |
| {/block:Caption} | |
| </div><!-- /postinner --> | |
| {/block:Video} | |
| {block:Photoset} | |
| <div class="containshadow"> | |
| <div class="post photo"> | |
| <div class="postinner"> | |
| {Photoset-500} | |
| {block:Caption} | |
| <div class="caption">{Caption}</div> | |
| {/block:Caption} | |
| </div><!-- /postinner --> | |
| {/block:Photoset} | |
| {block:Quote} | |
| <div class="containshort"> | |
| <div class="post quote"> | |
| <div class="short"> | |
| <div class="postedquote">"{Quote}"</div> | |
| </div> | |
| <div class="shadow"></div> | |
| {block:Source} | |
| <div class="caption"><p class="dash">—</p> {Source}</div> | |
| {/block:Source} | |
| {/block:Quote} | |
| {block:Link} | |
| <div class="containshort"> | |
| <div class="post link"> | |
| <a href="{URL}" class="postedlink" {Target}>{Name}</a> | |
| {block:Description} | |
| <div class="description">{Description}</div> | |
| {/block:Description} | |
| {/block:Link} | |
| {block:Chat} | |
| <div class="containshadow"> | |
| <div class="post chat"> | |
| {block:Title} | |
| <h3><a href="{Permalink}">{Title}</a></h3> | |
| {/block:Title} | |
| <ul class="chatbox"> | |
| {block:Lines} | |
| <li class="{Alt} user_{UserNumber}"> | |
| {block:Label} | |
| <span class="label">{Label}</span> | |
| {/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" /> | |
| <div class="audioplayercircle"><div class="audioplayer">{AudioPlayerBlack}</div></div> | |
| <ul class="audiodata"> | |
| {block:TrackName} | |
| <li>{TrackName}</li> | |
| {/block:TrackName} | |
| {block:Artist} | |
| <li>By: {Artist}</li> | |
| {/block:Artist} | |
| {block:Album} | |
| <li>{Album}</li> | |
| {/block:Album} | |
| <li>{PlayCountWithLabel}</li> | |
| </ul> | |
| </div> | |
| <div class="shadow"></div> | |
| {block:Caption} | |
| <div class="caption">{Caption}</div> | |
| {/block:Caption} | |
| {/block:Audio} | |
| {block:IfNotShowPostInfo}<div id="spacer"> </div>{/block:IfNotShowPostInfo} | |
| {block:IfShowPostInfo} | |
| <div class="metadata"> | |
| <ul class="note"> | |
| <li><a title="Permalink" class="permalink" href="{Permalink}"> </a></li> | |
| {block:IfNotShowNotes}{/block:IfNotShowNotes} | |
| {block:IfShowNotes} | |
| {block:NoteCount}<li><a class="notes" title="{NoteCountWithLabel}" href="{Permalink}">{NoteCountWithLabel}</a></li>{/block:NoteCount} | |
| {/block:IfShowNotes} | |
| {block:IfDisqusShortname} | |
| <li><a href="{Permalink}#disqus_thread" class="disqus">{lang:Comment}</a></li> | |
| {block:IfDisqusShortname} | |
| </ul> | |
| {block:IfNotShowTags}{/block:IfNotShowTags} | |
| {block:IfShowTags} | |
| {block:HasTags} | |
| <ul class="tags"> | |
| {block:Tags}<li><a href="{TagURL}">{Tag}</a></li> | |
| {/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} | |
| <div id="disqus_thread"></div> | |
| <script type="text/javascript" src="http://{text:Disqus Shortname}.disqus.com/embed.js"></script> | |
| <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript> | |
| {/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 --> | |
| <div class="anchor"></div> | |
| {block:Pagination} | |
| <div class="pagination"> | |
| {block:PreviousPage}<span class="left"><a class="postedlink left" href="{PreviousPage}">← {lang:Newer}</a></span>{/block:PreviousPage} | |
| {block:NextPage}<span class="right"><a class="postedlink" href="{NextPage}">{lang:Older} →</a></span>{/block:NextPage} | |
| </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> |