Posted By

firewalker06 on 12/26/10


Tagged

tumblr html


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

kantiano
xujianxin


Console Tumblr Theme


 / Published in: HTML
 

Redesigned Tumblr Theme based on Office by Alex Penny

Change log:

Desember 31, 2010
  • added TwitterJS 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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  4. <meta name="if:Show Title" content="1" />
  5. <meta name="if:Show Description" content="1" />
  6. <meta name="if:Show Profile Picture" content="1" />
  7. <meta name="if:Show Post Info" content="1" />
  8. <meta name="if:Show Notes" content="1" />
  9. <meta name="if:Show Tags" content="1" />
  10.  
  11. <meta name="color:Accent" content="#00ff00"/>
  12. <meta name="color:White Text" content="#FFFFFF"/>
  13. <meta name="color:Body Links" content="#009900"/>
  14. <meta name="color:Background" content="#000000"/>
  15.  
  16. <meta name="image:Logo" content=""/>
  17. <meta name="image:Background" content="http://static.tumblr.com/jn9hrij/Vx8l35qrc/bg.jpg"/>
  18.  
  19. <meta name="text:Disqus Shortname" content="" />
  20. <meta name="text:Google Analytics ID" content="" />
  21. <meta name="text:Twitter Username" content="" />
  22.  
  23. <title>{Title}</title>
  24. <link rel="shortcut icon" href="{Favicon}" />
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  26.  
  27. {block:Description}
  28. <meta name="description" content="{MetaDescription}" />
  29. {/block:Description}
  30.  
  31. <!--[if lt IE 9]>
  32. <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
  33. <![endif]-->
  34.  
  35. <style type="text/css">
  36.  
  37.  
  38. /* - - - - - - - - - - - - - Alex - - - - - - - - - - - - - */
  39.  
  40. html, body, div, span, applet, object, iframe,
  41. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  42. a, abbr, acronym, address, big, cite, code,
  43. del, dfn, em, font, img, ins, kbd, q, s, samp,
  44. small, strike, strong, sub, sup, tt, var,
  45. b, u, i, center,
  46. dl, dt, dd, ol, ul, li,
  47. fieldset, form, label, legend,
  48. table, caption, tbody, tfoot, thead, tr, th, td {
  49. margin: 0;
  50. padding: 0;
  51. border: 0;
  52. outline: 0;
  53. font-size: 100%;
  54. font-weight: normal;
  55. vertical-align: baseline;
  56. background: transparent;
  57. }
  58.  
  59. body {
  60. line-height: 1;
  61. background: white;
  62. }
  63.  
  64. ol, ul {
  65. list-style: none;
  66. }
  67.  
  68. blockquote, q {
  69. quotes: none;
  70. }
  71.  
  72. blockquote:before, blockquote:after,
  73. q:before, q:after {
  74. content: '';
  75. content: none;
  76. }
  77.  
  78. /* remember to define focus styles! */
  79. :focus {
  80. outline: 0;
  81. }
  82.  
  83. /* remember to highlight inserts somehow! */
  84. ins {
  85. text-decoration: none;
  86. }
  87.  
  88. del {
  89. text-decoration: line-through;
  90. }
  91.  
  92. /* tables still need 'cellspacing="0"' in the markup */
  93. table {
  94. border-collapse: collapse;
  95. border-spacing: 0;
  96. }
  97.  
  98.  
  99.  
  100. #path {
  101. display: none;
  102. }
  103.  
  104. a {
  105. text-decoration: none;
  106. color: {color:Accent};
  107. }
  108.  
  109. a {
  110. color: {color:Body Links};
  111. }
  112.  
  113. a:hover {
  114. text-decoration: underline;
  115. }
  116.  
  117.  
  118.  
  119. /* - - - - - - - - - - - - - General - - - - - - - - - - - - - */
  120.  
  121. body {
  122. background: {color:Background} url('{image:Background}');
  123. background-attachment: fixed;
  124. margin-top: 30px;
  125. font-family: Monaco, Courier;
  126. font-size: 12px;
  127. color: #00ff00;
  128. }
  129.  
  130. .rightcolumn {
  131. float: left;
  132. width: 710px;
  133. margin-left: 250px;
  134. }
  135.  
  136.  
  137.  
  138. blockquote {
  139. margin: 5px 30px 5px 20px;
  140. padding-left: 15px;
  141. line-height: 25px;
  142. border-left: 1px dotted #00ff00;
  143. color: #00ff00;
  144. }
  145.  
  146. .text blockquote {
  147. margin: 25px 30px 25px 20px;
  148. }
  149.  
  150.  
  151. .postcontain{
  152. float: left;
  153. margin-bottom: 20px;
  154. }
  155.  
  156. .left {
  157. margin-left: 15px;
  158. float: left;
  159. }
  160.  
  161. .right {
  162. float: right;
  163. }
  164.  
  165. /* - - - - - - - - -- - - Header - - - - - - - -- - - - */
  166.  
  167. .header {
  168. float: left;
  169. width: 100%;
  170. }
  171.  
  172. h1 a{
  173. font-size: 20px;
  174. line-height: 40px;
  175. color: #009900;
  176. font-weight: normal;
  177. float: left;
  178. }
  179.  
  180. h1 a:hover {
  181. text-decoration: none;
  182. }
  183.  
  184. .title a{
  185. width: 320px;
  186. }
  187.  
  188. .search {
  189. width: 200px;
  190. padding-left: 10px;
  191. height: 35px;
  192. float: right;
  193. background: #FFF;
  194. -webkit-border-radius: 20px;
  195. -moz-border-radius: 20px;
  196. border: solid 1px #D1D1D1;
  197. }
  198.  
  199. .search form {
  200. float: right;
  201. width: 100%;
  202. display: inline;
  203. }
  204.  
  205. #submit {
  206. height: 50px;
  207. width: 35px;
  208. padding: 0px;
  209. margin: 0px;
  210. border: none;
  211. background: none;
  212. float: right;
  213. background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat ;
  214. background-position: -8px -4px;
  215. }
  216.  
  217. #submit:hover {
  218. cursor: pointer;
  219. }
  220.  
  221. .search #textbox {
  222. font-size: 16px;
  223. font-family: Verdana;
  224. background: none;
  225. color: #00ff00;
  226. float: left;
  227. height: 40px;
  228. width: 100px;
  229. padding: 0px;
  230. margin: 0 0 0 7px;
  231. border: none;}
  232.  
  233. #boxresults {
  234. background-color: {color:Accent};
  235. float: left;
  236. margin-top: 5px;
  237. padding: 7px 9px;
  238. -webkit-border-radius: 20px;
  239. -moz-border-radius: 20px;
  240. font-size: 10px;
  241. font-family: Verdana;
  242. color: {color:White Text};
  243. margin-left: -2px;
  244. cursor: default;
  245. }
  246.  
  247. .first {
  248. clear: both;
  249. min-height: 25px;
  250. height: 50px;
  251. margin-bottom: 20px;
  252. }
  253.  
  254.  
  255.  
  256.  
  257.  
  258.  
  259.  
  260. /* - - - - - - - - -- - - Left Column - - - - - - - -- - - - */
  261.  
  262.  
  263. #leftwrap {
  264. position: absolute;
  265. float: left;
  266. width: 200px;
  267. }
  268.  
  269. #leftcolumn {
  270. width: 200px;
  271. height: 400px;
  272. position: fixed;
  273. top: 25px;
  274. left: 0px;
  275. }
  276.  
  277. #logobox {
  278. width:130px;
  279. margin: 0 0 25px 35px;
  280. }
  281.  
  282. #sidemenu {
  283. float: left;
  284. }
  285.  
  286.  
  287. #menu {
  288. clear: both;
  289. float: left;
  290. width: 200px;
  291. z-index: 100;
  292. }
  293.  
  294. #info {
  295. clear: both;
  296. text-align: left;
  297. font-size: 12px;
  298. color: #C6C6C6;
  299. line-height: 18px;
  300. padding: 10px 0 0 35px;
  301. margin: 0px;
  302. }
  303.  
  304. #info a {
  305. text-decoration: underline;
  306. color: #C6C6C6;
  307. font-size: 12px;
  308. }
  309.  
  310. #info a:hover {
  311. color: {color:Accent};
  312. }
  313.  
  314. #profilepic {
  315. margin-left: 35px;
  316. padding-top: 30px;
  317. height: 128px;
  318. }
  319.  
  320. #profilepic img {
  321. -webkit-border-radius: 5px;
  322. -moz-border-radius: 5px;
  323. }
  324.  
  325. .navmenu {
  326. margin-top: 30px;
  327. width: 100%;
  328. float: left;
  329. }
  330. .navmenu li{
  331. clear: both;
  332. font-family: verdana;
  333. font-size: 14px;
  334.  
  335.  
  336. }
  337.  
  338. .navmenu li a {
  339. color: #090;
  340. text-indent: 35px;
  341. float: left;
  342. clear: both;
  343. width: 200px;
  344. line-height: 35px;
  345. }
  346.  
  347. .navmenu li a:hover {
  348. color: {color:White Text};
  349. background-color: {color:Accent};
  350. margin-top: -1px;
  351. text-decoration: none;
  352. }
  353.  
  354. /* - - - - - - - - -- - - Date - - - - - - - -- - - - */
  355.  
  356. .datetime {
  357. float: left;
  358. width: 100%;
  359. margin-top: 8px;
  360. margin-bottom: 20px;
  361. color: #AAAAAA;
  362. text-transform: uppercase;
  363. font-size: 11px;
  364. }
  365.  
  366. .datetime a {
  367. color: #AAAAAA;
  368. }
  369.  
  370. .datetime a:hover {
  371. text-decoration: none;
  372. }
  373.  
  374. .date {
  375. float: left;
  376. width: 250px;
  377. }
  378.  
  379. .new {
  380. margin-top: 30px;
  381. }
  382.  
  383. .time {
  384. float: right;
  385. padding-left: 20px;
  386. }
  387.  
  388.  
  389. .post{
  390. padding-bottom: 16px;
  391. float: left;
  392. clear: both;
  393. }
  394.  
  395. .postinner{
  396. width:500px;
  397. margin: 20px 0 0 20px;
  398. }
  399.  
  400. .posted {
  401.  
  402. background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat;
  403. background-position: -13px -134px;
  404. }
  405.  
  406. .reblogged {
  407. background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat;
  408. background-position: -15px -174px;
  409. }
  410.  
  411. /* - - - - - - - - - -- - Boxes - - - - - - - -- - - - */
  412.  
  413. .text, .photo, .video, .chat {
  414. width: 710px;
  415. float: left;
  416. .clear: both;
  417. }
  418.  
  419.  
  420.  
  421. .quote, .link, .audio {
  422. width: 710px;
  423. padding-bottom: 10px;
  424. }
  425.  
  426.  
  427. .short {
  428. float: left;
  429. width: 710px;
  430. position: relative;
  431. }
  432.  
  433. /*
  434. .shadow {
  435. background: url(http://static.tumblr.com/jn9hrij/WwEl32aup/bottomshadow.png) no-repeat top;
  436. clear: both;
  437. height: 14px;
  438. }
  439. .containshadow {
  440. float: left;
  441. padding-bottom: 14px;
  442. background: url(http://static.tumblr.com/jn9hrij/WwEl32aup/bottomshadow.png) no-repeat bottom;
  443. clear: both;
  444. }
  445. */
  446.  
  447. /* - - - - - - - - -- - - Text Post - - - - - - - -- - - - */
  448.  
  449. .text {
  450. /* background: url(http://static.tumblr.com/jn9hrij/BM3l309fn/linev.jpg) repeat-y;
  451. background-color: white; */
  452. }
  453.  
  454. .text h3 {
  455. font-family: Helvetica;
  456. font-size: 18px;
  457. }
  458.  
  459. .text h3 a{
  460. padding: 10px 0;
  461. font-weight: normal;
  462. line-height: 35px;
  463. margin: 0 30px 0 70px;
  464. text-decoration: none;
  465. float: left;
  466. max-width: 460px;
  467. }
  468.  
  469. .paper {
  470. /* background: url(http://static.tumblr.com/jn9hrij/8ull309ey/linesh.jpg); */
  471. width: 100%;
  472. padding-bottom:1px;
  473. float: left;
  474. }
  475.  
  476. .textcontain {
  477. margin-left: 75px;
  478. }
  479.  
  480. .paper p {
  481. margin: 0 30px 25px 0;
  482. }
  483.  
  484. .paper p iframe {
  485. padding-top: 15px;
  486. padding-bottom: 25px;
  487. }
  488.  
  489. .text ul li, .text ol li {
  490. line-height: 25px;
  491. margin: 0 30px 0 25px;
  492. padding-left: 5px;
  493. color: #00ff00;
  494. list-style-type: disc;
  495. }
  496.  
  497. .text ol li {
  498. list-style-type: decimal;
  499. }
  500.  
  501. .text ul, .text ol {
  502. margin-bottom: 25px;
  503. }
  504.  
  505. .text ul ul, .text ul ol, .text ol ol, .text ol ul {
  506. margin-bottom: 0px;
  507. }
  508.  
  509. .text ul li ul li {
  510. line-height: 25px;
  511. margin: 0 0 0 25px;
  512. padding-left: 5px;
  513. color: #00ff00;
  514. list-style-type: circle;
  515. }
  516.  
  517. .text blockquote {
  518. margin-left: 10px;
  519. padding-left: 15px;
  520. line-height: 25px;
  521. color: #00ff00;
  522. }
  523.  
  524. .text blockquote p {
  525. margin-left: 0px;
  526. padding-left: 15px;
  527. line-height: 25px;
  528. }
  529.  
  530. .paper h1, .paper h2, .paper h3, .paper h4, .paper h5 {
  531. margin-left: 75px;
  532. line-height: 25px;
  533. font-size: 18px;
  534. }
  535.  
  536. /* - - - - - - - -- -body text - - - - - - -- - - */
  537.  
  538. .text p, .caption, #description, .chatbox {
  539. line-height: 25px;
  540. font-size: 12px;
  541. color: #00ff00;
  542. }
  543.  
  544. .audio .caption, .quote .caption {
  545. margin: 0 20px;
  546. }
  547.  
  548. .caption {
  549. margin-top: 8px;
  550. }
  551.  
  552. /* - - - - - - - - - - - - Audio Post - - - - - - - - - - - - */
  553.  
  554. .audio .short{
  555. float: left;
  556. height: 270px;
  557. }
  558.  
  559. .audioplayercircle {
  560. position: absolute;
  561. z-index: 3;
  562. background: black;
  563. -webkit-border-radius: 50px;
  564. -moz-border-radius: 50px;
  565. top: 103px;
  566. left: 106px;
  567. opacity: .8;
  568. }
  569.  
  570.  
  571. .audioplayer {
  572. width: 20px;
  573. height: 30px;
  574. overflow: hidden;
  575. margin: 17px 24px 13px 16px;
  576. }
  577.  
  578.  
  579. .audio .floaters {
  580. position: absolute;
  581. }
  582.  
  583. .audio .caption img {
  584. margin-bottom: 10px;
  585. max-width: 502px;
  586. }
  587.  
  588. .recordart {
  589. margin: 70px 0 0 210px;
  590. -webkit-transform: rotate(-30deg);
  591. -moz-transform: rotate(-30deg);
  592. }
  593.  
  594. .albumshadow {
  595. margin-left: 264px;
  596. }
  597.  
  598. .record {
  599. margin-top: 30px;
  600. margin-left: 160px;
  601. }
  602.  
  603. .audiodata{
  604. top: 0px;
  605. right: 0px;
  606. margin-left: 270px;
  607. width: 260px;
  608. height: 270px;
  609. position: absolute;
  610. z-index: 5;
  611.  
  612. }
  613.  
  614. .audiodata li {
  615. background: {color:Accent};
  616. padding: 10px 20px;
  617. margin: 20px 0 0;
  618. color: {color:White Text};
  619. -webkit-border-top-left-radius: 40px;
  620. -webkit-border-bottom-left-radius: 40px;
  621. -moz-border-radius-topleft: 40px;
  622. -moz-border-radius-bottomleft: 40px;
  623. font-family: Helvetica;
  624. font-size: 16px;
  625. float: right;
  626. clear: both;
  627. display: block;
  628. opacity: .9;
  629. }
  630.  
  631.  
  632.  
  633. /* - - -- - - - - - - - - Quote Post - -- - - - - -- - - - */
  634.  
  635. .postedquote {
  636. font-size: 14px;
  637. font-weight: normal;
  638. line-height: 28px;
  639. padding: 20px;
  640. }
  641.  
  642.  
  643. .dash {
  644. text-indent: -20px;
  645. height: 0px;
  646. font-size: 13px;
  647. font-family: Arial;
  648. }
  649.  
  650. /* - - - - - - - - -- - - Link Post - -- - - - - - - - - - */
  651.  
  652. .postedlink {
  653. padding: 10px 18px 5px 18px;
  654. margin-right: 15px;
  655. color: {color:Accent};
  656. font-size: 14px;
  657. font-weight: normal;
  658. float: left;
  659. }
  660.  
  661. .postedlink {
  662. color: {color:Body Links};
  663. }
  664.  
  665. .postedlink:hover {
  666. background: {color:Accent};
  667. color: color: {color:White Text};
  668. text-decoration: none;
  669. }
  670.  
  671. .postedlink:hover {
  672. background: {color:Accent};
  673. color: {color:White Text};
  674. text-decoration: none;
  675. }
  676.  
  677. .description {
  678. line-height: 35px;
  679. padding-left: 20px;
  680. font-size: 12px;
  681. }
  682.  
  683. /* - -- - - - - - - - - - Photo Post - - - - - - -- - - - - */
  684.  
  685. .photo img {
  686. width: 100%;
  687. }
  688.  
  689. /* - -- - - - - - - - - - Chat Post - - - - - - -- - - - - */
  690.  
  691. .chat h3 {
  692. font-family: Helvetica;
  693. font-size: 20px;
  694. line-height: 30px;
  695. margin-left: 30px;
  696. }
  697.  
  698. .text h3 a, .chat h3 a{
  699. font-weight: normal;
  700. margin-right: 20px;
  701. }
  702.  
  703. .chat {
  704. padding-top: 15px;
  705. }
  706.  
  707. .chatbox li {
  708. padding: 0 30px;
  709. line-height: 30px;
  710. }
  711.  
  712. .label {
  713. font-weight: normal;
  714. }
  715.  
  716. .even {
  717. background: #0b2c02;
  718. }
  719.  
  720. /* - - - - - - - - - -- - Metadata - - - - - - - -- - - - */
  721.  
  722. .metadata {
  723. float: left;
  724. clear: both;
  725. width: 500px;
  726. margin: 20px 20px 0px 20px;
  727. }
  728.  
  729. .audio .metadata, .quote .metadata, .link .metadata {
  730.  
  731. margin-top: 10px;
  732. }
  733.  
  734. .metadata a {
  735. text-transform: lowercase;
  736. font-size: 13px;
  737. padding: 7px;
  738. line-height: 36px;
  739. }
  740.  
  741. .metadata ul li{
  742. margin: 0px;}
  743.  
  744. .metadata ul {
  745. margin-bottom: 0px;
  746. }
  747.  
  748. .metadata a:hover {
  749. color: {color:White Text};
  750. background: {color:Accent};
  751. text-decoration: none;
  752. }
  753.  
  754.  
  755. .note {
  756. float: left;
  757. }
  758.  
  759. .tags {
  760. float: right;
  761. max-width: 360px;
  762. }
  763.  
  764. .note li {
  765. display: inline;
  766. }
  767.  
  768. .note li a{
  769. margin-right: 6px;
  770. }
  771.  
  772.  
  773. .tags li {
  774. display: inline;
  775. float: left;
  776. }
  777.  
  778. .tags li a{
  779. margin-left: 10px;
  780. }
  781.  
  782. .descr {
  783. clear: both;
  784. float: left;padding-bottom: 20px;
  785. width: 100%;
  786. }
  787.  
  788. .spacer {
  789. float: left;
  790. clear: both;
  791. height:10px;
  792. width: 500px;
  793. }
  794.  
  795.  
  796. li .permalink {
  797. background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat;
  798. background-position: -8px -87px;
  799. padding-right: 14px;
  800. }
  801.  
  802. li a.permalink:hover {
  803. background: url(http://static.tumblr.com/jn9hrij/oB1l31p4f/icons.png) no-repeat {color:Accent};
  804. background-position: -8px -567px;
  805. padding-right: 14px;
  806. }
  807.  
  808.  
  809. .text .permalink, .text .permalink:hover , .photo .permalink, .photo .permalink:hover, .video .permalink, .video .permalink:hover, .chat .permalink, .chat .permalink:hover {
  810. border: none;
  811. margin-left: -3px;
  812. }
  813.  
  814. .anchor, .pagination {
  815. float: left;
  816. clear: both;
  817. width: 710px;
  818. margin-bottom: 55px;
  819. }
  820.  
  821.  
  822.  
  823. .ask {
  824. display: none;
  825. {block:AskEnabled}display: block;{/block:AskEnabled}
  826. }
  827.  
  828. .submit {
  829. display: none;
  830. {block:SubmissionsEnabled}display: block;{/block:SubmissionsEnabled}
  831. }
  832.  
  833. #disqus_content {
  834. float: left;
  835. width: 500px;
  836. }
  837.  
  838. #dsq-new-post {
  839. float: left;
  840. clear: both;
  841. margin-top: 25px;
  842. }
  843.  
  844. .notes li {
  845. float: left;
  846. clear: both;
  847. padding: 5px 0;
  848. }
  849.  
  850. .searchpage {
  851. margin-top: 30px;
  852. clear: both;
  853. float: left;
  854. }
  855.  
  856. .searchpage h3 {
  857. font-size: 20px;
  858. font-family: Helvetica, Arial;
  859. font-weight: normal;
  860. }
  861.  
  862. #tweet {
  863. float:left;
  864. padding: 20px 10px 30px 35px;
  865. font-size: 12px;
  866. line-height: 150%;
  867. }
  868.  
  869. #tweet h3 {
  870. margin-bottom: 10px;
  871. font-size: 14px;
  872. }
  873.  
  874. #tweet ul, #tweet ul li {
  875. list-style: none none outside;
  876. margin:0;
  877. padding:0;
  878. }
  879.  
  880. #tweet ul li {
  881. margin-bottom: 10px;
  882. }
  883.  
  884. #tweet small {
  885. font-size: 11px;
  886. color: #c6c6c6;
  887. }
  888.  
  889. .askmask {
  890. position: absolute;
  891. }
  892.  
  893. {CustomCSS}
  894.  
  895.  
  896. </head>
  897. <body>
  898.  
  899. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  900. <script type="text/javascript">
  901. $(function() {
  902. $("object[data^='http://vimeo.com']").each(function() {
  903. var parent = $(this).parent();
  904. var vimeoCode = parent.html();
  905. var params = "";
  906. if (vimeoCode.toLowerCase().indexOf("<param") == -1) {
  907. $("param", this).each(function() {
  908. params += $(this).get(0).outerHTML;
  909. });
  910. }
  911. var oldOpts = /show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF/g;
  912. var newOpts = "show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=55C4E8";
  913. vimeoCode = vimeoCode.replace(oldOpts, newOpts);
  914. if (params != "") {
  915. params = params.replace(oldOpts, newOpts);
  916. vimeoCode = vimeoCode.replace(/<embed/i, params + "<embed");
  917. }
  918. parent.html(vimeoCode);
  919. });
  920. });
  921. </script>
  922.  
  923. <div id="leftwrap">
  924. <div id="leftcolumn">
  925. {block:IfLogoImage}<a href="/"><div id="logobox"><img src="{image:Logo}"/></div></a>{/block:IfLogoImage}
  926. {block:IfNotLogoImage}{/block:IfNotLogoImage}
  927.  
  928.  
  929. <div id="sidemenu">
  930. <div id="menu">
  931.  
  932. {block:IfNotShowProfilePicture}{/block:IfNotShowProfilePicture}
  933. {block:IfShowProfilePicture}
  934. <div id="profilepic"><a href="/"><img src="{PortraitURL-128}" alt="{Title}"/></a></div>
  935. {/block:IfShowProfilePicture}
  936.  
  937. <ul class="navmenu">
  938.  
  939. <li><a title="Home" href="/">{lang:Home}</a></li>
  940.  
  941. {block:HasPages}
  942. {block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}
  943. {/block:HasPages}
  944.  
  945.  
  946.  
  947. {block:AskEnabled}<li class="ask"><a href="/ask" class="page">{AskLabel}</a></li>{/block:AskEnabled}
  948.  
  949. <li><a href="/archive">{lang:Archive}</a></li>
  950. <!--<li><a href="{RSS}">{lang:Subscribe}</a></li>-->
  951.  
  952. {block:SubmissionsEnabled}<li class="submit"><a href="/submit" class="page">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
  953.  
  954. </ul>
  955.  
  956. </div>
  957.  
  958. </div><!-- /Menu -->
  959.  
  960. {block:IfTwitterUsername}
  961. <!-- Twitter Widget -->
  962. <div id="tweet">
  963. <h3>Tweet-a-tron</h3>
  964. <div id="tweets">
  965. <span>Grep... <a href="http://twitter.com/{text:Twitter Username}" title="Twitter">@{text:Twitter Username}</a></span><br />
  966. </div>
  967. </div>
  968. <script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
  969. <script type="text/javascript" charset="utf-8">
  970. getTwitters('tweets', {
  971. id: '{text:Twitter Username}',
  972. count: 1,
  973. enableLinks: true,
  974. ignoreReplies: true,
  975. clearContents: true,
  976. newwindow:true,
  977. onTimeout: function(){
  978. jQuery('#tweets').html('<small>Failed to load. Shame on you, Twitter!</small>');
  979. }
  980. });
  981. <!-- /Twitter Widget -->
  982. {/block:IfTwitterUsername}
  983.  
  984. <div id="info">
  985.  
  986. <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>
  987. </div><!-- /sidemenu -->
  988. </div>
  989.  
  990. <div class="rightcolumn">
  991. <div class="header">
  992.  
  993. {block:IfNotShowTitle}{/block:IfNotShowTitle}
  994. {block:IfShowTitle}<h1 class="title" ><a href="/">{Title}</a></h1>{/block:IfShowTitle}
  995.  
  996.  
  997. <!-- #mod: hide search, it's ugly -->
  998. <!--
  999. <div class="search">
  1000. <form action="/search" method="get">
  1001.  
  1002. {block:SearchPage}<div id="boxresults">{SearchResultCount}</div>{/block:SearchPage}
  1003. <input id="textbox" type="text" name="q" value=""/>
  1004. <input id="submit" type="submit" value=""/>
  1005.  
  1006. </form>
  1007. </div>-->
  1008. <!-- /Search -->
  1009.  
  1010. </div><!-- /Header -->
  1011.  
  1012.  
  1013. {block:IfNotShowDescription}{/block:IfNotShowDescription}
  1014. {block:IfShowDescription}
  1015. {block:Description}<p class="caption descr">{Description}</p>{/block:Description}
  1016. {/block:IfShowDescription}
  1017.  
  1018. <div class="postcontain">
  1019.  
  1020.  
  1021.  
  1022.  
  1023. {block:NoSearchResults}
  1024. <div class="searchpage">
  1025. <h3>{lang:No search results for SearchQuery}</h3>
  1026. </div>
  1027. {/block:NoSearchResults}
  1028.  
  1029.  
  1030.  
  1031.  
  1032. {block:Posts}
  1033.  
  1034.  
  1035.  
  1036.  
  1037. {block:Date}
  1038. {block:NewDayDate}
  1039. <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}">
  1040. {12Hour}:{Minutes} {AmPm}</a></span>
  1041. {/block:NewDayDate}
  1042.  
  1043. {block:SameDayDate}
  1044. <span class="datetime"><a title="{lang:Permalink}" class="time{block:Reblog} reblogged{/block:Reblog}{block:NotReblog} posted{/block:NotReblog}" href="{Permalink}">
  1045. {12Hour}:{Minutes} {AmPm}</a></span>
  1046. {/block:SameDayDate}
  1047.  
  1048.  
  1049.  
  1050. {/block:Date}
  1051.  
  1052.  
  1053. {block:Answer}
  1054. <div class="containshadow">
  1055. <div class="post text">
  1056.  
  1057. <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>
  1058.  
  1059. <div class="paper"><div class="textcontain"><p>{Asker}: {Question}</p>{Answer}</div></div>
  1060.  
  1061. {/block:Answer}
  1062.  
  1063.  
  1064. {block:Text}
  1065. <div class="containshadow">
  1066. <div class="post text">
  1067.  
  1068. {block:Title}
  1069. <h3><a href="{Permalink}">{Title}</a></h3>
  1070. {/block:Title}
  1071.  
  1072. <div class="paper"><div class="textcontain">{Body}</div></div>
  1073.  
  1074. {/block:Text}
  1075.  
  1076. {block:Photo}
  1077. <div class="containshadow">
  1078. <div class="post photo">
  1079. <div class="postinner">
  1080. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
  1081.  
  1082. {block:Caption}
  1083. <div class="caption">{Caption}</div>
  1084. {/block:Caption}
  1085. </div><!-- /postinner -->
  1086.  
  1087. {/block:Photo}
  1088.  
  1089. {block:Video}
  1090. <div class="containshadow">
  1091. <div class="post video">
  1092. <div class="postinner">
  1093. {Video-500}
  1094.  
  1095. {block:Caption}
  1096. <div class="caption">{Caption}</div>
  1097. {/block:Caption}
  1098. </div><!-- /postinner -->
  1099.  
  1100. {/block:Video}
  1101.  
  1102. {block:Photoset}
  1103. <div class="containshadow">
  1104. <div class="post photo">
  1105. <div class="postinner">
  1106. {Photoset-500}
  1107.  
  1108. {block:Caption}
  1109. <div class="caption">{Caption}</div>
  1110. {/block:Caption}
  1111. </div><!-- /postinner -->
  1112. {/block:Photoset}
  1113.  
  1114.  
  1115.  
  1116. {block:Quote}
  1117. <div class="containshort">
  1118. <div class="post quote">
  1119. <div class="short">
  1120. <div class="postedquote">"{Quote}"</div>
  1121. </div>
  1122. <div class="shadow"></div>
  1123. {block:Source}
  1124. <div class="caption"><p class="dash"></p> {Source}</div>
  1125. {/block:Source}
  1126.  
  1127. {/block:Quote}
  1128.  
  1129. {block:Link}
  1130. <div class="containshort">
  1131. <div class="post link">
  1132. <a href="{URL}" class="postedlink" {Target}>{Name}</a>
  1133.  
  1134. {block:Description}
  1135. <div class="description">{Description}</div>
  1136. {/block:Description}
  1137.  
  1138. {/block:Link}
  1139.  
  1140. {block:Chat}
  1141. <div class="containshadow">
  1142. <div class="post chat">
  1143. {block:Title}
  1144. <h3><a href="{Permalink}">{Title}</a></h3>
  1145. {/block:Title}
  1146.  
  1147. <ul class="chatbox">
  1148. {block:Lines}
  1149. <li class="{Alt} user_{UserNumber}">
  1150. {block:Label}
  1151. <span class="label">{Label}</span>
  1152. {/block:Label}
  1153.  
  1154. {Line}
  1155. </li>
  1156. {/block:Lines}
  1157. </ul>
  1158.  
  1159. {/block:Chat}
  1160.  
  1161.  
  1162.  
  1163.  
  1164.  
  1165.  
  1166. {block:Audio}
  1167. <div class="containshort">
  1168. <div class="post audio">
  1169. <div class="short">
  1170. <img class="recordart floaters" src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" alt="default album art" width="130" height="130" />
  1171. {block:AlbumArt}
  1172. <img class="recordart floaters" width="130" height="130" src="{AlbumArtURL}" />
  1173. {/block:AlbumArt}
  1174. <img class="record floaters" src="http://static.tumblr.com/jn9hrij/57yl31rvk/record.png" alt="record" width="213" height="213" />
  1175.  
  1176. <img class="albumshadow floaters" src="http://static.tumblr.com/jn9hrij/Hybl31ybe/albumshadow.png" alt="default album art" width="31" height="270" />
  1177.  
  1178. <img class="floaters" src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" alt="default album art" width="270" height="270" />
  1179. {block:AlbumArt}
  1180. <img class="floaters" width="270" height="270" src="{AlbumArtURL}" />
  1181. {/block:AlbumArt}
  1182. <img class="floaters" src="http://static.tumblr.com/jn9hrij/0enl2zzv5/reflection.png" alt="CD reflection" width="270" height="270" />
  1183.  
  1184. <div class="audioplayercircle"><div class="audioplayer">{AudioPlayerBlack}</div></div>
  1185.  
  1186. <ul class="audiodata">
  1187.  
  1188. {block:TrackName}
  1189. <li>{TrackName}</li>
  1190. {/block:TrackName}
  1191.  
  1192. {block:Artist}
  1193. <li>By: {Artist}</li>
  1194. {/block:Artist}
  1195.  
  1196. {block:Album}
  1197. <li>{Album}</li>
  1198. {/block:Album}
  1199.  
  1200. <li>{PlayCountWithLabel}</li>
  1201.  
  1202. </ul>
  1203.  
  1204. </div>
  1205. <div class="shadow"></div>
  1206. {block:Caption}
  1207. <div class="caption">{Caption}</div>
  1208. {/block:Caption}
  1209. {/block:Audio}
  1210.  
  1211.  
  1212.  
  1213.  
  1214.  
  1215.  
  1216.  
  1217. {block:IfNotShowPostInfo}<div id="spacer">&nbsp;</div>{/block:IfNotShowPostInfo}
  1218. {block:IfShowPostInfo}
  1219. <div class="metadata">
  1220.  
  1221.  
  1222.  
  1223. <ul class="note">
  1224. <li><a title="Permalink" class="permalink" href="{Permalink}">&nbsp;</a></li>
  1225.  
  1226. {block:IfNotShowNotes}{/block:IfNotShowNotes}
  1227. {block:IfShowNotes}
  1228.  
  1229. {block:NoteCount}<li><a class="notes" title="{NoteCountWithLabel}" href="{Permalink}">{NoteCountWithLabel}</a></li>{/block:NoteCount}
  1230. {/block:IfShowNotes}
  1231.  
  1232. {block:IfDisqusShortname}
  1233. <li><a href="{Permalink}#disqus_thread" class="disqus">{lang:Comment}</a></li>
  1234. {block:IfDisqusShortname}
  1235. </ul>
  1236.  
  1237. {block:IfNotShowTags}{/block:IfNotShowTags}
  1238. {block:IfShowTags}
  1239. {block:HasTags}
  1240.  
  1241. <ul class="tags">
  1242.  
  1243. {block:Tags}<li><a href="{TagURL}">{Tag}</a></li>
  1244. {/block:Tags}
  1245. </ul>
  1246. {/block:HasTags}
  1247. {/block:IfShowTags}
  1248. </div><!-- /Metadata -->
  1249.  
  1250. {/block:IfShowPostInfo}
  1251.  
  1252. </div>
  1253. </div>
  1254.  
  1255.  
  1256.  
  1257.  
  1258.  
  1259. {/block:Posts}
  1260.  
  1261.  
  1262. {block:PostNotes}
  1263. <div class="post">
  1264. <div class="postinner">
  1265.  
  1266. {PostNotes}
  1267.  
  1268. </div>
  1269.  
  1270. </div>
  1271. {/block:PostNotes}
  1272.  
  1273. {block:PermalinkPage}
  1274.  
  1275. {block:IfDisqusShortname}
  1276. <div id="disqus_thread"></div>
  1277. <script type="text/javascript" src="http://{text:Disqus Shortname}.disqus.com/embed.js"></script>
  1278. <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
  1279. {/block:IfDisqusShortname}
  1280.  
  1281. {/block:PermalinkPage}
  1282.  
  1283. {block:IfDisqusShortname}
  1284. <div class="post">
  1285. <script type="text/javascript">
  1286. //<![CDATA[
  1287. (function() {
  1288. var links = document.getElementsByTagName('a');
  1289. var query = '?';
  1290. for(var i = 0; i < links.length; i++) {
  1291. if(links[i].href.indexOf('#disqus_thread') >= 0) {
  1292. query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
  1293. }
  1294. }
  1295. document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
  1296. })();
  1297. //]]>
  1298. </script>
  1299.  
  1300. </div>
  1301. {/block:IfDisqusShortname}
  1302. </div><!-- /Postcontain -->
  1303. <div class="anchor"></div>
  1304.  
  1305. {block:Pagination}
  1306.  
  1307. <div class="pagination">
  1308.  
  1309. {block:PreviousPage}<span class="left"><a class="postedlink left" href="{PreviousPage}">&larr; {lang:Newer}</a></span>{/block:PreviousPage}
  1310. {block:NextPage}<span class="right"><a class="postedlink" href="{NextPage}">{lang:Older} &rarr;</a></span>{/block:NextPage}
  1311.  
  1312. </div>
  1313.  
  1314. {/block:Pagination}
  1315. </div><!-- /Rightcolumn -->
  1316.  
  1317.  
  1318. {block:IfGoogleAnalyticsID}
  1319. <script type="text/javascript">
  1320. 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){}
  1321. {block:IfGoogleAnalyticsID}
  1322.  
  1323. </body>
  1324. </html>

Report this snippet  

You need to login to post a comment.